신용카드 관련 하단 정보

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

@@ -52,11 +52,14 @@ export const CardCommissionBottomSheet = ({
   // let newCardList = cardList.filter((value, index) => useCodes.includes(value.code1));
 
   const [newGeneralTabItems, setNewGeneralTabItems] = useState<Record<string, any>>({});
+  const [newInstallmentTabItems, setNewInstallmentTabItems] = useState<Array<InstallmentTabItems> | undefined>();
+  const [newMoneyPointTabItems, setNewMoneyPointTabItems] = useState<Array<MoneyPointTabItems> | undefined>();
 
   const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
   const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
-  const [leftTitle, setLeftTitle] = useState<string>('');
-  const [leftText, setLeftText] = useState<string>('');
+  const [moneyPointTitle, setMoneyPointTitle] = useState<string>('');
+  const [moneyPointText, setMoneyPointText] = useState<string>('');
+  const [moneyPointRate, setMoneyPointRate] = useState<string>();
 
   const onClickToClose = () => {
     setCardCommissionBottomSheetOn(false);
@@ -77,7 +80,7 @@ export const CardCommissionBottomSheet = ({
               className="card-fee-row"
             >
               <span>{ cardCompany }</span>
-              <span>{ feeRate || ''}</span>
+              <span>{ feeRate+'%' || ''}</span>
             </div>
           );
         }
@@ -86,6 +89,12 @@ export const CardCommissionBottomSheet = ({
     }
     return rs;
   }
+  const getMoneyPointRate = (itemKey: string) => {
+    let items = moneyPointTabItems?.filter((value, index) => {
+      return value.category === itemKey;
+    });
+    setNewMoneyPointTabItems(items);
+  };
 
   useEffect(() => {
     // 탭 이동시 할일
@@ -93,25 +102,33 @@ export const CardCommissionBottomSheet = ({
   
   useEffect(() => {
     if(!!itemKey){
+      getMoneyPointRate(itemKey);
       if(itemKey === 'kakaoPay'){
-        setLeftTitle('구분');
-        setLeftText('카카오머니');
+        setMoneyPointTitle('구분');
+        setMoneyPointText('카카오머니');
       }
       else if(itemKey === 'naverPay'){
-        setLeftTitle('할부개월');
-        setLeftText('네이버포인트');
+        setMoneyPointTitle('할부개월');
+        setMoneyPointText('네이버포인트');
+        
       }
       else if(itemKey === 'tossPay'){
-        setLeftTitle('할부개원');
-        setLeftText('토스머니');
+        setMoneyPointTitle('할부개원');
+        setMoneyPointText('토스머니');
       }
-      
     }
   }, [itemKey]);
 
-  useEffect(() => {
-    if(onTab === CardCommissionTabKey.NO_INTEREST){
+  const getInstallmentTabItems = () => {
+    let items = installmentTabItems?.filter((value, index) => {
+      return value.cardCompany === selectedCard;
+    });
+    setNewInstallmentTabItems(items);
+  }
 
+  useEffect(() => {
+    if(onTab === CardCommissionTabKey.NO_INTEREST && !!selectedCard){
+      getInstallmentTabItems();
     }
   }, [selectedCard]);
 
@@ -215,42 +232,13 @@ export const CardCommissionBottomSheet = ({
                     <span className="th-left">{t('payment.installmentMonths')}</span>
                     <span className="th-right">{t('payment.commission')}</span>
                   </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 2 })}</span>
-                    <span>2.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 3 })}</span>
-                    <span>3.100%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 4 })}</span>
-                    <span>4.400%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 5 })}</span>
-                    <span>5.200%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 6 })}</span>
-                    <span>6.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 7 })}</span>
-                    <span>6.600%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 8 })}</span>
-                    <span>7.500%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 9 })}</span>
-                    <span>8.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 10 })}</span>
-                    <span>9.000%</span>
-                  </div>
+                  { !!newInstallmentTabItems && newInstallmentTabItems.map((value, index) => (
+                      <div className="card-fee-row">
+                        <span>{t('payment.months', { count: parseInt(value.installmentMonth.substring(0, 1)) })}</span>
+                        <span>{ value.feeRate+'%' || '' }</span>
+                      </div>  
+                    ))
+                  }
                 </div>
               </>
             }
@@ -258,13 +246,16 @@ export const CardCommissionBottomSheet = ({
             { (onTab === CardCommissionTabKey.MONEY_POINT) &&
               <>
                 <div className="card-fee-list-header">
-                  <span className="th-left">{ leftTitle }</span>
+                  <span className="th-left">{ moneyPointTitle }</span>
                   <span className="th-right">{t('payment.commission')}</span>
                 </div>
-                <div className="card-fee-row">
-                  <span>{ leftText }</span>
-                  <span>2.000%</span>
-                </div>
+                { !!newMoneyPointTabItems && newMoneyPointTabItems.map((value, index) => (
+                    <div className="card-fee-row">
+                      <span>{ value.category }</span>
+                      <span>{ value.feeRate+'%' || '' }</span>
+                    </div>
+                  ))
+                }
               </>
             }
           </div>