첫 커밋

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

@@ -0,0 +1,99 @@
+import { NumericFormat } from 'react-number-format';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { ListItemProps } from '../model/types';
+
+export const ListItem = ({
+  tid,
+  mid,
+  stateDate,
+  stateCode,
+  stateName,
+  installmentMonth,
+  serviceCode,
+  serviceName,
+  serviceDetailName,
+  goodsAmount
+}: ListItemProps) => {
+  const { navigate } = useNavigate();
+  const getItemClass = () => {
+    let rs = '';
+    if(stateCode === '0'){
+      rs = '';
+    }
+    else if(stateCode === '1'){
+      rs = 'approved';
+    }
+    else if(stateCode === '2'){
+      rs = 'refund';
+    }
+    return rs;
+  };
+
+  const getDotClass = (str?: string) => {
+    let rs = '';
+    if(stateCode === '0'){
+      rs = '';
+    }
+    else if(stateCode === '1'){
+      rs = 'blue';
+    }
+    else if(stateCode === '2'){
+      rs = 'gray';
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.settlement.detail + tid, {
+      state: {
+        tid: tid
+      }
+    });
+  };
+  
+  const getTime = () => {
+    let time = stateDate?.substring(8, 12);
+    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    return timeStr;
+  };
+
+  return (
+    <>
+      <div 
+        className={ `transaction-item ${getItemClass()}` }
+        onClick={ () => onClickToNavigate() }
+      >
+        <div className="transaction-status">
+          <div className={ `status-dot ${getDotClass()}`}></div>
+        </div>
+        <div className="transaction-content">
+          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
+          <div className="transaction-details">
+            <span>{ stateName }</span>
+            <span className="separator">|</span>
+            <span>{ getTime() }</span>
+            <span className="separator">|</span>
+            <span>{ mid }</span>
+            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
+              </>
+            }
+          </div>
+        </div>
+        <div className="transaction-amount">
+          { 
+            <NumericFormat
+              value={ goodsAmount } 
+              thousandSeparator
+              displayType="text"
+              suffix={ '원' }
+            ></NumericFormat> 
+          }
+        </div>
+      </div>
+    </>
+  );
+};