정산달력

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

@@ -10,6 +10,7 @@ import {
 } from '../model/types';
 import { CalendarAmountRow } from './calandar-amount-row';
 import { CalendarSettlementItem } from './calendar-settlement-item'; 
+import { CalendarGrid } from './calendar-grid';
 
 export const CalendarWrap = () => {
   moment.locale('ko');
@@ -50,13 +51,23 @@ export const CalendarWrap = () => {
     });
   };
 
-  const makeCalendarSettlementDate = () => {
+  const onClickToMoveMonthPrev = () => {
-
+    let newYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYY-MM');
+    setYearMonth(newYearMonth);
   };
-
+  const onClickToMoveMonthNext = () => {
+    let maxYearMonth = moment().format('YYYY-MM');
+    let maxYearMonthValue = moment(maxYearMonth).format('YYYYMM');
+    let newYearMonth = moment(yearMonth).add(1, 'month').format('YYYY-MM');
+    let newYearMonthValue = moment(newYearMonth).format('YYYYMM');
+    if(parseInt(newYearMonthValue) <= parseInt(maxYearMonthValue)){
+      setYearMonth(newYearMonth);
+    }
+  };
+  
   useEffect(() => {
     callCalendar();
-  }, []);
+  }, [yearMonth]);
   return (
     <>
       <div className="calendar-wrap pt-30">
@@ -72,6 +83,7 @@ export const CalendarWrap = () => {
           <button 
             className="month-btn" 
             aria-label="이전 달"
+            onClick={ onClickToMoveMonthPrev }
           >
             <img 
               src={ IMAGE_ROOT + '/ico_date_prev.svg' }
@@ -82,6 +94,7 @@ export const CalendarWrap = () => {
           <button 
             className="month-btn" 
             aria-label="다음 달"
+            onClick={ onClickToMoveMonthNext }
           >
             <img 
               src={ IMAGE_ROOT + '/ico_date_next.svg' }
@@ -112,54 +125,10 @@ export const CalendarWrap = () => {
           </div>
         </div>
 
-        <div className="calendar-grid">
+        <CalendarGrid
-          <div className="weekdays">
+          yearMonth={ yearMonth }
-            <div className="weekday sun">일</div>
+          settlementDays={ [...scheduledList, ...completedList] }
-            <div className="weekday">월</div>
+        ></CalendarGrid>
-            <div className="weekday">화</div>
-            <div className="weekday">수</div>
-            <div className="weekday">목</div>
-            <div className="weekday">금</div>
-            <div className="weekday sat">토</div>
-          </div>
-          <div className="days">
-            <div className="day other">29</div>
-            <div className="day other">30</div>
-            <div className="day complete">1</div>
-            <div className="day">2</div>
-            <div className="day">3</div>
-            <div className="day">4</div>
-            <div className="day">5</div>
-            <div className="day">6</div>
-            <div className="day complete">7</div>
-            <div className="day">8</div>
-            <div className="day">9</div>
-            <div className="day complete">10</div>
-            <div className="day">11</div>
-            <div className="day">12</div>
-            <div className="day">13</div>
-            <div className="day">14</div>
-            <div className="day">15</div>
-            <div className="day">16</div>
-            <div className="day complete">17</div>
-            <div className="day complete">18</div>
-            <div className="day">19</div>
-            <div className="day">20</div>
-            <div className="day">21</div>
-            <div className="day">22</div>
-            <div className="day complete">23</div>
-            <div className="day">24</div>
-            <div className="day">25</div>
-            <div className="day">26</div>
-            <div className="day">27</div>
-            <div className="day scheduled">28</div>
-            <div className="day scheduled">29</div>
-            <div className="day">30</div>
-            <div className="day">31</div>
-            <div className="day other">1</div>
-            <div className="day other">2</div>
-          </div>
-        </div>
 
         <div className="settlement-list">
         { (!!scheduledList && scheduledList.length > 0) &&

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

@@ -0,0 +1,85 @@
+import moment from 'moment';
+import { SettlementDays, SettlementStatus } from '../model/types';
+
+export interface CalendarGridProps {
+  yearMonth: string;
+  settlementDays: Array<SettlementDays | undefined>
+};
+
+export const CalendarGrid = ({
+  yearMonth,
+  settlementDays
+}: 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;
+      }
+    }
+    return rs;
+  };
+
+  const makeCalendarDate = () => {
+    let startDay = moment(yearMonth).startOf('month').day();
+    let lastDate = moment(yearMonth).endOf('month').date();
+    let lastYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYY-MM');
+    let lastYearMonthLastDate = moment(lastYearMonth).endOf('month').date();
+
+    let lastOthersCnt = (7 - ((startDay + lastDate) % 7));
+
+    let rs = [];
+    for(let i=0;i<startDay;i++){
+      rs.push(
+        <div className="day other">{ (lastYearMonthLastDate - startDay + i + 1) }</div>
+      );
+    }
+    for(let i=1;i<=lastDate;i++){
+      let ck = checkData(i);
+      if(ck === SettlementStatus.SCHEDULED){
+        rs.push(
+          <div className="day scheduled">{ i }</div>
+        );
+      }
+      else if(ck === SettlementStatus.COMPLETED){
+        rs.push(
+          <div className="day complete">{ i }</div>
+        );
+      }
+      else{
+        rs.push(
+          <div className="day">{ i }</div>
+        );
+      }
+    }
+    for(let i=0;i<lastOthersCnt;i++){
+      rs.push(
+        <div className="day other">{ (i + 1) }</div>
+      );
+    }
+    
+    return rs;
+  }
+
+  return (
+    <>
+      <div className="calendar-grid">
+        <div className="weekdays">
+          <div className="weekday sun">일</div>
+          <div className="weekday">월</div>
+          <div className="weekday">화</div>
+          <div className="weekday">수</div>
+          <div className="weekday">목</div>
+          <div className="weekday">금</div>
+          <div className="weekday sat">토</div>
+        </div>
+        <div className="days">
+        { makeCalendarDate() }
+        </div>
+      </div>
+    </>
+  )
+};

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

@@ -9,14 +9,6 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { SortOptionsBox } from '@/entities/settlement/ui/sort-options-box';
 import { useSettlementsHistoryMutation } from '../api/use-settlements-history-mutation';
 import { useSettlementsHistorySummaryMutation } from '../api/use-settlements-history-summary-mutation';
-import { 
-  SortByKeys,
-  SettlementPeriodType,
-  SettlementPaymentMethod,
-  SettlementsHistoryContent,
-  ListDateGroupProps,
-  SettlementsTransactionListContent
-} from '@/entities/settlement/model/types';
 import { useSettlementsTransactionSummaryMutation } from '../api/use-settlements-transaction-summary-mutation';
 import { useSettlementsTransactionListMutation } from '../api/use-settlements-transaction-list-mutation';
 import { ListSummaryExtendSettlement } from './list-summary-extend-settlement';
@@ -25,6 +17,14 @@ import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { ListFilter } from './filter/list-filter';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
+import { 
+  SortByKeys,
+  SettlementPeriodType,
+  SettlementPaymentMethod,
+  SettlementsHistoryContent,
+  ListDateGroupProps,
+  SettlementsTransactionListContent
+} from '@/entities/settlement/model/types';
 
 export interface ListWrapProps {
   startDateFromCalendar?: string;