(#58) 스케줄 캘린더 onRender 시 renderDates return 기능 추가

thebbodek · Dec 13, 2023 · f85ece6 · f85ece6
1 parent 285228f
commit f85ece6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
@@ -2,6 +2,7 @@ import { Meta } from "@storybook/react";
 import { useEffect, useState } from "react";
 
 import ScheduleCalendar from "@/core/components/Calendar/ScheduleCalendar";
+import { PeriodDates } from "../DatePickerCalendar/types/DatePickerCalendarProps";
 const meta = {
   title: "core/Calendar/ScheduleCalendar",
   component: ScheduleCalendar,
@@ -16,13 +17,18 @@ export const Default = () => {
     setSelectedDate(date);
   };
 
+  const getCalendarDates = (dates: PeriodDates) => {
+    console.log(dates);
+  };
+
   useEffect(() => {
     console.log(selectedDate);
   }, [selectedDate]);
 
   return (
     <div className = {"w-screen h-[1000px]"}>
       <ScheduleCalendar
+        onRender = {getCalendarDates}
         defaultQuantity = {25}
         schedulesData = {{
           "2023-11-30": {

diff --git a/src/core/components/Calendar/ScheduleCalendar/index.tsx b/src/core/components/Calendar/ScheduleCalendar/index.tsx
@@ -1,16 +1,35 @@
+import { useEffect } from "react";
+
 import { CalendarDayComponent } from "@/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent";
 import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
 import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar";
 import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
 import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
+import { PeriodDates } from "../DatePickerCalendar/types/DatePickerCalendarProps";
 
 const ScheduleCalendar = ({
   defaultQuantity,
   schedulesData,
   onDateClick,
+  onRender,
 }: CalendarComponentProps) => {
   const { models, operations } = useCalendar();
 
+  useEffect(() => {
+    if (models.calendarDates.length <= 0) {
+      return;
+    }
+
+    const calenderDatesEndWeek = models.calendarDates[models.calendarDates.length - 1];
+    const calenderDatesEndWeekEndDay = calenderDatesEndWeek[calenderDatesEndWeek.length - 1];
+    const renderDates: PeriodDates = {
+      startDate: models.calendarDates[0][0]?.dayjs.format("YYYY-MM-DD"),
+      endDate: calenderDatesEndWeekEndDay?.dayjs.format("YYYY-MM-DD"),
+    };
+
+    onRender(renderDates);
+  }, [models.calendarDates]);
+
   return (
     <div className = {"flex flex-col h-full w-full"}>
       <CalendarHeader

diff --git a/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx b/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
@@ -4,7 +4,7 @@ import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalen
 import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
 import Typography from "@/core/components/Typography";
 
-interface CalendarDayComponentProps extends CalendarComponentProps {
+interface CalendarDayComponentProps extends Omit<CalendarComponentProps, "onRender"> {
   calendarDates: CalendarDateDto[][];
 }
 

diff --git a/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts b/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts
@@ -1,3 +1,4 @@
+import { PeriodDates } from "../../DatePickerCalendar/types/DatePickerCalendarProps";
 
 export interface MarkedDatesProps {
   markedDates?: (string | undefined)[];
@@ -12,4 +13,5 @@ export interface CalendarComponentProps {
   schedulesData?: SchedulesDataProps;
   defaultQuantity?: number;
   onDateClick: (date: string) => void;
+  onRender: (renderDates: PeriodDates) => void;
 }