정산 달력

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

@@ -0,0 +1,81 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { SettlementDays, SettlementStatus } from '../model/types';
+
+export interface CalendarSettlementItemProps {
+  list: Array<SettlementDays | undefined>;
+  settlementStatus: SettlementStatus;
+};
+
+export const CalendarSettlementItem = ({
+  list,
+  settlementStatus
+}: CalendarSettlementItemProps) => {
+  const { navigate } = useNavigate();
+
+  const getAmount = (
+    scheduledAmount: number | undefined, 
+    completedAmount: number | undefined
+  ) => {
+    let amount = 0;
+    if(settlementStatus === SettlementStatus.SCHEDULED){
+      amount = scheduledAmount || 0;
+    }
+    else if(settlementStatus === SettlementStatus.COMPLETED){
+      amount = completedAmount || 0;
+    }
+    return amount;
+  };
+
+  const getClassName = () => {
+    let className = '';
+    if(settlementStatus === SettlementStatus.SCHEDULED){
+      className = 'scheduled';
+    }
+    else if(settlementStatus === SettlementStatus.COMPLETED){
+      className = 'complete';
+    }
+    return className;
+  };
+
+  const onClickToMoveList = (settlementDate?: string) => {
+    if(!!settlementDate){
+      navigate(PATHS.settlement.list, {
+        state: {
+          startDate: settlementDate,
+          endDate: settlementDate
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      { list.map((value, index) => (
+        <div 
+          key={ `settlement-item-${index}` }
+          className="settlement-item"
+          onClick={ () => onClickToMoveList(value?.settlementDate) }
+        >
+          <div className={ `settlement-tag ${getClassName()}` }>{ value?.settlementStatus }</div>
+          <div className="settlement-date">
+            { moment(value?.settlementDate).format('MM.DD(ddd)') }
+          </div>
+          <div className="settlement-amount">
+            <NumericFormat
+              value={ getAmount(value?.scheduledAmount, value?.completedAmount) } 
+              thousandSeparator
+              displayType="text"
+              suffix='원'
+            ></NumericFormat>
+          </div>
+        </div>
+        ))
+      }
+
+      
+    </>
+  )
+};