Merge pull request #152 from boogiewooki02/feature/reservation

Feat: 일요일 활성화 및 안내 모달 추가
kahluaband · Feb 3, 2025 · 1353053 · 1353053
2 parents ea3c909 + 482d8c5
commit 1353053
Show file tree

Hide file tree

Showing 4 changed files with 498 additions and 259 deletions.
diff --git a/components/admin/applicant/ApplicantCard.tsx b/components/admin/applicant/ApplicantCard.tsx
@@ -235,7 +235,7 @@ const ApplicantCard = ({
           </DialogTitle>
 
           <DialogContent className="p-4 pad:p-8 max-h-[80vh] overflow-y-auto">
-            <section className="flex flex-col pad:flex-row pad:gap-[100px]">
+            <section className="flex flex-col pad:flex-row pad:gap-[100px] pt-6">
               <div className="flex flex-col gap-3">
                 <div className="flex items-center gap-2">
                   <Image

diff --git a/components/reservation/CalendarUI.tsx b/components/reservation/CalendarUI.tsx
@@ -3,6 +3,7 @@ import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css'; // 기본 스타일
 import './CalendarUI.css';
 import { Reservation } from '@/app/(kahlua)/reservation/page';
+import Modal from '../ui/Modal';
 
 // react-calnedar에서 요구하는 타입 형식 (변경 x)
 type ValuePiece = Date | null;
@@ -14,13 +15,33 @@ interface CalendarProps {
 
 const CalendarUI = ({ onChange }: CalendarProps) => {
   const [value, setValue] = useState<Value>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [tempDate, setTempDate] = useState<Date | null>(null);
 
   const handleDateChange = async (newValue: Value) => {
-    setValue(newValue);
     if (newValue instanceof Date) {
-      const dateString = newValue.toLocaleDateString('en-CA'); // Date -> string 변환
+      const day = newValue.getDay();
+
+      if (day === 0) {
+        setTempDate(newValue);
+        setIsModalOpen(true);
+        return;
+      }
+
+      setValue(newValue);
+      const dateString = newValue.toLocaleDateString('en-CA');
+      onChange('reservationDate', dateString);
+    }
+  };
+
+  const handleModalConfirm = () => {
+    if (tempDate) {
+      setValue(tempDate);
+      const dateString = tempDate.toLocaleDateString('en-CA');
       onChange('reservationDate', dateString);
     }
+    setIsModalOpen(false);
+    setTempDate(null);
   };
 
   const isSelectable = (date: Date) => {
@@ -37,8 +58,8 @@ const CalendarUI = ({ onChange }: CalendarProps) => {
     // 오늘 기준 2주 이후 날짜는 비활성화
     if (date > twoWeeksFromToday) return false;
 
-    // 월(=1), 수(=3), 금(=5)만 활성화
-    return day === 1 || day === 3 || day === 5;
+    // 월(=1), 수(=3), 금(=5), 일(=0)만 활성화
+    return day === 1 || day === 3 || day === 5 || day === 0;
   };
 
   return (
@@ -59,6 +80,20 @@ const CalendarUI = ({ onChange }: CalendarProps) => {
         nextLabel=">"
         tileDisabled={({ date }) => !isSelectable(date)}
       />
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        <div className="text-center mt-4 text-2xl text-gray-90">
+          <p>일요일 예약은 담당자의 확인 후 확정됩니다.</p>
+          <p className="mt-4 text-xl">예약 전 확인해주세요!</p>
+          <div className="flex justify-center items-center mt-4 gap-4">
+            <button onClick={() => setIsModalOpen(false)} className="px-4 py-2">
+              취소
+            </button>
+            <button onClick={handleModalConfirm} className="px-4 py-2">
+              확인
+            </button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };