결제 정보 하단 시트 수정

2025-10-10 17:57:11 +09:00
parent a9439b5241
commit 005941bc8b
5 changed files with 120 additions and 72 deletions
--- 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">
--- 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 (
--- 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>
    </>
  );
--- 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);
    }
  };

--- 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