@things-factory/tax-invoice 9.0.0-beta.8 → 9.0.2

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

@@ -68,13 +68,276 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
         this.supplier = this.defaultSupplier;
         this.buyer = this.defaultBuyer;
         this.taxInvoice = this.defaultTaxInvoice;
-        this.taxInvoiceItems = [Object.assign({}, this.defaultTaxInvoiceItem)];
+        this.taxInvoiceItems = [{ ...this.defaultTaxInvoiceItem }];
     }
+    static { this.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;
+        }
+      }
+    `
+    ]; }
     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;
         return html `
       <div class="invoice-type">
-        * ${INVOICE_TYPE[(_a = this.taxInvoice) === null || _a === void 0 ? void 0 : _a.invoiceType]}
+        * ${INVOICE_TYPE[this.taxInvoice?.invoiceType]}
         (${SHORT_BUSINESS_REGISTRATION_CATEGORY[this.buyer.buyerBusinessRegistrationCategory]})
       </div>
 
@@ -141,10 +404,10 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
               <th rowspan="6" class="target">${i18next.t('field.tax invoice supplier')}</th>
               <th required>${i18next.t('field.short business registration number')}</th>
               <td>
-                ${(_c = (_b = this.supplier) === null || _b === void 0 ? void 0 : _b.supplierBusinessRegistrationNumber) === null || _c === void 0 ? void 0 : _c.replace(/(\S{3})(\S{2})(\S{5})/g, '$1-$2-$3')}
+                ${this.supplier?.supplierBusinessRegistrationNumber?.replace(/(\S{3})(\S{2})(\S{5})/g, '$1-$2-$3')}
               </td>
               <th>${i18next.t('field.short branch identification')}</th>
-              <td>${(_d = this.supplier) === null || _d === void 0 ? void 0 : _d.supplierBranchIdentification}</td>
+              <td>${this.supplier?.supplierBranchIdentification}</td>
             </tr>
             <tr>
               <th required>${i18next.t('field.short tax invoice business name')}</th>
