diff --git a/resources/views/barobill/eaccount/index.blade.php b/resources/views/barobill/eaccount/index.blade.php index e2191cf4..96a9bbee 100644 --- a/resources/views/barobill/eaccount/index.blade.php +++ b/resources/views/barobill/eaccount/index.blade.php @@ -154,22 +154,123 @@ className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ ); - // AccountCodeSelect Component - const AccountCodeSelect = ({ value, onChange, accountCodes }) => ( - - ); + // AccountCodeSelect Component (검색 가능한 드롭다운) + const AccountCodeSelect = ({ value, onChange, accountCodes }) => { + const [isOpen, setIsOpen] = useState(false); + const [search, setSearch] = useState(''); + const containerRef = useRef(null); + + // 선택된 값의 표시 텍스트 + const selectedItem = accountCodes.find(c => c.code === value); + const displayText = selectedItem ? `${selectedItem.code} ${selectedItem.name}` : ''; + + // 검색 필터링 + const filteredCodes = accountCodes.filter(code => { + if (!search) return true; + const searchLower = search.toLowerCase(); + return code.code.toLowerCase().includes(searchLower) || + code.name.toLowerCase().includes(searchLower); + }); + + // 외부 클릭 시 닫기 + useEffect(() => { + const handleClickOutside = (e) => { + if (containerRef.current && !containerRef.current.contains(e.target)) { + setIsOpen(false); + setSearch(''); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + const handleSelect = (code) => { + const selected = accountCodes.find(c => c.code === code.code); + onChange(code.code, selected?.name || ''); + setIsOpen(false); + setSearch(''); + }; + + const handleClear = (e) => { + e.stopPropagation(); + onChange('', ''); + setSearch(''); + }; + + return ( +
+ {/* 선택 버튼 */} +
setIsOpen(!isOpen)} + className={`w-full px-2 py-1 text-xs border rounded cursor-pointer flex items-center justify-between gap-1 ${ + isOpen ? 'border-emerald-500 ring-2 ring-emerald-500' : 'border-stone-200' + } bg-white`} + > + + {displayText || '선택'} + +
+ {value && ( + + )} + + + +
+
+ + {/* 드롭다운 */} + {isOpen && ( +
+ {/* 검색 입력 */} +
+ setSearch(e.target.value)} + placeholder="코드 또는 이름 검색..." + className="w-full px-2 py-1 text-xs border border-stone-200 rounded focus:ring-1 focus:ring-emerald-500 outline-none" + autoFocus + /> +
+ {/* 옵션 목록 */} +
+ {filteredCodes.length === 0 ? ( +
+ 검색 결과 없음 +
+ ) : ( + filteredCodes.slice(0, 50).map(code => ( +
handleSelect(code)} + className={`px-3 py-1.5 text-xs cursor-pointer hover:bg-emerald-50 ${ + value === code.code ? 'bg-emerald-100 text-emerald-700' : 'text-stone-700' + }`} + > + {code.code} + {code.name} +
+ )) + )} + {filteredCodes.length > 50 && ( +
+ +{filteredCodes.length - 50}개 더 있음 +
+ )} +
+
+ )} +
+ ); + }; // AccountCodeSettingsModal Component const AccountCodeSettingsModal = ({ isOpen, onClose, onUpdate }) => {