결제 정보 하단 시트 수정

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

@@ -7,12 +7,12 @@ import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
 import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
 import { 
   AccountTransferData,
-  GeneralTab,
+  GeneralTabItems,
   InstallmentData,
   InstallmentDetails,
-  InstallmentTab,
+  InstallmentTabItems,
   MobilePaymentData,
-  MoneyPointTab,
+  MoneyPointTabItems,
   OtherPaymentData,
   PaymentCardParams,
   PaymentCardResponse, 
@@ -40,10 +40,11 @@ export const InfoWrap = () => {
   const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
   const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
   
+  const [payType, setPayType] = useState<number>(2);
   const [settlementPeriod, setSettlementPeriod] = useState<string>();
-  const [generalTab, setGeneralTab] = useState<GeneralTab>();
-  const [installmentTab, setInstallmentTab] = useState<InstallmentTab>();
-  const [moneyPointTab, setMoneyPointTab] = useState<MoneyPointTab>();
+  const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
+  const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
+  const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);
   
   const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
   const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
@@ -57,30 +58,30 @@ export const InfoWrap = () => {
   const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
 
   const list1 = [
-    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
-    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
-    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
-    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
-    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
-    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
-    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
-    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
-    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
-    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
-    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
-    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
-    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
-    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
-    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
-    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
-    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
-    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
-    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
-    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
-    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
-    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
-    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
-    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
+    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: '', payType: 2},
+    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: '', payType: 3},
+    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: '', payType: 3},
+    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: '', payType: 2},
+    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: '', payType: 1},
+    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: '', payType: 1},
+    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: '', payType: 1},
+    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: '', payType: 1},
+    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: '', payType: 1},
+    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: '', payType: 2},
+    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: '', payType: 2},
+    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: '', payType: 3},
+    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: '', payType: 2},
+    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: '', payType: 2},
+    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: '', payType: 1},
+    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: '', payType: 1},
+    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: '', payType: 2},
+    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: '', payType: 2},
+    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: '', payType: 2},
+    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: '', payType: 3},
+    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: '', payType: 2},
+    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: '', payType: 1},
+    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: '', payType: 1},
+    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: '', payType: 1},
   ];
 
   const list2 = [
@@ -100,6 +101,9 @@ export const InfoWrap = () => {
             payName={ list1[i]?.payName }
             payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
             infoLink={ list1[i]?.infoLink }
+            payType={ list1[i]?.payType }
+            setPayType={ setPayType }
+            setBottomSheetOn={ setCardCommissionBottomSheetOn }
           ></InfoItem>
         );
       }
@@ -112,7 +116,7 @@ export const InfoWrap = () => {
             payName={ list2[i]?.payName }
             payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
             infoLink={ list2[i]?.infoLink }
-            setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
+            setBottomSheetOn={ setNoInterestInfoBottomSheetOn }
           ></InfoItem>
         );
       }
@@ -130,9 +134,9 @@ export const InfoWrap = () => {
     paymentCard(params).then((rs: PaymentCardResponse) => {
       console.log(rs);
       setSettlementPeriod(rs.settlementPeriod);
-      setGeneralTab(rs.generalTab);
-      setInstallmentTab(rs.installmentTab);
-      setMoneyPointTab(rs.moneyPointTab);
+      setGeneralTabItems(rs.generalTab.items);
+      setInstallmentTabItems(rs.installmentTab.items);
+      setMoneyPointTabItems(rs.moneyPointTab.items);
     });
   };
   const callPaymentNonCard = () => {
@@ -161,46 +165,59 @@ export const InfoWrap = () => {
     });
   };
 
-  const callPaymentIntallmentDetail = () => {
-    if(!!cardCompany){
-      let params: PaymentInstallmentDetailParams  = {
-        mid: mid,
-        cardCompany: cardCompany
-      };
-      
-      paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
-        console.log(rs);
+  const callPaymentIntallmentDetail = (selectedCardCompany: string) => {
+    let params: PaymentInstallmentDetailParams  = {
+      mid: mid,
+      cardCompany: selectedCardCompany
+    };
+    
+    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
+      console.log(rs);
+      if(rs.cardCompany){
         setCardCompany(rs.cardCompany);
+      }
+      if(rs.cardCompanyOptions){
         setCardCompanyOptions(rs.cardCompanyOptions);
+      }
+      if(rs.installmentDetails){
         setInstallmentDetails(rs.installmentDetails);
-      });
-    }
+      }
+    });
+  };
+  const changeToCardCompany = (cardCompany: string) => {
+    setCardCompany(cardCompany);
+    callPaymentIntallmentDetail(cardCompany);
   };
   useEffect(() => {
     callPaymentCard();
     callPaymentNonCard();
     callPaymentIntallment();
-  }, []);
-  useEffect(() => {
-    callPaymentIntallmentDetail();
-  }, [cardCompany]);
 
+    callPaymentIntallmentDetail(cardCompany);
+
+  }, []);
+  
   return (
     <>
       <div className="ing-list">
         <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
         <ul className="ing-card-list">
-          { getList(PaymentInfoItemType.Comission) }
+        { getList(PaymentInfoItemType.Comission) }
         </ul>
 
         <div className="ing-title">가맹점 분담 무이자 정보</div>
         <ul className="ing-card-list">
-          { getList(PaymentInfoItemType.NoInterest) }
+        { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
       <CardCommissionBottomSheet
         cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
         setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
+        payType={ payType }
+        settlementPeriod={ settlementPeriod }
+        generalTabItems={ generalTabItems }
+        installmentTabItems={ installmentTabItems }
+        moneyPointTabItems= { moneyPointTabItems }
       ></CardCommissionBottomSheet>
       <CreditCardListBottomSheet
         creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
@@ -212,7 +229,7 @@ export const InfoWrap = () => {
         cardCompany={ cardCompany }
         cardCompanyOptions={ cardCompanyOptions }
         installmentDetails={ installmentDetails }
-        setCardCompany={ setCardCompany }
+        changeToCardCompany={ changeToCardCompany }
       ></NoInterestInfoBottomSheet>
     </>
   );