fix(member): 캘린더 일정 조회 에러 수정 (#195)

kgu-clab · Aug 9, 2024 · b76dc73 · b76dc73
1 parent 7855e13
commit b76dc73
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 44 deletions.
diff --git a/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx b/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx
@@ -18,18 +18,18 @@ const CalendarSchedule = ({
   day,
   title,
   detail,
-  startDate,
-  endDate,
+  startDateTime,
+  endDateTime,
 }: CalendarScheduleProps) => {
   const { openModal } = useModal();
-  const isDateDiff = dayjs(startDate).diff(endDate, 'd');
+  const isDateDiff = dayjs(startDateTime).diff(endDateTime, 'd');
   const isBeforeToday = day.isBefore(today, 'day');
 
   const handleScheduleClick = useCallback(
-    (detail: string, startDate: string, endDate: string) => {
+    (detail: string, startDateTime: string, endDateTime: string) => {
       openModal({
         title: '📆 일정',
-        content: `일시: ${formattedDatePeriod(startDate, endDate)}\n내용: ${detail}`,
+        content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
       });
     },
     [openModal],
@@ -42,21 +42,21 @@ const CalendarSchedule = ({
         isDateDiff === 0 ? 'rounded bg-blue-100' : 'bg-red-100',
         {
           'rounded-l bg-red-100':
-            isDateDiff !== 0 && day.isSame(startDate, 'date'),
+            isDateDiff !== 0 && day.isSame(startDateTime, 'date'),
         },
         {
           'bg-red-100':
             isDateDiff !== 0 &&
-            day.isAfter(startDate, 'date') &&
-            day.isBefore(endDate, 'date'),
+            day.isAfter(startDateTime, 'date') &&
+            day.isBefore(endDateTime, 'date'),
         },
         {
           'rounded-r bg-red-100':
-            isDateDiff !== 0 && day.isSame(endDate, 'date'),
+            isDateDiff !== 0 && day.isSame(endDateTime, 'date'),
         },
         { 'opacity-50': isBeforeToday },
       )}
-      onClick={() => handleScheduleClick(detail, startDate, endDate)}
+      onClick={() => handleScheduleClick(detail, startDateTime, endDateTime)}
     >
       {title}
     </button>

diff --git a/apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx b/apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx
@@ -16,8 +16,8 @@ const CalendarStatusSection = () => {
   const { data: yearData } = useScheduleCollect();
 
   const closestEvent = findClosestEvent(transformEvents(monthData.items));
-  const closestDDay = closestEvent?.startDate
-    ? `D-${calculateDDay(closestEvent.startDate)}`
+  const closestDDay = closestEvent?.startDateTime
+    ? `D-${calculateDDay(closestEvent.startDateTime)}`
     : '이번 달에 남은 일정이 없어요';
 
   return (

diff --git a/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx b/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx
@@ -14,10 +14,10 @@ const CalendarTableSection = () => {
   const { data } = useSchedule();
 
   const handleScheduleClick = useCallback(
-    (detail: string, startDate: string, endDate: string) => {
+    (detail: string, startDateTime: string, endDateTime: string) => {
       openModal({
         title: '📆 일정',
-        content: `일시: ${formattedDatePeriod(startDate, endDate)}\n내용: ${detail}`,
+        content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
       });
     },
     [openModal],
@@ -26,12 +26,14 @@ const CalendarTableSection = () => {
   return (
     <Section>
       <Table head={TABLE_HEAD.CALENDAR_TABLE} className="table-fixed">
-        {data.items.map(({ id, title, detail, startDate, endDate }) => (
+        {data.items.map(({ id, title, detail, startDateTime, endDateTime }) => (
           <Table.Row
             key={id}
-            onClick={() => handleScheduleClick(detail, startDate, endDate)}
+            onClick={() =>
+              handleScheduleClick(detail, startDateTime, endDateTime)
+            }
           >
-            <Table.Cell>{`${formattedDate(startDate)} ~ ${formattedDate(endDate)}`}</Table.Cell>
+            <Table.Cell>{`${formattedDate(startDateTime)} ~ ${formattedDate(endDateTime)}`}</Table.Cell>
             <Table.Cell>{title}</Table.Cell>
           </Table.Row>
         ))}

diff --git a/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx b/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
@@ -54,29 +54,31 @@ const ManageCalendarSection = () => {
   const renderView = {
     view: (
       <Table head={TABLE_HEAD.CALENDAR_SCHEDULE}>
-        {data.items.map(({ id, title, startDate, endDate, priority }) => (
-          <Table.Row
-            key={id}
-            className="text-nowrap text-center"
-            onClick={handleTableRowClick}
-          >
-            <Table.Cell>{id}</Table.Cell>
-            <Table.Cell className="w-full truncate text-left">
-              {toDecodeHTMLEntities(title)}
-            </Table.Cell>
-            <Table.Cell>{formattedDate(startDate)}</Table.Cell>
-            <Table.Cell>{formattedDate(endDate)}</Table.Cell>
-            <Table.Cell>{toPriorityText(priority)}</Table.Cell>
-            <Table.Cell className="space-x-2">
-              <ActionButton
-                color="red"
-                onClick={(e) => handleDeleteButtonClick(e, id)}
-              >
-                삭제
-              </ActionButton>
-            </Table.Cell>
-          </Table.Row>
-        ))}
+        {data.items.map(
+          ({ id, title, startDateTime, endDateTime, priority }) => (
+            <Table.Row
+              key={id}
+              className="text-nowrap text-center"
+              onClick={handleTableRowClick}
+            >
+              <Table.Cell>{id}</Table.Cell>
+              <Table.Cell className="w-full truncate text-left">
+                {toDecodeHTMLEntities(title)}
+              </Table.Cell>
+              <Table.Cell>{formattedDate(startDateTime)}</Table.Cell>
+              <Table.Cell>{formattedDate(endDateTime)}</Table.Cell>
+              <Table.Cell>{toPriorityText(priority)}</Table.Cell>
+              <Table.Cell className="space-x-2">
+                <ActionButton
+                  color="red"
+                  onClick={(e) => handleDeleteButtonClick(e, id)}
+                >
+                  삭제
+                </ActionButton>
+              </Table.Cell>
+            </Table.Row>
+          ),
+        )}
       </Table>
     ),
     add: <AddScheduleForm onSubmit={() => handleMenubarItemClick('view')} />,

diff --git a/apps/member/src/types/schedule.ts b/apps/member/src/types/schedule.ts
@@ -6,8 +6,8 @@ export interface ScheduleItem {
   title: string;
   detail: string;
   activityName: string | null;
-  startDate: string;
-  endDate: string;
+  startDateTime: string;
+  endDateTime: string;
   priority: SchedulePriority;
 }
 

diff --git a/apps/member/src/utils/date.ts b/apps/member/src/utils/date.ts
@@ -80,8 +80,8 @@ export const transformEvents = (
 ): Record<string, ScheduleItem[]> => {
   return events.reduce(
     (acc, current) => {
-      const startDate = new Date(current.startDate.split('T')[0]); // 시작 날짜 객체 생성
-      const endDate = new Date(current.endDate.split('T')[0]); // 종료 날짜 객체 생성
+      const startDate = new Date(current.startDateTime.split('T')[0]); // 시작 날짜 객체 생성
+      const endDate = new Date(current.endDateTime.split('T')[0]); // 종료 날짜 객체 생성
 
       for (
         let date = new Date(startDate);