[Proejct] 주문 예약 시스템 구현 [1] (카테고리 부분)

 

 

목차

 

• 1) 페이지 디자인 구상
• 2) 기능 구현 구상 (카테고리 계층 구조) 
• 3) 기능 구현 (코드) - 관리자 Part 
• 4) 기능 구현 (코드) - 사용자 Part 
• 5) 후기

 

 

 

 

해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.

프로젝트에 대한 자세한 내용은 깃허브를 참고해주세요 :)

https://github.com/hyejux/Neez

GitHub - hyejux/Neez: 예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예

 

 

---

 

 

 

해당 게시물은 기능 구현에 대한 내용을 정리해두었습니다.

 

 

 

 

 

1) 페이지 디자인 구상

 

[관리자 페이지 디자인]

 

 

초기 디자인

 

 

완성 디자인

 

 

---

 

[유저 페이지 디자인]

 

 

초기디자인

 

완성 디자인

 

 

 

일단 주문예약 폼 페이지 초기 디자인은 이러했다. 

 

대충 유저페이지는 배달의 민족 + 네이버 플레이스를 참고했고

관리자 쪽은 사용해보지않아서 어떤 방법이 좋은지 몰라 그냥 끌리는대로 직접 디자인했다.

 

 

 

---

 

 

 

2) 기능 구현 구상 (카테고리 계층 구조) 

 

 

 

기능 구현 구상은 프로젝트 시작 전에 .. 중요한 메인 기능을 맡았던 터라

어떤식으로 구현해야하나 고민도 컸고.. 처음 구현해본 것이라서 고민이 컸다.. 

 

아래 끄적인 것들은 팀원들에게 메인 기능 구현에 대해  검토 및 설명을 할 때 작업해둔 것이다.. 

(이런 느낌~ 으로 작업할 것 같다고 설명했음)

 

 

초기에는 

주문 폼도 대분류와 중분류 소분류로 나뉘기 때문에 카테고리 느낌으로 구현하면 되겠다고 생각했다.

 

대분류는 그대로 가고

중분류는 대분류 키를 가져가고

소분류는 중분류 키를 가져간다.

 

위 방법대로 정석적인(?) 느낌으로 테이블 3개를 만들어서 구현해보려고했다. (정규화된 계층 모델)

 

그런데 이렇게 구현할 경우 어려움이 JOIN 이 많아져서 너무 복잡해진다는 것이다.

그래서 테이블 하나에 level 컬럼을 넣어서 분류하기로 했다. (트리 계층 구조)

 

---

 

 

최종

 

이렇게 트리 계층 구조로 구현하는 경우

 

장점

1) JOIN 이 없어 매우 편리하고

2) 전반적으로 데이터 관리가 쉽다.

3) 123단계 뿐만아니라 45단계까지 깊은 구조까지 구현 가능.

 

단점

1) 계층형 데이터라 쿼리가 어려워진다. (재귀 쿼리가 필요할 수 있음) -> 오히려  JOIN 보다 어려운 쿼리가 발생할지도.. 

2) 트리 구조가 깊으면 재귀 쿼리 성능이 저하 우려

 

 

카테고리 개수가 많지 않은 경우에는 해당 방법도 나쁘지 않다고 판단했고..

여러테이블로 JOIN 이 많아지는게 번거로웠기 때문에

한 테이블에서 관리하기로 마음 먹었다. 

 

 

 

---

 

 

category 테이블

 

 

잘 안보이니 확대

 

먼저 카테고리에 모든 카테고리 레벨들을 넣게된다. 

category_level 에는 1,2,3 으로 대분류, 중분류, 소분류를 구분한다.

 

 

 

 

 

sub_category_status 테이블

 

 

 

그리고 중분류 상태값 테이블을 따로 뺐는데

해당 테이블은 레벨이 2인 (중분류) 에 해당하는 값들의 TYPE 을 표현한다.

 

 

 

 

 

선택(하나,다중) , 숫자, 텍스트  | 유료,무료 | 필수,선택

의 옵션 값을 저장하는 테이블이라고 보면 되겠다. 

 

 

 

 

category_img 테이블

대분류에만 사진을 1개씩만 넣을 수 있게 구현했다. 

