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

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -66,8 +66,8 @@ export const KeyInPaymentFilter = ({
     let transactionStatusOption = [
         { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
         { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
-        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
-        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
+        { name: '전취소', value: KeyInPaymentTransactionStatus.ALL_CANCEL },
+        { name: '후취소', value: KeyInPaymentTransactionStatus.AFTER_CANCEL },
     ]
 
     return (

src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx

@@ -0,0 +1,44 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { KeyInPaymentListProps } from '../../model/types'
+import { ListDateGroup } from '../list-date-group';
+
+export const KeyInPaymentList = ({
+    additionalServiceCategory,
+    listItems
+}: KeyInPaymentListProps ) => {
+    const { navigate } = useNavigate();
+
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory ={ additionalServiceCategory }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.keyInPayment.request)
+  };
+  
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }          
+          >결제 신청</button>
+        </div>
+      </div>  
+    </>
+  );
+}