- 부가서비스 공통 ListDateGroupProps,ListItemProps 추가

src/entities/additional-service/ui/list-item.tsx

@@ -0,0 +1,198 @@
+import { NumericFormat } from 'react-number-format';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { ListItemProps, AdditionalServiceCategory } from '../model/types';
+import moment from 'moment';
+
+export const ListItem = ({
+  additionalServiceCategory,
+  tid, mid, stateDate, stateCode, stateName,
+  installmentMonth, serviceCode, serviceName,
+  serviceDetailName, goodsAmount,
+
+  requestId, requestDate, bank, accountNumber,
+  accountHolder, processResult,
+
+  transactionId, customerName, status, channel,
+  amount, sendDate, transactionDate
+}: 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 = () => {
+    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+      navigate(PATHS.additionalService.keyInPayment, {
+        state: {
+          tid: tid,
+          serviceCode: serviceCode
+        }
+      });
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+      navigate(PATHS.additionalService.accountHolderSearch.detail, {
+        state: {
+          requestId: requestId
+        }
+      });
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+      navigate(PATHS.additionalService.linkPayment.detail, {
+        state: {
+          transactionId: transactionId
+        }
+      });
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+      navigate(PATHS.additionalService.linkPayment.detail, {
+        state: {
+          transactionId: transactionId
+        }
+      });
+    }
+    else{
+      alert('additionalServiceCategory가 존재하지 않습니다.');
+    }
+  };
+
+  const getTime = () => {
+    let timeStr = '';
+    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+      let time = stateDate?.substring(8, 12);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+      timeStr = moment(requestDate).format('HH:mm');
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+      timeStr = moment(transactionDate).format('HH:mm');
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+      timeStr = moment(sendDate).format('HH:mm');
+    }
+    return timeStr
+  };
+
+  const getTitle = () => {
+    let str = '';
+    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+      str = `${serviceName}(${serviceDetailName})`;
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+      str = `${accountHolder}(${accountNumber})`
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+      str = `${customerName}(${transactionId})`
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+      str = `${customerName}(${transactionId})`
+    }
+    return str;
+  };
+
+  const getDetail = () => {
+    let rs = [];
+    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ stateName }</span>
+          <span className="separator">|</span>
+          <span>{ mid }</span>
+          {
+            (!!installmentMonth && parseInt(installmentMonth) > 1) &&
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
+              </>
+          }
+        </div>
+      );
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ bank }</span>
+          <span className="separator">|</span>
+          <span>{ processResult }</span>
+        </div>
+      );
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ status }</span>
+          <span className="separator">|</span>
+          <span>{ channel }</span>
+        </div>
+      );
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ status }</span>
+          <span className="separator">|</span>
+          <span>{ channel }</span>
+        </div>
+      );
+    }
+    return rs;
+  };
+
+  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">{ getTitle() }</div>
+          { getDetail() }
+        </div>
+        <div className="transaction-amount">
+          <NumericFormat
+            value={ goodsAmount || amount }
+            thousandSeparator
+            displayType="text"
+            suffix={ '원' }
+          ></NumericFormat>
+        </div>
+      </div>
+    </>
+  );
+};