feat(입고등록): 품목코드/발주처 검색 선택(SearchableSelect) 구현

- SearchableSelect UI 컴포넌트 추가 (Popover + Command 패턴, 선택 전용)
- 품목코드: 검색 후 선택 시 품목명/규격/단위 자동 채움
- 발주처: 검색 후 선택만 가능 (직접 입력 불가)
- searchItems(), searchSuppliers() 서버 액션 추가 (목데이터 포함)
- 기존 TS 타입 에러 수정 (unit 누락, stats 필드 매핑, initialData 타입)

src/components/ui/searchable-select.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+/**
+ * SearchableSelect - 검색 가능한 단일 선택 컴포넌트
+ *
+ * Popover + Command 패턴으로 구현
+ * - 검색 가능하지만 직접 입력은 불가 (선택만 허용)
+ * - 선택 후 Popover 자동 닫힘
+ */
+
+import * as React from 'react';
+import { Check, ChevronsUpDown, Search } from 'lucide-react';
+import { cn } from './utils';
+import { Button } from './button';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+
+export interface SearchableSelectOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+interface SearchableSelectProps {
+  options: SearchableSelectOption[];
+  value: string;
+  onChange: (value: string, option: SearchableSelectOption) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  className?: string;
+  /** 서버 검색 모드: 검색어 변경 시 호출 */
+  onSearch?: (query: string) => void;
+  /** 로딩 상태 */
+  isLoading?: boolean;
+}
+
+export function SearchableSelect({
+  options,
+  value,
+  onChange,
+  placeholder = '선택하세요',
+  searchPlaceholder = '검색...',
+  emptyText = '결과가 없습니다',
+  disabled = false,
+  className,
+  onSearch,
+  isLoading = false,
+}: SearchableSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handleSelect = (selectedValue: string) => {
+    const option = options.find((opt) => opt.value === selectedValue);
+    if (option) {
+      onChange(selectedValue, option);
+      setOpen(false);
+      setSearchQuery('');
+    }
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    onSearch?.(query);
+  };
+
+  // Popover 닫힐 때 검색어 초기화
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) {
+      setSearchQuery('');
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            'w-full justify-between font-normal',
+            !selectedOption && 'text-muted-foreground',
+            className
+          )}
+        >
+          <span className="truncate">
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Command shouldFilter={!onSearch}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onValueChange={handleSearchChange}
+          />
+          <CommandList>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
+                <Search className="mr-2 h-4 w-4 animate-pulse" />
+                검색 중...
+              </div>
+            ) : (
+              <>
+                <CommandEmpty>{emptyText}</CommandEmpty>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      onSelect={() => handleSelect(option.value)}
+                      className="cursor-pointer"
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          value === option.value ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                      <div className="flex flex-col">
+                        <span>{option.label}</span>
+                        {option.description && (
+                          <span className="text-xs text-muted-foreground">
+                            {option.description}
+                          </span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}