Merge pull request #116 from KGU-C-Lab/refactor/#115

[Member] 캘린더 사용자 피드백 개선

apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import useModal from '@hooks/common/useModal';
-import { formattedDate } from '@utils/date';
+import { formattedDatePeriod, now } from '@utils/date';
 import { cn } from '@utils/string';
 import dayjs from 'dayjs';
 
@@ -11,6 +11,8 @@ interface CalendarScheduleProps extends ScheduleItem {
   day: dayjs.Dayjs;
 }
 
+const today = now();
+
 const CalendarSchedule = ({
   day,
   title,
@@ -20,18 +22,13 @@ const CalendarSchedule = ({
 }: CalendarScheduleProps) => {
   const { openModal } = useModal();
   const isDateDiff = dayjs(startDate).diff(endDate, 'd');
+  const isBeforeToday = day.isBefore(today, 'day');
 
   const handleScheduleClick = useCallback(
-    (detail: string, start: string, end: string) => {
-      // 시작일과 종료일이 같은 경우, 종료일은 표시하지 않는다.
-      const date =
-        start === end
-          ? `${formattedDate(start)}`
-          : `${formattedDate(start)} ~ ${formattedDate(end)}`;
-
+    (detail: string, startDate: string, endDate: string) => {
       openModal({
         title: '📆 일정',
-        content: `일시: ${date}\n내용: ${detail}`,
+        content: `일시: ${formattedDatePeriod(startDate, endDate)}\n내용: ${detail}`,
       });
     },
     [openModal],
@@ -56,6 +53,7 @@ const CalendarSchedule = ({
           'rounded-r bg-red-100':
             isDateDiff !== 0 && day.isSame(endDate, 'date'),
         },
+        { 'opacity-50': isBeforeToday },
       )}
       onClick={() => handleScheduleClick(detail, startDate, endDate)}
     >

apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx

@@ -42,10 +42,15 @@ const CalendarSection = () => {
 
   while (day.isBefore(endDay)) {
     const isToday = day.isSame(today, 'day');
+    const isBeforeToday = day.isBefore(today, 'day');
 
     days.push(
       <td key={day.format('DD-MM-YYYY')} className="h-28 border">
-        <div className="flex h-full flex-col items-end space-y-1">
+        <div
+          className={cn('flex h-full flex-col items-end gap-1', {
+            'bg-gray-50 opacity-60': isBeforeToday,
+          })}
+        >
           <p
             className={cn('m-1 size-5 rounded-full text-center text-sm', {
               'bg-red-500 text-white': isToday,

apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+import { Table } from '@clab/design-system';
+
+import { Section } from '@components/common/Section';
+
+import { TABLE_HEAD } from '@constants/head';
+import useModal from '@hooks/common/useModal';
+import { useSchedule } from '@hooks/queries';
+import { formattedDate, formattedDatePeriod } from '@utils/date';
+
+const CalendarTableSection = () => {
+  const { openModal } = useModal();
+  const { data } = useSchedule();
+
+  const handleScheduleClick = useCallback(
+    (detail: string, startDate: string, endDate: string) => {
+      openModal({
+        title: '📆 일정',
+        content: `일시: ${formattedDatePeriod(startDate, endDate)}\n내용: ${detail}`,
+      });
+    },
+    [openModal],
+  );
+
+  return (
+    <Section>
+      <Table head={TABLE_HEAD.CALENDAR_TABLE} className="table-fixed">
+        {data.items.map(({ id, title, detail, startDate, endDate }) => (
+          <Table.Row
+            key={id}
+            onClick={() => handleScheduleClick(detail, startDate, endDate)}
+          >
+            <Table.Cell>{`${formattedDate(startDate)} ~ ${formattedDate(endDate)}`}</Table.Cell>
+            <Table.Cell>{title}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table>
+    </Section>
+  );
+};
+
+export default CalendarTableSection;

apps/member/src/constants/head.ts

@@ -13,6 +13,7 @@ export const TABLE_HEAD = {
     '기능',
   ],
   CALENDAR_SCHEDULE: ['번호', '제목', '시작일', '종료일', '중요도', '기능'],
+  CALENDAR_TABLE: ['날짜', '일정'],
 } as const;
 /**
  * 관리자 페이지에서 기능을 나타내는 상수

apps/member/src/pages/CalendarPage/CalendarPage.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 
 import CalendarSection from '@components/calendar/CalendarSection/CalendarSection';
 import CalendarStatusSection from '@components/calendar/CalendarStatusSection/CalendarStatusSection';
+import CalendarTableSection from '@components/calendar/CalendarTableSection/CalendarTableSection';
 import Content from '@components/common/Content/Content';
 import Header from '@components/common/Header/Header';
 
@@ -15,6 +16,9 @@ const CalendarPage = () => {
       <Suspense>
         <CalendarSection />
       </Suspense>
+      <Suspense>
+        <CalendarTableSection />
+      </Suspense>
     </Content>
   );
 };

apps/member/src/utils/date.ts

@@ -42,6 +42,20 @@ export function formattedDate(date: string | undefined | null): string {
   if (!date) return '-';
   return dayjs(date).format('YY.MM.DD(dd) HH:mm');
 }
+/**
+ * 주어진 시작일과 종료일을 형식화된 날짜 기간 문자열로 반환합니다.
+ * 시작일과 종료일이 동일한 경우 시작일의 형식화된 날짜를 반환합니다.
+ * 시작일과 종료일이 다른 경우 시작일과 종료일을 형식화된 날짜로 연결한 문자열을 반환합니다.
+ * @param startDate 시작일을 나타내는 문자열
+ * @param endDate 종료일을 나타내는 문자열
+ * @returns 형식화된 날짜 기간 문자열
+ */
+export function formattedDatePeriod(startDate: string, endDate: string) {
+  return startDate === endDate
+    ? formattedDate(startDate)
+    : `${formattedDate(startDate)} ~ ${formattedDate(endDate)}`;
+}
+
 /**
  * 주어진 초를 'mm:ss' 형식으로 포맷합니다.
  *