[Project] 주문 예약 시스템 구현 [2] (주문 등록 부분)

 

목차

 

 

 

 

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

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

https://github.com/hyejux/Neez\

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

 

 

---

 

[1탄]
https://hyejux.tistory.com/828

[프로젝트/Spring Boot/Reactjs] 주문 시스템 구현 (카테고리 부분)

 

 

 

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

 

 

---

 

 

1) 페이지 구상

 

 

 

주문 예약 진행 과정이다.

 

 

 

 

주문예약을 이런식으로 진행하고...

 

 

 

 

사용자는 예약목록탭에서 예약에 대한 정보들을 볼 수 있다.

 

 

 

 

 

관리자는 예약관리에서 들어온 주문들을 확인 할 수 있고, 상세페이지에서는 더 자세한 주문정보를 알 수 있다.

 

 

 

 

상태가 확정으로 바뀌고, 사용자한테서도 확정으로 뜬다.

 

 

 

 

상태가 완료가 되면 이제 상태는 변경이 불가하고, 사용자한테서는 리뷰 작성 버튼이 뜬다.

 

 

 

 

 

리뷰를 작성하게 되면 리뷰 버튼은 사라짐.

 

 

---

 

2) 기능 구현 (DB/ ERD)

 

담당 파트는 예약, 예약폼, 후기 파트 (이외 파트는 다른 팀원분이 맡으셨다)

 

 

주문이 들어가게되면 

 

`reservation` 테이블 : 주문에 대한 대표 값들을 저장함

 

 

`reservation_form` 테이블 : 어떤 주문을 했는지 카테고리 + 주문 값을 저장함

 

`reservation_no` 로 주문에 대한 값을 가져가고

`main_category_id` , `middle_category_id` , `sub_category_id` 로 각 주문에 맞는 category 아이디를 저장한다.

 

 

 

 

 

 

 

 

 

 

 

 

---

 

3) 기능 구현 (사용자 주문 등록 / 조회)

 

 

 

주문확인창.jsx

 

  // ----------------------- 주문등록, 결제 부분 -----------------------
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); // 결제수단

  const handleReservation = async (paymentMethod) => {
    let reservationNum = 0;

    const reservationStatus = paymentMethod === "bank_transfer" ? "입금대기" : "대기";

    const reservationData = {
      reservationTime: slot,  // 세션 데이터에서 가져옴
      reservationSlotKey: reservationSlotKey,  // 세션 데이터에서 가져옴
      customerRequest: requestText,  // 사용자 입력 요청사항
      reservationPrice: totalPrice,  // 총액 정보
      storeNo: storeInfo.storeNo,
      reservationStatus: reservationStatus,
      userId: userId,
      userDeliveryType : pickupStatus
    };

    try {
      // 1. 예약 정보 저장
      const response = await axios.post(`/userReservation/setReservationForm`, reservationData);
      reservationNum = response.data;

      console.log("예약 번호: ", reservationNum);

      // 2. 세부 예약 정보 업데이트
      const updatedArray = formData.map(item => ({
        ...item,
        reservationNo: reservationNum
      }));

      await axios.post(`/userReservation/setReservationFormDetail`, updatedArray);

      // 3. 슬롯 상태 업데이트
      await axios.post(`/userReservation/updateSlotStatus`, {
        categoryId: cateId,
        reservationDate: date,
        storeNo: sessionSestoreNo
      });

      console.log("예약 완료 및 슬롯 상태 업데이트 성공!");

      return reservationNum;
    } catch (error) {
      console.error("예약 처리 중 오류 발생:", error);
      throw error;
    }
  };

 

주문 등록까지는 내가 담당해서 코드를 넘겨드렸고

결제 파트와 섞여서 위 코드는 결제 담당 팀원분이 작성해주신 코드이다.

 

결제 테이블에 예약번호 키를 넣어야해서 먼저 예약정보를 저장하고

세부 예약 정보를 업데이트 하는 방식으로 진행하신듯 하다.

 

 

 

 

