정산달력

src/entities/settlement/ui/calandar-wrap.tsx

@@ -21,6 +21,9 @@ export const CalendarWrap = () => {
   const [totalScheduledAmount, setTotalScheduledAmount] = useState<number>(0);
   const [scheduledList, setScheduledList] = useState<Array<SettlementDays | undefined>>([]);
   const [completedList, setCompletedList] = useState<Array<SettlementDays | undefined>>([]);
+  const [scheduledDateList, setScheduledDateList] = useState<Array<number>>([]);
+  const [completedDateList, setCompletedDateList] = useState<Array<number>>([]);
+  
 
   const { mutateAsync: settlementsCalendar } = useSettlementsCalendarMutation();
 
@@ -30,23 +33,29 @@ export const CalendarWrap = () => {
       yearMonth: yearMonth
     };
     settlementsCalendar(params).then((rs: SettlementsCalendarResponse) => {
-      console.log(rs);
       setTotalCompletedAmount(rs.totalCompletedAmount);
       setTotalScheduledAmount(rs.totalScheduledAmount);
       setYearMonth(rs.yearMonth);
       let scheduleArr = [];
+      let scheduleDateArr = [];
       let completedArr = [];
+      let completedDateArr = [];
       if(!!rs.settlementDays && rs.settlementDays.length > 0){
         for(let i=0;i<rs.settlementDays.length;i++){
+          let date = moment(rs.settlementDays[i]?.settlementDate).date();
           if(rs.settlementDays[i]?.settlementStatus === SettlementStatus.SCHEDULED){
             scheduleArr.push(rs.settlementDays[i]);
+            scheduleDateArr.push(date);
           }
           else if(rs.settlementDays[i]?.settlementStatus === SettlementStatus.COMPLETED){
             completedArr.push(rs.settlementDays[i]);
+            completedDateArr.push(date);
           }
         }
         setScheduledList(scheduleArr);
+        setScheduledDateList(scheduleDateArr);
         setCompletedList(completedArr);
+        setCompletedDateList(completedDateArr);
       }
     });
   };
@@ -127,8 +136,8 @@ export const CalendarWrap = () => {
 
         <CalendarGrid
           yearMonth={ yearMonth }
-          scheduledList={ scheduledList }
+          scheduledDateList={ scheduledDateList }
-          completedList={ completedList }
+          completedDateList={ completedDateList }
         ></CalendarGrid>
 
         <div className="settlement-list">

src/entities/settlement/ui/calendar-grid.tsx

@@ -4,37 +4,16 @@ import { useEffect, useState } from 'react';
 
 export interface CalendarGridProps {
   yearMonth: string;
-  scheduledList: Array<SettlementDays | undefined>;
+  scheduledDateList: Array<number>;
-  completedList: Array<SettlementDays | undefined>;
+  completedDateList: Array<number>;
 };
 
 export const CalendarGrid = ({
   yearMonth,
-  scheduledList,
+  scheduledDateList,
-  completedList,
+  completedDateList
 }: CalendarGridProps) => {
-
+  
-  const [scheduledDateList, setScheduledDateList] = useState<Array<number>>();
-  const [completedDateList, setCompletedDateList] = useState<Array<number>>();
-  const [assembled, setAssembled] = useState<boolean>(false);
-
-  const assembleDate = () => {
-    let rsScheduledDate = [];
-    let rsCompletedList = [];
-    for(let i=0;i<scheduledList.length;i++){
-      let date = moment(scheduledList[i]?.settlementDate).date();
-      rsScheduledDate.push(date);
-    }
-    for(let i=0;i<completedList.length;i++){
-      let date = moment(completedList[i]?.settlementDate).date();
-      rsCompletedList.push(date);
-    }
-    setScheduledDateList(rsScheduledDate);
-    setCompletedDateList(rsCompletedList);
-    
-    setAssembled(true);
-  };
-
   const makeCalendarDate = () => {
     let startDay = moment(yearMonth).startOf('month').day();
     let lastDate = moment(yearMonth).endOf('month').date();
@@ -90,10 +69,6 @@ export const CalendarGrid = ({
     return rs;
   }
 
-  useEffect(() => {
-    assembleDate();
-  }, [yearMonth])
-
   return (
     <>
       <div className="calendar-grid">
@@ -107,7 +82,7 @@ export const CalendarGrid = ({
           <div className="weekday sat">토</div>
         </div>
         <div className="days">
-        { !!assembled && makeCalendarDate() }
+        {  makeCalendarDate() }
         </div>
       </div>
     </>