diff --git a/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx b/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx index 8f85b1351..bfc1abc97 100644 --- a/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx +++ b/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx @@ -1,7 +1,9 @@ "use client"; +import { useState } from "react"; import dynamic from "next/dynamic"; +import type { DatesSetArg } from "@fullcalendar/core"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; import dayjs from "dayjs"; @@ -12,25 +14,48 @@ import { LoadingWithAnimation } from "@common/components"; import { useDragHandle } from "../sortable-panel"; -// FullCalendar는 클라이언트 전용이므로 dynamic import const FullCalendar = dynamic(() => import("@fullcalendar/react"), { ssr: false, }); +function getMonthRange(date = dayjs()) { + return { + schdlBgngYmd: date.startOf("month").format("YYYY-MM-DD"), + schdlEndYmd: date.endOf("month").format("YYYY-MM-DD"), + }; +} + export function ScheduleCalendarPanel() { const { dragHandleProps, isDragging } = useDragHandle(); + const [dateRange, setDateRange] = useState(getMonthRange); - // TBD: 초기 날짜 범위 설정 로직 - const today = dayjs(); - const startOfMonth = today.startOf("month").format("YYYY-MM-DD"); - const endOfMonth = today.endOf("month").format("YYYY-MM-DD"); - - const { data, isLoading } = useSchedules({ + const { data, isLoading, isFetching } = useSchedules({ siteId: SITE_ID, - schdlBgngYmd: startOfMonth, - schdlEndYmd: endOfMonth, + schdlBgngYmd: dateRange.schdlBgngYmd, + schdlEndYmd: dateRange.schdlEndYmd, }); + function handleDatesSet(dateInfo: DatesSetArg) { + const nextRange = { + schdlBgngYmd: dayjs(dateInfo.view.currentStart).format( + "YYYY-MM-DD", + ), + schdlEndYmd: dayjs(dateInfo.view.currentEnd) + .subtract(1, "day") + .format("YYYY-MM-DD"), + }; + + setDateRange((prev) => { + if ( + prev.schdlBgngYmd === nextRange.schdlBgngYmd && + prev.schdlEndYmd === nextRange.schdlEndYmd + ) { + return prev; + } + return nextRange; + }); + } + return (

일정관리

-
- {isLoading && ( -
+
+
+ ({ + id: schedule.schdlSn.toString(), + title: schedule.schdlTtl, + start: schedule.schdlBgngDt, + end: schedule.schdlEndDt, + allDay: true, + }))} + height="100%" + /> +
+ {(isLoading || isFetching) && ( +
)} - {data && ( -
- ({ - id: schedule.schdlSn.toString(), - title: schedule.schdlTtl, - start: schedule.schdlBgngDt, - end: schedule.schdlEndDt, - // TBD: allDay 판단 기준 (1439분 이상?) - allDay: true, - }))} - height="100%" - /> -
- )}
); diff --git a/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx index 6a5e3602d..05a0fe3ff 100644 --- a/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx +++ b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx @@ -83,36 +83,59 @@ export function ScheduleInfoPanel({ params }: ScheduleInfoPanelProps) {
- - {data.inptSeCd}차 입력기간 - -

- {dayjs(data.inptBgngYmd).format( - "YYYY.MM.DD", - )}{" "} - ~{" "} - {dayjs(data.inptEndYmd).format( - "YYYY.MM.DD", - )} -

+ {data.inptSeCd && + data.inptBgngYmd && + data.inptEndYmd ? ( + <> + + {data.inptSeCd}차 입력기간 + +

+ {dayjs(data.inptBgngYmd).format( + "YYYY.MM.DD", + )}{" "} + ~{" "} + {dayjs(data.inptEndYmd).format( + "YYYY.MM.DD", + )} +

+ + ) : ( +

+ 등록된 입력 일정이 없습니다. +

+ )}
- - {data.vrfcSeCd}차 검증기간 - -

- {dayjs(data.vrfcBgngYmd).format( - "YYYY.MM.DD", - )}{" "} - ~{" "} - {dayjs(data.vrfcEndYmd).format( - "YYYY.MM.DD", - )} -

+ {data.vrfcSeCd && + data.vrfcBgngYmd && + data.vrfcEndYmd ? ( + <> + + {data.vrfcSeCd}차 검증기간 + +

+ {dayjs(data.vrfcBgngYmd).format( + "YYYY.MM.DD", + )}{" "} + ~{" "} + {dayjs(data.vrfcEndYmd).format( + "YYYY.MM.DD", + )} +

+ + ) : ( +

+ 등록된 검증 일정이 없습니다. +

+ )}