정산달력

src/entities/settlement/ui/calandar-amount-row.tsx

@@ -14,10 +14,20 @@ export const CalendarAmountRow = ({
   const makeTitle = () => {
     let rs = [];
     if(settlementStatus === SettlementStatus.SCHEDULED){
-      rs.push(<span className="scheduled">예정</span>)
+      rs.push(
+        <span 
+          key='amount-label-scheduled'
+          className="scheduled"
+        >예정</span>
+      );
     }
     else if(settlementStatus === SettlementStatus.COMPLETED){
-      rs.push(<span className="complete">완료</span>)
+      rs.push(
+        <span 
+          key='amount-label-complete'
+          className="complete"
+        >완료</span>
+      );
     }
     return rs;
   };

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

@@ -127,7 +127,8 @@ export const CalendarWrap = () => {
 
         <CalendarGrid
           yearMonth={ yearMonth }
-          settlementDays={ [...scheduledList, ...completedList] }
+          scheduledList={ scheduledList }
+          completedList={ completedList }
         ></CalendarGrid>
 
         <div className="settlement-list">

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

@@ -1,26 +1,38 @@
 import moment from 'moment';
 import { SettlementDays, SettlementStatus } from '../model/types';
+import { useEffect, useState } from 'react';
 
 export interface CalendarGridProps {
   yearMonth: string;
-  settlementDays: Array<SettlementDays | undefined>
+  scheduledList: Array<SettlementDays | undefined>;
+  completedList: Array<SettlementDays | undefined>;
 };
 
 export const CalendarGrid = ({
   yearMonth,
-  settlementDays
+  scheduledList,
+  completedList,
 }: CalendarGridProps) => {
 
-  const checkData = (val: number) => {
-    let rs: SettlementStatus | undefined;
-    for(let i=0;i<settlementDays.length;i++){
-      let date = moment(settlementDays[i]?.settlementDate).date();
-      if(val === date){
-        rs = settlementDays[i]?.settlementStatus;
-        break;
-      }
+  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);
     }
-    return rs;
+    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 = () => {
@@ -34,36 +46,54 @@ export const CalendarGrid = ({
     let rs = [];
     for(let i=0;i<startDay;i++){
       rs.push(
-        <div className="day other">{ (lastYearMonthLastDate - startDay + i + 1) }</div>
+        <div 
+          key={ `key-day-item=other-prev-${i}` }
+          className="day other"
+        >{ (lastYearMonthLastDate - startDay + i + 1) }</div>
       );
     }
     for(let i=1;i<=lastDate;i++){
-      let ck = checkData(i);
-      if(ck === SettlementStatus.SCHEDULED){
+      if(scheduledDateList?.includes(i)){
         rs.push(
-          <div className="day scheduled">{ i }</div>
+          <div 
+            key={ `key-day-item-${i}` }
+            className="day scheduled"
+          >{ i }</div>
         );
       }
-      else if(ck === SettlementStatus.COMPLETED){
+      else if(completedDateList?.includes(i)){
         rs.push(
-          <div className="day complete">{ i }</div>
+          <div 
+            key={ `key-day-item-${i}` }
+            className="day complete"
+          >{ i }</div>
         );
       }
       else{
         rs.push(
-          <div className="day">{ i }</div>
+          <div 
+            key={ `key-day-item-${i}` }
+            className="day"
+          >{ i }</div>
         );
       }
     }
     for(let i=0;i<lastOthersCnt;i++){
       rs.push(
-        <div className="day other">{ (i + 1) }</div>
+        <div 
+          key={ `key-day-item-other-next-${i}` }
+          className="day other"
+        >{ (i + 1) }</div>
       );
     }
     
     return rs;
   }
 
+  useEffect(() => {
+    assembleDate();
+  }, [yearMonth])
+
   return (
     <>
       <div className="calendar-grid">
@@ -77,7 +107,7 @@ export const CalendarGrid = ({
           <div className="weekday sat">토</div>
         </div>
         <div className="days">
-        { makeCalendarDate() }
+        { !!assembled && makeCalendarDate() }
         </div>
       </div>
     </>