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>