[Project] 날짜 별 예약 건수(Slot) 관리 (React Calendar)

 

목차

 

• 1) 페이지 구상
• 2) 페이지 기능 구현
• 3) 후기

 

---

1) 페이지 구상

 

 

1. 상품별 ->  날짜별 ->  시간별 ->  예약 건수(Slot)를 제한하고 싶었다. (마치 네이버 예약처럼!)
(보통 주문제작 케이크, 꽃집은 방문 날짜와 시간도 미리 정하게 되는데, 이 부분을 관리할 수 있게 하고싶었다.)

다른 예약 플랫폼이 내부적으로 어떻게 관리되는지 세부적인 로직은 모르겠지만,
이 경우 날짜, 시간 전부 관리할 수 있어야하기때문에 날짜 + 시간 데이터별 슬롯들을 전부 관리해야했다. 
그리고 가게 휴무일이 바뀌다던가 (지정휴무와 고정휴무 두가지 방식을 구현헀다.)
다양한 요소들도 슬롯에 영향을 줬기 때문에 데이터 수정이나 이래저래 너무 규모가 커져서 결국 방식을 변경했다.


2. (확정) 날짜별로 받을 예약 건수를 지정하자. ⭐
대신 시간대는 지정할 수 없다.. → 이 경우 날짜별로 구분해도  특정 시간에 예약이 몰리는 걸 방지할 수가 없지만 어쩔 수 없음. (즉, 특정 시간대를 막을 수는 없다..)

결론적으로, 날짜별로 예약 건수를 지정하고
(선택한 날짜에 이미 들어온 예약건 == 지정된 슬롯 건수) 을 비교해서 예약이 꽉찬 날짜를 disabled 하는 방식으로 정했다.

 

 

 

 

< 예약 건수 관리 페이지 >

 

 

 

 

 

 

기간별 또는 일별로 예약 건수를 수정하게되면 (혹은 예약막기 버튼 더블클릭으로 바로 막기 가능)

 

 

 

 

 

이런식으로 일별 예약 slot 이 지정된 개수로 변경됨.

 

 

 

 

---

 

 

(현재 예약건수 / 예약 가능건수(slot)) 이 (2/2) 로 즉, 꽉 찼기때문에

사용자 페이지에서는 예약이 불가능하다고 날짜가 Disabled 처리된다.

 

 

 

결국 방법을 변경하게되면서 사용하는 컬럼은 줄어들게되었다... 이 중 몇개는 안쓰는 컬럼들..

 

 

 

 

 

---

2) 페이지 기능 구현

 

 

 

✅슬롯은 상품 추가시 insert 됨 & 슬롯 상태는 주문 등록시 +1

@Override
public void setSlotAll(adminReserveAdd dto) {
 
    LocalDate startDate = LocalDate.now();
    LocalDate endDate = LocalDate.of(2029, 12, 31);
 
    while (!startDate.isAfter(endDate)) {
      System.out.println(startDate);
      dto.setReservationSlotDate(startDate);
      adminReservationMapper.setSlotAll(dto);
      startDate = startDate.plusDays(1);
    }
}

 

상품을 추가할 때 날짜 슬롯이 now()  ~  2029.12.31 까지 insert 된다.

 

 

 

 <update id="updateSlotStatus">
        UPDATE reservation_slot
        SET slot_status_count = slot_status_count + 1
        WHERE category_id = #{categoryId}
        AND reservation_slot_date = #{reservationDate}
        AND store_no = #{storeNo}
    </update>

 

 

주문이 들어가면 슬롯 상태 slot_status_count + 1 카운팅

 

 

 

 

✅ 지정된 슬롯 건수 & 예약건 비교

 

 

 

  <select id="getDateTime2" resultType="com.example.HiMade.user.dto.UserRSlotDTO">
        select * from reservation_slot where
        category_id = #{categoryId}
    </select>

 

해당 상품에 대한 슬롯 정보를 전부 가져옴

(달력에 뿌려야해서 어쩔수없이 전부 가져올 수 밖에 없었다.. )

 

 

 

slot_count 랑 slot_status_count 를 비교

 

 

 

 

 

 

 

 

✅ 예약 가능 시간 대 출력

 

 

 

시간 같은 경우에는 가게 영업시간에 맞게 세팅되도록 했다.

ex) 11시부터 30분 간격으로 출력해두게함.

 

 

 

 

✅ 예약 가능일은 오늘로부터 3개월 뒤 까지 만 가능하도록 지정

  // 날짜 비활성화 
  const  tileDisabled = ({ date }) => {
  
    const today = new Date();
    const threeMonthsLater = new Date();
    threeMonthsLater.setMonth(today.getMonth() + 3);
    
    return date < today || date > threeMonthsLater;
  };

 

 

 

 ✅ 예약 건수 수정 

 

    <update id="updateSlotCount1" parameterType="com.example.HiMade.user.dto.UserRSlotDTO">
        update reservation_slot
        set slot_count = #{slotCount}
        where reservation_slot_date = #{reservationSlotDate} and  category_id = #{categoryId}
    </update>

 

 

---

3) 후기

 

✅ 예약 날짜별 슬롯 관리 구현 방식 더 알아보기  (더 효율적인 방법이 있을지도 모른다)