[FE] 일정 등록 모달 기본 날짜 변경 (#245)

* refactor: 일정 등록 모달 창이 열릴 때 클릭된 날짜로 설정되도록 수정 * refactor: input type="date"의 min 프로퍼티로 시작일 이전의 종료일이 입력되는 경우 방지 * refactor: 불필요한 클릭된 DateCell의 날짜 계산 로직 제거
woowacourse-teams · Jul 31, 2023 · a94af26 · a94af26
1 parent 967ed35
commit a94af26
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 24 deletions.
diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx
@@ -25,6 +25,8 @@ const Calendar = () => {
     year,
     month,
     calendar,
+    currentDate,
+
     handlers: { handlePrevButtonClick, handleNextButtonClick },
   } = useCalendar();
   const schedules = useFetchSchedules(1, year, month);
@@ -34,6 +36,7 @@ const Calendar = () => {
     modalPosition,
     handlers: { handleScheduleModalOpen },
   } = useScheduleModal();
+  const [clickedDate, setClickedDate] = useState(currentDate);
   const [modalType, setModalType] = useState<ModalOpenType>(
     MODAL_OPEN_TYPE.ADD,
   );
@@ -63,6 +66,16 @@ const Calendar = () => {
     openModal();
   };
 
+  const handleDateCellClick = (clickedDate: Date) => {
+    setClickedDate(() => clickedDate);
+    handleModalOpen(MODAL_OPEN_TYPE.ADD);
+  };
+
+  const handleScheduleAddButtonClick = () => {
+    setClickedDate(() => currentDate);
+    handleModalOpen(MODAL_OPEN_TYPE.ADD);
+  };
+
   return (
     <>
       <S.Container>
@@ -87,7 +100,7 @@ const Calendar = () => {
             </Button>
             <Button
               css={S.scheduleAddButton}
-              onClick={() => handleModalOpen(MODAL_OPEN_TYPE.ADD)}
+              onClick={handleScheduleAddButtonClick}
             >
               <PlusIcon />
             </Button>
@@ -157,7 +170,9 @@ const Calendar = () => {
                           key={day.toISOString()}
                           rawDate={day}
                           currentMonth={month}
-                          onClick={() => handleModalOpen(MODAL_OPEN_TYPE.ADD)}
+                          onClick={() => {
+                            handleDateCellClick(day);
+                          }}
                           onDayClick={(e) => {
                             e.stopPropagation();
                             handleDailyScheduleModalOpen(
@@ -177,7 +192,7 @@ const Calendar = () => {
         </div>
       </S.Container>
       {isModalOpen && modalType === MODAL_OPEN_TYPE.ADD && (
-        <ScheduleAddModal teamPlaceName="팀바팀" />
+        <ScheduleAddModal teamPlaceName="팀바팀" clickedDate={clickedDate} />
       )}
       {isModalOpen && modalType === MODAL_OPEN_TYPE.VIEW && (
         <ScheduleModal

diff --git a/frontend/src/components/ScheduleAddModal/ScheduleAddModal.stories.tsx b/frontend/src/components/ScheduleAddModal/ScheduleAddModal.stories.tsx
@@ -15,18 +15,24 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  render: () => {
-    const { openModal } = useModal();
+const SampleModal = () => {
+  const { openModal } = useModal();
 
-    return (
-      <>
-        <Button onClick={openModal}>모달 열기</Button>
-        <ScheduleAddModal teamPlaceName="Woowacourse TeamByTeam Corporation" />
-      </>
-    );
-  },
+  return (
+    <>
+      <Button onClick={openModal}>모달 열기</Button>
+      <ScheduleAddModal
+        teamPlaceName="Woowacourse TeamByTeam Corporation"
+        clickedDate={new Date()}
+      />
+    </>
+  );
+};
+
+export const Default: Story = {
+  render: () => <SampleModal />,
   args: {
     teamPlaceName: '',
+    clickedDate: new Date(),
   },
 };
diff --git a/frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx b/frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx
@@ -9,15 +9,16 @@ import useScheduleAddModal from '~/hooks/schedule/useScheduleAddModal';
 
 interface ScheduleAddModalProps {
   teamPlaceName: string;
+  clickedDate: Date;
 }
 
 const ScheduleAddModal = (props: ScheduleAddModalProps) => {
-  const { teamPlaceName } = props;
+  const { teamPlaceName, clickedDate } = props;
   const { closeModal } = useModal();
   const {
     schedule,
     handlers: { handleScheduleChange, handleScheduleSubmit },
-  } = useScheduleAddModal();
+  } = useScheduleAddModal(clickedDate);
 
   return (
     <Modal>
@@ -55,7 +56,7 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
             <Input
               width="220px"
               height="40px"
-              type="datetime-local"
+              type="date"
               css={S.dateTimeLocalInput}
               name="startDateTime"
               value={schedule['startDateTime']}
@@ -74,10 +75,11 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
             <Input
               width="220px"
               height="40px"
-              type="datetime-local"
+              type="date"
               css={S.dateTimeLocalInput}
               name="endDateTime"
               value={schedule['endDateTime']}
+              min={schedule['startDateTime']}
               onChange={handleScheduleChange}
               required
             />

diff --git a/frontend/src/hooks/schedule/useScheduleAddModal.ts b/frontend/src/hooks/schedule/useScheduleAddModal.ts
@@ -3,13 +3,18 @@ import { useSendSchedule } from '~/hooks/queries/useSendSchedule';
 import { useModal } from '~/hooks/useModal';
 import { formatISOString } from '~/utils/formatISOString';
 import { isYYYYMMDDHHMM } from '~/types/typeGuard';
+import { parseDate } from '~/utils/parseDate';
 import type { ChangeEventHandler, FormEventHandler } from 'react';
 
-const useScheduleAddModal = () => {
+const useScheduleAddModal = (clickedDate: Date) => {
+  const { year, month, date } = parseDate(clickedDate);
+  const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(
+    date,
+  ).padStart(2, '0')}`;
   const [schedule, setSchedule] = useState({
     title: '',
-    startDateTime: '2023-07-20T00:00',
-    endDateTime: '2023-07-20T00:00',
+    startDateTime: dateString,
+    endDateTime: dateString,
   });
   const { closeModal } = useModal();
   const { mutateSendSchedule } = useSendSchedule(1);

diff --git a/frontend/src/hooks/useCalendar.ts b/frontend/src/hooks/useCalendar.ts
@@ -5,15 +5,15 @@ import { parseDate } from '~/utils/parseDate';
 
 const useCalendar = () => {
   const [currentDate, setCurrentDate] = useState(new Date());
-  const { year, month } = parseDate(currentDate);
-  const { day: startDayOfMonth } = parseDate(new Date(currentDate.setDate(1)));
+  const { year, month, date } = parseDate(currentDate);
+  const { day: startDayOfMonth } = parseDate(new Date(year, month, 1));
 
   const handlePrevButtonClick = () => {
-    setCurrentDate(() => new Date(year, month - 1));
+    setCurrentDate(() => new Date(year, month - 1, date));
   };
 
   const handleNextButtonClick = () => {
-    setCurrentDate(() => new Date(year, month + 1));
+    setCurrentDate(() => new Date(year, month + 1, date));
   };
 
   const createCalendar = (year: number, month: number) =>
@@ -32,6 +32,7 @@ const useCalendar = () => {
     year,
     month,
     calendar,
+    currentDate,
 
     handlers: {
       handlePrevButtonClick,