From 84909b6ed348b99019e56f9ec0e7fd64501d1f1e Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Tue, 18 Nov 2025 17:57:55 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/card-commission-bottom-sheet.tsx       | 21 +++++++++++++++----
 src/shared/ui/assets/css/style-fix.css        |  7 +++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/entities/payment/ui/card-commission-bottom-sheet.tsx b/src/entities/payment/ui/card-commission-bottom-sheet.tsx
index 8a70288..607864a 100644
--- a/src/entities/payment/ui/card-commission-bottom-sheet.tsx
+++ b/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>
diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css
index 3678d9f..d829935 100644
--- a/src/shared/ui/assets/css/style-fix.css
+++ b/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);
 }
\ No newline at end of file