(#58) 스케줄 캘린더 원아 기본 수량 props 추가

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

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
@@ -23,6 +23,7 @@ export const Default = () => {
   return (
     <div className = {"w-screen h-[1000px]"}>
       <ScheduleCalendar
+        defaultQuantity = {25}
         schedulesData = {{
           "2023-11-30": {
             quantity: 10,

diff --git a/src/core/components/Calendar/ScheduleCalendar/index.tsx b/src/core/components/Calendar/ScheduleCalendar/index.tsx
@@ -5,6 +5,7 @@ import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarH
 import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
 
 const ScheduleCalendar = ({
+  defaultQuantity,
   schedulesData,
   onDateClick,
 }: CalendarComponentProps) => {
@@ -19,6 +20,7 @@ const ScheduleCalendar = ({
       />
       <CalendarWeekDayComponent />
       <CalendarDayComponent
+        defaultQuantity = {defaultQuantity}
         schedulesData = {schedulesData}
         calendarDates = {models.calendarDates}
         onDateClick = {onDateClick}

diff --git a/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx b/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
@@ -9,6 +9,7 @@ interface CalendarDayComponentProps extends CalendarComponentProps {
 }
 
 export const CalendarDayComponent = ({
+  defaultQuantity,
   schedulesData,
   calendarDates,
   onDateClick,
@@ -21,16 +22,21 @@ export const CalendarDayComponent = ({
           className = {"grid grid-cols-7 min-w-full w-full flex-1"}
         >
           {calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
+            const currentDate: string = calendarDate.dayjs.format("YYYY-MM-DD");
+            const currentSchedule = schedulesData && Object.keys(schedulesData).find(date => date === currentDate);
+            let quantity = defaultQuantity;
+
+            if(currentSchedule) {
+              quantity = schedulesData![currentSchedule].quantity;
+            }
+
             return (
               <button
                 key = {index}
                 type = "button"
                 disabled = {!calendarDate.isThisMonth}
                 className = "flex-v-stack items-center h-full text-center"
-                onClick = {(): void => {
-                  const currentDate: string = calendarDate.dayjs.format("YYYY-MM-DD");
-                  onDateClick(currentDate);
-                }}
+                onClick = {(): void => onDateClick(currentDate)}
               >
                 <div
                   className = {clsx("relative flex justify-center items-center h-8",
@@ -45,15 +51,14 @@ export const CalendarDayComponent = ({
                     theme = "body-01-bold"
                     className = "text-inherit"
                   />
-                  {schedulesData && Object.keys(schedulesData).map((scheduleDate, index) => (
-                    scheduleDate === calendarDate.dayjs.format("YYYY-MM-DD") &&
+                  {quantity &&
                     <Typography
                       key = {index}
-                      text = {`(${schedulesData?.[scheduleDate].quantity})`}
+                      text = {`(${quantity})`}
                       className = "absolute top-[3px] end-0 translate-x-[calc(100%+0.625rem)]"
-                      color = {`${!calendarDate.isThisMonth ? "gray-03" : "primary-03"}`}
+                      color = {`${!calendarDate.isThisMonth ? "gray-03" : quantity === defaultQuantity ? "gray-06" : "primary-03"}`}
                     />
-                  ))}
+                  }
                 </div>
                 {schedulesData && Object.keys(schedulesData).map(markedDate => (
                   markedDate === calendarDate.dayjs.format("YYYY-MM-DD") &&

diff --git a/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts b/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts
@@ -10,5 +10,6 @@ export interface SchedulesDataProps {
 
 export interface CalendarComponentProps {
   schedulesData?: SchedulesDataProps;
+  defaultQuantity?: number;
   onDateClick: (date: string) => void;
 }