From 005941bc8b8c347a86ce2e9f6d87ee54e60e1790 Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Fri, 10 Oct 2025 17:57:11 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=ED=95=98=EB=8B=A8=20=EC=8B=9C=ED=8A=B8=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       |  37 ++++--
 src/entities/payment/ui/info-item.tsx         |  15 ++-
 src/entities/payment/ui/info-wrap.tsx         | 121 ++++++++++--------
 .../ui/no-interest-info-bottom-sheet.tsx      |   8 +-
 src/widgets/navigation/header.tsx             |  11 +-
 5 files changed, 120 insertions(+), 72 deletions(-)

diff --git a/src/entities/payment/ui/card-commission-bottom-sheet.tsx b/src/entities/payment/ui/card-commission-bottom-sheet.tsx
index 73d7f31..aa8dbe8 100644
--- a/src/entities/payment/ui/card-commission-bottom-sheet.tsx
+++ b/src/entities/payment/ui/card-commission-bottom-sheet.tsx
@@ -1,15 +1,26 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
+import { GeneralTabItems, InstallmentTabItems, MoneyPointTabItems } from '../model/types';
 
 export interface CardCommissionBottomSheetProps {
   cardCommissionBottomSheetOn: boolean;
   setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
+  payType: number;
+  settlementPeriod?: string;
+  generalTabItems: Array<GeneralTabItems>,
+  installmentTabItems: Array<InstallmentTabItems>,
+  moneyPointTabItems: Array<MoneyPointTabItems>
 };
 
 export const CardCommissionBottomSheet = ({
   cardCommissionBottomSheetOn,
-  setCardCommissionBottomSheetOn
+  setCardCommissionBottomSheetOn,
+  payType,
+  settlementPeriod,
+  generalTabItems,
+  installmentTabItems,
+  moneyPointTabItems
 }: CardCommissionBottomSheetProps) => {
 
   const onClickToClose = () => {
@@ -46,21 +57,27 @@ export const CardCommissionBottomSheet = ({
 
         <div className="bottomsheet-content">
           <div className="card-fee">
-            <div className="desc">정산주기 : 일일(+3일)</div>
+            <div className="desc">정산주기 : { settlementPeriod }</div>
 
             <div className="notice-tabs">
-              <button 
-                className="tab36 on" 
-                type="button"
-              >일반</button>
-              <button 
-                className="tab36" 
-                type="button"
-              >무이자</button>
+              { (payType === 2 || payType === 3) && 
+                <button 
+                  className="tab36 on" 
+                  type="button"
+                >일반</button>
+              }
+              { (payType === 2 || payType === 3) &&
+                <button 
+                  className="tab36" 
+                  type="button"
+                >무이자</button>
+              }
+              { (payType === 3) &&
               <button 
                 className="tab36" 
                 type="button"
               >머니/포인트</button>
+              }
             </div>
 
             <div className="card-fee-box">
diff --git a/src/entities/payment/ui/info-item.tsx b/src/entities/payment/ui/info-item.tsx
index 96db1f5..7d921a8 100644
--- a/src/entities/payment/ui/info-item.tsx
+++ b/src/entities/payment/ui/info-item.tsx
@@ -7,7 +7,9 @@ export interface InfoItemProps {
   payName?: string;
   payImage?: string;
   infoLink?: string;
-  setNoInterestInfoBottomSheetOn?: (noInterestInfoBottomSheetOn: boolean) => void;
+  payType?: number;
+  setPayType?: (payType: number) => void;
+  setBottomSheetOn?: (bottomSheetOn: boolean) => void;
 };
 
 export const InfoItem = ({
@@ -15,12 +17,17 @@ export const InfoItem = ({
   payName,
   payImage,
   infoLink,
-  setNoInterestInfoBottomSheetOn
+  payType,
+  setPayType,
+  setBottomSheetOn
 }: InfoItemProps) => {
 
   const onClickToOpenBottomSheet = () => {
-    if(setNoInterestInfoBottomSheetOn){
-      setNoInterestInfoBottomSheetOn(true);
+    if(setPayType && payType){
+      setPayType(payType);
+    }
+    if(setBottomSheetOn){
+      setBottomSheetOn(true);
     }
   };
   return (
diff --git a/src/entities/payment/ui/info-wrap.tsx b/src/entities/payment/ui/info-wrap.tsx
index 1c0923c..268b4e0 100644
--- a/src/entities/payment/ui/info-wrap.tsx
+++ b/src/entities/payment/ui/info-wrap.tsx
@@ -7,12 +7,12 @@ import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
 import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
 import { 
   AccountTransferData,
-  GeneralTab,
+  GeneralTabItems,
   InstallmentData,
   InstallmentDetails,
-  InstallmentTab,
+  InstallmentTabItems,
   MobilePaymentData,
-  MoneyPointTab,
+  MoneyPointTabItems,
   OtherPaymentData,
   PaymentCardParams,
   PaymentCardResponse, 
@@ -40,10 +40,11 @@ export const InfoWrap = () => {
   const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
   const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
   
+  const [payType, setPayType] = useState<number>(2);
   const [settlementPeriod, setSettlementPeriod] = useState<string>();
-  const [generalTab, setGeneralTab] = useState<GeneralTab>();
-  const [installmentTab, setInstallmentTab] = useState<InstallmentTab>();
-  const [moneyPointTab, setMoneyPointTab] = useState<MoneyPointTab>();
+  const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
+  const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
+  const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);
   
   const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
   const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
@@ -57,30 +58,30 @@ export const InfoWrap = () => {
   const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
 
   const list1 = [
-    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
-    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
-    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
-    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
-    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
-    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
-    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
-    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
-    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
-    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
-    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
-    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
-    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
-    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
-    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
-    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
-    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
-    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
-    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
-    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
-    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
-    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
-    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
-    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
+    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: '', payType: 2},
+    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: '', payType: 3},
+    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: '', payType: 3},
+    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: '', payType: 2},
+    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: '', payType: 1},
+    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: '', payType: 1},
+    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: '', payType: 1},
+    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: '', payType: 1},
+    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: '', payType: 1},
+    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: '', payType: 2},
+    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: '', payType: 2},
+    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: '', payType: 3},
+    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: '', payType: 2},
+    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: '', payType: 2},
+    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: '', payType: 1},
+    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: '', payType: 1},
+    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: '', payType: 2},
+    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: '', payType: 2},
+    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: '', payType: 2},
+    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: '', payType: 3},
+    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: '', payType: 2},
+    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: '', payType: 1},
+    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: '', payType: 1},
+    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: '', payType: 1},
   ];
 
   const list2 = [
@@ -100,6 +101,9 @@ export const InfoWrap = () => {
             payName={ list1[i]?.payName }
             payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
             infoLink={ list1[i]?.infoLink }
+            payType={ list1[i]?.payType }
+            setPayType={ setPayType }
+            setBottomSheetOn={ setCardCommissionBottomSheetOn }
           ></InfoItem>
         );
       }
