결제정보 카드사 셋팅

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>
-              <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 className="card-option">
-              <span className="name">롯데</span>
-              <i className="check"></i>
-            </div>
+            {
+              cardList.map((value, index) => (
+                <div className={ `card-option ${(value.desc1 === selectedCard)? 'selected': ''}` }>
+                  <span className="name">{ value.desc1 }</span>
+                  <i className="check"></i>
+                </div>
+              ))
+            }
           </div>
         </div>