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 ( +