결제정보

2025-11-19 16:35:43 +09:00
parent b71a6bf729
commit 1601ad79e2
5 changed files with 309 additions and 151 deletions
--- a/src/entities/home/ui/favorite-wrapper.tsx
+++ b/src/entities/home/ui/favorite-wrapper.tsx
@@ -104,9 +104,7 @@ export const FavoriteWrapper = ({
  const makeFavoriteItems = () => {
    let rs = [];
    let cnt = favoriteItems.length;
-    if(usingType === 'home'){
-      cnt = (cnt > 4)? 4: cnt;
-    }
+    
    for(let i=0;i<cnt;i++){
      const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
        ? favoriteItems[i]?.menuNameEng
--- a/src/entities/payment/ui/card-commission-bottom-sheet.tsx
+++ b/src/entities/payment/ui/card-commission-bottom-sheet.tsx
@@ -10,6 +10,7 @@ export interface CardCommissionBottomSheetProps {
  cardCommissionBottomSheetOn: boolean;
  setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
  payType: number;
+  itemKey: string;
  settlementPeriod?: string;
  generalTabItems?: Array<GeneralTabItems>,
  installmentTabItems?: Array<InstallmentTabItems>,
@@ -30,6 +31,7 @@ export const CardCommissionBottomSheet = ({
  cardCommissionBottomSheetOn,
  setCardCommissionBottomSheetOn,
  payType,
+  itemKey,
  settlementPeriod,
  generalTabItems,
  installmentTabItems,
@@ -42,17 +44,58 @@ export const CardCommissionBottomSheet = ({
 }: CardCommissionBottomSheetProps) => {
  const { t } = useTranslation();
  const cardList = useStore.getState().CommonStore.creditCardList;
+  console.log(cardList);
+  let newCardList = cardList.filter((value, index) => value.code2 === 'pur');
+  

  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 onClickToClose = () => {
    setCardCommissionBottomSheetOn(false);
  };
-  
+
+  const getItemList = (key?: CardCommissionTabKey) => {
+    let rs = [];
+    if(key === CardCommissionTabKey.GENERAL){
+      for(let i=0;i<newCardList.length;i++){
+        rs.push(
+          <div 
+            key={`card-fee-row-${i}`}
+            className="card-fee-row"
+          >
+            <span>{ newCardList[i].desc1 }</span>
+            <span>2.000%</span>
+          </div>
+        );
+      }
+    }
+    return rs;
+  }
+
  useEffect(() => {
    // 탭 이동시 할일
  }, [onTab]);
+  
+  useEffect(() => {
+    if(!!itemKey){
+      if(itemKey === 'kakaoPay'){
+        setLeftTitle('구분');
+        setLeftText('카카오머니');
+      }
+      else if(itemKey === 'naverPay'){
+        setLeftTitle('할부개월');
+        setLeftText('네이버포인트');
+      }
+      else if(itemKey === 'tossPay'){
+        setLeftTitle('할부개원');
+        setLeftText('토스머니');
+      }
+      
+    }
+  }, [itemKey]);

  return (
    <>
@@ -76,7 +119,7 @@ export const CardCommissionBottomSheet = ({
              <img
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt={t('common.close')}
-                onClick={ () => onClickToClose() }
+                onClick={ onClickToClose }
              />
            </button>
          </div>
@@ -109,79 +152,96 @@ export const CardCommissionBottomSheet = ({
              >{t('payment.moneyPoint')}</button>
              }
            </div>
+            { (onTab === CardCommissionTabKey.GENERAL) &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">{t('payment.cardCompany')}</span>
+                  <span className="th-right">{t('payment.commission')}</span>
+                </div>
+                { getItemList(CardCommissionTabKey.GENERAL) }
+              </div>
+            }

-            <div className="card-fee-box">
-              <span className="label">{t('payment.cardCompany')}</span>
-              <div className="field wid-100">
-                <select
-                  value={ selectedCard }
-                  onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
-                >
-                  { 
-                    cardList.map((value, index) => (
-                      <option 
-                        key={ `card-list-${value.desc1}`}
-                        value={ value.desc1 }
-                      >{ value.desc1 }</option>
-                    ))
-                  }
-                </select>
-              </div>
-            </div>
+            { (onTab === CardCommissionTabKey.NO_INTEREST) &&
+              <>
+                <div className="card-fee-box">
+                  <span className="label">{t('payment.cardCompany')}</span>
+                  <div className="field wid-100">
+                    <select
+                      value={ selectedCard }
+                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
+                    >
+                      { 
+                        newCardList.map((value, index) => (
+                          <option 
+                            key={ `card-list-${value.desc1}`}
+                            value={ value.desc1 }
+                          >{ value.desc1 }</option>
+                        ))
+                      }
+                    </select>
+                  </div>
+                </div>

-            <div className="card-fee-list">
-              <div className="card-fee-list-header">
-                <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>
-            </div>
+                <div className="card-fee-list">
+                  <div className="card-fee-list-header">
+                    <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>
+                </div>
+              </>
+            }
+
+            { (onTab === CardCommissionTabKey.MONEY_POINT) &&
+              <>
+                <div className="card-fee-list-header">
+                  <span className="th-left">{ leftTitle }</span>
+                  <span className="th-right">{t('payment.commission')}</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>{ leftText }</span>
+                  <span>2.000%</span>
+                </div>
+              </>
+            }
          </div>
        </div>
-        {/*
-        <div className="bottomsheet-footer">
-          <button 
-            className="btn-50 btn-blue flex-1" 
-            type="button" 
-            disabled
-          >신청</button>
-        </div>
-        */}
      </motion.div>
    </>
  );
--- a/src/entities/payment/ui/info-item.tsx
+++ b/src/entities/payment/ui/info-item.tsx
@@ -9,6 +9,8 @@ export interface InfoItemProps {
  payImage?: string;
  infoLink?: string;
  payType?: number;
+  itemKey?: string;
+  setItemKey?: (itemKey: string) => void;
  setPayType?: (payType: number) => void;
  setBottomSheetOn?: (bottomSheetOn: boolean) => void;
 };
@@ -19,6 +21,8 @@ export const InfoItem = ({
  payImage,
  infoLink,
  payType,
+  itemKey,
+  setItemKey,
  setPayType,
  setBottomSheetOn
 }: InfoItemProps) => {
@@ -28,6 +32,9 @@ export const InfoItem = ({
    if(setPayType && payType){
      setPayType(payType);
    }
+    if(setItemKey && itemKey){
+      setItemKey(itemKey)
+    }
    if(setBottomSheetOn){
      setBottomSheetOn(true);
    }
--- a/src/entities/payment/ui/info-wrap.tsx
+++ b/src/entities/payment/ui/info-wrap.tsx
@@ -35,6 +35,7 @@ import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mu
 import { useStore } from '@/shared/model/store';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
+import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';

 export const InfoWrap = () => {
  const { t } = useTranslation();
@@ -49,12 +50,14 @@ export const InfoWrap = () => {
  const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
  const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
  const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
-
+  const [transferCommissionBottomSheetOn, setTransferCommissionBottomSheetOn] = useState<boolean>(false);
+  
  const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
  const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
  const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
  
  const [payType, setPayType] = useState<number>(2);
+  const [itemKey, setItemKey] = useState<string>('');
  const [settlementPeriod, setSettlementPeriod] = useState<string>();
  const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
  const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
@@ -78,30 +81,30 @@ export const InfoWrap = () => {
  const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();

  const list1 = [
-    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2, itemKey: 'creditCard'},
+    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3, itemKey: 'kakaoPay'},
+    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3, itemKey: 'naverPay'},
+    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2, itemKey: 'samsungPay'},
+    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1, itemKey: 'accountTransfer'},
+    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1, itemKey: 'mobilePaymentFull'},
+    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2, itemKey: 'samsungPayCard'},
+    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2, itemKey: 'applePay'},
+    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3, itemKey: 'tossPay'},
+    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2, itemKey: 'payco'},
+    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2, itemKey: 'livePay'},
+    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1, itemKey: ''},
+    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1, itemKey: ''},
+    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2, itemKey: 'lPay'},
+    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2, itemKey: 'payU'},
+    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2, itemKey: 'twLinePay'},
+    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3, itemKey: 'ssgPay'},
+    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2, itemKey: 'kBankPay'},
+    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1, itemKey: 'virtualAccount'},
+    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1, itemKey: 'accountSimplePayment'},
  ];

  const list2 = [
@@ -115,18 +118,36 @@ export const InfoWrap = () => {
    let rs = [];
    if(type === PaymentInfoItemType.Comission){
      for(let i=0;i<list1.length;i++){
-        rs.push(
-          <InfoItem
-            key={ `comission-info-wrap-${i}` }
-            type={ type }
-            payName={ list1[i]?.payName }
-            payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
-            infoLink={ list1[i]?.infoLink }
-            payType={ list1[i]?.payType }
-            setPayType={ setPayType }
-            setBottomSheetOn={ setCardCommissionBottomSheetOn }
-          ></InfoItem>
-        );
+        let itemKey = list1[i]?.itemKey;
+        let payType = list1[i]?.payType;
+
+        let newBottomSheetOn;
+        if(payType === 1){
+          newBottomSheetOn = setTransferCommissionBottomSheetOn;
+        }
+        else if(payType === 2){
+          newBottomSheetOn = setCardCommissionBottomSheetOn;
+        }
+        else if(payType === 3){
+          newBottomSheetOn = setCardCommissionBottomSheetOn;
+        }
+        if(!!newBottomSheetOn){
+          rs.push(
+            <InfoItem
+              key={ `comission-info-wrap-${i}` }
+              type={ type }
+              payName={ list1[i]?.payName }
+              payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
+              infoLink={ list1[i]?.infoLink }
+              payType={ payType }
+              itemKey={ itemKey }
+              setItemKey={ setItemKey }
+              setPayType={ setPayType }
+              setBottomSheetOn={ newBottomSheetOn }
+            ></InfoItem>
+          );
+        }
+        
      }
    }
    else if(type === PaymentInfoItemType.NoInterest){
@@ -270,20 +291,31 @@ export const InfoWrap = () => {
        { getList(PaymentInfoItemType.NoInterest) }
        </ul>
      </div>
-      <CardCommissionBottomSheet
-        cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
-        setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
-        payType={ payType }
-        settlementPeriod={ settlementPeriod }
-        generalTabItems={ generalTabItems }
-        installmentTabItems={ installmentTabItems }
-        moneyPointTabItems= { moneyPointTabItems }
-        feeRanges={ feeRanges }
-        bankFees={ bankFees }
-        paymentFees={ paymentFees  }
-        categoryFees={ categoryFees }
-        feeRate={ feeRate }
-      ></CardCommissionBottomSheet>
+      { !!cardCommissionBottomSheetOn &&
+        <CardCommissionBottomSheet
+          cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
+          setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
+          payType={ payType }
+          itemKey={ itemKey }
+          settlementPeriod={ settlementPeriod }
+          generalTabItems={ generalTabItems }
+          installmentTabItems={ installmentTabItems }
+          moneyPointTabItems= { moneyPointTabItems }
+          feeRanges={ feeRanges }
+          bankFees={ bankFees }
+          paymentFees={ paymentFees  }
+          categoryFees={ categoryFees }
+          feeRate={ feeRate }
+        ></CardCommissionBottomSheet>
+      }
+      { !!transferCommissionBottomSheetOn &&
+        <TransferCommissionBottomSheet
+          itemKey={ itemKey }
+          transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
+          setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
+        ></TransferCommissionBottomSheet>
+      }
+      
      <CreditCardListBottomSheet
        creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
        setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }
--- a/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx
+++ b/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx
@@ -1,9 +1,25 @@
 import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';

-export const TransferCommissionBottomSheet = () => {
+export interface TransferCommissionBottomSheetProps {
+  itemKey: string;
+  settlementPeriod?: string;
+  transferCommissionBottomSheetOn: boolean;
+  setTransferCommissionBottomSheetOn: (transferCommissionBottomSheetOn: boolean) => void;
+};
+
+export const TransferCommissionBottomSheet = ({
+  itemKey,
+  settlementPeriod,
+  transferCommissionBottomSheetOn,
+  setTransferCommissionBottomSheetOn
+}: TransferCommissionBottomSheetProps) => {
  const { t, i18n } = useTranslation();

+  const onClickToClose = () => {
+    setTransferCommissionBottomSheetOn(false);
+  };
+
  return (
    <>
      <div className="bg-dim"></div>
@@ -18,35 +34,80 @@ export const TransferCommissionBottomSheet = () => {
              <img
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt={t('common.close')}
+                onClick={ onClickToClose }
              />
            </button>
          </div>
        </div>
-        <div className="fee-cycle">
-          <div className="desc dot">{t('payment.settlementPeriod')} : {t('payment.dailyPlus3Days')}</div>
-          <div className="desc dot">{t('payment.commission')}</div>
-          <div className="divider"></div>
-          <ul className="kv-list">
-            <li className="kv-row pl-10">
-              <span className="k">{t('payment.paymentFeeMinimum')}</span>
-              <span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span>
-            </li>
-            <li className="kv-row pl-10">
-              <span className="k">{t('payment.paymentFeeFrom1Won')}</span>
-              <span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span>
-            </li>
-            <li className="kv-row pl-10">
-              <span className="k">{t('payment.cancellationFee')}</span>
-              <span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span>
-            </li>
-          </ul>
-        </div>
-
-        <div className="bottomsheet-footer">
-          <button
-            className="btn-50 btn-blue flex-1"
-            type="button"
-          >{t('common.confirm')}</button>
+        <div className="bottomsheet-content">
+          <div className="card-fee">
+            <div className="desc">{t('payment.settlementPeriod')} : { settlementPeriod }</div>
+            <div 
+              className="desc"
+              style={{ paddingBottom: 0 }}
+            >수수료 :</div>
+            { (itemKey === 'accountTransfer') &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">구간</span>
+                  <span className="th-right">수수료</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            }
+            { (itemKey === 'virtualAccount') &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">은행</span>
+                  <span className="th-right">수수료</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            }
+            { (itemKey === 'livePay' || itemKey === 'kBankPay') &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">결제수수료</span>
+                  <span className="th-right">최저수수료</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            }
+            { (itemKey === 'mobilePaymentFull') &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">구분</span>
+                  <span className="th-right">수수료</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            }
+            { (itemKey === 'accountSimplePayment') &&
+              <div className="card-fee-list">
+                <div className="card-fee-list-header">
+                  <span className="th-left">결제수수료</span>
+                  <span className="th-right">취소수수료</span>
+                </div>
+                <div className="card-fee-row">
+                  <span>최저수수료</span>
+                  <span>1원~</span>
+                  <span>1원~</span>
+                </div>
+              </div>
+            }
+          </div>
        </div>
      </div>
    </>