feat: 일정 주간 뷰 추가

apps/cs/package.json

@@ -18,6 +18,7 @@
     "@fullcalendar/daygrid": "^6.1.17",
     "@fullcalendar/interaction": "^6.1.17",
     "@fullcalendar/react": "^6.1.17",
+    "@fullcalendar/timegrid": "^6.1.17",
     "@hookform/resolvers": "^4.1.3",
     "@minoru/react-dnd-treeview": "3.5.1-alpha.1",
     "@radix-ui/react-icons": "^1.3.2",

apps/cs/src/pages/schedule/ui/schedule-page.tsx

@@ -1,51 +1,20 @@
 "use client";
 
 import dayjs from "dayjs";
-import { useState } from "react";
 import { useRouter } from "next/navigation";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import type { EventClickArg } from "@fullcalendar/core";
 import interactionPlugin, {
   type DateClickArg,
 } from "@fullcalendar/interaction";
-import type { EventClickArg } from "@fullcalendar/core";
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT, SITE_ID } from "@/shared/config";
+import { SITE_ID } from "@/shared/config";
 import { ScheduleApi } from "../api/schedule-service";
 import { calculateEventDuration } from "../lib/utils";
-import type { ScheduleParams } from "../model/schedule-interface";
 
 function SchedulePage() {
   const router = useRouter();
-  const [scheduleParams, setScheduleParams] = useState<ScheduleParams>({
-    siteId: SITE_ID,
-    schdlBgngYmd: "",
-    schdlEndYmd: "",
-    useYn: "Y",
-  });
-
-  const { data: eventData } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SCHEDULES, scheduleParams],
-    queryFn: () => ScheduleApi.getSchedules(scheduleParams),
-    select: (data) => {
-      return data.map((item) => {
-        const minuteDiff = calculateEventDuration(
-          item.schdlBgngDt,
-          item.schdlEndDt,
-        );
-
-        return {
-          id: item.schdlSn.toString(),
-          title: item.schdlTtl,
-          start: item.schdlBgngDt,
-          end: item.schdlEndDt,
-          allDay: minuteDiff >= 1439,
-          classNames: ["cursor-pointer"],
-        };
-      });
-    },
-    enabled: !!scheduleParams.schdlBgngYmd && !!scheduleParams.schdlEndYmd,
-  });
 
   const handleEventClick = (info: EventClickArg) => {
     router.push(`/schedule/register/${info.event.id}`);
@@ -59,18 +28,52 @@ function SchedulePage() {
     <div className="card card-border">
       <div className="p-5">
         <FullCalendar
-          plugins={[dayGridPlugin, interactionPlugin]}
-          events={eventData}
+          plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
+          eventSources={[
+            async (fetchInfo, successCallback, failureCallback) => {
+              const params = {
+                siteId: SITE_ID,
+                schdlBgngYmd: dayjs(fetchInfo.startStr).format("YYYY-MM-DD"),
+                schdlEndYmd: dayjs(fetchInfo.endStr).format("YYYY-MM-DD"),
+                useYn: "Y",
+              };
+
+              try {
+                const response = await ScheduleApi.getSchedules(params);
+                const events = response.map((item) => {
+                  const minuteDiff = calculateEventDuration(
+                    item.schdlBgngDt,
+                    item.schdlEndDt,
+                  );
+
+                  return {
+                    id: item.schdlSn.toString(),
+                    title: item.schdlTtl,
+                    start: item.schdlBgngDt,
+                    end: item.schdlEndDt,
+                    allDay: minuteDiff >= 1439,
+                    classNames: ["cursor-pointer"],
+                  };
+                });
+
+                successCallback(events);
+              } catch (error) {
+                failureCallback(error as Error);
+              }
+            },
+          ]}
           locale="ko"
           dayCellClassNames="cursor-pointer hover:bg-accent"
           eventClick={handleEventClick}
           dateClick={handleDateClick}
-          datesSet={(dateInfo) => {
-            setScheduleParams({
-              ...scheduleParams,
-              schdlBgngYmd: dayjs(dateInfo.startStr).format("YYYY-MM-DD"),
-              schdlEndYmd: dayjs(dateInfo.endStr).format("YYYY-MM-DD"),
-            });
+          headerToolbar={{
+            left: "prev,next",
+            center: "title",
+            right: "dayGridMonth,timeGridWeek",
+          }}
+          buttonText={{
+            month: "월",
+            week: "주",
           }}
         />
       </div>

pnpm-lock.yaml

@@ -190,6 +190,9 @@ importers:
       '@fullcalendar/react':
         specifier: ^6.1.17
         version: 6.1.17(@fullcalendar/core@6.1.17)(react-dom@18.3.1)(react@18.3.1)
+      '@fullcalendar/timegrid':
+        specifier: ^6.1.17
+        version: 6.1.17(@fullcalendar/core@6.1.17)
       '@hookform/resolvers':
         specifier: ^4.1.3
         version: 4.1.3(react-hook-form@7.54.2)
@@ -1808,6 +1811,15 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@fullcalendar/timegrid@6.1.17(@fullcalendar/core@6.1.17):
+    resolution: {integrity: sha512-K4PlA3L3lclLOs3IX8cvddeiJI9ZVMD7RA9IqaWwbvac771971foc9tFze9YY+Pqesf6S+vhS2dWtEVlERaGlQ==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+      '@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
+    dev: false
+
   /@hookform/resolvers@4.1.3(react-hook-form@7.54.2):
     resolution: {integrity: sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ==}
     peerDependencies: