g

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

@@ -1,3 +1,4 @@
+import * as _ from 'lodash-es';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -43,10 +44,14 @@ export const CardCommissionBottomSheet = ({
   feeRate
 }: CardCommissionBottomSheetProps) => {
   const { t } = useTranslation();
+  // 01: 비씨, 02: KB국민, 03: 하나(외환), 04: 삼성, 06: 신한, 
+  // 07: 현대, 08: 롯데, 11: 씨티, 12: NH채움, 16: 하나
+  // const useCodes = ['01', '02', '03', '04', '06', '07', '08', '11', '12', '16'];
   const cardList = useStore.getState().CommonStore.creditCardList;
-  console.log(cardList);
   let newCardList = cardList.filter((value, index) => value.code2 === 'pur');
-  
+  // let newCardList = cardList.filter((value, index) => useCodes.includes(value.code1));
+
+  const [newGeneralTabItems, setNewGeneralTabItems] = useState<Record<string, any>>({});
 
   const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
   const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
@@ -56,20 +61,27 @@ export const CardCommissionBottomSheet = ({
   const onClickToClose = () => {
     setCardCommissionBottomSheetOn(false);
   };
-
+  
+  
   const getItemList = (key?: CardCommissionTabKey) => {
     let rs = [];
     if(key === CardCommissionTabKey.GENERAL){
       for(let i=0;i<newCardList.length;i++){
-        rs.push(
-          <div 
-            key={`card-fee-row-${i}`}
-            className="card-fee-row"
-          >
-            <span>{ newCardList[i].desc1 }</span>
-            <span>2.000%</span>
-          </div>
-        );
+        let cardItem = newCardList[i];
+        let cardCompany = cardItem.desc1;
+        if(newGeneralTabItems.hasOwnProperty(cardCompany)){
+          let feeRate = newGeneralTabItems[cardCompany];
+          rs.push(
+            <div 
+              key={`card-fee-row-${i}`}
+              className="card-fee-row"
+            >
+              <span>{ cardCompany }</span>
+              <span>{ feeRate || ''}</span>
+            </div>
+          );
+        }
+        
       }
     }
     return rs;
@@ -97,6 +109,19 @@ export const CardCommissionBottomSheet = ({
     }
   }, [itemKey]);
 
+  useEffect(() => {
+    if(onTab === CardCommissionTabKey.NO_INTEREST){
+      
+    }
+  }, [selectedCard]);
+
+  useEffect(() => {
+    if(!!generalTabItems){
+      let objectGeneralTabItems = _.chain(generalTabItems).keyBy('cardCompany').mapValues('feeRate').value();
+      setNewGeneralTabItems(objectGeneralTabItems);
+    }
+  }, []);
+
   return (
     <>
       { cardCommissionBottomSheetOn &&
@@ -172,11 +197,13 @@ export const CardCommissionBottomSheet = ({
                       onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
                     >
                       { 
-                        newCardList.map((value, index) => (
+                        newCardList.filter((value1, index1) => {
+                          return newGeneralTabItems.hasOwnProperty(value1.desc1)
+                        }).map((value2, index2) => (
                           <option 
-                            key={ `card-list-${value.desc1}`}
-                            value={ value.desc1 }
-                          >{ value.desc1 }</option>
+                            key={ `card-list-${value2.desc1}`}
+                            value={ value2.desc1 }
+                          >{ value2.desc1 }</option>
                         ))
                       }
                     </select>