From a29d24633044be055d72bd29cc0e71e5d7548dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 5 Mar 2026 10:52:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[approvals]=20=EC=A7=80=EC=B6=9C?=
 =?UTF-8?q?=EA=B2=B0=EC=9D=98=EC=84=9C=20=EC=97=85=EC=B2=B4=EB=AA=85?=
 =?UTF-8?q?=EC=97=90=20=EA=B1=B0=EB=9E=98=EC=B2=98=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 업체명 input을 거래처 검색 자동완성으로 교체
- 기존 trading_partners 검색 API 활용 (/barobill/tax-invoice/search-partners)
- 거래처명/사업자번호로 검색, 드롭다운에서 선택
- 키보드 탐색 지원 (위/아래 화살표, Enter, Escape)
- vendor_id, vendor_biz_no 추가 저장
---
 .../partials/_expense-form.blade.php          | 90 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 2 deletions(-)

diff --git a/resources/views/approvals/partials/_expense-form.blade.php b/resources/views/approvals/partials/_expense-form.blade.php
index 20ccb98c..9258308c 100644
--- a/resources/views/approvals/partials/_expense-form.blade.php
+++ b/resources/views/approvals/partials/_expense-form.blade.php
@@ -183,8 +183,29 @@ class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-n
                                        class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                             </td>
                             <td class="px-1 py-1">
-                                <input type="text" x-model="item.vendor" placeholder="업체명"
-                                       class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
+                                <div class="relative" x-data="vendorSearch(item)" @click.outside="close()">
+                                    <input type="text" :value="item.vendor" @input="onInput($event.target.value)" @focus="onFocus()" @keydown.escape="close()" @keydown.arrow-down.prevent="moveDown()" @keydown.arrow-up.prevent="moveUp()" @keydown.enter.prevent="selectHighlighted()"
+                                           placeholder="거래처 검색"
+                                           class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
+                                    <div x-show="open && results.length > 0" x-transition
+                                         class="absolute z-50 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden" style="max-height: 200px; overflow-y: auto;">
+                                        <template x-for="(p, pi) in results" :key="p.id">
+                                            <div @click="selectPartner(p)" @mouseenter="highlighted = pi"
+                                                 :class="highlighted === pi ? 'bg-blue-50' : 'hover:bg-gray-50'"
+                                                 class="px-2 py-1.5 cursor-pointer border-b border-gray-50 last:border-0">
+                                                <div class="text-xs font-medium text-gray-800" x-text="p.name"></div>
+                                                <div class="text-xs text-gray-400 flex gap-2" x-show="p.biz_no || p.ceo">
+                                                    <span x-show="p.biz_no" x-text="p.biz_no"></span>
+                                                    <span x-show="p.ceo" x-text="'대표: ' + p.ceo"></span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                    <div x-show="open && query.length >= 1 && results.length === 0 && !loading"
+                                         class="absolute z-50 left-0 right-0 mt-0.5 bg-white border border-gray-200 rounded-lg shadow-lg px-3 py-2 text-xs text-gray-400">
+                                        검색 결과 없음
+                                    </div>
+                                </div>
                             </td>
                             {{-- 법인카드: 선택된 카드 표시 --}}
                             <td x-show="formData.expense_type === 'corporate_card'" class="px-1 py-1">
@@ -347,6 +368,8 @@ function makeItem(data) {
             description: data?.description || '',
             amount: parseInt(data?.amount) || 0,
             vendor: data?.vendor || '',
+            vendor_id: data?.vendor_id || null,
+            vendor_biz_no: data?.vendor_biz_no || '',
             bank: data?.bank || '',
             account_no: data?.account_no || '',
             depositor: data?.depositor || '',
@@ -562,6 +585,8 @@ function makeItem(data) {
                     description: item.description,
                     amount: parseInt(item.amount) || 0,
                     vendor: item.vendor,
+                    vendor_id: item.vendor_id || null,
+                    vendor_biz_no: item.vendor_biz_no || '',
                     bank: isTransfer && acct ? acct.bank_name : (isCard ? (card?.card_company || '') : item.bank),
                     account_no: isTransfer && acct ? acct.account_number : (isCard ? ('**** ' + (card?.card_number_last4 || '')) : item.account_no),
                     depositor: isTransfer && acct ? acct.account_holder : (isCard ? (card?.card_holder_name || '') : item.depositor),
@@ -579,4 +604,65 @@ function makeItem(data) {
         },
     };
 }
+
+function vendorSearch(item) {
+    let debounceTimer = null;
+    return {
+        open: false,
+        query: '',
+        results: [],
+        loading: false,
+        highlighted: -1,
+
+        onInput(value) {
+            item.vendor = value;
+            this.query = value;
+            this.highlighted = -1;
+            clearTimeout(debounceTimer);
+            if (value.length < 1) { this.results = []; this.open = false; return; }
+            debounceTimer = setTimeout(() => this.search(value), 250);
+        },
+
+        onFocus() {
+            if (item.vendor && item.vendor.length >= 1) {
+                this.query = item.vendor;
+                this.search(item.vendor);
+            }
+        },
+
+        async search(keyword) {
+            this.loading = true;
+            try {
+                const res = await fetch(`/barobill/tax-invoice/search-partners?keyword=${encodeURIComponent(keyword)}`);
+                this.results = await res.json();
+                this.open = true;
+            } catch (e) { this.results = []; }
+            this.loading = false;
+        },
+
+        selectPartner(p) {
+            item.vendor = p.name;
+            item.vendor_id = p.id;
+            item.vendor_biz_no = p.biz_no || '';
+            this.query = p.name;
+            this.close();
+        },
+
+        close() { this.open = false; this.highlighted = -1; },
+
+        moveDown() {
+            if (!this.open || this.results.length === 0) return;
+            this.highlighted = (this.highlighted + 1) % this.results.length;
+        },
+        moveUp() {
+            if (!this.open || this.results.length === 0) return;
+            this.highlighted = this.highlighted <= 0 ? this.results.length - 1 : this.highlighted - 1;
+        },
+        selectHighlighted() {
+            if (this.highlighted >= 0 && this.highlighted < this.results.length) {
+                this.selectPartner(this.results[this.highlighted]);
+            }
+        },
+    };
+}
 </script>