nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-30 10:37:02 +09:00
parent 51f8079b9a 2553aca4de
commit 8b79f83382
35 changed files with 467 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx
View File

@@ -47,13 +47,7 @@ export const TitleInfoWrap = ({
<>
<div className="num-amount">
<span className="amount-text">
<NumericFormat
value={titleInfo?.amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
</span>
</div>
<div className="num-store">{titleInfo?.corpName}</div>
@@ -65,13 +59,7 @@ export const TitleInfoWrap = ({
<>
<div className="num-amount">
<span className="amount-text">
<NumericFormat
value={titleInfo?.amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
</span>
</div>
<div className="num-store">{titleInfo?.corpName}</div>

40
src/entities/additional-service/ui/list-item.tsx
View File

@@ -557,13 +557,7 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
rs.push(
<div className="transaction-amount">
<NumericFormat
value={amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -572,13 +566,7 @@ export const ListItem = ({
) {
rs.push(
<div className="transaction-amount">
<NumericFormat
value={amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -588,13 +576,7 @@ export const ListItem = ({
key="payout-item-amount"
className="transaction-amount"
>
<NumericFormat
value={amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -606,13 +588,7 @@ export const ListItem = ({
key="fund-account-transfer-amount"
className="transaction-amount"
>
<NumericFormat
value={amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -622,13 +598,7 @@ export const ListItem = ({
key="payout-item-amount"
className="transaction-amount"
>
<NumericFormat
value={amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}

24
src/entities/home/ui/day-status-box-container1.tsx
View File

@@ -71,13 +71,7 @@ export const BoxContainer1 = () => {
<h3>{t('home.todaySales')}</h3>
<div className="today-sales">
<span className="won01">
<NumericFormat
value={ sales?.todayTotalAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.todayTotalAmount || 0) })}
</span>
<span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -125,13 +119,7 @@ export const BoxContainer1 = () => {
<h3>{t('home.todaySettlement')}</h3>
<div className="today-sales">
<span className="won02">
<NumericFormat
value={ settlement?.todaySettlementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.todaySettlementAmount || 0) })}
</span>
<span className="per">{t('home.depositCompleted')}</span>
<a className="arrow">
@@ -162,13 +150,7 @@ export const BoxContainer1 = () => {
<div className="remain-limit">
<span>{t('home.remainingSettlementLimit')}</span>
<strong style={{marginLeft: '4px'}}>
<NumericFormat
value={ settlement?.availableCredit }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.availableCredit || 0) })}
</strong>
</div>
</div>

32
src/entities/home/ui/day-status-box-container2.tsx
View File

@@ -112,13 +112,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.totalSales')}</h4>
<div className="today-sales mt-sty">
<span className="won01">
<NumericFormat
value={ sales?.currentMonthAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.currentMonthAmount || 0) })}
</span>
<span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -142,13 +136,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.totalSettlement')}</h4>
<div className="today-sales mt-sty">
<span className="won02">
<NumericFormat
value={ settlement?.currentMonthSettlementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.currentMonthSettlementAmount || 0) })}
</span>
<span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -178,13 +166,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.averageTransactionAmount')}</h4>
<div className="two-account">
<span>
<NumericFormat
value={ averageTransactionAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(averageTransactionAmount || 0) })}
</span>
</div>
</div>
@@ -192,13 +174,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.dailyAverageSalesAndCount')}</h4>
<div className="two-account">
<span>
<NumericFormat
value={ dailyAverageSales }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(dailyAverageSales || 0) })}
(<NumericFormat
value={ dailyAverageCount }
thousandSeparator

8
src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
View File

@@ -103,13 +103,7 @@ export const NoInterestInfoBottomSheet = ({
<div className="desc dot">
<span>{t('payment.applicationAmount')} : </span>
<span>
<NumericFormat
value={ value.applicationAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.applicationAmount || 0) })}
</span>
</div>
</>

88
src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
View File

@@ -22,13 +22,7 @@ export const AmountInfoWrap = ({
<li className="kv-row">
<span className="k">{t('settlement.totalTransactionAmount')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.totalTransactionAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
<NumericFormat
value={ amountInfo?.totalTransactionCount }
thousandSeparator
@@ -41,13 +35,7 @@ export const AmountInfoWrap = ({
<li>
<span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
<span className="unset-child-span">
<NumericFormat
value={ amountInfo?.creditCardAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
<NumericFormat
value={ amountInfo?.creditCardCount }
thousandSeparator
@@ -60,13 +48,7 @@ export const AmountInfoWrap = ({
<li>
<span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
<span className="unset-child-span">
<NumericFormat
value={ amountInfo?.accountTransferAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
<NumericFormat
value={ amountInfo?.accountTransferCount }
thousandSeparator
@@ -177,97 +159,49 @@ export const AmountInfoWrap = ({
<li className="kv-row">
<span className="k">{t('settlement.transactionAmount')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.transactionAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.paymentFee')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.paymentFee }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.escrowFee')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.escrowFee }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.authFee')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.authFee }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">VAT</span>
<span className="v">
<NumericFormat
value={ amountInfo?.vatFee }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.expectedSettlementAmount')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.settlementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.settlementAmount || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.preSettlementCancelOffset')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.preSettlementCancelOffset }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.preSettlementCancelOffset || 0) })}
</span>
</li>
<li className="kv-row bolder">
<span className="k">{t('settlement.settlementAmount')}</span>
<span className="v">
<NumericFormat
value={ amountInfo?.finalSettlementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.finalSettlementAmount || 0) })}
</span>
</li>
</ul>

10
src/entities/settlement/ui/list-item.tsx
View File

@@ -65,15 +65,7 @@ export const ListItem = ({
}
</div>
<div className="transaction-amount">
{
<NumericFormat
value={ settlementAmount || transactionAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
</div>
</div>
</>

8
src/entities/settlement/ui/list-wrap.tsx
View File

@@ -391,13 +391,7 @@ export const ListWrap = ({
<div className="summary-label label">{t('settlement.settlementAmount')}</div>
<div className="summary-amount divTop">
<span className="amount-text">
<NumericFormat
value={ settlementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || 0) })}
</span>
<button
onClick={ () => setIsOpenSummary(!isOpenSummary) }

81
src/entities/vat-return/ui/list-detail-bottom-sheet.tsx
View File

@@ -5,6 +5,7 @@ import { NumericFormat } from "react-number-format";
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next';
export interface VatReturnListDetailBottomSheetProps {
bottomSheetOn: boolean;
@@ -25,7 +26,7 @@ export const VatReturnListDetailBottomSheet = ({
vatAmount,
totalAmount
}: VatReturnListDetailBottomSheetProps) => {
const { t, i18n } = useTranslation();
const [isOpenDetail, setIsOpenDetail] = useState<Array<boolean>>([]);
const onClickToClose = () => {
@@ -48,14 +49,14 @@ export const VatReturnListDetailBottomSheet = ({
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>세부내역 조회</h2>
<h2>{t('vatReturn.viewDetails')}</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT +'/ico_close.svg' }
alt="닫기"
alt={t('common.close')}
onClick={ onClickToClose }
/>
</button>
@@ -66,55 +67,35 @@ export const VatReturnListDetailBottomSheet = ({
<div className="tax-detail-accordion">
<div className="summary">
<div className="row">
<div className="label desc dot">거래금액 :</div>
<div className="label desc dot">{t('vatReturn.transactionAmount')} :</div>
<div className="value">
<NumericFormat
value={ transactionAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">공급가액 :</div>
<div className="label desc dot">{t('vatReturn.supplyAmount')} :</div>
<div className="value">
<NumericFormat
value={ supplyAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(supplyAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">VAT :</div>
<div className="label desc dot">{t('vatReturn.vat')} :</div>
<div className="value">
<NumericFormat
value={ vatAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">합계금액 :</div>
<div className="label desc dot">{t('vatReturn.totalAmount')} :</div>
<div className="value">
<NumericFormat
value={ totalAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
</div>
</div>
</div>
{ breakdown && breakdown.length > 0 &&
<div className="list">
<div className="list-header">
<div className="head-date">거래일</div>
<div className="head-amount">합계금액</div>
<div className="head-date">{t('vatReturn.transactionDate')}</div>
<div className="head-amount">{t('vatReturn.totalAmount')}</div>
</div>
{
breakdown.map((value, index) => (
@@ -124,12 +105,7 @@ export const VatReturnListDetailBottomSheet = ({
<span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
<div className="amount">
<span className="text">
<NumericFormat
value={ value.totalAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.totalAmount || 0) })}
</span>
<img
className="arrow down"
@@ -142,34 +118,19 @@ export const VatReturnListDetailBottomSheet = ({
{ isOpenDetail[index] &&
<div className="item item-detail">
<div className="labels">
<span>거래금액</span>
<span>공급가액</span>
<span>VAT</span>
<span>{t('vatReturn.transactionAmount')}</span>
<span>{t('vatReturn.supplyAmount')}</span>
<span>{t('vatReturn.vat')}</span>
</div>
<div className="values">
<span>
<NumericFormat
value={ value.transactionAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.transactionAmount || 0) })}
</span>
<span>
<NumericFormat
value={ value.supplyAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.supplyAmount || 0) })}
</span>
<span>
<NumericFormat
value={ value.vatAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.vatAmount || 0) })}
</span>
</div>
</div>

9
src/entities/vat-return/ui/list-item.tsx
View File

@@ -1,4 +1,5 @@
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps } from '../model/types';
@@ -12,6 +13,7 @@ export const ListItem = ({
paymentMethod,
amount
}: ListItemProps) => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigate();
const onClickToNavigate = () => {
@@ -40,12 +42,7 @@ export const ListItem = ({
</div>
</div>
<div className="transaction-amount">
<NumericFormat
value={ amount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
</div>
</>

6
src/entities/vat-return/ui/list-wrap.tsx
View File

@@ -1,5 +1,6 @@
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { ListFilter } from './filter/list-filter';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
@@ -19,6 +20,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const ListWrap = () => {
const { t } = useTranslation();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
@@ -181,14 +183,14 @@ export const ListWrap = () => {
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
alt={t('transaction.searchOptions')}
/>
</button>
</div>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt="다운로드"
alt={t('transaction.download')}
onClick={ onClickToDownloadExcel }
/>
</button>

10
src/entities/vat-return/ui/reference-request-fail.tsx
View File

@@ -1,4 +1,5 @@
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
FilterMotionDuration,
FilterMotionStyle,
@@ -16,6 +17,7 @@ export const ReferenceRequestFail = ({
setPageOn,
errorMsg
}: ReferenceRequestFailProps) => {
const { t } = useTranslation();
const onClickToClose = () => {
setPageOn(false);
};
@@ -40,13 +42,13 @@ export const ReferenceRequestFail = ({
aria-hidden="true"
></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<span>{t('vatReturn.vatReferenceData')}</span>
<br/>
<span>신청 실패하였습니다</span>
<span>{t('vatReturn.requestFailed')}</span>
</h1>
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>{t('vatReturn.result')} :</span>
<span>{ errorMsg }</span>
</p>
</div>
@@ -55,7 +57,7 @@ export const ReferenceRequestFail = ({
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToClose }
>확인</button>
>{t('common.confirm')}</button>
</div>
</div>
</div>

16
src/entities/vat-return/ui/reference-request-success.tsx
View File

@@ -1,4 +1,5 @@
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
FilterMotionDuration,
FilterMotionStyle,
@@ -19,6 +20,7 @@ export const ReferenceRequestSuccess = ({
email,
startDate
}: ReferenceRequestSuccessProps) => {
const { t } = useTranslation();
const onClickToClose = () => {
setPageOn(false);
};
@@ -39,25 +41,25 @@ export const ReferenceRequestSuccess = ({
>
<div className="success-icon" aria-hidden="true"></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<span>{t('vatReturn.vatReferenceData')}</span>
<br/>
<span>신청이 완료되었습니다.</span>
<span>{t('vatReturn.requestCompleted')}</span>
</h1>
<p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
<p className="success-subtitle">{t('vatReturn.fileProvidedBySelectedMethod')}</p>
<div className="success-result">
<p className="result-text">
<span>신청일 :</span> <span>{ moment(startDate).format('YYYY.MM.DD') }</span>
<span>{t('vatReturn.applicationDate')} :</span> <span>{ moment(startDate).format('YYYY.MM.DD') }</span>
<br/>
<span>메일주소 :</span> <span>{ email }</span>
<span>{t('vatReturn.emailAddress')} :</span> <span>{ email }</span>
</p>
</div>
<p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
<p className="success-note dot">{t('vatReturn.referenceDataNote')}</p>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToClose }
>확인</button>
>{t('common.confirm')}</button>
</div>
</div>
</motion.div>

12
src/entities/vat-return/ui/reference-wrap.tsx
View File

@@ -1,5 +1,6 @@
import moment from 'moment';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterSelect } from '@/shared/ui/filter/select';
import { ReferenceRequestSuccess } from './reference-request-success';
@@ -11,6 +12,7 @@ import { useStore } from '@/shared/model/store';
import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation';
export const ReferenceWrap = () => {
const { t } = useTranslation();
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const emailOptions = useStore.getState().UserStore.selectOptionsEmails;
const userMid = useStore.getState().UserStore.mid;
@@ -48,13 +50,13 @@ export const ReferenceWrap = () => {
<>
<div className="option-list no-padding pt-30">
<FilterSelect
title='가맹점'
title={t('merchant.title')}
selectValue={ mid }
selectSetter={ setMid }
selectOptions={ midOptions }
></FilterSelect>
<FilterButtonGroups
title='거래 과세/면세 구분'
title={t('vatReturn.taxExemptionType')}
activeValue={ payTax }
btnGroups={ VatReturnTaxBtnGroups }
setter={ setPayTax }
@@ -62,14 +64,14 @@ export const ReferenceWrap = () => {
maxBtn={ 2 }
></FilterButtonGroups>
<FilterCalendar
title='거래기간'
title={t('vatReturn.transactionPeriod')}
startDate={ startDate }
endDate={ endDate }
setStartDate={ setStartDate }
setEndDate={ setEndDate }
></FilterCalendar>
<FilterSelect
title='수령메일주소'
title={t('vatReturn.receivingEmail')}
selectValue={ email }
selectSetter={ setEmail }
selectOptions={ emailOptions }
@@ -79,7 +81,7 @@ export const ReferenceWrap = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToResquest }
>자료신청</button>
>{t('vatReturn.requestData')}</button>
</div>
<ReferenceRequestSuccess
pageOn={ successPageOn }

31
src/entities/vat-return/ui/section/amount-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { NumericFormat } from 'react-number-format';
@@ -14,6 +15,7 @@ export interface AmountSectionProps {
export const AmountSection = ({
detail
}: AmountSectionProps) => {
const { t, i18n } = useTranslation();
const [isOpen, setIsOpen] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
@@ -35,19 +37,14 @@ export const AmountSection = ({
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">
<NumericFormat
value={ detail.totalAmount }
thousandSeparator
displayType="text"
></NumericFormat>
<span className="unit">원</span>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.totalAmount || 0) })}
</div>
<button
className="chip-btn"
type="button"
onClick={ () => openSection() }
>
<span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
<span>{t('vatReturn.amountDetail')}</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</button>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
@@ -55,25 +52,15 @@ export const AmountSection = ({
<div className="amount-expand">
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;공급가액</span>
<span className="label">·&nbsp;&nbsp;{t('vatReturn.supplyAmount')}</span>
<span className="value">
<NumericFormat
value={ detail.supplyAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.supplyAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;VAT</span>
<span className="label">·&nbsp;&nbsp;{t('vatReturn.vat')}</span>
<span className="value">
<NumericFormat
value={ detail.vatAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.vatAmount || 0) })}
</span>
</li>
</ul>
@@ -95,7 +82,7 @@ export const AmountSection = ({
className="doc-btn"
type="button"
onClick={ onClickToOpenDownloadBottomSheet }
>세금계산서</button>
>{t('vatReturn.taxInvoice')}</button>
</div>
</div>
{ !!downloadBottomSheetOn &&

14
src/entities/vat-return/ui/section/issue-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';
export interface IssueSectionProps {
@@ -8,18 +9,19 @@ export interface IssueSectionProps {
export const IssueSection = ({
detail
}: IssueSectionProps) => {
const { t } = useTranslation();
return (
<>
<div className="txn-section">
<div className="section-title">발행 정보</div>
<div className="section-title">{t('vatReturn.issueInfo')}</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">MID</span>
<span className="v">{ detail.mid }</span>
</li>
<li className="kv-row">
<span className="k">발행대상일자</span>
<span className="k">{t('vatReturn.issueTargetDate')}</span>
<span className="v">
{ !!detail.targetBusinessStartDate && !!detail.targetBusinessEndDate &&
moment(detail.targetBusinessStartDate).format('YYYY.MM.DD')
@@ -31,7 +33,7 @@ export const IssueSection = ({
</span>
</li>
<li className="kv-row">
<span className="k">발행일자</span>
<span className="k">{t('vatReturn.issueDate')}</span>
<span className="v">
{ !!detail.issueDate &&
moment(detail.issueDate).format('YYYY.MM.DD')
@@ -39,15 +41,15 @@ export const IssueSection = ({
</span>
</li>
<li className="kv-row">
<span className="k">적요</span>
<span className="k">{t('vatReturn.subject')}</span>
<span className="v">{ detail.subject }</span>
</li>
<li className="kv-row">
<span className="k">발행대상</span>
<span className="k">{t('vatReturn.issueTarget')}</span>
<span className="v">{ detail.targetType }</span>
</li>
<li className="kv-row">
<span className="k">영수구분</span>
<span className="k">{t('vatReturn.receiptType')}</span>
<span className="v">{ detail.receiptType }</span>
</li>
<li className="kv-row">

10
src/entities/vat-return/ui/section/receiver-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';
export interface ReceiverSectionProps {
@@ -7,23 +8,24 @@ export interface ReceiverSectionProps {
export const ReceiverSection = ({
detail
}: ReceiverSectionProps) => {
const { t } = useTranslation();
return (
<>
<div className="txn-section">
<div className="section-title">공급받는 자 정보</div>
<div className="section-title">{t('vatReturn.receiverInfo')}</div>
</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">사업자등록번호</span>
<span className="k">{t('merchant.businessRegistrationNumber')}</span>
<span className="v">{ detail.receiverBusinessRegistrationNumber }</span>
</li>
<li className="kv-row">
<span className="k">상호명</span>
<span className="k">{t('merchant.companyName')}</span>
<span className="v">{ detail.receiverCompanyName }</span>
</li>
<li className="kv-row">
<span className="k">대표자명</span>
<span className="k">{t('merchant.representativeName')}</span>
<span className="v">{ detail.receiverCeoName }</span>
</li>
</ul>

10
src/entities/vat-return/ui/section/supplier-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';
export interface SupplierSectionProps {
@@ -7,23 +8,24 @@ export interface SupplierSectionProps {
export const SupplierSection = ({
detail
}: SupplierSectionProps) => {
const { t } = useTranslation();
return (
<>
<div className="txn-section">
<div className="section-title">공급자 정보</div>
<div className="section-title">{t('vatReturn.supplierInfo')}</div>
</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">사업자등록번호</span>
<span className="k">{t('merchant.businessRegistrationNumber')}</span>
<span className="v">{ detail.supplierBusinessRegistrationNumber }</span>
</li>
<li className="kv-row">
<span className="k">상호명</span>
<span className="k">{t('merchant.companyName')}</span>
<span className="v">{ detail.supplierCompanyName }</span>
</li>
<li className="kv-row">
<span className="k">대표자명</span>
<span className="k">{t('merchant.representativeName')}</span>
<span className="v">{ detail.supplierCeoName }</span>
</li>
</ul>

6
src/entities/vat-return/ui/vat-return-tab.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import {
@@ -8,6 +9,7 @@ import {
export const VatReturnTab = ({
activeTab
}: VatReturnTabProps) => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const onClickToNavigation = (tab: VatReturnTabKeys) => {
@@ -26,11 +28,11 @@ export const VatReturnTab = ({
<button
className={`subtab-btn ${(activeTab === VatReturnTabKeys.List)? 'active': ''}` }
onClick={ () => onClickToNavigation(VatReturnTabKeys.List) }
>세금 계산서</button>
>{t('vatReturn.taxInvoice')}</button>
<button
className={`subtab-btn ${(activeTab === VatReturnTabKeys.VatReference)? 'active': ''}` }
onClick={ () => onClickToNavigation(VatReturnTabKeys.VatReference) }
>부가세 참고</button>
>{t('vatReturn.vatReference')}</button>
</div>
</>
);

38
src/locales/en.json
View File

@@ -190,8 +190,8 @@
},
"account": {
"title": "Account Management",
"userManagement": "User Management",
"passwordManagement": "Password Management",
"userManagement": "Users",
"passwordManagement": "Passwords",
"userSettings": "User Settings",
"addUser": "Add User",
"addAccount": "Add Account",
@@ -273,6 +273,7 @@
"totalSettlement": "Total Settlement",
"currencyWon": "",
"currencySymbol": "₩",
"money": "₩{{value}}",
"goToSales": "Go to Sales",
"transactionInsights": "Transaction Insights",
"basedOnLastWeek": "Based on Last Week",
@@ -491,6 +492,39 @@
"faceAuth": {
"title": "Face Authentication"
},
"vatReturn": {
"title": "VAT Return Data",
"taxInvoice": "Tax Invoice",
"vatReference": "VAT Reference",
"taxInvoiceDetail": "Tax Invoice Details",
"viewDetails": "View Details",
"transactionAmount": "Transaction Amount",
"supplyAmount": "Supply Amount",
"vat": "VAT",
"totalAmount": "Total Amount",
"transactionDate": "Transaction Date",
"amountDetail": "Amount Details",
"issueInfo": "Issue Information",
"issueTargetDate": "Issue Target Date",
"issueDate": "Issue Date",
"subject": "Subject",
"issueTarget": "Issue Target",
"receiptType": "Receipt Type",
"supplierInfo": "Supplier Information",
"receiverInfo": "Receiver Information",
"taxExemptionType": "Tax/Exemption Type",
"transactionPeriod": "Transaction Period",
"receivingEmail": "Receiving Email",
"requestData": "Request Data",
"vatReferenceData": "VAT Reference Data",
"requestCompleted": "Request completed.",
"requestFailed": "Request failed",
"fileProvidedBySelectedMethod": "The file will be provided by the selected method.",
"applicationDate": "Application Date",
"emailAddress": "Email Address",
"referenceDataNote": "Please compare with internal accounting data\nbefore using this reference material.",
"result": "Result"
},
"common": {
"latest": "Latest",
"oldest": "Oldest"

34
src/locales/ko.json
View File

@@ -277,6 +277,7 @@
"totalSales": "총 매출액",
"totalSettlement": "총 정산액",
"currencyWon": "원",
"money": "{{value}}원",
"goToSales": "오늘 매출 바로가기",
"transactionInsights": "거래 인사이트",
"basedOnLastWeek": "최근 일주일 기준",
@@ -495,6 +496,39 @@
"faceAuth": {
"title": "안면인증"
},
"vatReturn": {
"title": "부가세 신고 자료",
"taxInvoice": "세금 계산서",
"vatReference": "부가세 참고",
"taxInvoiceDetail": "세금계산서 상세",
"viewDetails": "세부내역 조회",
"transactionAmount": "거래금액",
"supplyAmount": "공급가액",
"vat": "VAT",
"totalAmount": "합계금액",
"transactionDate": "거래일",
"amountDetail": "금액상세",
"issueInfo": "발행 정보",
"issueTargetDate": "발행대상일자",
"issueDate": "발행일자",
"subject": "적요",
"issueTarget": "발행대상",
"receiptType": "영수구분",
"supplierInfo": "공급자 정보",
"receiverInfo": "공급받는 자 정보",
"taxExemptionType": "거래 과세/면세 구분",
"transactionPeriod": "거래기간",
"receivingEmail": "수령메일주소",
"requestData": "자료신청",
"vatReferenceData": "부가세 참고 자료",
"requestCompleted": "신청이 완료되었습니다.",
"requestFailed": "신청 실패하였습니다",
"fileProvidedBySelectedMethod": "파일은 선택한 수령 방법으로 제공됩니다.",
"applicationDate": "신청일",
"emailAddress": "메일주소",
"referenceDataNote": "참고용 자료이므로 반드시 내부 회계자료 등과\n비교 후 사용해 주세요.",
"result": "결과"
},
"common": {
"latest": "최신순",
"oldest": "오래된순"

8
src/pages/additional-service/ars/detail-page.tsx
View File

@@ -86,13 +86,7 @@ export const ArsDetailPage = () => {
<div className="pay-top">
<div className="num-amount">
<span className="amount">
<NumericFormat
value={ detail?.amount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
</span>
</div>
<div className="num-store">{ detail?.corpName }</div>

8
src/pages/additional-service/fund-account/result-detail-page.tsx
View File

@@ -86,13 +86,7 @@ export const FundAccountResultDetailPage = () => {
<div className="pay-top">
<div className="num-amount">
<span className="amount">
<NumericFormat
value={detail?.amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
</span>
</div>
<div className="num-store">{detail?.accountName}({detail?.accountNo})</div>

8
src/pages/additional-service/fund-account/transfer-detail-page.tsx
View File

@@ -79,13 +79,7 @@ export const FundAccountTransferDetailPage = () => {
<div className="pay-top">
<div className="num-amount">
<span className="amount">
<NumericFormat
value={detail?.amount}
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
</span>
</div>
<div className="num-store">{detail?.accountName}({detail?.accountNo})</div>

14
src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx
View File

@@ -52,17 +52,9 @@ export const LinkPaymentApplyConfirmPage = () => {
if (rs.status) {
navigate(PATHS.additionalService.linkPayment.confirmSuccess);
} else {
// 응답은 성공했지만 status가 false인 경우
const validationErrors = rs.error?.details?.validationErrors;
if (validationErrors) {
// validation 에러 메시지들을 수집
const errorMessages = Object.values(validationErrors).join('\n');
snackBar(`[실패] ${errorMessages}`);
} else {
// 일반 에러 메시지
const errorMessage = rs.error?.message || '요청을 처리할 수 없습니다.';
snackBar(`[실패] ${errorMessage}`);
}
// 일반 에러 메시지
const errorMessage = rs.error?.message || '요청을 처리할 수 없습니다.';
snackBar(`[실패] ${errorMessage}`);
}
})
.catch((error) => {

2
src/pages/additional-service/link-payment/link-payment-detail-page.tsx
View File

@@ -157,7 +157,7 @@ export const LinkPaymentDetailPage = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSeparateApproval()}
disabled={false}
disabled={detailExposure}
>분리승인 상세</button>
</div>
</div>

269
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx
View File

@@ -52,11 +52,63 @@ export const LinkPaymentSeparateApprovalPage = () => {
const handleCheckboxChange = (subRequestId: string) => {
setSelectedItems(prev => {
if (prev.includes(subRequestId)) {
return prev.filter(id => id !== subRequestId);
} else {
return [...prev, subRequestId];
// 현재 클릭한 item 찾기
const target = items.find(i => i.subRequestId === subRequestId)
|| items.find((_, idx) => `item-${idx}` === subRequestId);
if (!target) return prev;
// 동일한 requestId를 가진 MAIN, SUB 그룹 가져오기
const sameRequestIdItems = items.filter(i => i.requestId === target.requestId);
const mainItem = sameRequestIdItems.find(i => i.type === LinkPaymentSeparateType.MAIN);
// PENDING 상태인 SUB만 필터링
const subItems = sameRequestIdItems.filter(i =>
i.type === LinkPaymentSeparateType.SUB && i.paymentStatus === 'PENDING'
);
const mainId = mainItem?.subRequestId || (mainItem ? `item-${items.indexOf(mainItem)}` : '');
const subIds = subItems.map(i => i.subRequestId || `item-${items.indexOf(i)}`);
// -----------------------------
// MAIN 클릭 시
// -----------------------------
if (target.type === LinkPaymentSeparateType.MAIN) {
const isMainChecked = prev.includes(mainId);
if (isMainChecked) {
// MAIN 해제 → PENDING인 SUB만 해제
return prev.filter(id => ![mainId, ...subIds].includes(id));
} else {
// MAIN 체크 → PENDING인 SUB만 추가
return [...new Set([...prev, mainId, ...subIds])];
}
}
// -----------------------------
// SUB 클릭 시
// -----------------------------
const isChecked = prev.includes(subRequestId);
let updated: string[] = [];
if (isChecked) {
// SUB 해제
updated = prev.filter(id => id !== subRequestId);
// 해제 후 남은 PENDING SUB 중 하나라도 빠져 있으면 MAIN도 해제
const allPendingSubsChecked = subIds.every(id => updated.includes(id));
if (!allPendingSubsChecked && mainId) {
updated = updated.filter(id => id !== mainId);
}
} else {
// SUB 체크
updated = [...prev, subRequestId];
// 모든 PENDING SUB 체크되면 MAIN도 자동 체크
const allPendingSubsChecked = subIds.every(id => updated.includes(id));
if (allPendingSubsChecked && mainId) {
updated = [...new Set([...updated, mainId])];
}
}
return updated;
});
};
@@ -67,12 +119,60 @@ export const LinkPaymentSeparateApprovalPage = () => {
}));
};
// 기간연장 버튼 활성화 조건: 선택된 항목이 있고, 모든 선택된 항목의 연장기간이 설정됨
const isExtendButtonEnabled = () => {
if (selectedItems.length === 0) return false;
return selectedItems.every(id => extendPeriods[id] && extendPeriods[id] !== '');
// 각 SUB 항목이 연장기간 설정 가능한지 체크
const canExtendPeriod = (item: ExtensionLinkPaySeparateDetailItem) => {
const today = moment().format('YYYYMMDD');
const paymentLimitDate = item.paymentLimitDate || '';
const paymentLimitCount = item.paymentLimitCount || 0;
// 연장횟수 < 3 이고 유효일자 >= 조회일자
return paymentLimitCount < 3 && paymentLimitDate >= today;
};
// 각 SUB 항목이 링크중단 가능한지 체크
const canLinkBreak = (item: ExtensionLinkPaySeparateDetailItem) => {
const today = moment().format('YYYYMMDD');
const paymentLimitDate = item.paymentLimitDate || '';
// 유효일자 >= 조회일자
return paymentLimitDate >= today;
};
const isExtendButtonEnabled = () => {
// MAIN 제외, 체크된 SUB 중에서
const checkedSubs = items.filter((i, index) => {
const itemId = i.subRequestId || `item-${index}`;
return i.type === LinkPaymentSeparateType.SUB &&
selectedItems.includes(itemId) &&
i.paymentStatus === 'PENDING';
});
// 체크된 SUB가 없으면 비활성화
if (checkedSubs.length === 0) return false;
// 모든 체크된 SUB가 연장 가능하고, 연장기간이 설정되어 있어야 함
return checkedSubs.every((sub) => {
const itemId = sub.subRequestId || `item-${items.indexOf(sub)}`;
return canExtendPeriod(sub) && extendPeriods[itemId] && extendPeriods[itemId] !== '';
});
};
const isLinkBreadkEnabled = () => {
// MAIN 제외, 체크된 SUB 중에서
const checkedSubs = items.filter((i, index) => {
const itemId = i.subRequestId || `item-${index}`;
return i.type === LinkPaymentSeparateType.SUB &&
selectedItems.includes(itemId) &&
i.paymentStatus === 'PENDING';
});
// 체크된 SUB가 없으면 비활성화
if (checkedSubs.length === 0) return false;
// 모든 체크된 SUB가 링크중단 가능해야 함
return checkedSubs.every(sub => canLinkBreak(sub));
}
const onClickToValidityPeriod = () => {
// 기간연장 바텀시트 열기
setExtendedPeriodBottomSheetOn(true);
@@ -94,8 +194,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
return;
}
// 모든 선택된 항목들의 연장 기간이 설정되었는지 확인
const allHaveExtendPeriod = selectedItems.every(id => extendPeriods[id]);
// MAIN을 제외한 선택된 SUB 항목들의 연장 기간이 설정되었는지 확인
const selectedSubItems = selectedItems.filter(id => {
const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
return item && item.type === LinkPaymentSeparateType.SUB;
});
const allHaveExtendPeriod = selectedSubItems.every(id => extendPeriods[id]);
if (!allHaveExtendPeriod) {
setErrorMessage('모든 선택된 항목의 연장 기간을 선택해주세요.');
@@ -103,15 +208,15 @@ export const LinkPaymentSeparateApprovalPage = () => {
return;
}
// 첫 번째 선택된 항목의 연장 기간 사용 (모든 항목이 같은 기간으로 연장)
const firstSelectedId = selectedItems[0] as string;
const extendDays = extendPeriods[firstSelectedId] as string;
// 첫 번째 선택된 SUB 항목의 연장 기간 사용 (모든 항목이 같은 기간으로 연장)
const firstSelectedSubId = selectedSubItems[0] as string;
const extendDays = extendPeriods[firstSelectedSubId] as string;
// 연장 날짜 계산 (오늘 날짜 + 연장일수)
const extendDate = moment().add(parseInt(extendDays), 'days').format('YYYYMMDD');
// selectedItems를 API 형식으로 변환
const selectedItemsData = selectedItems.map(itemId => {
// MAIN을 제외한 SUB 항목만 API 형식으로 변환
const selectedItemsData = selectedSubItems.map(itemId => {
const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
return {
type: item?.type || '',
@@ -157,7 +262,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
return;
}
const selectedItemsData = selectedItems.map(itemId => {
// MAIN을 제외한 SUB 항목만 필터링
const selectedSubItems = selectedItems.filter(id => {
const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
return item && item.type === LinkPaymentSeparateType.SUB;
});
const selectedItemsData = selectedSubItems.map(itemId => {
const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
return {
type: item?.type || '',
@@ -230,67 +341,75 @@ export const LinkPaymentSeparateApprovalPage = () => {
<div className="approval-cards-wrapper">
{items.map((item, index) => {
const itemId = item.subRequestId || `item-${index}`;
const isDisabled = item.paymentStatus !== 'PENDING';
return (
<div key={itemId} className={`approval-card ${selectedItems.includes(itemId) ? 'selected' : ''}`}>
<div className="card-header">
<input
type="checkbox"
id={`checkbox-${itemId}`}
name={`checkbox-${itemId}`}
checked={selectedItems.includes(itemId)}
onChange={() => handleCheckboxChange(itemId)}
className="card-checkbox"
/>
<span className="card-tag">[{item.type}]</span>
<span className="card-tid">{item.moid}</span>
</div>
<div className="card-body">
<ul className="info-list">
<li>
<span className="label">• 거래금액:</span>
<span className="value">{item.amount.toLocaleString()}</span>
</li>
<li>
<span className="label">• 결제상태:</span>
<span className="value">{item.paymentStatusName}</span>
</li>
{item.type !== LinkPaymentSeparateType.MAIN && (
<>
<li>
<span className="label">• 유효기간:</span>
<span className="value">
{item.paymentLimitDate
? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
: '-'
}
</span>
</li>
<li>
<span className="label">• 연장횟수:</span>
<span className="value">{item.paymentLimitCount}</span>
</li>
</>
)}
</ul>
</div>
<div className="card-footer">
<div className="period-selector">
<label>연장기간</label>
<select
value={extendPeriods[itemId] || ''}
onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
disabled={item.type === LinkPaymentSeparateType.MAIN}
>
<option value="">미설정</option>
{[1, 2, 3, 4, 5, 6, 7].map(days => {
const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
return <option key={days} value={days.toString()}>{targetDate}</option>;
})}
</select>
<div key={itemId} className={`approval-card ${selectedItems.includes(itemId) ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}>
<div className="card-header">
<input
type="checkbox"
id={`checkbox-${itemId}`}
name={`checkbox-${itemId}`}
checked={selectedItems.includes(itemId)}
onChange={() => handleCheckboxChange(itemId)}
className="card-checkbox"
disabled={item.paymentStatus !== 'PENDING'}
/>
<span className="card-tag">[{item.type}]</span>
<span className="card-tid">{item.moid}</span>
</div>
<div className="card-body">
<ul className="info-list">
<li>
<span className="label">• 거래금액:</span>
<span className="value">{item.amount.toLocaleString()}</span>
</li>
<li>
<span className="label">• 결제상태:</span>
<span className="value">{item.paymentStatusName}</span>
</li>
{item.type !== LinkPaymentSeparateType.MAIN && (
<>
<li>
<span className="label">• 유효기간:</span>
<span className="value">
{item.paymentLimitDate
? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
: '-'
}
</span>
</li>
<li>
<span className="label">• 연장횟수:</span>
<span className="value">{item.paymentLimitCount}</span>
</li>
</>
)}
</ul>
</div>
<div className="card-footer">
<div className="period-selector">
<label>연장기간</label>
<select
value={extendPeriods[itemId] || ''}
onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
disabled={item.type === LinkPaymentSeparateType.MAIN || item.paymentStatus !== "PENDING" || !canExtendPeriod(item)}
>
<option value="">
{item.type === LinkPaymentSeparateType.MAIN
? '-'
: !canExtendPeriod(item)
? '-'
: '미설정'}
</option>
{canExtendPeriod(item) && [1, 2, 3, 4, 5, 6, 7].map(days => {
const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
return <option key={days} value={days.toString()}>{targetDate}</option>;
})}
</select>
</div>
</div>
</div>
</div>
);
})}
</div>
@@ -306,7 +425,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToSendLink}
disabled={selectedItems.length === 0}
disabled={!isLinkBreadkEnabled()}
>링크중단
</button>
</div>

2
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-success-page.tsx
View File

@@ -1,6 +1,4 @@
import { motion } from 'framer-motion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import {
FilterMotionDuration,
FilterMotionStyle,

8
src/pages/additional-service/payout/detail-page.tsx
View File

@@ -108,13 +108,7 @@ export const PayoutDetailPage = () => {
<div className="pay-top">
<div className="num-amount">
<span className="amount">
<NumericFormat
value={ detail?.disbursementAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
</span>
</div>
<div className="num-store">{detail?.companyName}</div>

8
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -231,13 +231,7 @@ export const AllTransactionListPage = () => {
<div className="summary-label">{t('transaction.searchAmount')}</div>
<div className="summary-amount">
<span className="amount-text">
<NumericFormat
value={ totalAmount }
thousandSeparator
displayType="text"
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
</span>
<div className="summary-actions">
<button className="filter-btn">

16
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -218,13 +218,7 @@ export const CashReceiptListPage = () => {
<div className="row">
<span className="label">{ t('cashReceipt.approval') }</span>
<strong className="amount22">
<NumericFormat
value={ approvalAmount }
thousandSeparator
displayType="text"
prefix={ i18n.language === 'en' ? t('home.currencySymbol') : '' }
suffix={ i18n.language === 'en' ? '' : t('home.currencyWon') }
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(approvalAmount || 0) })}
</strong>
<span className="count">
<NumericFormat
@@ -239,13 +233,7 @@ export const CashReceiptListPage = () => {
<div className="row">
<span className="label">{ t('common.cancel') }</span>
<strong className="amount19">
<NumericFormat
value={ cancelAmount }
thousandSeparator
displayType="text"
prefix={ i18n.language === 'en' ? t('home.currencySymbol') : '' }
suffix={ i18n.language === 'en' ? '' : t('home.currencyWon') }
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(cancelAmount || 0) })}
</strong>
<span className="count">
<NumericFormat

6
src/pages/vat-return/detail-page.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -26,6 +27,7 @@ import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-de
import { useVatReturnBreakdownMutation } from '@/entities/vat-return/api/use-vat-return-breakdown-mutation';
export const DetailPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const location = useLocation();
@@ -37,7 +39,7 @@ export const DetailPage = () => {
const [detail, setDetail] = useState<VatReturnDetailResponse>({});
const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
useSetHeaderTitle('세금계산서 상세');
useSetHeaderTitle(t('vatReturn.taxInvoiceDetail'));
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
navigate(PATHS.vatReturn.list);
@@ -103,7 +105,7 @@ export const DetailPage = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToOpenBottomSheet }
>세부내역 조회</button>
>{t('vatReturn.viewDetails')}</button>
</div>
</div>
</div>

4
src/pages/vat-return/list-page.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
@@ -13,11 +14,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout';
export const ListPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.List);
useSetHeaderTitle('부가세 신고 자료');
useSetHeaderTitle(t('vatReturn.title'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {

4
src/pages/vat-return/reference-page.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
@@ -13,11 +14,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout';
export const ReferencePage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.VatReference);
useSetHeaderTitle('부가세 신고 자료');
useSetHeaderTitle(t('vatReturn.title'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {

23
src/shared/ui/assets/css/style-fix.css
View File

@@ -233,6 +233,29 @@ main.home-main{
box-shadow: 0 4px 12px rgba(62, 106, 252, 0.2);
}
/* PENDING이 아닌 항목 비활성화 스타일 */
.approval-card.disabled {
opacity: 0.5;
background: var(--color-F9F9F9);
pointer-events: none;
}
.approval-card.disabled .card-checkbox {
cursor: not-allowed;
background-color: var(--color-E6E6E6);
border-color: var(--color-CCCCCC);
}
.approval-card.disabled .card-tid,
.approval-card.disabled .info-list .value {
color: var(--color-999999);
}
.approval-card.disabled .period-selector select {
background-color: var(--color-F3F3F3);
cursor: not-allowed;
}
.approval-card .card-checkbox {
display: block !important;
position: absolute;