@@ -112,7 +116,7 @@ export const InfoWrap = () => {
             payName={ list2[i]?.payName }
             payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
             infoLink={ list2[i]?.infoLink }
-            setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
+            setBottomSheetOn={ setNoInterestInfoBottomSheetOn }
           ></InfoItem>
         );
       }
@@ -130,9 +134,9 @@ export const InfoWrap = () => {
     paymentCard(params).then((rs: PaymentCardResponse) => {
       console.log(rs);
       setSettlementPeriod(rs.settlementPeriod);
-      setGeneralTab(rs.generalTab);
-      setInstallmentTab(rs.installmentTab);
-      setMoneyPointTab(rs.moneyPointTab);
+      setGeneralTabItems(rs.generalTab.items);
+      setInstallmentTabItems(rs.installmentTab.items);
+      setMoneyPointTabItems(rs.moneyPointTab.items);
     });
   };
   const callPaymentNonCard = () => {
@@ -161,46 +165,59 @@ export const InfoWrap = () => {
     });
   };
 
-  const callPaymentIntallmentDetail = () => {
-    if(!!cardCompany){
-      let params: PaymentInstallmentDetailParams  = {
-        mid: mid,
-        cardCompany: cardCompany
-      };
-      
-      paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
-        console.log(rs);
+  const callPaymentIntallmentDetail = (selectedCardCompany: string) => {
+    let params: PaymentInstallmentDetailParams  = {
+      mid: mid,
+      cardCompany: selectedCardCompany
+    };
+    
+    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
+      console.log(rs);
+      if(rs.cardCompany){
         setCardCompany(rs.cardCompany);
+      }
+      if(rs.cardCompanyOptions){
         setCardCompanyOptions(rs.cardCompanyOptions);
+      }
+      if(rs.installmentDetails){
         setInstallmentDetails(rs.installmentDetails);
-      });
-    }
+      }
+    });
+  };
+  const changeToCardCompany = (cardCompany: string) => {
+    setCardCompany(cardCompany);
+    callPaymentIntallmentDetail(cardCompany);
   };
   useEffect(() => {
     callPaymentCard();
     callPaymentNonCard();
     callPaymentIntallment();
-  }, []);
-  useEffect(() => {
-    callPaymentIntallmentDetail();
-  }, [cardCompany]);
 
