diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx index 1b07be4eb..4de914ae2 100644 --- 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( 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 ( <> @@ -87,7 +100,7 @@ const Calendar = () => { @@ -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 = () => { {isModalOpen && modalType === MODAL_OPEN_TYPE.ADD && ( - + )} {isModalOpen && modalType === MODAL_OPEN_TYPE.VIEW && ( ; -export const Default: Story = { - render: () => { - const { openModal } = useModal(); +const SampleModal = () => { + const { openModal } = useModal(); - return ( - <> - - - - ); - }, + return ( + <> + + + + ); +}; + +export const Default: Story = { + render: () => , args: { teamPlaceName: '', + clickedDate: new Date(), }, }; diff --git a/frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx b/frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx index 65cab1fa2..4c3f94723 100644 --- 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 ( @@ -55,7 +56,7 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => { { diff --git a/frontend/src/hooks/schedule/useScheduleAddModal.ts b/frontend/src/hooks/schedule/useScheduleAddModal.ts index eae5d06d7..c519c20ed 100644 --- 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 index 949fa978b..9f5e2004d 100644 --- 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,