결제 정보 일부 수정

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

@@ -4,7 +4,7 @@ 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';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 export interface CardCommissionBottomSheetProps {
   cardCommissionBottomSheetOn: boolean;
@@ -21,6 +21,11 @@ export interface CardCommissionBottomSheetProps {
   feeRate?: number
 };
 
+export enum CardCommissionTabKey {
+  GENERAL = 'GENERAL',
+  NO_INTEREST = 'NO_INTEREST',
+  MONEY_POINT = 'MONEY_POINT'
+};
 export const CardCommissionBottomSheet = ({
   cardCommissionBottomSheetOn,
   setCardCommissionBottomSheetOn,
@@ -38,11 +43,16 @@ export const CardCommissionBottomSheet = ({
   const { t } = useTranslation();
   const cardList = useStore.getState().CommonStore.creditCardList;
 
+  const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
   const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
 
   const onClickToClose = () => {
     setCardCommissionBottomSheetOn(false);
   };
+  
+  useEffect(() => {
+    // 탭 이동시 할일
+  }, [onTab]);
 
   return (
     <>
@@ -79,20 +89,23 @@ export const CardCommissionBottomSheet = ({
             <div className="notice-tabs">
               { (payType === 2 || payType === 3) &&
                 <button
-                  className="tab36 on"
+                  className={ `tab36 ${onTab === CardCommissionTabKey.GENERAL? 'on': ''}`}
                   type="button"
+                  onClick={ () => setOnTab(CardCommissionTabKey.GENERAL) }
                 >{t('payment.general')}</button>
               }
               { (payType === 2 || payType === 3) &&
                 <button
-                  className="tab36"
+                  className={ `tab36 ${onTab === CardCommissionTabKey.NO_INTEREST? 'on': ''}`}
                   type="button"
+                  onClick={ () => setOnTab(CardCommissionTabKey.NO_INTEREST) }
                 >{t('payment.noInterest')}</button>
               }
               { (payType === 3) &&
               <button
-                className="tab36"
+                className={ `tab36 ${onTab === CardCommissionTabKey.MONEY_POINT? 'on': ''}`}
                 type="button"
+                onClick={ () => setOnTab(CardCommissionTabKey.MONEY_POINT) }
               >{t('payment.moneyPoint')}</button>
               }
             </div>

src/shared/ui/assets/css/style-fix.css

@@ -568,4 +568,11 @@ main.pop{
   border-radius: 50%;
   border: 2px solid var(--color-white);
   z-index: 100;
+}
+
+.ing-card-link{
+  font-size: var(--fs-13);
+}
+.tab36 {
+  font-size: var(--fs-15);
 }