[FE] 캘린더의 특정 날짜부터 선택이 가능하도록 하는 기능 추가(#748) (#749)

woowacourse-teams · Nov 13, 2024 · 5e41977 · 5e41977
2 parents 4808c1a + 635ab07
commit 5e41977
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/frontend/src/components/common/calendar/Calendar.tsx b/frontend/src/components/common/calendar/Calendar.tsx
@@ -8,6 +8,7 @@ export interface CalendarProps {
   selectedDate: Date;
   handleSelectedDate: (newSelectedDate: Date) => void;
   options?: {
+    disabledBeforeDate?: Date;
     isPastDateDisabled: boolean;
   };
 }
@@ -35,12 +36,12 @@ const Calendar = ({ selectedDate, handleSelectedDate, options }: CalendarProps)
   const checkIsAvailableClick = (day: number) => {
     if (!options?.isPastDateDisabled) return true;
 
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
+    const targetDate = options.disabledBeforeDate || new Date();
+    targetDate.setHours(0, 0, 0, 0);
 
     const checkingDate = new Date(currentViewYear, currentViewMonth - 1, day);
 
-    return today <= checkingDate;
+    return targetDate <= checkingDate;
   };
 
   return (

diff --git a/frontend/src/components/dateTimePicker/DateTimePicker.tsx b/frontend/src/components/dateTimePicker/DateTimePicker.tsx
@@ -4,9 +4,13 @@ import { TimeDropdown } from "@/components/common/timeDropdown/TimeDropdown";
 interface DateTimePickerProps {
   selectedDateTime: Date;
   onDateTimeChange: (dateTime: Date) => void;
+  options: {
+    disabledBeforeDate?: Date;
+    isPastDateDisabled: boolean;
+  };
 }
 
-const DateTimePicker = ({ selectedDateTime, onDateTimeChange }: DateTimePickerProps) => {
+const DateTimePicker = ({ selectedDateTime, options, onDateTimeChange }: DateTimePickerProps) => {
   const handleDateChange = (newDate: Date) => {
     const updatedDateTime = new Date(newDate);
     updatedDateTime.setHours(selectedDateTime.getHours());
@@ -23,7 +27,11 @@ const DateTimePicker = ({ selectedDateTime, onDateTimeChange }: DateTimePickerPr
 
   return (
     <>
-      <CalendarDropdown selectedDate={selectedDateTime} handleSelectedDate={handleDateChange} />
+      <CalendarDropdown
+        selectedDate={selectedDateTime}
+        handleSelectedDate={handleDateChange}
+        options={options}
+      />
       <TimeDropdown selectedTime={selectedDateTime} onTimeChange={handleTimeChange} />
     </>
   );

diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx
@@ -219,9 +219,17 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
           <S.ContentInput>
             <DateTimePicker
               selectedDateTime={formState.recruitmentDeadline}
-              onDateTimeChange={(newDateTime) =>
-                handleInputChange("recruitmentDeadline", newDateTime)
-              }
+              onDateTimeChange={(newDateTime) => {
+                handleInputChange("recruitmentDeadline", newDateTime);
+                if (newDateTime > formState.reviewDeadline) {
+                  const newDate = new Date();
+                  newDate.setFullYear(newDateTime.getFullYear());
+                  newDate.setMonth(newDateTime.getMonth());
+                  newDate.setDate(newDateTime.getDate());
+                  handleInputChange("reviewDeadline", newDate);
+                }
+              }}
+              options={{ isPastDateDisabled: true }}
             />
           </S.ContentInput>
         </S.RowContainer>
@@ -234,6 +242,10 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             <DateTimePicker
               selectedDateTime={formState.reviewDeadline}
               onDateTimeChange={(newDateTime) => handleInputChange("reviewDeadline", newDateTime)}
+              options={{
+                isPastDateDisabled: true,
+                disabledBeforeDate: formState.recruitmentDeadline,
+              }}
             />
           </S.ContentInput>
         </S.RowContainer>