From c5db9d1def1f46162a3d796ec034437926bf989a Mon Sep 17 00:00:00 2001 From: bicochan Date: Wed, 28 May 2025 11:03:56 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=BC=EC=A0=95=20=EC=A3=BC=EA=B0=84?= =?UTF-8?q?=20=EB=B7=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/package.json | 1 + .../src/pages/schedule/ui/schedule-page.tsx | 87 ++++++++++--------- pnpm-lock.yaml | 12 +++ 3 files changed, 58 insertions(+), 42 deletions(-) diff --git a/apps/cs/package.json b/apps/cs/package.json index ee45de4a7..060433850 100644 --- a/apps/cs/package.json +++ b/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", diff --git a/apps/cs/src/pages/schedule/ui/schedule-page.tsx b/apps/cs/src/pages/schedule/ui/schedule-page.tsx index 22df69363..eba260f47 100644 --- a/apps/cs/src/pages/schedule/ui/schedule-page.tsx +++ b/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({ - 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() {
{ + 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: "주", }} />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index be32e6a26..9b00d0360 100644 --- a/pnpm-lock.yaml +++ b/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: