- 부가서비스: KeyIn결제 목업 API 연결

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

@@ -6,9 +6,7 @@ import moment from 'moment';
 
 export const ListItem = ({
   additionalServiceCategory,
-  tid, mid, stateDate, stateCode, stateName,
-  installmentMonth, serviceCode, serviceName,
-  serviceDetailName, goodsAmount,
+  tid, paymentDate, paymentStatus,
 
   requestId, requestDate, bank, accountNumber,
   accountHolder, processResult,
@@ -19,13 +17,16 @@ export const ListItem = ({
   const { navigate } = useNavigate();
   const getItemClass = () => {
     let rs = '';
-    if(stateCode === '0'){
+    if (paymentStatus === '') {
       rs = '';
     }
-    else if(stateCode === '1'){
+    else if (paymentStatus === "APPROVAL") {
       rs = 'approved';
     }
-    else if(stateCode === '2'){
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'refund';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
       rs = 'refund';
     }
     return rs;
@@ -33,66 +34,65 @@ export const ListItem = ({
 
   const getDotClass = (str?: string) => {
     let rs = '';
-    if(stateCode === '0'){
+    if (paymentStatus === '') {
       rs = '';
     }
-    else if(stateCode === '1'){
+    else if (paymentStatus === "APPROVAL") {
       rs = 'blue';
     }
-    else if(stateCode === '2'){
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'gray';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
       rs = 'gray';
     }
     return rs;
   };
 
   const onClickToNavigate = () => {
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      navigate(PATHS.additionalService.keyInPayment, {
-        state: {
-          tid: tid,
-          serviceCode: serviceCode
-        }
-      });
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      
+      return;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       navigate(PATHS.additionalService.accountHolderSearch.detail, {
         state: {
           requestId: requestId
         }
       });
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
           transactionId: transactionId
         }
       });
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
           transactionId: transactionId
         }
       });
     }
-    else{
+    else {
       alert('additionalServiceCategory가 존재하지 않습니다.');
     }
   };
 
   const getTime = () => {
     let timeStr = '';
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      let time = stateDate?.substring(8, 12);
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       timeStr = moment(requestDate).format('HH:mm');
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       timeStr = moment(transactionDate).format('HH:mm');
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       timeStr = moment(sendDate).format('HH:mm');
     }
     return timeStr
@@ -100,16 +100,16 @@ export const ListItem = ({
 
   const getTitle = () => {
     let str = '';
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      str = `${serviceName}(${serviceDetailName})`;
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      str = `${tid}(${amount})`;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       str = `${accountHolder}(${accountNumber})`
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       str = `${customerName}(${transactionId})`
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       str = `${customerName}(${transactionId})`
     }
     return str;
@@ -117,54 +117,45 @@ export const ListItem = ({
 
   const getDetail = () => {
     let rs = [];
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <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>
-              </>
-          }
+          <span>{paymentStatus}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ bank }</span>
+          <span>{bank}</span>
           <span className="separator">|</span>
-          <span>{ processResult }</span>
+          <span>{processResult}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
           <span className="separator">|</span>
-          <span>{ channel }</span>
+          <span>{channel}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
           <span className="separator">|</span>
-          <span>{ channel }</span>
+          <span>{channel}</span>
         </div>
       );
     }
@@ -174,22 +165,22 @@ export const ListItem = ({
   return (
     <>
       <div
-        className={ `transaction-item ${getItemClass()}` }
-        onClick={ () => onClickToNavigate() }
+        className={`transaction-item ${getItemClass()}`}
+        onClick={() => onClickToNavigate()}
       >
         <div className="transaction-status">
-          <div className={ `status-dot ${getDotClass()}`}></div>
+          <div className={`status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ getTitle() }</div>
-          { getDetail() }
+          <div className="transaction-title">{getTitle()}</div>
+          {getDetail()}
         </div>
         <div className="transaction-amount">
           <NumericFormat
-            value={ goodsAmount || amount }
+            value={amount}
             thousandSeparator
             displayType="text"
-            suffix={ '원' }
+            suffix={'원'}
           ></NumericFormat>
         </div>
       </div>