정산 달력

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

@@ -0,0 +1,40 @@
+import { NumericFormat } from 'react-number-format';
+import { SettlementStatus } from '../model/types';
+
+export interface CalendarAmountRowProps {
+  amount: number;
+  settlementStatus: SettlementStatus;
+};
+
+export const CalendarAmountRow = ({
+  amount,
+  settlementStatus
+}: CalendarAmountRowProps) => {
+
+  const makeTitle = () => {
+    let rs = [];
+    if(settlementStatus === SettlementStatus.SCHEDULED){
+      rs.push(<span className="scheduled">예정</span>)
+    }
+    else if(settlementStatus === SettlementStatus.COMPLETED){
+      rs.push(<span className="complete">완료</span>)
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="amount-row">
+        <div className="amount-label">정산 { makeTitle() } 금액</div>
+        <div className="amount-value">
+          <NumericFormat
+            value={ amount } 
+            thousandSeparator
+            displayType="text"
+            suffix='원'
+          ></NumericFormat>
+        </div>
+      </div>
+    </>
+  );
+};