reservation_form 테이블에 들어가는 값

[
    {
        "inputValue": "0",
        "servicePrice": 0,
        "categoryId": 33,
        "isRequired": true
    },
    {
        "1": [
            {
                "serviceName": "멜론",
                "servicePrice": 600,
                "categoryId": 36
            }
        ]
    },
    {
        "inputValue": "생일 축하해",
        "servicePrice": 0,
        "categoryId": 39,
        "isRequired": false
    }
]

 

 

 

나는 이런식으로 데이터를 가공해서 요청을 보냈고 서버에서 구조만 맞게 List 로 받아서 처리했다.

 

 

 

 

dto

 

package com.example.HiMade.user.dto;

import lombok.*;

@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
@Builder

public class UserReservationFormDTO {

  private int reservationFormKey;
  private int mainCategoryId;
  private int middleCategoryId;
  private int subCategoryId;
  private String middleCategoryValue;
  private int reservationNo;
}

 

 

 

serviceImpl

 

  @Transactional
  @Override
  public void setReservationFormDetail(List<UserReservationFormDTO> dto) {
    for (UserReservationFormDTO d : dto ){
      System.out.println("삽입 값" + d);

     int result = userReservationMapper.setReservationFormDetail(d);
      System.out.println(result);
    }
  }

 

 

mapper.xml

    <insert id="setReservationForm" parameterType="UserReservationDTO" useGeneratedKeys="true" keyProperty="reservationNo">
        INSERT INTO reservation (reservation_status, reservation_time, reg_time, customer_request, reservation_price, user_id, reservation_slot_key, store_no, user_delivery_type)
        VALUES (#{reservationStatus}, #{reservationTime}, CURRENT_TIMESTAMP, #{customerRequest}, #{reservationPrice}, #{userId}, #{reservationSlotKey}, #{storeNo}, #{userDeliveryType})
        RETURNING reservation_no
    </insert>

    <insert id="setReservationFormDetail" parameterType="com.example.HiMade.user.dto.UserReservationFormDTO">
        insert into reservation_form (main_category_id, middle_category_id, sub_category_id, middle_category_value, reservation_no )
        values(#{mainCategoryId}, #{middleCategoryId}, #{subCategoryId}, #{middleCategoryValue}, #{reservationNo})
    </insert>

 

 

 

 

주문 내역 조회

 

 <select id="getMyReservationDetail" resultType="com.example.HiMade.user.dto.UserRD" parameterType="int">
        SELECT
        rf.reservation_no,
        rf.reservation_form_key,
        rf.middle_category_value,
        r.user_delivery_type,
        main_c.service_name AS main_category_name,
        main_c.service_price AS main_price,
        middle_c.service_name AS middle_category_name,
        middle_c.service_price AS middle_price,
        sub_c.service_name AS sub_category_name,
        sub_c.service_price AS sub_price,
        s.store_name AS store_name,
        s.account_bank AS account_bank,
        s.account_number AS account_number
        FROM
        reservation_form rf
        LEFT JOIN
        reservation r ON rf.reservation_no = r.reservation_no
        LEFT JOIN
        store s ON r.store_no = s.store_no
        LEFT JOIN
        category main_c ON rf.main_category_id = main_c.category_id
        LEFT JOIN
        category middle_c ON rf.middle_category_id = middle_c.category_id
        LEFT JOIN
        category sub_c ON rf.sub_category_id = sub_c.category_id
        WHERE
        r.reservation_no = #{id};
    </select>

 

 

 

조회 부분은 무지성 JOIN 쿼리를 통해서... 가지고 나왔다. (분명 더 좋은 코드가 있을 것이다..... )

 

 

 

 

---

4) 후기

 

✅ 주문 폼 저장방식을  main, middle, sub 로 나누는게 아닌, 좀 더 효율적인 방식으로 구현해보기 

ex) 재귀적 쿼리 방식으로 바꿔보기, 한줄로 묶어서 출력하기 등