그래서 level 1 인 대분류 값과 1:1 대응한다. 

 

---

 

3) 기능 구현 (코드) - 관리자 Part 

 

INSERT

 

 

 

프론트에서는 아래와 같은 JSON 형태로 서버로 요청이 온다.

 

 

 

 

 JSON 구조

 

대분류 기준으로 중분류 배열 안에 소분류 배열

{
    "serviceName": "화이트 초콜릿 케이크",
    "servicePrice": "12000",
    "serviceContent": "달콤한 화이트 초콜릿 케이크",
    "categories": [
        {
            "serviceName": "포장유무",
            "servicePrice": 0,
            "isPaid": "N",
            "isRequired": "Y",
            "subCategoryType": "SELECT1",
            "subCategories": [
                {
                    "serviceName": "X",
                    "servicePrice": 0
                },
                {
                    "serviceName": "O",
                    "servicePrice": 0
                }
            ]
        }
    ],
    "serviceStart": "2025-02-07T00:00",
    "dateNumCase": 10,
    "timeNumCase": 0,
    "storeNo": "1"
}

 

 

 

DTO 

package com.example.HiMade.admin.dto;
 
 
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.*;
 
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.util.List;
 
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
@Builder
public class adminReserveAdd {
 
  private String serviceName;
  private int servicePrice;
  private String serviceContent;
  private List<adminRSDTO> categories;
  private LocalDateTime serviceStart;
  private Integer dateNumCase;
  private Integer timeNumCase;
  private Integer storeNo;
  private String storeId;
  private Integer categoryId;
  private LocalDate reservationSlotDate;
}

 

package com.example.HiMade.admin.dto;
 
import lombok.*;
 
import java.util.List;
 
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
public class adminRSDTO {
  private int middleId; // sql
  private int subId;
 
  private int categoryId;
  private int storeNo;
  private int categoryLevel; // 1,2,3
  private int parentCategoryId; // {cateId}
 
  private int categoryStatus; //id
  private String serviceName;
  private int servicePrice;
  private String serviceContent;
 
  private String subCategoryType;
  private String isRequired;
  private String isPaid;
 
  private List<adminReservationDTO> subCategories;
}

 

package com.example.HiMade.admin.dto;
 
import lombok.*;
 
import java.time.LocalDate;
import java.time.LocalDateTime;
 
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
@Builder
public class adminReservationDTO {
 
  private int categoryId;
  private int categoryLevel;
  private int parentCategoryId;
  private String serviceName;
  private int servicePrice;
  private String serviceContent;
  private int storeNo;
  private LocalDateTime ServiceStart;
  private String imageUrl;
  private String activated;
  private Integer orderIndex;
 
}

 

 

 

 

 

