결제관리 무이자 정보 연결

src/entities/payment/ui/no-interest-info-bottom-sheet.tsx

@@ -1,21 +1,40 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { BottomSheetMotionVaiants, BottomSheetMotionDuration } from '@/entities/common/model/constant';
+import { InstallmentDetails, PaymentInstallmentDetailResponse } from '../model/types';
+import { ChangeEvent } from 'react';
+import { NumericFormat } from 'react-number-format';
 
 export interface NoInterestInfoBottomSheetProps {
   noInterestInfoBottomSheetOn: boolean;
   setNoInterestInfoBottomSheetOn: (noInterestInfoBottomSheetOn: boolean) => void;
+  cardCompany?: string;
+  cardCompanyOptions?: Array<string>;
+  installmentDetails?: Array<InstallmentDetails>;
+  setCardCompany?: (cardCompany: string) => void;
 };
 
 export const NoInterestInfoBottomSheet = ({
   noInterestInfoBottomSheetOn,
-  setNoInterestInfoBottomSheetOn
+  setNoInterestInfoBottomSheetOn,
+  cardCompany,
+  cardCompanyOptions,
+  installmentDetails,
+  setCardCompany
 }: NoInterestInfoBottomSheetProps) => {
   const onClickToClose = () => {
     // close
     setNoInterestInfoBottomSheetOn(false);
   };
-   return (
+
+  const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => {
+    let value = e.target.value;
+    if(setCardCompany){
+      setCardCompany(value);
+    }
+  };
+
+  return (
     <>
       { noInterestInfoBottomSheetOn &&
         <div className="bg-dim"></div>
@@ -47,11 +66,48 @@ export const NoInterestInfoBottomSheet = ({
           <div className="card-fee-box">
             <span className="label">카드사</span>
             <div className="field wid-100">
-              <select>
-                <option>KB국민</option>
+            { !!cardCompanyOptions &&
+              <select onChange={ onChangeToCardCompany }>
+              { cardCompanyOptions.map((value, index) => (
+                  <option 
+                    value={ value }
+                    selected={ cardCompany === value }
+                  >{ value }</option>
+                ))
+              }
               </select>
+            }
             </div>
           </div>
+          { !!installmentDetails 
+            && installmentDetails.length > 0
+            && installmentDetails.map((value, index) => (
+            <>
+              { (index > 0) && 
+                <div className="divider"></div>
+              }
+              <div className="desc dot">
+                <span>할부개월 : </span>
+                <span>{ value.installmentMonths }</span>
+              </div>
+              <div className="desc dot">
+                <span>적용기간 : </span>
+                <span>{ value.applicationPeriod }</span>
+              </div>
+              <div className="desc dot">
+                <span>적용금액 : </span>
+                <span>
+                  <NumericFormat
+                    value={ value.applicationAmount } 
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </span>
+              </div>
+            </>
+            ))
+          }
+          {/*
           <div className="desc dot">할부개월 : 02, 03, 07</div>
           <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
           <div className="desc dot">적용금액 : 70,000</div>
@@ -59,6 +115,7 @@ export const NoInterestInfoBottomSheet = ({
           <div className="desc dot">할부개월 : 15, 20, 36, 60</div>
           <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
           <div className="desc dot">적용금액 : 50,000</div>
+          */}
         </div>
       </motion.div>
     </>