결제정보

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