대분류 삽입

 

 

 

 

    <!--  서비스 (대분류) 등록하기    -->
    <insert id="setMainCategory" parameterType="com.example.HiMade.admin.dto.adminReservationDTO" useGeneratedKeys="true" keyProperty="categoryId">
        INSERT INTO category (category_level, service_name, service_price, service_content,store_no, service_start, activated)
        VALUES (1, #{serviceName}, #{servicePrice}, #{serviceContent},  #{storeNo}, #{serviceStart} , 'Y')
        RETURNING category_id
    </insert>

 

 

level 1 로 들어갈 대분류에 필요한 값들을 넣고 먼저 INSTERT 후 category_id 를 반환 받는다.

 

useGeneratedKeys="true" : 자동생성된 키를 사용하여 삽입 데이터 추적

keyProperty="categoryId" : 자동 생성된 키 값을 저장할 dto 필드 명 지정

RETURNING category_id : sql 삽입 후 생성 된 값을 반환 (카테고리 키 가져오는 용도)

 

 

 

 

 

중분류 & 소분류 삽입 

 

    List<adminRSDTO> categories = dto.getCategories(); // 중분류 LIST 가져오기
    
    for (adminRSDTO category : categories) { // 중분류 LIST 순회
      category.setStoreNo(dto.getStoreNo()); 
      category.setParentCategoryId(serviceId); // 대분류 ID를 카테고리에 설정
      
      int serviceId2 = adminReservationMapper.setMainCategory2(category); // 중분류 INSERT
      
      adminReservationMapper.setMainCategory3(category); // 중분류 상태  INSERT
	
      List<adminReservationDTO> subCategories = category.getSubCategories(); // 소분류 LIST 가져오기
 
      for (adminReservationDTO subcategory : subCategories) {
        subcategory.setStoreNo(dto.getStoreNo());
        subcategory.setParentCategoryId(serviceId2); // 삽입된 중분류 아이디를 부모 아이디로 가지고 감
        adminReservationMapper.setMainCategory4(subcategory); // 소분류 insert
      }
    }

 

 

이후 중분류 LIST 를 순회하면서 중분류와 중분류 상태를 삽입해주고

각 중분류에 해당하는 소분류도 삽입해준다. 

(대분류와 마찬가지로 삽입 후 PK 값 반환해와서 사용)

 

	<!--  서비스 (중분류) 등록하기    -->
    <insert id="setMainCategory2" parameterType="com.example.HiMade.admin.dto.adminRSDTO" useGeneratedKeys="true" keyProperty="middleId">
        INSERT INTO category (category_level, parent_category_id, service_name, service_price, store_no)
        VALUES (2, #{parentCategoryId}, #{serviceName}, #{servicePrice},#{storeNo})
        RETURNING category_id
    </insert>
 
    <!--  서비스 (중분류 상태값 ) 등록하기    -->
    <insert id="setMainCategory3" parameterType="com.example.HiMade.admin.dto.adminRSDTO">
        INSERT INTO sub_category_status (category_id, sub_category_type, is_required, is_paid)
        VALUES (#{middleId}, #{subCategoryType}, #{isRequired}, #{isPaid});
    </insert>
 
    <!--  서비스 (소분류) 등록하기    -->
    <insert id="setMainCategory4" parameterType="com.example.HiMade.admin.dto.adminReservationDTO">
        INSERT INTO category (category_level, parent_category_id, service_name, service_price, store_no)
        VALUES (3, #{parentCategoryId}, #{serviceName}, #{servicePrice}, #{storeNo})
    </insert>

 

 

 

로그

adminReserveAdd(serviceName=화이트 초콜릿 케이크, servicePrice=12000, serviceContent=달콤한 화이트 초콜릿 케이크, categories=[adminRSDTO(middleId=0, subId=0, categoryId=0, storeNo=0, categoryLevel=0, parentCategoryId=0, categoryStatus=0, serviceName=포장유무, servicePrice=0, serviceContent=null, subCategoryType=SELECT1, isRequired=Y, isPaid=N, subCategories=[adminReservationDTO(categoryId=0, categoryLevel=0, parentCategoryId=0, serviceName=X, servicePrice=0, serviceContent=null, storeNo=0, ServiceStart=null, imageUrl=null, activated=null, orderIndex=null), adminReservationDTO(categoryId=0, categoryLevel=0, parentCategoryId=0, serviceName=O, servicePrice=0, serviceContent=null, storeNo=0, ServiceStart=null, imageUrl=null, activated=null, orderIndex=null)])], ServiceStart=2025-02-07T00:00, DateNumCase=10, TimeNumCase=0, StoreNo=1, StoreId=null, categoryId=null, reservationSlotDate=null)
 
메인 카테고리 삽입 후 아이디  : 59
중분류 카테고리 삽입 후 : 60
 
adminReservationDTO(categoryId=0, categoryLevel=0, parentCategoryId=0, serviceName=X, servicePrice=0, serviceContent=null, storeNo=0, ServiceStart=null, imageUrl=null, activated=null, orderIndex=null)
소분류 삽입됨 1
adminReservationDTO(categoryId=0, categoryLevel=0, parentCategoryId=0, serviceName=O, servicePrice=0, serviceContent=null, storeNo=0, ServiceStart=null, imageUrl=null, activated=null, orderIndex=null)
소분류 삽입됨 2

 

 

---

 

SELECT 

 

 

  @Override
  public adminReservationDTO getListDetail(int id) {
    return adminReservationMapper.getListDetail(id);
  }
 
  @Override
  public List<adminRSDTO> getMiddleItem(int id) {
 
    List<adminRSDTO> dto = adminReservationMapper.getMiddleItem(id);
    System.out.println("service dto ::  " + dto );
 
    for (adminRSDTO d : dto ){
      System.out.println(d);
      System.out.println();
      d.setSubCategories(adminReservationMapper.getSubItem(d.getCategoryId()));
    }
 
    System.out.println(dto);
    return dto;
  }

 

 useEffect(() => {
    axios
      .get(`/adminReservation/getListDetail/${cateId}`)
      .then(response => {
      
        console.log(response.data);
        setReserveModi(response.data);
        
        const { imageUrl,serviceContent,serviceName,servicePrice,serviceStart} = response.data; 
        setImagePreview(imageUrl);
        setName(serviceName);
        setPrice(servicePrice);
        setDescription(serviceContent);
        setServiceStart(serviceStart);
      })
      .catch(error => {
        console.log('에러', error);
      });
 
      axios
      .get(`/adminReservation/getMiddleItem/${cateId}`)
      .then(response => {
        console.log("get"  + JSON.stringify(response.data));
        
        const transformedData = response.data.map(item => ({
          serviceName: item.serviceName, // serviceName -> name
          servicePrice: item.servicePrice, // servicePrice -> price
          isPaid: item.isPaid === 'Y', // isPaid ("Y"/"N") -> true/false
          isRequired: item.isRequired === 'Y', // isRequired ("Y"/"N") -> true/false
          subCategoryType: item.subCategoryType, // subCategoryType -> inputType
          subCategories: item.subCategories.map(sub => ({
            serviceName: sub.serviceName,
            servicePrice: sub.servicePrice
          }))
        }));
        setCategories(transformedData);
      })
      .catch(error => {
        console.log('에러', error);
      });
  }, [cateId]);

 

    <!--  서비스 대분류 (상세 가져오기)  -->
    <select id="getListDetail" resultType="com.example.HiMade.admin.dto.adminReservationDTO">
        select c.category_id, c.category_level, c.parent_category_id, c.service_name , c.service_price, c.service_content, c.store_no, ci.image_url,  c.service_start
        from category c
        left join category_image ci
        on c.category_id = ci.category_id
        where c.category_level = 1 AND  c.category_id = #{id}
    </select>
 
    <!--   서비스 중분류 가져오기  -->
    <select id="getMiddleItem" resultType="com.example.HiMade.admin.dto.adminRSDTO">
        select c.category_id, c.category_level, c.parent_category_id, c.service_name , c.service_price, c.service_content, c.store_no, sc.category_status, sc.category_id, sc.sub_category_type, sc.is_required, sc.is_paid
        from category c
        LEFT join sub_category_status sc
        on c.category_id = sc.category_id
        WHERE c.parent_category_id = #{id}  AND c.category_level = 2
    </select>
    <!--  서비스 소분류 가져오기   -->
    <select id="getSubItem" resultType="com.example.HiMade.admin.dto.adminReservationDTO">
        select * from category c
        where parent_category_id = #{id} AND category_level = 3;
    </select>

 

 

조회 같은 경우에는 대분류 와 중분류|소분류를 나눠서 가져왔다.

(해당 쿼리는 상당히 비효율적인 것 같아서 JOIN 을 이용해 한번에 가져오는 방식을 연습해봐야겠음)

 

 

 

 

UPDATE

 

이건 그냥 기존 값을 제거하고 새로 삽입하는 방식으로 구현했다. 

(수정 기능 구현이 너무.. 힘들었다... )

 

 

 

DELETE

 

이건 대분류 값의 activated 값을 Y / N 으로 해서 구현했다. 

 

 

 

---

4) 기능 구현 (코드) - 사용자 Part 

 

 

 

사용자 파트에서 카테고리 조회해오는 방식은 관리자 파트처럼 조회 해오는 방식은 동일하고 보여주는 방식만 다르다.

 

 

 

5) 후기

 

• ✅ 현재 카테고리에서 SELECT 해오던 쿼리들이 비효율적이므로, 보다 효율적인 쿼리를 작성해볼 것
• ✅ 테이블 내에 너무 다양한 컬럼과 데이터들이 혼재되어 있으므로, 이를 잘 분류하여 구조를 개선해볼 것