@things-factory/tax-invoice 8.0.0-beta.9 → 8.0.2

package/client/pages/tax-invoice-send/tax-invoice-send.ts

@@ -0,0 +1,1181 @@
+import '@operato/data-grist'
+
+import { css, html, LitElement } from 'lit'
+import { CustomAlert } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { property, customElement } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import gql from 'graphql-tag'
+import {
+  BUSINESS_REGISTRATION_CATEGORY,
+  BusinessRegistrationCategory,
+  Category,
+  INVOICE_TYPE,
+  InvoiceType,
+  PURPOSE,
+  Purpose
+} from '../tax-invoice/tax-invoice-list-page'
+import { openPopup } from '@operato/layout'
+
+export 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],
+  }
+}
+
+export const SHORT_BUSINESS_REGISTRATION_CATEGORY = {
+  [BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER]: '사업자',
+  [BusinessRegistrationCategory.RESIDENT_REGISTRATION_NUMBER]: '개인',
+  [BusinessRegistrationCategory.FOREIGNER_REGISTRATION_NUMBER]: '외국인'
+}
+
+export interface Supplier {
+  supplierBusinessRegistrationCategory: string
+  supplierBusinessRegistrationNumber: string
+  supplierBranchIdentification?: string
+  supplierBusinessName: string
+  supplierRepresentativeName: string
+  supplierAddress?: string
+  supplierBusinessType?: string
+  supplierIndustryType?: string
+  supplierDepartment?: string
+  supplierContactName?: string
+  supplierContactPhone?: string
+  supplierContactEmail?: string
+  supplierContactCellPhone?: string
+}
+export interface Buyer {
+  buyerBusinessRegistrationCategory: BusinessRegistrationCategory
+  buyerBusinessRegistrationNumber: string
+  buyerBranchIdentification?: string
+  buyerBusinessName: string
+  buyerRepresentativeName: string
+  buyerAddress?: string
+  buyerBusinessType?: string
+  buyerIndustryType?: string
+  buyer1stDepartment?: string
+  buyer1stContactName?: string
+  buyer1stContactPhone?: string
+  buyer1stContactEmail?: string
+  buyer1stContactCellPhone?: string
+  buyer2ndDepartment?: string
+  buyer2ndContactName?: string
+  buyer2ndContactPhone?: string
+  buyer2ndContactEmail?: string
+  buyer2ndContactCellPhone?: string
+}
+export interface TaxInvoice {
+  category: Category
+  issueNo?: string
+  approvalNo?: string
+  originalApprovalNo?: string
+  issueDate: string
+  signatureDate?: string
+  invoiceType: InvoiceType
+  purpose: Purpose
+  remark0?: string
+  remark1?: string
+  remark2?: string
+  paymentAmountCash?: number
+  paymentAmountCheck?: number
+  paymentAmountPromissoryNote?: number
+  paymentAmountAccountsReceivable?: number
+  supplyAmount: number
+  taxAmount: number
+  totalAmount: number
+  // revisedReason?: RevisedReason
+}
+export interface TaxInvoiceItem {
+  sequence: number
+  supplyDate: string
+  itemName: string
+  specification: string
+  quantity: number
+  unitPrice: number
+  supplyPrice: number
+  taxPrice: number
+  remark?: string
+}
+
+@customElement('tax-invoice-send')
+export class TaxInvoiceSend extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    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],
+      input:disabled {
+        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.header {
+          display: flex;
+
+          span {
+            flex: 1;
+          }
+        }
+
+        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;
+        }
+      }
+    `
+  ]
+
+  // 오늘 날짜 YYYY-MM-DD 형식으로 뽑기
+  private today: string = new Intl.DateTimeFormat('fr-CA', { timeZone: 'Asia/Seoul' }).format(new Date())
+  private isTaxFree = false
+  private defaultSupplier = {
+    supplierBusinessRegistrationCategory: '01',
+    supplierBusinessRegistrationNumber: '',
+    supplierBranchIdentification: '',
+    supplierBusinessName: '',
+    supplierRepresentativeName: ''
+  }
+  private defaultBuyer = {
+    buyerBusinessRegistrationCategory: BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER,
+    buyerBusinessRegistrationNumber: '',
+    buyerBusinessName: '',
+    buyerRepresentativeName: ''
+  }
+  private defaultTaxInvoice = {
+    invoiceType: InvoiceType.TAX_INVOICE,
+    category: Category.EXPORT,
+    issueDate: this.today,
+    purpose: Purpose.INVOICE,
+    supplyAmount: 0,
+    taxAmount: 0,
+    totalAmount: 0
+  }
+  private defaultTaxInvoiceItem = {
+    sequence: new Date().getTime(), // 구분용 임시 값 (중복되면 안되니 생성 마다 넣어주기)
+    supplyDate: '',
+    itemName: '',
+    specification: '',
+    quantity: 0,
+    unitPrice: 0,
+    supplyPrice: 0,
+    taxPrice: 0
+  }
+
+  @property({ type: Object }) supplier: Supplier = this.defaultSupplier
+  @property({ type: Object }) buyer: Buyer = this.defaultBuyer
+  @property({ type: Object }) taxInvoice: TaxInvoice = this.defaultTaxInvoice
+  @property({ type: Array }) taxInvoiceItems: TaxInvoiceItem[] = [{ ...this.defaultTaxInvoiceItem }]
+
+  render() {
+    return html`
+      <div class="invoice-type">
+        * ${INVOICE_TYPE[this.taxInvoice?.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: boolean =
+                  key !== InvoiceType.TAX_INVOICE && key !== InvoiceType.SMALL_BUSINESS_TAX_INVOICE
+                const checked: boolean = 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}
+                    @change=${this._onInputTaxInvoice}
+                  />
+                `
+              })}
+            </td>
+            <th>${i18next.t('field.tax invoice buyer registration category')}</th>
+            <td>
+              ${Object.keys(BUSINESS_REGISTRATION_CATEGORY).map(key => {
+                const disabled: boolean = key !== BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER
+                const checked: boolean = 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="header">
+          <span><button @click=${this._openSupplierPopup}>공급처 선택</button></span>
+          <span><button @click=${this._openBuyerPopup}>공급받는자 선택</button></span>
+        </div>
+
+        <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>
+                ${this.supplier?.supplierBusinessRegistrationNumber?.replace(/(\S{3})(\S{2})(\S{5})/g, '$1-$2-$3')}
+              </td>
+              <th>${i18next.t('field.short branch identification')}</th>
+              <td>${this.supplier?.supplierBranchIdentification}</td>
+            </tr>
+            <tr>
+              <th required>${i18next.t('field.short tax invoice business name')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="supplierBusinessName"
+                  .value=${this.supplier?.supplierBusinessName || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <th required>${i18next.t('field.tax invoice representative name')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="supplierRepresentativeName"
+                  .value=${this.supplier?.supplierRepresentativeName || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.address')}</th>
+              <td colspan="3">${this.supplier?.supplierAddress}</td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.business type')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="supplierBusinessType"
+                  .value=${this.supplier?.supplierBusinessType || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <th>${i18next.t('field.industry type')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="supplierIndustryType"
+                  .value=${this.supplier?.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=${this.supplier?.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=${this.buyer?.buyerBusinessRegistrationNumber || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <th>${i18next.t('field.short branch identification')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="buyerBranchIdentification"
+                  .value=${this.buyer?.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=${this.buyer?.buyerBusinessName || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <th required>${i18next.t('field.tax invoice representative name')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="buyerRepresentativeName"
+                  .value=${this.buyer?.buyerRepresentativeName || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.address')}</th>
+              <td colspan="3">
+                <input
+                  type="text"
+                  name="buyerAddress"
+                  .value=${this.buyer?.buyerAddress || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.business type')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="buyerBusinessType"
+                  .value=${this.buyer?.buyerBusinessType || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+
+              <th>${i18next.t('field.industry type')}</th>
+              <td>
+                <input
+                  type="text"
+                  name="buyerIndustryType"
+                  .value=${this.buyer?.buyerIndustryType || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.email')}</th>
+              <td colspan="3">
+                <input
+                  type="text"
+                  name="buyer1stContactEmail"
+                  .value=${this.buyer?.buyer1stContactEmail || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>${i18next.t('field.email')}</th>
+              <td colspan="3">
+                <input
+                  type="text"
+                  name="buyer2ndContactEmail"
+                  .value=${this.buyer?.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=${this.taxInvoice?.remark0 || ''}
+                @input=${this._onInputTaxInvoice}
+              />
+            </div>
+          </div>
+          <div class="flex-row">
+            <div class="title">${i18next.t('field.total amount')}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.totalAmount)}</div>
+            <div class="title">${i18next.t('field.supply amount')}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.supplyAmount)}</div>
+            <div class="title">${i18next.t('field.tax amount')}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.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"
+                      numeric
+                      name="supplyPrice"
+                      .value=${this._numberFormat(item.supplyPrice)}
+                      @input=${e => this._onInputItem(e, idx)}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      type="text"
+                      numeric
+                      name="taxPrice"
+                      .value=${this._numberFormat(item.taxPrice)}
+                      @input=${e => this._onInputItem(e, idx)}
+                      .disabled=${this.isTaxFree}
+                    />
+                  </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=${this.taxInvoice?.paymentAmountCash || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <td>
+                <input
+                  type="text"
+                  numeric
+                  name="paymentAmountCheck"
+                  .value=${this.taxInvoice?.paymentAmountCheck || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <td>
+                <input
+                  type="text"
+                  numeric
+                  name="paymentAmountPromissoryNote"
+                  .value=${this.taxInvoice?.paymentAmountPromissoryNote || ''}
+                  @input=${this._onInputTaxInvoice}
+                />
+              </td>
+              <td>
+                <input
+                  type="text"
+                  numeric
+                  name="paymentAmountAccountsReceivable"
+                  .value=${this.taxInvoice?.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 firstUpdated() {
+    this._fetchSupplier()
+  }
+
+  async _fetchSupplier() {
+    const response = await client.query({
+      query: gql`
+        query taxInvoiceDefaultCompany {
+          response: taxInvoiceDefaultCompany {
+            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
+    }
+  }
+
+  private _numberFormat(value: number): string {
+    return !value ? '' : new Intl.NumberFormat('en-US').format(value) || ''
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private async _onInputTaxInvoice(event: InputEvent) {
+    const target = event.target as HTMLInputElement
+
+    // 숫자 타입은 다른 문자 입력 제거
+    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']
+
+        await CustomAlert({
+          type: 'warning',
+          title: '작성일자는 현재일까지 입력하시기 바랍니다.',
+          text: '작성일자는 현재일까지 입력하시기 바랍니다.',
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+        return
+      }
+
+      // 세금이 없는 영세율이 선택 시 모든 아이템의 세금 0원으로 초기화
+      if (target.name === 'invoiceType' && target.value === InvoiceType.SMALL_BUSINESS_TAX_INVOICE) {
+        this.isTaxFree = true
+        this.taxInvoice = { ...this.taxInvoice, taxAmount: 0 }
+        this.taxInvoiceItems = this.taxInvoiceItems.map(item => ({ ...item, taxPrice: 0 }))
+      }
+
+      // 변경시에는 아이템 변경도 리 렌더가 필요해서 데이터 갱신
+      this.taxInvoice[target.name] = target.value
+      this.taxInvoice = { ...this.taxInvoice }
+    }
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private async _onInputItem(e: InputEvent, idx: number) {
+    const target = e.target as HTMLInputElement
+    let inputVal: any = target.value
+
+    // 숫자 타입은 다른 문자 입력 제거
+    if (target.hasAttribute('numeric')) {
+      inputVal = Number(inputVal.replace(/\D/g, ''))
+      target.value = inputVal
+    }
+
+    // 공급일자 케이스 시 => 세금계산서의 작성일자의 YYYY-MM + 아이템의 입력된 DD
+    if (target.name === 'supplyDate') {
+      const itemDate = this.taxInvoice.issueDate.substring(0, 8) + inputVal.toString().padStart(2, '0')
+      if (itemDate > this.taxInvoice.issueDate) {
+        await CustomAlert({
+          type: 'warning',
+          title: '품목의 일자는 작성일자보다 클 수 없습니다.',
+          text: '품목의 일자는 작성일자보다 클 수 없습니다.',
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        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'] = this.isTaxFree ? 0 : Math.floor(supplyPrice / 10)
+    }
+
+    // 인풋에 값 넣기
+    this.taxInvoiceItems[idx][target.name] = inputVal
+
+    // 아이템 금액에 관련된 필드 수정시 합계 계산
+    if (['quantity', 'unitPrice', 'supplyPrice', 'taxPrice'].includes(target.name)) {
+      this.taxInvoiceItems = [...this.taxInvoiceItems]
+      this._setTaxInvoiceSummaryCalc()
+    }
+  }
+
+  private async _openSupplierPopup() {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: taxInvoiceApis(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name: provider
+              businessRegistrationNumber
+              branchIdentification
+              businessName
+              representativeName
+              address
+              businessType
+              industryType
+              department
+              contactName
+              contactPhone
+              contactEmail
+              contactCellPhone
+            }
+          }
+        }
+      `
+    })
+
+    const items = response.data.responses.items || []
+    openPopup(
+      html`
+        <company-list-popup
+          .companyList=${items}
+          @selected=${e => {
+            this.supplier = {
+              supplierBusinessRegistrationCategory: BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER,
+              supplierBusinessRegistrationNumber: e.detail.businessRegistrationNumber || '',
+              supplierBranchIdentification: e.detail.branchIdentification || '',
+              supplierBusinessName: e.detail.businessName || '',
+              supplierRepresentativeName: e.detail.representativeName || '',
+              supplierAddress: e.detail.address || '',
+              supplierBusinessType: e.detail.businessType || '',
+              supplierIndustryType: e.detail.industryType || '',
+              supplierDepartment: e.detail.department || '',
+              supplierContactName: e.detail.contactName || '',
+              supplierContactPhone: e.detail.contactPhone || '',
+              supplierContactEmail: e.detail.contactEmail || '',
+              supplierContactCellPhone: e.detail.contactCellPhone || ''
+            }
+
+            history.back()
+          }}
+        >
+        </company-list-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.company list popup')
+      }
+    )
+  }
+
+  private async _openBuyerPopup() {
+    const response = await client.query({
+      query: gql`
+        query TaxInvoiceBuyerList {
+          responses: taxInvoiceBuyerList {
+            id
+            name
+            businessRegistrationNumber
+            branchIdentification
+            businessName
+            representativeName
+            address
+            businessType
+            industryType
+            department
+            contactName
+            contactPhone
+            contactEmail
+            contactCellPhone
+          }
+        }
+      `
+    })
+
+    const items = response.data.responses || []
+    openPopup(
+      html`
+        <company-list-popup
+          .companyList=${items}
+          @selected=${e => {
+            this.buyer = {
+              buyerBusinessRegistrationCategory: BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER,
+              buyerBusinessRegistrationNumber: e.detail.businessRegistrationNumber || '',
+              buyerBranchIdentification: e.detail.branchIdentification || '',
+              buyerBusinessName: e.detail.businessName || '',
+              buyerRepresentativeName: e.detail.representativeName || '',
+              buyerAddress: e.detail.address || '',
+              buyerBusinessType: e.detail.businessType || '',
+              buyerIndustryType: e.detail.industryType || '',
+              buyer1stDepartment: e.detail.department || '',
+              buyer1stContactName: e.detail.contactName || '',
+              buyer1stContactPhone: e.detail.contactPhone || '',
+              buyer1stContactEmail: e.detail.contactEmail || '',
+              buyer1stContactCellPhone: e.detail.contactCellPhone || ''
+            }
+
+            history.back()
+          }}
+        >
+        </company-list-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.company list popup')
+      }
+    )
+  }
+
+  private async _onAddInvoiceItem(e: Event) {
+    e.preventDefault()
+    if (this.taxInvoiceItems.length >= 16) {
+      await CustomAlert({
+        type: 'warning',
+        title: '품목은 최대 16개까지 추가 가능합니다.',
+        text: '품목은 최대 16개까지 추가 가능합니다.',
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      return
+    }
+
+    this.taxInvoiceItems = [...this.taxInvoiceItems, { ...this.defaultTaxInvoiceItem, sequence: new Date().getTime() }]
+  }
+
+  private _onRemoveInvoiceItem(e: Event, sequence: number) {
+    e.preventDefault()
+    this.taxInvoiceItems = [...this.taxInvoiceItems.filter(item => item.sequence != sequence)]
+    this._setTaxInvoiceSummaryCalc()
+  }
+
+  private _setTaxInvoiceSummaryCalc() {
+    const supplyPrice: number = this.taxInvoiceItems.reduce((prev, item) => prev + Number(item.supplyPrice), 0) || 0
+    const taxPrice: number = this.isTaxFree
+      ? 0
+      : this.taxInvoiceItems.reduce((prev, item) => prev + Number(item.taxPrice), 0) || 0
+    const totalAmount: number = supplyPrice + taxPrice
+
+    this.taxInvoice = { ...this.taxInvoice, supplyAmount: supplyPrice, taxAmount: taxPrice, totalAmount: totalAmount }
+  }
+}