+    callPaymentIntallmentDetail(cardCompany);
+
+  }, []);
+  
   return (
     <>
       <div className="ing-list">
         <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
         <ul className="ing-card-list">
-          { getList(PaymentInfoItemType.Comission) }
+        { getList(PaymentInfoItemType.Comission) }
         </ul>
 
         <div className="ing-title">가맹점 분담 무이자 정보</div>
         <ul className="ing-card-list">
-          { getList(PaymentInfoItemType.NoInterest) }
+        { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
       <CardCommissionBottomSheet
         cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
         setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
+        payType={ payType }
+        settlementPeriod={ settlementPeriod }
+        generalTabItems={ generalTabItems }
+        installmentTabItems={ installmentTabItems }
+        moneyPointTabItems= { moneyPointTabItems }
       ></CardCommissionBottomSheet>
       <CreditCardListBottomSheet
         creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
@@ -212,7 +229,7 @@ export const InfoWrap = () => {
         cardCompany={ cardCompany }
         cardCompanyOptions={ cardCompanyOptions }
         installmentDetails={ installmentDetails }
-        setCardCompany={ setCardCompany }
+        changeToCardCompany={ changeToCardCompany }
       ></NoInterestInfoBottomSheet>
     </>
   );
diff --git a/src/entities/payment/ui/no-interest-info-bottom-sheet.tsx b/src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
index 6746688..1df5f89 100644
--- a/src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
+++ b/src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
@@ -11,7 +11,7 @@ export interface NoInterestInfoBottomSheetProps {
   cardCompany?: string;
   cardCompanyOptions?: Array<string>;
   installmentDetails?: Array<InstallmentDetails>;
-  setCardCompany?: (cardCompany: string) => void;
+  changeToCardCompany?: (cardCompany: string) => void;
 };
 
 export const NoInterestInfoBottomSheet = ({
@@ -20,7 +20,7 @@ export const NoInterestInfoBottomSheet = ({
   cardCompany,
   cardCompanyOptions,
   installmentDetails,
-  setCardCompany
+  changeToCardCompany
 }: NoInterestInfoBottomSheetProps) => {
   
   const onClickToClose = () => {
@@ -29,8 +29,8 @@ export const NoInterestInfoBottomSheet = ({
 
   const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => {
     let value = e.target.value;
-    if(setCardCompany){
-      setCardCompany(value);
+    if(changeToCardCompany){
+      changeToCardCompany(value);
     }
   };
 
diff --git a/src/widgets/navigation/header.tsx b/src/widgets/navigation/header.tsx
index 8787cb6..18e4b3e 100644
--- a/src/widgets/navigation/header.tsx
+++ b/src/widgets/navigation/header.tsx
@@ -7,7 +7,7 @@ import {
   HeaderNavigationProps
 } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 export const HeaderNavigation = ({ 
   onBack, 
@@ -45,6 +45,10 @@ export const HeaderNavigation = ({
   const onClickToGoToAlarm = () => {
     navigate(PATHS.alarm.list);
   };
+  const onChangeToMid = (e: ChangeEvent<HTMLSelectElement>) => {
+    let value = e.target.value;
+    useStore.getState().UserStore.setMid(value);
+  };
 
   useEffect(() => {
     let mids = useStore.getState().UserStore.selectOptionsMids;
@@ -73,7 +77,10 @@ export const HeaderNavigation = ({
             <div className="header-left">
               <h1 className="app-title blind">나이스가맹점관리자</h1>
                 <div className="input-wrapper">
-                  <select className="heading-select">
+                  <select 
+                    className="heading-select"
+                    onChange={ onChangeToMid }
+                  >
                   { selectOptions && selectOptions.length > 0 && 
                     selectOptions.map((value, index) => (
                       <option