@things-factory/tax-invoice 6.2.90 → 6.2.96

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

@@ -9,7 +9,7 @@ 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 } from '../tax-invoice/tax-invoice-list-page';
+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]: '일반',
@@ -31,8 +31,18 @@ const SHORT_BUSINESS_REGISTRATION_CATEGORY = {
 let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(ScopedElementsMixin(PageView)) {
     constructor() {
         super(...arguments);
+        this.today = new Intl.DateTimeFormat('ko-KR', {
+            timeZone: 'Asia/Seoul',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit'
+        })
+            .format(new Date())
+            .replace(/[.\s]/g, '')
+            .replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3');
         this.supplier = {
             supplierBusinessRegistrationNumber: '',
+            supplierBranchIdentification: '',
             supplierBusinessName: '',
             supplierRepresentativeName: ''
         };
@@ -45,11 +55,23 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         this.taxInvoice = {
             invoiceType: InvoiceType.TAX_INVOICE,
             category: Category.EXPORT,
-            issueDate: null,
-            purpose: Purpose.RECEIPT,
+            issueDate: this.today,
+            purpose: Purpose.INVOICE,
             supplyAmount: 0,
+            taxAmount: 0,
             totalAmount: 0
         };
+        this.defaultTaxInvoiceItem = {
+            sequence: new Date().getTime(),
+            supplyDate: '',
+            itemName: '',
+            specification: '',
+            quantity: 0,
+            unitPrice: 0,
+            supplyPrice: 0,
+            taxPrice: 0
+        };
+        this.taxInvoiceItems = [Object.assign({}, this.defaultTaxInvoiceItem)];
     }
     get context() {
         return {
@@ -61,7 +83,7 @@ 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, _2, _3, _4, _5;
+        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]})
@@ -109,16 +131,18 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
               </colgroup>
               <tr>
                 <th rowspan="6" class="target">${i18next.t('field.tax invoice supplier')}</th>
-                <th>${i18next.t('field.short business registration number')}</th>
-                <td><input type="text" name="supplierBusinessRegistrationNumber" .value=${((_b = this.supplier) === null || _b === void 0 ? void 0 : _b.supplierBusinessRegistrationNumber) || ''} readonly /></td>
+                <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><input type="text" name="supplierBranchIdentification" .value=${((_c = this.supplier) === null || _c === void 0 ? void 0 : _c.supplierBranchIdentification) || ''} readonly /></td>
+                <td>${(_c = this.supplier) === null || _c === void 0 ? void 0 : _c.supplierBranchIdentification}</td>
               </tr>
               <tr>
-                <th>${i18next.t('field.short tax invoice business name')}</th>
+                <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>${i18next.t('field.short representative name')}</th>
-                <td>${(_e = this.supplier) === null || _e === void 0 ? void 0 : _e.supplierRepresentativeName}</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>
@@ -126,13 +150,15 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
               </tr>
               <tr>
                 <th>${i18next.t('field.business type')}</th>
-                <td>${(_g = this.supplier) === null || _g === void 0 ? void 0 : _g.supplierBusinessType}</td>
+                <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>${(_h = this.supplier) === null || _h === void 0 ? void 0 : _h.supplierIndustryType}</td>
+                <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">${(_j = this.supplier) === null || _j === void 0 ? void 0 : _j.supplierContactEmail}</td>
+                <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>
@@ -147,73 +173,84 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
               </colgroup>
               <tr>
                 <th rowspan="6" class="target">${i18next.t('field.tax invoice buyer')}</th>
-                <th>${i18next.t('field.short business registration number')}</th>
-                <td>${(_k = this.buyer) === null || _k === void 0 ? void 0 : _k.buyerBusinessRegistrationNumber}</td>
+                <th required>${i18next.t('field.short business registration number')}</th>
+                <td>
+                  <input
+                    type="text"
+                    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>${(_l = this.buyer) === null || _l === void 0 ? void 0 : _l.buyerBranchIdentification}</td>
+                <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>${i18next.t('field.short tax invoice business name')}</th>
-                <td>${(_m = this.buyer) === null || _m === void 0 ? void 0 : _m.buyerBusinessName}</td>
-                <th>${i18next.t('field.short representative name')}</th>
-                <td>${(_o = this.buyer) === null || _o === void 0 ? void 0 : _o.buyerRepresentativeName}</td>
+                <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">${(_p = this.buyer) === null || _p === void 0 ? void 0 : _p.buyerAddress}</td>
+                <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>${(_q = this.buyer) === null || _q === void 0 ? void 0 : _q.buyerBusinessType}</td>
+                <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>${(_r = this.buyer) === null || _r === void 0 ? void 0 : _r.buyerIndustryType}</td>
+                <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">${(_s = this.buyer) === null || _s === void 0 ? void 0 : _s.buyer1stContactEmail}</td>
+                <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">${(_t = this.buyer) === null || _t === void 0 ? void 0 : _t.buyer2ndContactEmail}</td>
+                <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">
-            <table>
-              <colgroup>
-                <col width="15%" />
-                <col width="15%" />
-                <col width="15%" />
-                <col width="40%" />
-              </colgroup>
-              <tr>
-                <th>${i18next.t('field.issue date')}</th>
-                <th>${i18next.t('field.supply amount')}</th>
-                <th>${i18next.t('field.tax amount')}</th>
-                <th>${i18next.t('field.remark0')}</th>
-              </tr>
-              <tr>
-                <td>${(_u = this.taxInvoice) === null || _u === void 0 ? void 0 : _u.issueDate}</td>
-                <td>${this._numberFormat((_v = this.taxInvoice) === null || _v === void 0 ? void 0 : _v.supplyAmount)}</td>
-                <td>${this._numberFormat((_w = this.taxInvoice) === null || _w === void 0 ? void 0 : _w.taxAmount)}</td>
-                <td>${(_x = this.taxInvoice) === null || _x === void 0 ? void 0 : _x.remark0}</td>
-              </tr>
-            </table>
+          <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="4%" />
-                <col width="4%" />
-                <col width="15%" />
-                <col width="9%" />
-                <col width="9%" />
-                <col width="13%" />
-                <col width="13%" />
-                <col width="13%" />
-                <col width="20%" />
+                <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>
@@ -225,19 +262,22 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
                 <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>
 
-              ${(_z = (_y = this.taxInvoice) === null || _y === void 0 ? void 0 : _y.taxInvoiceItems) === null || _z === void 0 ? void 0 : _z.map(item => html `
+              ${this.taxInvoiceItems.map((item, idx) => html `
                     <tr>
-                      <td>${item.supplyDate}</td>
-                      <td>${item.supplyDate}</td>
-                      <td>${item.itemName}</td>
-                      <td>${item.specification}</td>
-                      <td>${item.quantity}</td>
-                      <td>${this._numberFormat(item.unitPrice)}</td>
-                      <td>${this._numberFormat(item.supplyPrice)}</td>
-                      <td>${this._numberFormat(item.taxPrice)}</td>
-                      <td>${item.remark}</td>
+                      <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>
@@ -246,28 +286,54 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
           <div class="summary">
             <table>
               <colgroup>
-                <col width="20%" />
-                <col width="20%" />
-                <col width="20%" />
-                <col width="20%" />
-                <col width="20%" />
+                <col width="25%" />
+                <col width="25%" />
+                <col width="25%" />
+                <col width="25%" />
               </colgroup>
               <tr>
-                <th>${i18next.t('field.total amount')}</th>
                 <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>${this._numberFormat((_0 = this.taxInvoice) === null || _0 === void 0 ? void 0 : _0.totalAmount)}</td>
-                <td>${this._numberFormat((_1 = this.taxInvoice) === null || _1 === void 0 ? void 0 : _1.paymentAmountCash)}</td>
-                <td>${this._numberFormat((_2 = this.taxInvoice) === null || _2 === void 0 ? void 0 : _2.paymentAmountCheck)}</td>
-                <td>${this._numberFormat((_3 = this.taxInvoice) === null || _3 === void 0 ? void 0 : _3.paymentAmountPromissoryNote)}</td>
-                <td>${this._numberFormat((_4 = this.taxInvoice) === null || _4 === void 0 ? void 0 : _4.paymentAmountAccountsReceivable)}</td>
+                <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.tax invoice description payment', { value: i18next.t(`text.tax invoice description purpose ${(_5 = this.taxInvoice) === null || _5 === void 0 ? void 0 : _5.purpose}`) })}</div>
+            <div>
+              ${i18next.t('text.prev tax invoice description payment') + ' ('}
+              <span style="margin:0 10px">
+                <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>
         </form>
       </div>
@@ -279,8 +345,8 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
     async _fetchSupplier() {
         const response = await client.query({
             query: gql `
-        query TaxInvoiceApi() {
-          taxInvoiceApi() {
+        query TaxInvoiceApi {
+          response: taxInvoiceApi {
             businessRegistrationNumber
             branchIdentification
             businessName
@@ -297,8 +363,21 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         }
       `
         });
-        console.log('response.data.responses : ', response.data.responses);
-        this.supplier = response.data.responses;
+        const supplier = response.data.response;
+        this.supplier = {
+            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) {
@@ -306,8 +385,12 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         }
     }
     async _sendTaxInvoice(num) {
-        console.log(this.taxInvoiceForm);
-        console.log(this.supplier);
+        this.taxInvoiceItems = this.taxInvoiceItems.map((item, idx) => (Object.assign(Object.assign({}, item), { sequence: idx + 1 })));
+        console.log('taxInvoice : ', this.taxInvoice);
+        console.log('taxInvoiceItems : ', this.taxInvoiceItems);
+        // console.log('supplier : ', this.supplier)
+        // console.log('buyer : ', this.buyer)
+        // TODO 현금,수표 합계 == 총 합계금액 체크
         return;
         const response = await client.mutate({
             mutation: gql `
@@ -329,12 +412,60 @@ let TaxInvoiceSendPage = class TaxInvoiceSendPage extends localize(i18next)(Scop
         }
     }
     _numberFormat(value) {
-        return !value ? '' : new Intl.NumberFormat('en-US').format(value);
+        return !value ? '' : new Intl.NumberFormat('en-US').format(value) || '';
     }
     // Input 요소의 값이 변경될 때 호출되는 콜백 함수
     _onInputTaxInvoice(event) {
         const target = event.target;
-        this.supplier[target.name] = target.value;
+        if (target.name.startsWith('supplier')) {
+            this.supplier[target.name] = target.value;
+        }
+        else if (target.name.startsWith('buyer')) {
+            this.buyer[target.name] = target.value;
+        }
+        else {
+            this.taxInvoice[target.name] = target.value;
+        }
+    }
+    // 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') {
+            inputVal = this.taxInvoice.issueDate.substring(0, 8) + inputVal.padStart(2, '0');
+        }
+        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 = [
@@ -344,15 +475,47 @@ TaxInvoiceSendPage.styles = [
       :host {
         display: flex;
         flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
 
         width: 100%;
         min-width: 850px;
         margin: 0 40px;
+        padding-bottom: 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;
@@ -363,16 +526,6 @@ TaxInvoiceSendPage.styles = [
         border-width: 2px 0;
         border-collapse: collapse;
         border-spacing: 0;
-
-        input[type='text'] {
-          height: 14px;
-          margin: 0;
-          padding: 4px 5px 5px;
-          line-height: 14px;
-          border: 1px solid #bbb;
-          background: #fff;
-          letter-spacing: 0.5px;
-        }
       }
 
       .title table {
@@ -414,10 +567,15 @@ TaxInvoiceSendPage.styles = [
             td,
             th {
               padding: 5px;
+              min-width: 60px;
+            }
+            td {
+              padding-left: 8px;
             }
             th.target {
               width: 25px;
               writing-mode: vertical-rl;
+              min-width: unset;
             }
 
             &.supplier {
@@ -447,10 +605,39 @@ TaxInvoiceSendPage.styles = [
           }
         }
 
+        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.info,
         div.summary {
-          margin-top: 15px;
+          margin-top: 20px;
 
           table {
             width: 100%;
@@ -484,6 +671,41 @@ TaxInvoiceSendPage.styles = [
             border-top: 2px solid #000;
           }
         }
+
+        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;
+        }
       }
     `
 ];
@@ -496,13 +718,17 @@ __decorate([
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "supplier", void 0);
 __decorate([
-    property(),
+    property({ type: Object }),
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "buyer", void 0);
 __decorate([
-    property(),
+    property({ type: Object }),
     __metadata("design:type", Object)
 ], TaxInvoiceSendPage.prototype, "taxInvoice", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], TaxInvoiceSendPage.prototype, "taxInvoiceItems", void 0);
 TaxInvoiceSendPage = __decorate([
     customElement('tax-invoice-send-page')
 ], TaxInvoiceSendPage);