refactor(member): Calendar 새로운 프로젝트 구조 적용 (#238)

apps/member/src/components/calendar/AddScheduleForm/AddScheduleForm.tsx → apps/member/src/components/calendar/ScheduleFormSection.tsx

@@ -7,11 +7,11 @@ import Textarea from '@components/common/Textarea/Textarea';
 import useToast from '@hooks/common/useToast';
 import { useScheduleMutation } from '@hooks/queries';
 
-interface AddScheduleFormProps {
+interface Props {
   onSubmit: () => void;
 }
 
-const AddScheduleForm = ({ onSubmit }: AddScheduleFormProps) => {
+export function ScheduleFormSection({ onSubmit }: Props) {
   const toast = useToast();
   const [inputs, setInputs] = useState({
     title: '',
@@ -93,6 +93,4 @@ const AddScheduleForm = ({ onSubmit }: AddScheduleFormProps) => {
       </Button>
     </div>
   );
-};
-
-export default AddScheduleForm;
+}

apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Menubar, Table } from '@clab-platforms/design-system';
 import { toDecodeHTMLEntities } from '@clab-platforms/utils';
 
-import AddScheduleForm from '@components/calendar/AddScheduleForm/AddScheduleForm';
+import { ScheduleFormSection } from '@components/calendar/ScheduleFormSection';
 import ActionButton from '@components/common/ActionButton/ActionButton';
 import Pagination from '@components/common/Pagination/Pagination';
 import { Section } from '@components/common/Section';
@@ -83,7 +83,9 @@ const ManageCalendarSection = () => {
         )}
       </Table>
     ),
-    add: <AddScheduleForm onSubmit={() => handleMenubarItemClick('view')} />,
+    add: (
+      <ScheduleFormSection onSubmit={() => handleMenubarItemClick('view')} />
+    ),
   }[mode];
 
   return (

apps/member/src/hooks/queries/schedule/index.ts

@@ -1,3 +1,2 @@
 export * from './useSchedule';
 export * from './useScheduleMutation';
-export * from './useScheduleCollect';

apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx → apps/member/src/pages/CalendarPage/components/CalendarSection.tsx

@@ -7,12 +7,15 @@ import Section from '@components/common/Section/Section';
 
 import { useSchedule } from '@hooks/queries';
 import { now, transformEvents } from '@utils/date';
+import dayjs from 'dayjs';
 
-import CalendarSchedule from '../CalendarSchedule/CalendarSchedule';
+import type { ScheduleItem } from '@type/schedule';
+
+import { useScheduleInfoModal } from '../hooks/useScheduleInfoModal';
 
 const today = now();
 
-const CalendarSection = () => {
+export default function CalendarSection() {
   const [date, setDate] = useState(today);
   const { data } = useSchedule({
     startDate: date.startOf('month').toString(),
@@ -103,6 +106,54 @@ const CalendarSection = () => {
       </Section.Body>
     </Section>
   );
-};
+}
+
+interface CalendarScheduleProps extends ScheduleItem {
+  day: dayjs.Dayjs;
+}
+
+const CalendarSchedule = ({
+  day,
+  title,
+  detail,
+  startDateTime,
+  endDateTime,
+}: CalendarScheduleProps) => {
+  const { open } = useScheduleInfoModal();
 
-export default CalendarSection;
+  const isDateDiff = dayjs(startDateTime).diff(endDateTime, 'd');
+  const isBeforeToday = day.isBefore(today, 'day');
+
+  return (
+    <button
+      className={cn(
+        'w-full truncate px-2 text-left text-xs',
+        isDateDiff === 0 ? 'rounded bg-blue-100' : 'bg-red-100',
+        {
+          'rounded-l bg-red-100':
+            isDateDiff !== 0 && day.isSame(startDateTime, 'date'),
+        },
+        {
+          'bg-red-100':
+            isDateDiff !== 0 &&
+            day.isAfter(startDateTime, 'date') &&
+            day.isBefore(endDateTime, 'date'),
+        },
+        {
+          'rounded-r bg-red-100':
+            isDateDiff !== 0 && day.isSame(endDateTime, 'date'),
+        },
+        { 'opacity-50': isBeforeToday },
+      )}
+      onClick={() =>
+        open({
+          detail,
+          startDateTime,
+          endDateTime,
+        })
+      }
+    >
+      {title}
+    </button>
+  );
+};

apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx → apps/member/src/pages/CalendarPage/components/StatusSection.tsx

@@ -8,10 +8,12 @@ import {
 import Section from '@components/common/Section/Section';
 import StatusCard from '@components/common/StatusCard/StatusCard';
 
-import { useSchedule, useScheduleCollect } from '@hooks/queries';
+import { useSchedule } from '@hooks/queries';
 import { calculateDDay, findClosestEvent, transformEvents } from '@utils/date';
 
-const CalendarStatusSection = () => {
+import { useScheduleCollect } from '../hooks/useScheduleCollect';
+
+export function StatusSection() {
   const { data: monthData } = useSchedule();
   const { data: yearData } = useScheduleCollect();
 
@@ -50,6 +52,4 @@ const CalendarStatusSection = () => {
       </Section.Body>
     </Section>
   );
-};
-
-export default CalendarStatusSection;
+}

apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx → apps/member/src/pages/CalendarPage/components/TableSection.tsx

@@ -3,34 +3,22 @@ import { Table } from '@clab-platforms/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';
+import { formattedDate } from '@utils/date';
 
-const CalendarTableSection = () => {
-  const { open } = useModal();
-  const { data } = useSchedule();
+import { useScheduleInfoModal } from '../hooks/useScheduleInfoModal';
 
-  const handleScheduleClick = (
-    detail: string,
-    startDateTime: string,
-    endDateTime: string,
-  ) => {
-    open({
-      title: '📆 일정',
-      content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
-    });
-  };
+export function TableSection() {
+  const { open } = useScheduleInfoModal();
+  const { data } = useSchedule();
 
   return (
     <Section>
       <Table head={TABLE_HEAD.CALENDAR_TABLE} className="table-fixed">
         {data.items.map(({ id, title, detail, startDateTime, endDateTime }) => (
           <Table.Row
             key={id}
-            onClick={() =>
-              handleScheduleClick(detail, startDateTime, endDateTime)
-            }
+            onClick={() => open({ detail, startDateTime, endDateTime })}
           >
             <Table.Cell>{`${formattedDate(startDateTime)} ~ ${formattedDate(endDateTime)}`}</Table.Cell>
             <Table.Cell>{title}</Table.Cell>
@@ -39,6 +27,4 @@ const CalendarTableSection = () => {
       </Table>
     </Section>
   );
-};
-
-export default CalendarTableSection;
+}

apps/member/src/pages/CalendarPage/hooks/useScheduleInfoModal.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+import { useModal } from '@hooks/common/useModal';
+import { formattedDatePeriod } from '@utils/date';
+
+interface Options {
+  startDateTime: string;
+  endDateTime: string;
+  detail: string;
+}
+
+export function useScheduleInfoModal() {
+  const { open } = useModal();
+
+  return useMemo(
+    () => ({
+      open: (options: Options) =>
+        open({
+          title: '📆 일정',
+          content: `일시: ${formattedDatePeriod(options.startDateTime, options.endDateTime)}\n내용: ${options.detail}`,
+        }),
+    }),
+    [open],
+  );
+}

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

@@ -0,0 +1,28 @@
+import { Suspense } from 'react';
+
+import Content from '@components/common/Content/Content';
+import Header from '@components/common/Header/Header';
+
+import CalendarSection from './components/CalendarSection';
+import { StatusSection } from './components/StatusSection';
+import { TableSection } from './components/TableSection';
+
+export default function CalendarPage() {
+  return (
+    <Content>
+      <Header title="일정" />
+
+      <Suspense>
+        <StatusSection />
+      </Suspense>
+
+      <Suspense>
+        <CalendarSection />
+      </Suspense>
+
+      <Suspense>
+        <TableSection />
+      </Suspense>
+    </Content>
+  );
+}

apps/member/src/pages/Routes.tsx

@@ -41,10 +41,10 @@ const LibraryPage = lazy(() => import('@pages/LibraryPage'));
 const LibraryDetailPage = lazy(() => import('@pages/LibraryDetailPage'));
 const MyPage = lazy(() => import('@pages/MyPage'));
 const SupportPage = lazy(() => import('@pages/SupportPage'));
-const CalendarPage = lazy(() => import('@pages/CalendarPage/CalendarPage'));
+const CalendarPage = lazy(() => import('@pages/CalendarPage'));
 const LoginPage = lazy(() => import('@pages/LoginPage'));
-const AuthPage = lazy(() => import('@pages/AuthPage/AuthPage'));
-const BlogPage = lazy(() => import('@pages/BlogPage/BlogPage'));
+const AuthPage = lazy(() => import('@pages/AuthPage'));
+const BlogPage = lazy(() => import('@pages/BlogPage'));
 const ManagePage = lazy(() => import('@pages/ManagePage/ManagePage'));
 
 const router = createBrowserRouter([
@@ -213,11 +213,19 @@ const router = createBrowserRouter([
     children: [
       {
         path: PATH.LOGIN,
-        element: <LoginPage />,
+        element: (
+          <Suspense>
+            <LoginPage />
+          </Suspense>
+        ),
       },
       {
         path: PATH.AUTH,
-        element: <AuthPage />,
+        element: (
+          <Suspense>
+            <AuthPage />
+          </Suspense>
+        ),
       },
     ],
   },