@things-factory/tax-invoice 7.0.0-alpha.9 → 7.0.0

package/dist-client/pages/tax-invoice-send/tax-invoice-send-page.js

@@ -1,52 +1,38 @@
 import { __decorate, __metadata } from "tslib";
 import '@operato/data-grist';
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
-import { PageView } from '@operato/shell';
+import { CustomAlert, PageView } from '@operato/shell';
 import { css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import gql from 'graphql-tag';
-import { BUSINESS_REGISTRATION_CATEGORY, BusinessRegistrationCategory, Category, INVOICE_TYPE, InvoiceType, PURPOSE, Purpose } from '../tax-invoice/tax-invoice-list-page';
-const SHORT_INVOICE_TYPE = {
-    TAX_INVOICE: {
-        [InvoiceType.TAX_INVOICE]: '일반',
-        [InvoiceType.SMALL_BUSINESS_TAX_INVOICE]: '영세율',
-        [InvoiceType.CONSIGNMENT_TAX_INVOICE]: '위수탁',
-        [InvoiceType.SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE]: '위수탁영세율'
-    },
-    INVOICE: {
-        [InvoiceType.INVOICE]: '일반',
-        [InvoiceType.CONSIGNMENT_INVOICE]: '위수탁'
-        // [InvoiceType.IMPORT_INVOICE]: INVOICE_TYPE[IMPORT_INVOICE],
-    }
-};
-const SHORT_BUSINESS_REGISTRATION_CATEGORY = {
-    [BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER]: '사업자',
-    [BusinessRegistrationCategory.RESIDENT_REGISTRATION_NUMBER]: '개인',
-    [BusinessRegistrationCategory.FOREIGNER_REGISTRATION_NUMBER]: '외국인'
-};
+import { BusinessRegistrationCategory, Category, InvoiceType, Purpose } from '../tax-invoice/tax-invoice-list-page';
+import { CompanyListPopup } from './company-list-popup';
+import './tax-invoice-send';
 let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(ScopedElementsMixin(PageView)) {
     constructor() {
         super(...arguments);
         // 오늘 날짜 YYYY-MM-DD 형식으로 뽑기
         this.today = new Intl.DateTimeFormat('fr-CA', { timeZone: 'Asia/Seoul' }).format(new Date());
-        this.supplier = {
+        this.defaultSupplier = {
             supplierBusinessRegistrationCategory: '01',
             supplierBusinessRegistrationNumber: '',
             supplierBranchIdentification: '',
             supplierBusinessName: '',
             supplierRepresentativeName: ''
         };
-        this.buyer = {
+        this.supplier = this.defaultSupplier;
+        this.defaultBuyer = {
             buyerBusinessRegistrationCategory: BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER,
             buyerBusinessRegistrationNumber: '',
             buyerBusinessName: '',
             buyerRepresentativeName: ''
         };
-        this.taxInvoice = {
+        this.buyer = this.defaultBuyer;
+        this.defaultTaxInvoice = {
             invoiceType: InvoiceType.TAX_INVOICE,
             category: Category.EXPORT,
             issueDate: this.today,
@@ -55,8 +41,9 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
             taxAmount: 0,
             totalAmount: 0
         };
+        this.taxInvoice = this.defaultTaxInvoice;
         this.defaultTaxInvoiceItem = {
-            sequence: new Date().getTime(),
+            sequence: new Date().getTime(), // 구분용 임시 값 (중복되면 안되니 생성 마다 넣어주기)
             supplyDate: '',
             itemName: '',
             specification: '',
@@ -67,6 +54,11 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         };
         this.taxInvoiceItems = [Object.assign({}, this.defaultTaxInvoiceItem)];
     }
+    static get scopedElements() {
+        return {
+            'company-list-popup': CompanyListPopup
+        };
+    }
     get context() {
         return {
             title: i18next.t('title.tax invoice send'),
@@ -77,308 +69,9 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-        return html `
-      <div class="invoice-type">
-        * ${INVOICE_TYPE[(_a = this.taxInvoice) === null || _a === void 0 ? void 0 : _a.invoiceType]} (${SHORT_BUSINESS_REGISTRATION_CATEGORY[this.buyer.buyerBusinessRegistrationCategory]})
-      </div>
-
-      <div class="title">
-        <table>
-          <tr>
-            <th>${i18next.t('field.short invoice type')}</th>
-            <td>
-              ${Object.keys(SHORT_INVOICE_TYPE['TAX_INVOICE']).map(key => {
-            const disabled = key !== InvoiceType.TAX_INVOICE;
-            const checked = key === InvoiceType.TAX_INVOICE;
-            return html `
-                  <label for="${'tax_' + key}">${SHORT_INVOICE_TYPE['TAX_INVOICE'][key]}</label>
-                  <input type="radio" id="${'tax_' + key}" value="${key}" name="invoiceType" ?checked=${checked} ?disabled=${disabled} />
-                `;
-        })}
-            </td>
-            <th>${i18next.t('field.tax invoice buyer registration category')}</th>
-            <td>
-              ${Object.keys(BUSINESS_REGISTRATION_CATEGORY).map(key => {
-            const disabled = key !== BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER;
-            const checked = key === BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER;
-            return html `
-                  <label for="${'tax_' + key}">${BUSINESS_REGISTRATION_CATEGORY[key]}</label>
-                  <input type="radio" id="${'tax_' + key}" value="${key}" name="buyerBusinessRegistrationCategory" ?checked=${checked} ?disabled=${disabled} />
-                `;
-        })}
-            </td>
-          </tr>
-        </table>
-      </div>
-
-      <div class="body">
-        <div class="data">
-          <table class="supplier">
-            <colgroup>
-              <col width="150px" />
-              <col width="18%" />
-              <col width="32%" />
-              <col width="18%" />
-              <col width="32%" />
-            </colgroup>
-            <tr>
-              <th rowspan="6" class="target">${i18next.t('field.tax invoice supplier')}</th>
-              <th required>${i18next.t('field.short business registration number')}</th>
-              <td>${(_b = this.supplier) === null || _b === void 0 ? void 0 : _b.supplierBusinessRegistrationNumber.replace(/(\S{3})(\S{2})(\S{5})/g, '$1-$2-$3')}</td>
-              <th>${i18next.t('field.short branch identification')}</th>
-              <td>${(_c = this.supplier) === null || _c === void 0 ? void 0 : _c.supplierBranchIdentification}</td>
-            </tr>
-            <tr>
-              <th required>${i18next.t('field.short tax invoice business name')}</th>
-              <td><input type="text" name="supplierBusinessName" .value=${((_d = this.supplier) === null || _d === void 0 ? void 0 : _d.supplierBusinessName) || ''} @input=${this._onInputTaxInvoice} /></td>
-              <th required>${i18next.t('field.tax invoice representative name')}</th>
-              <td>
-                <input type="text" name="supplierRepresentativeName" .value=${((_e = this.supplier) === null || _e === void 0 ? void 0 : _e.supplierRepresentativeName) || ''} @input=${this._onInputTaxInvoice} />
-              </td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.address')}</th>
-              <td colspan="3">${(_f = this.supplier) === null || _f === void 0 ? void 0 : _f.supplierAddress}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.business type')}</th>
-              <td><input type="text" name="supplierBusinessType" .value=${((_g = this.supplier) === null || _g === void 0 ? void 0 : _g.supplierBusinessType) || ''} @input=${this._onInputTaxInvoice} /></td>
-              <th>${i18next.t('field.industry type')}</th>
-              <td><input type="text" name="supplierIndustryType" .value=${((_h = this.supplier) === null || _h === void 0 ? void 0 : _h.supplierIndustryType) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th rowspan="2">${i18next.t('field.email')}</th>
-              <td rowspan="2" colspan="3">
-                <input type="text" name="supplierContactEmail" .value=${((_j = this.supplier) === null || _j === void 0 ? void 0 : _j.supplierContactEmail) || ''} @input=${this._onInputTaxInvoice} />
-              </td>
-            </tr>
-            <tr></tr>
-          </table>
-
-          <table class="buyer">
-            <colgroup>
-              <col width="150px" />
-              <col width="18%" />
-              <col width="32%" />
-              <col width="18%" />
-              <col width="32%" />
-            </colgroup>
-            <tr>
-              <th rowspan="6" class="target">${i18next.t('field.tax invoice buyer')}</th>
-              <th required>${i18next.t('field.short business registration number')}</th>
-              <td>
-                <input
-                  type="text"
-                  maxlength="10"
-                  name="buyerBusinessRegistrationNumber"
-                  .value=${((_k = this.buyer) === null || _k === void 0 ? void 0 : _k.buyerBusinessRegistrationNumber) || ''}
-                  @input=${this._onInputTaxInvoice}
-                />
-              </td>
-              <th>${i18next.t('field.short branch identification')}</th>
-              <td><input type="text" name="buyerBranchIdentification" .value=${((_l = this.buyer) === null || _l === void 0 ? void 0 : _l.buyerBranchIdentification) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th required>${i18next.t('field.short tax invoice business name')}</th>
-              <td><input type="text" name="buyerBusinessName" .value=${((_m = this.buyer) === null || _m === void 0 ? void 0 : _m.buyerBusinessName) || ''} @input=${this._onInputTaxInvoice} /></td>
-              <th required>${i18next.t('field.tax invoice representative name')}</th>
-              <td><input type="text" name="buyerRepresentativeName" .value=${((_o = this.buyer) === null || _o === void 0 ? void 0 : _o.buyerRepresentativeName) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.address')}</th>
-              <td colspan="3"><input type="text" name="buyerAddress" .value=${((_p = this.buyer) === null || _p === void 0 ? void 0 : _p.buyerAddress) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.business type')}</th>
-              <td><input type="text" name="buyerBusinessType" .value=${((_q = this.buyer) === null || _q === void 0 ? void 0 : _q.buyerBusinessType) || ''} @input=${this._onInputTaxInvoice} /></td>
-
-              <th>${i18next.t('field.industry type')}</th>
-              <td><input type="text" name="buyerIndustryType" .value=${((_r = this.buyer) === null || _r === void 0 ? void 0 : _r.buyerIndustryType) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.email')}</th>
-              <td colspan="3"><input type="text" name="buyer1stContactEmail" .value=${((_s = this.buyer) === null || _s === void 0 ? void 0 : _s.buyer1stContactEmail) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.email')}</th>
-              <td colspan="3"><input type="text" name="buyer2ndContactEmail" .value=${((_t = this.buyer) === null || _t === void 0 ? void 0 : _t.buyer2ndContactEmail) || ''} @input=${this._onInputTaxInvoice} /></td>
-            </tr>
-          </table>
-        </div>
-
-        <div class="info flex-column">
-          <div class="flex-row">
-            <div class="title" required>${i18next.t('field.issue date')}</div>
-            <div class="value">
-              <input type="date" name="issueDate" .value=${this.taxInvoice.issueDate} @input=${this._onInputTaxInvoice} />
-              <span class="desc">※ 작성일자는 공급 연월일을 의미함</span>
-            </div>
-            <div class="title">${i18next.t('field.remark0')}</div>
-            <div class="value"><input type="text" name="remark0" .value=${((_u = this.taxInvoice) === null || _u === void 0 ? void 0 : _u.remark0) || ''} @input=${this._onInputTaxInvoice} /></div>
-          </div>
-          <div class="flex-row">
-            <div class="title">${i18next.t('field.total amount')}</div>
-            <div class="value">${this._numberFormat((_v = this.taxInvoice) === null || _v === void 0 ? void 0 : _v.totalAmount)}</div>
-            <div class="title">${i18next.t('field.supply amount')}</div>
-            <div class="value">${this._numberFormat((_w = this.taxInvoice) === null || _w === void 0 ? void 0 : _w.supplyAmount)}</div>
-            <div class="title">${i18next.t('field.tax amount')}</div>
-            <div class="value">${this._numberFormat((_x = this.taxInvoice) === null || _x === void 0 ? void 0 : _x.taxAmount)}</div>
-          </div>
-        </div>
-
-        <div class="items">
-          <div class="desc desc-date">
-            ※ 아래 '품목'의 '월'은 상단 '작성일자'의 '월'이 자동 반영됩니다. 합계의 '계산' 버튼은 금액을 공급가액과 세액으로 계산할 수 있습니다.
-          </div>
-          <div class="desc"><button class="btn-add" @click=${this._onAddInvoiceItem}>품목추가</button> 품목은 최대 16개까지 추가, 삭제 가능</div>
-
-          <table>
-            <colgroup>
-              <col width="5%" />
-              <col width="5%" />
-              <col width="14%" />
-              <col width="7%" />
-              <col width="7%" />
-              <col width="12%" />
-              <col width="12%" />
-              <col width="12%" />
-              <col width="16%" />
-              <col width="8%" />
-            </colgroup>
-            <tr>
-              <th>${i18next.t('field.tax invoice month')}</th>
-              <th required>${i18next.t('field.tax invoice day')}</th>
-              <th required>${i18next.t('field.tax invoice item name')}</th>
-              <th>${i18next.t('field.tax invoice ea')}</th>
-              <th required>${i18next.t('field.tax invoice quantity')}</th>
-              <th required>${i18next.t('field.tax invoice price')}</th>
-              <th>${i18next.t('field.supply amount')}</th>
-              <th>${i18next.t('field.tax amount')}</th>
-              <th>${i18next.t('field.remark0')}</th>
-              <th>${i18next.t('field.delete')}</th>
-            </tr>
-
-            ${this.taxInvoiceItems.map((item, idx) => html `
-                  <tr>
-                    <input type="hidden" name="sequence" value=${item.sequence} />
-                    <td>${this.taxInvoice.issueDate.split('-')[1]}</td>
-                    <td><input type="text" numeric maxlength="2" name="supplyDate" @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" name="itemName" .value=${item.itemName} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" name="specification" .value=${item.specification} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" numeric name="quantity" .value=${this._numberFormat(item.quantity)} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" numeric name="unitPrice" .value=${this._numberFormat(item.unitPrice)} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" readonly name="supplyPrice" .value=${this._numberFormat(item.supplyPrice)} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" readonly name="taxPrice" .value=${this._numberFormat(item.taxPrice)} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><input type="text" name="remark" .value=${item.remark || ''} @input=${e => this._onInputItem(e, idx)} /></td>
-                    <td><button class="btn-delete" @click=${e => this._onRemoveInvoiceItem(e, item.sequence)}>삭제</button></td>
-                  </tr>
-                `)}
-          </table>
-        </div>
-
-        <div class="summary">
-          <table>
-            <colgroup>
-              <col width="25%" />
-              <col width="25%" />
-              <col width="25%" />
-              <col width="25%" />
-            </colgroup>
-            <tr>
-              <th>${i18next.t('field.tax invoice payment cash')}</th>
-              <th>${i18next.t('field.tax invoice payment check')}</th>
-              <th>${i18next.t('field.tax invoice payment promissory note')}</th>
-              <th>${i18next.t('field.tax invoice payment accounts receivable')}</th>
-            </tr>
-            <tr>
-              <td><input type="text" numeric name="paymentAmountCash" .value=${((_y = this.taxInvoice) === null || _y === void 0 ? void 0 : _y.paymentAmountCash) || ''} @input=${this._onInputTaxInvoice} /></td>
-              <td><input type="text" numeric name="paymentAmountCheck" .value=${((_z = this.taxInvoice) === null || _z === void 0 ? void 0 : _z.paymentAmountCheck) || ''} @input=${this._onInputTaxInvoice} /></td>
-              <td>
-                <input
-                  type="text"
-                  numeric
-                  name="paymentAmountPromissoryNote"
-                  .value=${((_0 = this.taxInvoice) === null || _0 === void 0 ? void 0 : _0.paymentAmountPromissoryNote) || ''}
-                  @input=${this._onInputTaxInvoice}
-                />
-              </td>
-              <td>
-                <input
-                  type="text"
-                  numeric
-                  name="paymentAmountAccountsReceivable"
-                  .value=${((_1 = this.taxInvoice) === null || _1 === void 0 ? void 0 : _1.paymentAmountAccountsReceivable) || ''}
-                  @input=${this._onInputTaxInvoice}
-                />
-              </td>
-            </tr>
-          </table>
-          <div>
-            ${i18next.t('text.prev tax invoice description payment') + ' ('}
-            <span class="type-wrapper">
-              <div>
-                <input type="radio" id="purpose_20" name="purpose" .value=${Purpose.INVOICE} @change=${this._onInputTaxInvoice} checked />
-                <label for="purpose_20">${PURPOSE[Purpose.INVOICE]}</label>
-              </div>
-              <div>
-                <input type="radio" id="purpose_10" name="purpose" .value=${Purpose.RECEIPT} @change=${this._onInputTaxInvoice} />
-                <label for="purpose_10">${PURPOSE[Purpose.RECEIPT]}</label>
-              </div>
-            </span>
-            ${') ' + i18next.t('text.next tax invoice description payment')}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    async pageInitialized(lifecycle) {
-        this._fetchSupplier();
-    }
-    async _fetchSupplier() {
-        const response = await client.query({
-            query: gql `
-        query TaxInvoiceApi {
-          response: taxInvoiceApi {
-            businessRegistrationNumber
-            branchIdentification
-            businessName
-            representativeName
-            address
-            businessType
-            industryType
-            department
-            contactName
-            contactPhone
-            contactEmail
-            contactCellPhone
-          }
-        }
-      `
-        });
-        const supplier = response.data.response;
-        this.supplier = {
-            supplierBusinessRegistrationCategory: supplier.businessRegistrationCategory,
-            supplierBusinessRegistrationNumber: supplier.businessRegistrationNumber,
-            supplierBranchIdentification: supplier.branchIdentification,
-            supplierBusinessName: supplier.businessName,
-            supplierRepresentativeName: supplier.representativeName,
-            supplierAddress: supplier.address,
-            supplierBusinessType: supplier.businessType,
-            supplierIndustryType: supplier.industryType,
-            supplierDepartment: supplier.department,
-            supplierContactName: supplier.contactName,
-            supplierContactPhone: supplier.contactPhone,
-            supplierContactEmail: supplier.contactEmail,
-            supplierContactCellPhone: supplier.contactCellPhone
-        };
-    }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            // do something here when this page just became as active
-        }
+        return html ` <tax-invoice-send></tax-invoice-send> `;
     }
-    async _sendTaxInvoice(num) {
+    async _sendTaxInvoice() {
         // 아이템 시퀀스 재 할당 + 날짜, 품목, 규격, 수량이 없으면 필터
         let taxInvoiceItems = this.taxInvoiceItems.map((item, idx) => (Object.assign(Object.assign({}, item), { sequence: idx + 1, quantity: Number(item.quantity), unitPrice: Number(item.unitPrice) })));
         taxInvoiceItems = taxInvoiceItems.filter(item => item.supplyDate && item.itemName && item.quantity && item.unitPrice);
@@ -388,20 +81,54 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         taxInvoice.paymentAmountCheck = Number(taxInvoice.paymentAmountCheck || 0);
         taxInvoice.paymentAmountPromissoryNote = Number(taxInvoice.paymentAmountPromissoryNote || 0);
         taxInvoice.paymentAmountAccountsReceivable = Number(taxInvoice.paymentAmountAccountsReceivable || 0);
+        taxInvoice.supplyAmount = Number(taxInvoice.supplyAmount || 0);
+        taxInvoice.taxAmount = Number(taxInvoice.taxAmount || 0);
+        taxInvoice.buyerBusinessRegistrationNumber = taxInvoice.buyerBusinessRegistrationNumber.replace(/-/gi, '');
+        taxInvoice.supplierBusinessRegistrationNumber = taxInvoice.supplierBusinessRegistrationNumber.replace(/-/gi, '');
         // 공급받는자 필수 값 체크
-        if (!this.buyer.buyerBusinessRegistrationNumber || !this.buyer.buyerBusinessName || !this.buyer.buyerRepresentativeName) {
-            alert('공급받는자 필수 값을 모두 입력해 주세요.');
+        if (!this.buyer.buyerBusinessRegistrationNumber ||
+            !this.buyer.buyerBusinessName ||
+            !this.buyer.buyerRepresentativeName) {
+            await CustomAlert({
+                type: 'warning',
+                title: '공급받는자 필수 값을 모두 입력해 주세요.',
+                text: '공급받는자 필수 값을 모두 입력해 주세요.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
             return;
         }
         // 아이템 개수 체크
         if (taxInvoiceItems.length === 0) {
-            alert('등록 가능한 아아템의 개수는 1개 이상이여야 합니다.');
+            await CustomAlert({
+                type: 'warning',
+                title: '등록 가능한 아이템의 개수는 1개 이상이여야 합니다.',
+                text: '등록 가능한 아이템의 개수는 1개 이상이여야 합니다.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
+            return;
+        }
+        // 세금이 없는 타입인데 세금이 있는지 체크
+        if (taxInvoice.invoiceType === InvoiceType.SMALL_BUSINESS_TAX_INVOICE && taxInvoice.taxAmount > 0) {
+            await CustomAlert({
+                type: 'warning',
+                title: '세금이 0원이 아닙니다.',
+                text: '세금이 0원이 아닙니다.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
             return;
         }
         // 현금, 수표, 어음, 외상미수금의 합계 = 총 합계금액 체크
-        const paymentAmount = taxInvoice.paymentAmountCash + taxInvoice.paymentAmountCheck + taxInvoice.paymentAmountPromissoryNote + taxInvoice.paymentAmountAccountsReceivable;
+        const paymentAmount = taxInvoice.paymentAmountCash +
+            taxInvoice.paymentAmountCheck +
+            taxInvoice.paymentAmountPromissoryNote +
+            taxInvoice.paymentAmountAccountsReceivable;
         if (paymentAmount > 0 && paymentAmount !== taxInvoice.totalAmount) {
-            alert('현금, 수표, 어음, 외상미수금의 합계는 총 합계금액과 동일해야 합니다.');
+            await CustomAlert({
+                type: 'warning',
+                title: '현금, 수표, 어음, 외상미수금의 합계는 총 합계금액과 동일해야 합니다.',
+                text: '현금, 수표, 어음, 외상미수금의 합계는 총 합계금액과 동일해야 합니다.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
             return;
         }
         const response = await client.mutate({
@@ -421,82 +148,12 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         });
         if (!response.errors) {
             notify({ message: i18next.t('text.success tax send') });
+            this.taxInvoice = this.defaultTaxInvoice;
+            this.supplier = this.defaultSupplier;
+            this.buyer = this.defaultBuyer;
+            this.taxInvoiceItems = [Object.assign({}, this.defaultTaxInvoiceItem)];
         }
     }
-    _numberFormat(value) {
-        return !value ? '' : new Intl.NumberFormat('en-US').format(value) || '';
-    }
-    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
-    _onInputTaxInvoice(event) {
-        const target = event.target;
-        // 숫자 타입은 다른 문자 입력 제거
-        if (target.hasAttribute('numeric')) {
-            target.value = target.value.replace(/\D/g, '');
-        }
-        if (target.name.startsWith('supplier')) {
-            this.supplier[target.name] = target.value;
-        }
-        else if (target.name.startsWith('buyer')) {
-            this.buyer[target.name] = target.value;
-        }
-        else {
-            // 날짜 체크가 오늘 날짜를 넘어가면 값 변경 되면 안됨
-            if (target.name === 'issueDate' && target.value > this.today) {
-                target.value = this.taxInvoice['issueDate'];
-                alert('작성일자는 현재일까지 입력하시기 바랍니다.');
-                return;
-            }
-            this.taxInvoice[target.name] = target.value;
-            // 날짜 변경시에는 아이템 변경도 리 렌더가 필요해서 데이터 갱신
-            if (target.name === 'issueDate')
-                this.taxInvoice = Object.assign({}, this.taxInvoice);
-        }
-    }
-    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
-    _onInputItem(e, idx) {
-        const target = e.target;
-        let inputVal = target.value;
-        // 숫자 타입은 다른 문자 입력 제거
-        if (target.hasAttribute('numeric')) {
-            inputVal = inputVal.replace(/\D/g, '');
-            target.value = inputVal;
-        }
-        // 공급일자 케이스 시 => 세금계산서의 작성일자의 YYYY-MM + 아이템의 입력된 DD
-        if (target.name === 'supplyDate') {
-            const itemDate = this.taxInvoice.issueDate.substring(0, 8) + inputVal.padStart(2, '0');
-            if (itemDate > this.taxInvoice.issueDate) {
-                alert('품목의 일자는 작성일자보다 클 수 없습니다.');
-                target.value = '';
-            }
-            inputVal = itemDate;
-        }
-        if (target.name == 'quantity' || target.name == 'unitPrice') {
-            const supplyPrice = target.name == 'quantity' ? Number(inputVal) * this.taxInvoiceItems[idx]['unitPrice'] : Number(inputVal) * this.taxInvoiceItems[idx]['quantity'];
-            this.taxInvoiceItems[idx]['supplyPrice'] = supplyPrice;
-            this.taxInvoiceItems[idx]['taxPrice'] = Math.floor(supplyPrice / 10);
-            this.taxInvoiceItems = [...this.taxInvoiceItems];
-            this._setTaxInvoiceSummaryCalc();
-        }
-        this.taxInvoiceItems[idx][target.name] = inputVal;
-    }
-    _onAddInvoiceItem(e) {
-        e.preventDefault();
-        if (this.taxInvoiceItems.length >= 16) {
-            alert('품목은 최대 16개까지 추가 가능합니다.');
-            return;
-        }
-        this.taxInvoiceItems = [...this.taxInvoiceItems, Object.assign(Object.assign({}, this.defaultTaxInvoiceItem), { sequence: new Date().getTime() })];
-    }
-    _onRemoveInvoiceItem(e, sequence) {
-        e.preventDefault();
-        this.taxInvoiceItems = [...this.taxInvoiceItems.filter(item => item.sequence != sequence)];
-        this._setTaxInvoiceSummaryCalc();
-    }
-    _setTaxInvoiceSummaryCalc() {
-        const supplyPrice = this.taxInvoiceItems.reduce((prev, item) => prev + item.supplyPrice, 0);
-        const taxPrice = this.taxInvoiceItems.reduce((prev, item) => prev + item.taxPrice, 0);
-        this.taxInvoice = Object.assign(Object.assign({}, this.taxInvoice), { supplyAmount: supplyPrice, taxAmount: taxPrice, totalAmount: supplyPrice + taxPrice });
-    }
 };
 TaxInvoiceSendPage.styles = [
     ScrollbarStyles,
@@ -504,252 +161,6 @@ TaxInvoiceSendPage.styles = [
     css `
       :host {
         display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        width: 100%;
-        min-width: 850px;
-        padding: 0 40px 40px 40px;
-
-        --grid-record-emphasized-background-color: red;
-        --grid-record-emphasized-color: yellow;
-      }
-
-      .flex-row {
-        display: flex;
-        flex-direction: row;
-      }
-      .flex-column {
-        display: flex;
-        flex-direction: column;
-      }
-
-      input[type='text'],
-      input[type='date'],
-      input[type='number'] {
-        width: 85%;
-        max-width: calc(100% - 12px);
-        height: 14px;
-        margin: 0;
-        padding: 4px 5px 5px;
-        line-height: 14px;
-        border: 1px solid #bbb;
-        background: #fff;
-        letter-spacing: 0.5px;
-      }
-      input[type='date'] {
-        width: auto;
-      }
-      input[readonly] {
-        background-color: #eee;
-      }
-
-      div.invoice-type {
-        font-size: 18px;
-        margin-top: 15px;
-      }
-
-      table {
-        border: solid;
-        border-width: 2px 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-      }
-
-      .title table {
-        border-color: #d3dbe5;
-        width: 100%;
-        height: 33px;
-        margin-top: 10px;
-        font-size: 12px;
-
-        th {
-          font-size: 13px;
-          background-color: #e9edf6;
-          min-width: 140px;
-        }
-        td {
-          width: 50%;
-          padding-left: 10px;
-
-          & > * {
-            vertical-align: middle;
-          }
-          & > input {
-            margin: 0 5px 0 1px;
-          }
-        }
-      }
-
-      div.body {
-        margin-top: 15px;
-        font-size: 14px;
-
-        div.data {
-          display: flex;
-          margin-top: 5px;
-
-          table {
-            flex: 1;
-
-            td,
-            th {
-              padding: 5px;
-              min-width: 60px;
-            }
-            td {
-              padding-left: 8px;
-            }
-            th.target {
-              width: 25px;
-              writing-mode: vertical-rl;
-              min-width: unset;
-            }
-
-            &.supplier {
-              border-color: #f64843;
-
-              td,
-              th {
-                background-color: #fef5f7;
-                border: solid 1.5px #f5b1b1;
-              }
-              th.target {
-                background-color: #fedbde;
-              }
-            }
-            &.buyer {
-              border-color: #007ed9;
-
-              td,
-              th {
-                background-color: #f7f7ff;
-                border: solid 1.5px #a7bcff;
-              }
-              th.target {
-                background-color: #c6daf6;
-              }
-            }
-          }
-        }
-
-        div.info {
-          margin-top: 15px;
-          border: solid;
-          border-color: #000;
-          border-width: 2px 0px 0px 0px;
-
-          div.flex-row div {
-            border: solid #c4d2ff;
-            border-width: 0px 1.5px 1.5px 1.5px;
-            margin-right: -1px;
-            padding: 5px;
-            text-align: center;
-
-            &.title {
-              background-color: #e9edf5;
-              font-weight: bold;
-              flex: 1;
-            }
-            &.value {
-              flex: 3;
-              text-align: left;
-
-              .desc {
-                font-size: 11px;
-                color: #c90000;
-              }
-            }
-          }
-        }
-
-        div.items,
-        div.summary {
-          margin-top: 20px;
-
-          table {
-            width: 100%;
-            border-color: #000;
-            border-width: 2px 0px 0px 0px;
-
-            th {
-              background-color: #e9edf5;
-            }
-            th,
-            td {
-              border: solid 1.5px #c4d2ff;
-              padding: 5px;
-              text-align: center;
-            }
-          }
-        }
-
-        div.summary {
-          display: flex;
-
-          & > table {
-            flex: 6.7;
-          }
-          & > div {
-            flex: 3.2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: 1.5px solid #c4d2ff;
-            border-top: 2px solid #000;
-          }
-
-          span.type-wrapper {
-            margin: 0 10px;
-
-            & > div {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              gap: 4px;
-
-              input[type='radio' i] {
-                margin: 0px;
-              }
-            }
-          }
-        }
-
-        div.items {
-          div.desc {
-            font-weight: 400;
-            font-size: 12px;
-            margin-bottom: 5px;
-          }
-          div.desc-date {
-            color: #005d98;
-          }
-          button {
-            font-size: 13px;
-            height: 25px;
-            cursor: pointer;
-            text-align: center;
-            font-weight: 600;
-            border-radius: 2px;
-            border-color: #ccc;
-          }
-          .btn-add {
-            color: #333;
-            background-color: #f9f9f9;
-          }
-          .btn-delete {
-            color: #fff;
-            background-color: #5c636e;
-            border: none;
-          }
-        }
-
-        *[required]::before {
-          content: '*';
-          color: red;
-          margin-right: 2px;
-        }
       }
     `
 ];
@@ -758,15 +169,15 @@ __decorate([
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "supplier", void 0);
 __decorate([
-    property({ type: Object }),
+    state(),
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "buyer", void 0);
 __decorate([
-    property({ type: Object }),
+    state(),
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "taxInvoice", void 0);
 __decorate([
-    property({ type: Array }),
+    state(),
     __metadata("design:type", Array)
 ], TaxInvoiceSendPage.prototype, "taxInvoiceItems", void 0);
 TaxInvoiceSendPage = __decorate([