정산달력

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

@@ -1,16 +1,16 @@
 import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation';
-import { useEffect, useState } from 'react';
+import { CalendarAmountRow } from './calandar-amount-row';
+import { CalendarSettlementItem } from './calendar-settlement-item'; 
+import { CalendarGrid } from './calendar-grid';
 import { 
   SettlementDays,
   SettlementsCalendarParams,
   SettlementsCalendarResponse,
   SettlementStatus
 } 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');
@@ -24,6 +24,7 @@ export const CalendarWrap = () => {
   const [scheduledDateList, setScheduledDateList] = useState<Array<number>>([]);
   const [completedDateList, setCompletedDateList] = useState<Array<number>>([]);
   
+  const [lastMonth, setLastMonth] = useState<boolean>(false);
 
   const { mutateAsync: settlementsCalendar } = useSettlementsCalendarMutation();
 
@@ -57,6 +58,17 @@ export const CalendarWrap = () => {
         setCompletedList(completedArr);
         setCompletedDateList(completedDateArr);
       }
+    }).finally(() => {
+      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)){
+        setLastMonth(false);
+      }
+      else{
+        setLastMonth(true);
+      }
     });
   };
 
@@ -101,7 +113,7 @@ export const CalendarWrap = () => {
           </button>
           <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
           <button 
-            className="month-btn" 
+            className={ `month-btn ${lastMonth? 'disabled': ''}` }
             aria-label="다음 달"
             onClick={ onClickToMoveMonthNext }
           >

src/shared/ui/assets/css/style.css

@@ -2455,6 +2455,10 @@ div .credit-period {
 }
 
 /* 공지사항 상세 (Figma 1651:3135) */
+.notice-detail {
+    padding-top: 4px;
+}
+
 .notice-detail__title{
     font-size: var(--fs-20);
     font-weight: var(--fw-600);
@@ -2468,6 +2472,12 @@ div .credit-period {
     margin-bottom: 20px
 }
 
+.notice-detail__meta span{
+    display: inline-block;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
 .notice-detail__divider{
     height: 1px;
     background: var(--color-EaEaEa);
@@ -3514,6 +3524,11 @@ span.scheduled {
     justify-content: center;
 }
 
+.calendar-wrap .month-btn.disabled {
+    opacity: 0.2;
+    cursor: not-allowed;
+}
+
 .calendar-wrap .amount-group {
     padding: 16px 0 22px 0;
     border-bottom: 1px solid #eaeaea;
@@ -5447,6 +5462,15 @@ ul.txn-amount-detail li span:last-child {
     background: url('../images/ico_search_16.svg') no-repeat center center;
 }
 
+.notice-search .ic16.reset {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 20px;
+    height: 20px;
+    background: url('../images/ico_input_del.svg') no-repeat center center;
+}
+
 .notice-search input {
     flex: 1;
     height: 40px;