세금계산서 항목 추가
This commit is contained in:
focp212@naver.com
@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { toPng } from 'html-to-image';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { FilterMotionDuration, FilterMotionVariants } from '../model/constant';
|
||||
import { RecipientInfo, SupplierInfo, TransactionDetails } from '@/entities/vat-return/model/types';
|
||||
@@ -37,6 +37,9 @@ export const TaxInvoiceSample = ({
|
||||
const { t } = useTranslation();
|
||||
const { isIOS, saveImage } = useAppBridge();
|
||||
|
||||
const [newSupplyAmount, setNewSupplyAmount] = useState<Array<string>>([]);
|
||||
const [newTaxAmount, setNewTaxAmount] = useState<Array<string>>([]);
|
||||
|
||||
const downloadImage = async () => {
|
||||
const section = document.getElementById('image-section') as HTMLElement;
|
||||
|
||||
@@ -90,6 +93,56 @@ export const TaxInvoiceSample = ({
|
||||
setTaxInvoiceSampleOn(false);
|
||||
};
|
||||
|
||||
const showNewSupplyAmount = () => {
|
||||
let rs = [];
|
||||
let emptyCnt = 11 - newSupplyAmount.length;
|
||||
for(let i=0;i<emptyCnt;i++){
|
||||
rs.push(
|
||||
<td className="inner-table10-td2"> </td>
|
||||
);
|
||||
}
|
||||
for(let i=0;i<newSupplyAmount.length;i++){
|
||||
let str = newSupplyAmount[i];
|
||||
rs.push(
|
||||
<td className="inner-table10-td2">{ str }</td>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
const showNewTaxAmount = () => {
|
||||
let rs = [];
|
||||
let emptyCnt = 10 - newTaxAmount.length;
|
||||
for(let i=0;i<emptyCnt;i++){
|
||||
rs.push(
|
||||
<td className="inner-table10-td2"> </td>
|
||||
);
|
||||
}
|
||||
for(let i=0;i<newTaxAmount.length;i++){
|
||||
let str = newTaxAmount[i];
|
||||
rs.push(
|
||||
<td className="inner-table10-td2">{ str }</td>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
const refactSupplyAmount = () => {
|
||||
let supplyAmountArr: Array<string> = [];
|
||||
if(supplyAmount){
|
||||
let newSupplyAmt = ''+supplyAmount;
|
||||
supplyAmountArr = newSupplyAmt.split('');
|
||||
}
|
||||
setNewSupplyAmount(supplyAmountArr);
|
||||
};
|
||||
const refactTaxAmount = () => {
|
||||
let taxAmountArr: Array<string> = [];
|
||||
if(taxAmount){
|
||||
let newTaxAmt = ''+taxAmount;
|
||||
taxAmountArr = newTaxAmt.split('');
|
||||
}
|
||||
setNewTaxAmount(taxAmountArr);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(!!taxInvoiceSampleOn){
|
||||
setTimeout(() => {
|
||||
@@ -98,6 +151,11 @@ export const TaxInvoiceSample = ({
|
||||
}
|
||||
}, [taxInvoiceSampleOn]);
|
||||
|
||||
useEffect(() => {
|
||||
refactSupplyAmount();
|
||||
refactTaxAmount();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="tax-invoice">
|
||||
@@ -197,26 +255,26 @@ export const TaxInvoiceSample = ({
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
>815-81-00527</td>
|
||||
>{ supplierInfo?.businessRegistrationNumber }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">상호(법인명)</td>
|
||||
<td className="inner-table6-td9">나이스페이 주식회사</td>
|
||||
<td className="inner-table6-td9">{ supplierInfo?.companyName }</td>
|
||||
<td className="inner-table6-td10">성명</td>
|
||||
<td className="inner-table6-td8">김광철</td>
|
||||
<td className="inner-table6-td8">{ supplierInfo?.ceoName }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">사업장 주소</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
>서울특별시 영등포구 문래동 28길 25 (문래동 3가)</td>
|
||||
>{ supplierInfo?.address }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7-1">업태</td>
|
||||
<td className="inner-table6-td9-1">서비스업</td>
|
||||
<td className="inner-table6-td9-1">{ supplierInfo?.businessType }</td>
|
||||
<td className="inner-table6-td10-1">종목</td>
|
||||
<td className="inner-table6-td8-1">전자상거거래업</td>
|
||||
<td className="inner-table6-td8-1">{ supplierInfo?.businessItem }</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -241,26 +299,26 @@ export const TaxInvoiceSample = ({
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
> </td>
|
||||
>{ recipientInfo?.businessRegistrationNumber }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">상호(법인명)</td>
|
||||
<td className="inner-table6-td9">나이스페이 주식회사</td>
|
||||
<td className="inner-table6-td9">{ recipientInfo?.companyName }</td>
|
||||
<td className="inner-table6-td10">성명</td>
|
||||
<td className="inner-table6-td8">홍길동</td>
|
||||
<td className="inner-table6-td8">{ recipientInfo?.ceoName }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">사업장 주소</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
>서울특별시 영등포구 문래동 28길 25 (문래동 3가)</td>
|
||||
>{ recipientInfo?.address }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7-1">업태</td>
|
||||
<td className="inner-table6-td9-1"></td>
|
||||
<td className="inner-table6-td9-1">{ recipientInfo?.businessType }</td>
|
||||
<td className="inner-table6-td10-1">종목</td>
|
||||
<td className="inner-table6-td8-1"></td>
|
||||
<td className="inner-table6-td8-1">{ recipientInfo?.businessItem }</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -298,9 +356,9 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table9-td2">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table9-td2-1">2025</td>
|
||||
<td className="inner-table9-td2-1">08</td>
|
||||
<td className="inner-table9-td2-1">05</td>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('YYYY'): '' }</td>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('MM'): '' }</td>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('DD'): '' }</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -335,17 +393,7 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table10-td1">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table10-td2">2</td>
|
||||
<td className="inner-table10-td2">3</td>
|
||||
<td className="inner-table10-td2">4</td>
|
||||
<td className="inner-table10-td2">5</td>
|
||||
<td className="inner-table10-td2">6</td>
|
||||
<td className="inner-table10-td2">7</td>
|
||||
<td className="inner-table10-td2">8</td>
|
||||
<td className="inner-table10-td2">4</td>
|
||||
<td className="inner-table10-td2">5</td>
|
||||
<td className="inner-table10-td2">5</td>
|
||||
<td className="inner-table10-td2">4</td>
|
||||
{ showNewSupplyAmount() }
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -379,16 +427,7 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table10-td1">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table10-td2">4</td>
|
||||
<td className="inner-table10-td2">5</td>
|
||||
<td className="inner-table10-td2">6</td>
|
||||
<td className="inner-table10-td2">9</td>
|
||||
<td className="inner-table10-td2">3</td>
|
||||
<td className="inner-table10-td2">3</td>
|
||||
<td className="inner-table10-td2">2</td>
|
||||
<td className="inner-table10-td2">6</td>
|
||||
<td className="inner-table10-td2">7</td>
|
||||
<td className="inner-table10-td2">4</td>
|
||||
{ showNewTaxAmount() }
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -428,13 +467,13 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table13-td1">월/일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td2">08/05</td>
|
||||
<td className="inner-table13-td2">{ (!!transactionDetails?.transactionPeriod)? moment(transactionDetails.transactionPeriod).format('MM/DD'): '' }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td2">08/05</td>
|
||||
<td className="inner-table13-td2"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td3">08/05</td>
|
||||
<td className="inner-table13-td3"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -447,7 +486,7 @@ export const TaxInvoiceSample = ({
|
||||
<td
|
||||
colSpan={ 7 }
|
||||
className="inner-table11-td1"
|
||||
>chamjo392m</td>
|
||||
> 비고 </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table9-td1">품목</td>
|
||||
@@ -459,13 +498,37 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table11-td1">비고</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td9">pg수수료</td>
|
||||
<td className="inner-table6-td9"> </td>
|
||||
<td className="inner-table6-td13">4</td>
|
||||
<td className="inner-table6-td14">1,243</td>
|
||||
<td className="inner-table6-td14">1,242</td>
|
||||
<td className="inner-table6-td14">745</td>
|
||||
<td className="inner-table6-td15"> </td>
|
||||
<td className="inner-table6-td9">{ transactionDetails?.itemName }</td>
|
||||
<td className="inner-table6-td9">{ transactionDetails?.specification }</td>
|
||||
<td className="inner-table6-td13">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.quantity }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.unitPrice }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.supplyAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.taxAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td15">{ transactionDetails?.remarks }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td9"> </td>
|
||||
@@ -517,11 +580,39 @@ export const TaxInvoiceSample = ({
|
||||
<td className="inner-table15-td4">외상미수금</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table15-td3">25,500</td>
|
||||
<td className="inner-table15-td3">1,243</td>
|
||||
<td className="inner-table15-td3">1,243</td>
|
||||
<td className="inner-table15-td3">1,243</td>
|
||||
<td className="inner-table15-td5">1,243</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ totalAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table15-td5"><NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
@@ -558,9 +649,9 @@ export const TaxInvoiceSample = ({
|
||||
<td className="tax-invoice-footer">
|
||||
사업자 등록번호 : 815-81-00527 | 결제대금예치업 등록번호 : 02-006-00041
|
||||
<br />
|
||||
우편번호 : 03456 | 주소 : 서울특별시 영등포구 문래로28길 25 (문래동3가)
|
||||
주소 : 서울특별시 영등포구 문래로28길 25 (문래동3가) 세미콜론문래 N타워 9층 나이스페이먼츠(주)
|
||||
<br />
|
||||
세미콜론문래 N타워 9층 나이스페이먼츠(주) | www.nicepay.co.kr
|
||||
우편번호 : 03456 | www.nicepay.co.kr
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user