결제정보 카드사 셋팅

src/entities/payment/ui/card-commission-bottom-sheet.tsx

@@ -2,6 +2,8 @@ import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { BankFees, CategoryFees, FeeRanges, GeneralTabItems, InstallmentTabItems, MoneyPointTabItems, PaymentFees } from '../model/types';
+import { useStore } from '@/shared/model/store';
+import { ChangeEvent, useState } from 'react';
 
 export interface CardCommissionBottomSheetProps {
   cardCommissionBottomSheetOn: boolean;
@@ -32,6 +34,9 @@ export const CardCommissionBottomSheet = ({
   categoryFees,
   feeRate
 }: CardCommissionBottomSheetProps) => {
+  const cardList = useStore.getState().CommonStore.creditCardList;
+
+  const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
 
   const onClickToClose = () => {
     setCardCommissionBottomSheetOn(false);
@@ -93,8 +98,15 @@ export const CardCommissionBottomSheet = ({
             <div className="card-fee-box">
               <span className="label">카드사</span>
               <div className="field wid-100">
-                <select>
+                <select
-                  <option>KB국민</option>
+                  value={ selectedCard }
+                  onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
+                >
+                  { 
+                    cardList.map((value, index) => (
+                      <option value={ value.desc1 }>{ value.desc1 }</option>
+                    ))
+                  }
                 </select>
               </div>
             </div>

src/entities/payment/ui/credit-card-list-bottom-sheet.tsx

@@ -1,6 +1,8 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
+import { useStore } from '@/shared/model/store';
+import { useState } from 'react';
 
 export interface CreditCardListBottomSheetProps {
   creditCardListBottomSheetOn: boolean;
@@ -11,6 +13,9 @@ export const CreditCardListBottomSheet = ({
   creditCardListBottomSheetOn,
   setCreditCardListBottomSheetOn
 }: CreditCardListBottomSheetProps) => {
+  const cardList = useStore.getState().CommonStore.creditCardList;
+
+  const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
 
   const onClickToClose = () => {
     setCreditCardListBottomSheetOn(false);
@@ -45,34 +50,14 @@ export const CreditCardListBottomSheet = ({
         </div>
         <div className="bottomsheet-content">
           <div className="card-list">
-            <div className="card-option selected">
+            {
-              <span className="name">KB국민</span>
+              cardList.map((value, index) => (
-              <i className="check"></i>
+                <div className={ `card-option ${(value.desc1 === selectedCard)? 'selected': ''}` }>
-            </div>
+                  <span className="name">{ value.desc1 }</span>
-            <div className="card-option">
+                  <i className="check"></i>
-              <span className="name">비씨</span>
+                </div>
-              <i className="check"></i>
+              ))
-            </div>
+            }
-            <div className="card-option">
-              <span className="name">하나(외환)</span>
-              <i className="check"></i>
-            </div>
-            <div className="card-option">
-              <span className="name">삼성</span>
-              <i className="check"></i>
-            </div>
-            <div className="card-option">
-              <span className="name">신한</span>
-              <i className="check"></i>
-            </div>
-            <div className="card-option">
-              <span className="name">현대</span>
-              <i className="check"></i>
-            </div>
-            <div className="card-option">
-              <span className="name">롯데</span>
-              <i className="check"></i>
-            </div>
           </div>
         </div>
 

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

@@ -2,8 +2,9 @@ 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 { ChangeEvent, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+import { useStore } from '@/shared/model/store';
 
 export interface NoInterestInfoBottomSheetProps {
   noInterestInfoBottomSheetOn: boolean;
@@ -22,6 +23,9 @@ export const NoInterestInfoBottomSheet = ({
   installmentDetails,
   changeToCardCompany
 }: NoInterestInfoBottomSheetProps) => {
+  const cardList = useStore.getState().CommonStore.creditCardList;
+
+  const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
 
   const onClickToClose = () => {
     setNoInterestInfoBottomSheetOn(false);