test

src/entities/payment/ui/info-wrap.tsx

@@ -1,9 +1,19 @@
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { InfoItem } from "./info-item";
-import { InfoItemProps } from "../model/types";
+import { InfoItemProps, PaymentCardResponse, PaymentInfoItemType, PaymentInstallmentResponse, PaymentNonCardResponse } from "../model/types";
 
-export const InfoWrap = () => {
+export interface InfoWrapProp {
+  paymentCard?: PaymentCardResponse,
+  paymentNonCard?: PaymentNonCardResponse,
+  paymentInstallment?: PaymentInstallmentResponse
+};
+export const InfoWrap = ({
+  paymentCard,
+  paymentNonCard,
+  paymentInstallment
+}: InfoWrapProp) => {
   
+
   const list1 = [
     {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
     {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
@@ -38,24 +48,33 @@ export const InfoWrap = () => {
     {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
   ];
 
-  const getList = (type: 'comission' | 'NoInterest') => {
+  const getList = (type: PaymentInfoItemType) => {
     let rs = [];
-    let arr: Array<InfoItemProps> = [];
-    if(type === 'comission'){
-      arr = list1;
+    if(type === PaymentInfoItemType.Comission){
+      for(let i=0;i<list1.length;i++){
+        rs.push(
+          <InfoItem
+            type={ type }
+            payName={ list1[i]?.payName }
+            payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
+            infoLink={ list1[i]?.infoLink }
+          ></InfoItem>
+        );
+      }
     }
-    else if(type === 'NoInterest'){
-      arr = list2; 
-    }
-    for(let i=0;i<arr.length;i++){
-      rs.push(
-        <InfoItem
-          payName={ arr[i]?.payName }
-          payImage={ IMAGE_ROOT + '/' + arr[i]?.payImage }
-          infoLink={ arr[i]?.infoLink }
-        ></InfoItem>
-      );
+    else if(type === PaymentInfoItemType.NoInterest){
+      for(let i=0;i<list2.length;i++){
+        rs.push(
+          <InfoItem
+            type={ type }
+            payName={ list2[i]?.payName }
+            payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
+            infoLink={ list2[i]?.infoLink }
+          ></InfoItem>
+        );
+      }
     }
+    
     return rs;
   }
 
@@ -65,12 +84,12 @@ export const InfoWrap = () => {
       <div className="ing-list">
         <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
         <ul className="ing-card-list">
-          { getList('comission') }
+          { getList(PaymentInfoItemType.Comission) }
         </ul>
 
         <div className="ing-title">가맹점 분담 무이자 정보</div>
         <ul className="ing-card-list">
-          { getList('NoInterest') }
+          { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
     </>