@@ -152,7 +415,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="supplierBusinessName"
-                  .value=${((_e = this.supplier) === null || _e === void 0 ? void 0 : _e.supplierBusinessName) || ''}
+                  .value=${this.supplier?.supplierBusinessName || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -161,14 +424,14 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="supplierRepresentativeName"
-                  .value=${((_f = this.supplier) === null || _f === void 0 ? void 0 : _f.supplierRepresentativeName) || ''}
+                  .value=${this.supplier?.supplierRepresentativeName || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
             </tr>
             <tr>
               <th>${i18next.t('field.address')}</th>
-              <td colspan="3">${(_g = this.supplier) === null || _g === void 0 ? void 0 : _g.supplierAddress}</td>
+              <td colspan="3">${this.supplier?.supplierAddress}</td>
             </tr>
             <tr>
               <th>${i18next.t('field.business type')}</th>
@@ -176,7 +439,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="supplierBusinessType"
-                  .value=${((_h = this.supplier) === null || _h === void 0 ? void 0 : _h.supplierBusinessType) || ''}
+                  .value=${this.supplier?.supplierBusinessType || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -185,7 +448,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="supplierIndustryType"
-                  .value=${((_j = this.supplier) === null || _j === void 0 ? void 0 : _j.supplierIndustryType) || ''}
+                  .value=${this.supplier?.supplierIndustryType || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -196,7 +459,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="supplierContactEmail"
-                  .value=${((_k = this.supplier) === null || _k === void 0 ? void 0 : _k.supplierContactEmail) || ''}
+                  .value=${this.supplier?.supplierContactEmail || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -220,7 +483,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                   type="text"
                   maxlength="10"
                   name="buyerBusinessRegistrationNumber"
-                  .value=${((_l = this.buyer) === null || _l === void 0 ? void 0 : _l.buyerBusinessRegistrationNumber) || ''}
+                  .value=${this.buyer?.buyerBusinessRegistrationNumber || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -229,7 +492,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerBranchIdentification"
-                  .value=${((_m = this.buyer) === null || _m === void 0 ? void 0 : _m.buyerBranchIdentification) || ''}
+                  .value=${this.buyer?.buyerBranchIdentification || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -240,7 +503,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerBusinessName"
-                  .value=${((_o = this.buyer) === null || _o === void 0 ? void 0 : _o.buyerBusinessName) || ''}
+                  .value=${this.buyer?.buyerBusinessName || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -249,7 +512,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerRepresentativeName"
-                  .value=${((_p = this.buyer) === null || _p === void 0 ? void 0 : _p.buyerRepresentativeName) || ''}
+                  .value=${this.buyer?.buyerRepresentativeName || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -260,7 +523,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerAddress"
-                  .value=${((_q = this.buyer) === null || _q === void 0 ? void 0 : _q.buyerAddress) || ''}
+                  .value=${this.buyer?.buyerAddress || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -271,7 +534,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerBusinessType"
-                  .value=${((_r = this.buyer) === null || _r === void 0 ? void 0 : _r.buyerBusinessType) || ''}
+                  .value=${this.buyer?.buyerBusinessType || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -281,7 +544,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyerIndustryType"
-                  .value=${((_s = this.buyer) === null || _s === void 0 ? void 0 : _s.buyerIndustryType) || ''}
+                  .value=${this.buyer?.buyerIndustryType || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -292,7 +555,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyer1stContactEmail"
-                  .value=${((_t = this.buyer) === null || _t === void 0 ? void 0 : _t.buyer1stContactEmail) || ''}
+                  .value=${this.buyer?.buyer1stContactEmail || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -303,7 +566,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                 <input
                   type="text"
                   name="buyer2ndContactEmail"
-                  .value=${((_u = this.buyer) === null || _u === void 0 ? void 0 : _u.buyer2ndContactEmail) || ''}
+                  .value=${this.buyer?.buyer2ndContactEmail || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -328,18 +591,18 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
               <input
                 type="text"
                 name="remark0"
-                .value=${((_v = this.taxInvoice) === null || _v === void 0 ? void 0 : _v.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((_w = this.taxInvoice) === null || _w === void 0 ? void 0 : _w.totalAmount)}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.totalAmount)}</div>
             <div class="title">${i18next.t('field.supply amount')}</div>
-            <div class="value">${this._numberFormat((_x = this.taxInvoice) === null || _x === void 0 ? void 0 : _x.supplyAmount)}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.supplyAmount)}</div>
             <div class="title">${i18next.t('field.tax amount')}</div>
-            <div class="value">${this._numberFormat((_y = this.taxInvoice) === null || _y === void 0 ? void 0 : _y.taxAmount)}</div>
+            <div class="value">${this._numberFormat(this.taxInvoice?.taxAmount)}</div>
           </div>
         </div>
 
@@ -481,7 +744,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                   type="text"
                   numeric
                   name="paymentAmountCash"
-                  .value=${((_z = this.taxInvoice) === null || _z === void 0 ? void 0 : _z.paymentAmountCash) || ''}
+                  .value=${this.taxInvoice?.paymentAmountCash || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -490,7 +753,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                   type="text"
                   numeric
                   name="paymentAmountCheck"
-                  .value=${((_0 = this.taxInvoice) === null || _0 === void 0 ? void 0 : _0.paymentAmountCheck) || ''}
+                  .value=${this.taxInvoice?.paymentAmountCheck || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -499,7 +762,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                   type="text"
                   numeric
                   name="paymentAmountPromissoryNote"
-                  .value=${((_1 = this.taxInvoice) === null || _1 === void 0 ? void 0 : _1.paymentAmountPromissoryNote) || ''}
+                  .value=${this.taxInvoice?.paymentAmountPromissoryNote || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -508,7 +771,7 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
                   type="text"
                   numeric
                   name="paymentAmountAccountsReceivable"
-                  .value=${((_2 = this.taxInvoice) === null || _2 === void 0 ? void 0 : _2.paymentAmountAccountsReceivable) || ''}
+                  .value=${this.taxInvoice?.paymentAmountAccountsReceivable || ''}
                   @input=${this._onInputTaxInvoice}
                 />
               </td>
@@ -550,182 +813,9 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
     }
     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
-        };
-    }
-    _numberFormat(value) {
-        return !value ? '' : new Intl.NumberFormat('en-US').format(value) || '';
-    }
-    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
-    async _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'];
-                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 = Object.assign(Object.assign({}, this.taxInvoice), { taxAmount: 0 });
-                this.taxInvoiceItems = this.taxInvoiceItems.map(item => (Object.assign(Object.assign({}, item), { taxPrice: 0 })));
-            }
-            // 변경시에는 아이템 변경도 리 렌더가 필요해서 데이터 갱신
-            this.taxInvoice[target.name] = target.value;
-            this.taxInvoice = Object.assign({}, this.taxInvoice);
-        }
-    }
-    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
-    async _onInputItem(e, idx) {
-        const target = e.target;
-        let inputVal = 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();
-        }
-    }
-    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')
-        });
-    }
-    async _openBuyerPopup() {
-        const response = await client.query({
-            query: gql `
-        query TaxInvoiceBuyerList {
-          responses: taxInvoiceBuyerList {
-            id
-            name
+            query: gql `
+        query taxInvoiceDefaultCompany {
+          response: taxInvoiceDefaultCompany {
             businessRegistrationNumber
             branchIdentification
             businessName
@@ -742,327 +832,236 @@ let TaxInvoiceSend = class TaxInvoiceSend extends localize(i18next)(LitElement)
         }
       `
         });
-        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')
-        });
-    }
-    async _onAddInvoiceItem(e) {
-        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, 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();
+        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
+        };
     }
-    _setTaxInvoiceSummaryCalc() {
-        const supplyPrice = this.taxInvoiceItems.reduce((prev, item) => prev + Number(item.supplyPrice), 0) || 0;
-        const taxPrice = this.isTaxFree
-            ? 0
-            : this.taxInvoiceItems.reduce((prev, item) => prev + Number(item.taxPrice), 0) || 0;
-        const totalAmount = supplyPrice + taxPrice;
-        this.taxInvoice = Object.assign(Object.assign({}, this.taxInvoice), { supplyAmount: supplyPrice, taxAmount: taxPrice, totalAmount: totalAmount });
+    _numberFormat(value) {
+        return !value ? '' : new Intl.NumberFormat('en-US').format(value) || '';
     }
-};
-TaxInvoiceSend.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;
-          }
+    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+    async _onInputTaxInvoice(event) {
+        const target = event.target;
+        // 숫자 타입은 다른 문자 입력 제거
+        if (target.hasAttribute('numeric')) {
+            target.value = target.value.replace(/\D/g, '');
         }
-      }
-
-      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;
-              }
-            }
-          }
+        if (target.name.startsWith('supplier')) {
+            this.supplier[target.name] = target.value;
         }
-
-        div.header {
-          display: flex;
-
-          span {
-            flex: 1;
-          }
+        else if (target.name.startsWith('buyer')) {
+            this.buyer[target.name] = target.value;
         }
-
-        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;
-              }
+        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;
             }
-          }
-        }
-
-        div.items,
-        div.summary {
-          margin-top: 20px;
-
-          table {
-            width: 100%;
-            border-color: #000;
-            border-width: 2px 0px 0px 0px;
-
-            th {
-              background-color: #e9edf5;
+            // 세금이 없는 영세율이 선택 시 모든 아이템의 세금 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 }));
             }
-            th,
-            td {
-              border: solid 1.5px #c4d2ff;
-              padding: 5px;
-              text-align: center;
+            // 변경시에는 아이템 변경도 리 렌더가 필요해서 데이터 갱신
+            this.taxInvoice[target.name] = target.value;
+            this.taxInvoice = { ...this.taxInvoice };
+        }
+    }
+    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+    async _onInputItem(e, idx) {
+        const target = e.target;
+        let inputVal = 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;
         }
-
-        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;
-              }
+        // 수량, 단가 수정시 공급가액/세액 자동 계산
+        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();
+        }
+    }
+    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
             }
           }
         }
-
-        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;
+      `
+        });
+        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')
+        });
+    }
+    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
           }
         }
-
-        *[required]::before {
-          content: '*';
-          color: red;
-          margin-right: 2px;
+      `
+        });
+        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')
+        });
+    }
+    async _onAddInvoiceItem(e) {
+        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() }];
+    }
+    _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 + Number(item.supplyPrice), 0) || 0;
+        const taxPrice = this.isTaxFree
+            ? 0
+            : this.taxInvoiceItems.reduce((prev, item) => prev + Number(item.taxPrice), 0) || 0;
+        const totalAmount = supplyPrice + taxPrice;
+        this.taxInvoice = { ...this.taxInvoice, supplyAmount: supplyPrice, taxAmount: taxPrice, totalAmount: totalAmount };
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)