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

에스크로 및 세금계산서 상세 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-28 20:09:43 +09:00
parent cf428c7466
commit 84ade896c4
4 changed files with 142 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/entities/vat-return/model/types.ts
View File

@@ -43,7 +43,7 @@ export interface Breakdown {
totalAmount: number;
supplyAmount: number;
vatAmount: number;
transactionCount: number;
transactionAmount: number;
};
export interface VatReturnListResponse extends DefaulResponsePagination {
@@ -77,6 +77,7 @@ export interface VatReturnDetailParams {
export interface VatReturnDetailResponse {
id?: number;
transactionAmount?: number;
totalAmount?: number;
supplyAmount?: number;
vatAmount?: number;

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

@@ -1,21 +1,47 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
import { Breakdown } from "../model/types";
import moment from "moment";
import { NumericFormat } from "react-number-format";
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useEffect, useState } from "react";
export interface VatReturnListDetailBottomSheetProps {
bottomSheetOn: boolean;
setBottomSheetOn: (bottomSheetOn: boolean) => void;
breakdown: Array<Breakdown>
breakdown: Array<Breakdown>;
transactionAmount?: number;
supplyAmount?: number;
vatAmount?: number;
totalAmount?: number;
};
export const VatReturnListDetailBottomSheet = ({
bottomSheetOn,
setBottomSheetOn,
breakdown
breakdown,
transactionAmount,
supplyAmount,
vatAmount,
totalAmount
}: VatReturnListDetailBottomSheetProps) => {
const [isOpenDetail, setIsOpenDetail] = useState<Array<boolean>>([]);
const onClickToClose = () => {
setBottomSheetOn(false);
};
const openDetail = (index: number) => {
let arr = breakdown.map((value, index) => false);
arr[index] = true;
setIsOpenDetail(arr);
};
useEffect(() => {
let arr = breakdown.map((value, index) => false);
setIsOpenDetail(arr);
}, [])
return (
<>
<div className="bg-dim"></div>
@@ -41,99 +67,119 @@ export const VatReturnListDetailBottomSheet = ({
<div className="summary">
<div className="row">
<div className="label desc dot">거래금액 :</div>
<div className="value">1,000,000,000</div>
<div className="value">
<NumericFormat
value={ transactionAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</div>
</div>
<div className="row">
<div className="label desc dot">공급가액 :</div>
<div className="value">43,758,520</div>
<div className="value">
<NumericFormat
value={ supplyAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</div>
</div>
<div className="row">
<div className="label desc dot">VAT :</div>
<div className="value">4,366,850</div>
<div className="value">
<NumericFormat
value={ vatAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</div>
</div>
<div className="row">
<div className="label desc dot">합계금액 :</div>
<div className="value">48,125,100</div>
</div>
</div>
<div className="list">
<div className="list-header">
<div className="head-date">거래일</div>
<div className="head-amount">합계금액</div>
</div>
<div className="item">
<span className="dot"></span>
<span className="date">2025/08/01</span>
<div className="amount">
<span className="text">8,125,100</span>
<img
className="arrow up"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt=""
/>
</div>
</div>
<div className="item item-detail">
<div className="labels">
<span>거래금액</span>
<span>공급가액</span>
<span>VAT</span>
</div>
<div className="values">
<span>1,000,000</span>
<span>720,000</span>
<span>80,000</span>
</div>
</div>
<div className="item">
<span className="dot"></span>
<span className="date">2025/08/01</span>
<div className="amount">
<span className="text">8,125,100</span>
<img
className="arrow down"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt=""
/>
</div>
</div>
<div className="item">
<span className="dot"></span>
<span className="date">2025/08/01</span>
<div className="amount">
<span className="text">8,125,100</span>
<img
className="arrow down"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt=""
/>
</div>
</div>
<div className="item">
<span className="dot"></span>
<span className="date">2025/08/01</span>
<div className="amount">
<span className="text">8,125,100</span>
<img
className="arrow down"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt=""
/>
</div>
</div>
<div className="item">
<span className="dot"></span>
<span className="date">2025/08/01</span>
<div className="amount">
<span className="text">8,125,100</span>
<img
className="arrow down"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt=""
/>
<div className="value">
<NumericFormat
value={ totalAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</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>
{
breakdown.map((value, index) => (
<>
<div className="item">
<span className="dot"></span>
<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>
</span>
<img
className="arrow down"
src={ IMAGE_ROOT + '/ico_arrow.svg' }
onClick={ () => openDetail(index) }
/>
</div>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ isOpenDetail[index] &&
<div className="item item-detail">
<div className="labels">
<span>거래금액</span>
<span>공급가액</span>
<span>VAT</span>
</div>
<div className="values">
<span>
<NumericFormat
value={ value.transactionAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
<span>
<NumericFormat
value={ value.supplyAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
<span>
<NumericFormat
value={ value.vatAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</div>
</div>
}
</SlideDown>
</>
))
}
</div>
}
</div>
</div>
</div>

2
src/pages/transaction/billing/list-page.tsx
View File

@@ -164,7 +164,7 @@ export const BillingListPage = () => {
return (
<>
<main>
<div className="tab-content">
<div className="tab-content pb-86">
<div className="tab-pane sub active">
<div className="summary-section">
<div className="credit-controls">

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

@@ -9,9 +9,7 @@ import {
VatReturnBreakdownParams,
VatReturnBreakdownResponse,
VatReturnDetailParams,
VatReturnDetailResponse,
VatReturnTaxInvoiceParams,
VatReturnTaxInvoiceResponse
VatReturnDetailResponse
} from '@/entities/vat-return/model/types';
import {
useSetOnBack,
@@ -32,13 +30,13 @@ export const DetailPage = () => {
const location = useLocation();
let taxInvoiceNumber = location?.state.taxInvoiceNumber;
taxInvoiceNumber = 'TAX202506300001';
// taxInvoiceNumber = 'TAX202506300001';
const [openAmount, setOpenAmount] = useState<boolean>(false);
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
const [detail, setDetail] = useState<VatReturnTaxInvoiceResponse>({});
const [detail, setDetail] = useState<VatReturnDetailResponse>({});
const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
useSetHeaderTitle('세금계산서 상세');
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
@@ -56,24 +54,16 @@ export const DetailPage = () => {
};
vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
setDetail(rs);
});
};
const callVatReturnBreakdown = async() => {
let params: VatReturnBreakdownParams = {
taxInvoiceNumber: taxInvoiceNumber,
};
try{
let rs = await vatReturnBreakdown(params);
}
catch{
console.log('error');
return;
}
/*
vatReturnBreakdown(params).then((rs: VatReturnBreakdownResponse) => {
setBreakdown(rs.breakdown);
});
*/
};
const onClickToOpenBottomSheet = () => {
@@ -82,7 +72,7 @@ export const DetailPage = () => {
useEffect(() => {
callTaxInvoice();
// callVatReturnBreakdown();
callVatReturnBreakdown();
}, []);
return (
@@ -123,6 +113,10 @@ export const DetailPage = () => {
bottomSheetOn={ bottomSheetOn }
setBottomSheetOn={ setBottomSheetOn }
breakdown={ breakdown }
transactionAmount={ detail?.transactionAmount }
supplyAmount={ detail?.supplyAmount }
vatAmount={ detail?.vatAmount }
totalAmount={ detail?.totalAmount }
></VatReturnListDetailBottomSheet>
}
</>