거래처별 품목정보 검색바 및 카테고박스 추가

frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx

@@ -103,42 +103,48 @@ export const CustomerItemMappingComponent: React.FC<CustomerItemMappingComponent
       <div className="w-full border-border bg-muted flex h-12 flex-shrink-0 items-center justify-between border-b px-4 sm:h-14 sm:px-6">
         <h3 className="text-sm font-semibold sm:text-base">
           품목 추가 - {finalConfig.selectedTable || "[테이블 선택]"}
+          {finalConfig.showCompanyName && finalConfig.companyNameColumn && (
+            <span className="text-muted-foreground ml-2 text-xs font-normal sm:text-sm">
+              | {finalConfig.companyNameColumn}
+            </span>
+          )}
         </h3>
         <button className="hover:bg-muted-foreground/10 rounded p-1">
           <X className="h-4 w-4 sm:h-5 sm:w-5" />
         </button>
       </div>
 
-      {/* 검색/카테고리 영역 - 회색 배경 */}
+      {/* 검색/카테고리 영역 */}
       {finalConfig.showSearchArea && (
-        <div
-          className="w-full border-border bg-muted flex-shrink-0 border-b"
-          style={{ height: finalConfig.searchAreaHeight || 80 }}
-        >
-          <div className="flex h-full w-full items-center justify-center p-4">
-            <div className="text-muted-foreground flex flex-col items-center gap-2 text-center">
-              <div className="bg-background/50 rounded-full p-3">
-                <svg
-                  className="h-5 w-5 sm:h-6 sm:w-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
+        <div className="w-full border-border bg-background flex-shrink-0 border-b p-3 sm:p-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+            {/* 검색 입력 */}
+            <div className="flex-1">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder={finalConfig.searchPlaceholder || "품목코드, 품목명, 규격 검색"}
+                  className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border px-3 py-1 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  disabled={isDesignMode}
+                />
               </div>
-              <p className="text-xs font-medium sm:text-sm">
-                검색 및 카테고리 필터 영역
-              </p>
-              <p className="text-[10px] text-muted-foreground/70 sm:text-xs">
-                나중에 구현 예정
-              </p>
             </div>
+
+            {/* 카테고리 필터 */}
+            {finalConfig.enableCategoryFilter && (
+              <div className="w-full sm:w-auto sm:min-w-[160px]">
+                <select
+                  className="border-input bg-background ring-offset-background focus-visible:ring-ring h-9 w-full rounded-md border px-3 py-1 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  disabled={isDesignMode}
+                >
+                  {(finalConfig.categories || ["전체"]).map((category, idx) => (
+                    <option key={idx} value={category}>
+                      {category}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
           </div>
         </div>
       )}