From e795e3343d33217527f7cdefeb970885dffa0bfb Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Thu, 18 Sep 2025 19:43:09 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=95=EC=82=B0=EB=8B=AC=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settlement/ui/calandar-amount-row.tsx     | 14 +++-
 src/entities/settlement/ui/calandar-wrap.tsx  |  3 +-
 src/entities/settlement/ui/calendar-grid.tsx  | 70 +++++++++++++------
 3 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/src/entities/settlement/ui/calandar-amount-row.tsx b/src/entities/settlement/ui/calandar-amount-row.tsx
index b2e2900..1aab143 100644
--- a/src/entities/settlement/ui/calandar-amount-row.tsx
+++ b/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;
   };
diff --git a/src/entities/settlement/ui/calandar-wrap.tsx b/src/entities/settlement/ui/calandar-wrap.tsx
index df1125c..3321233 100644
--- a/src/entities/settlement/ui/calandar-wrap.tsx
+++ b/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">
diff --git a/src/entities/settlement/ui/calendar-grid.tsx b/src/entities/settlement/ui/calendar-grid.tsx
index d1200b1..97b4d6c 100644
--- a/src/entities/settlement/ui/calendar-grid.tsx
+++ b/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>
     </>