diff --git a/src/components/items/ItemMasterDataManagement/tabs/MasterFieldTab/index.tsx b/src/components/items/ItemMasterDataManagement/tabs/MasterFieldTab/index.tsx index 8889fc5f..cad851c1 100644 --- a/src/components/items/ItemMasterDataManagement/tabs/MasterFieldTab/index.tsx +++ b/src/components/items/ItemMasterDataManagement/tabs/MasterFieldTab/index.tsx @@ -6,12 +6,14 @@ * - item_fields WHERE section_id IS NULL로 통합 * - 향후 FieldTab으로 리네임 예정 */ +import { useState, useMemo } from 'react'; import type { ItemMasterField } from '@/contexts/ItemMasterContext'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; import { getPresetStyle } from '@/lib/utils/status-config'; -import { Plus, Edit, Trash2 } from 'lucide-react'; +import { Plus, Edit, Trash2, Search, X } from 'lucide-react'; // 입력방식 옵션 (ItemMasterDataManagement에서 사용하는 상수) const INPUT_TYPE_OPTIONS = [ @@ -50,6 +52,21 @@ export function MasterFieldTab({ hasUnsavedChanges: _hasUnsavedChanges, pendingChanges: _pendingChanges }: MasterFieldTabProps) { + const [searchQuery, setSearchQuery] = useState(''); + + const filteredFields = useMemo(() => { + if (!searchQuery.trim()) return itemMasterFields; + const query = searchQuery.trim().toLowerCase(); + return itemMasterFields.filter(field => { + const fieldName = field.field_name?.toLowerCase() || ''; + const fieldType = INPUT_TYPE_OPTIONS.find(t => t.value === field.field_type)?.label?.toLowerCase() || ''; + const category = field.category?.toLowerCase() || ''; + const description = field.description?.toLowerCase() || ''; + const fieldId = String(field.id); + return fieldName.includes(query) || fieldType.includes(query) || category.includes(query) || description.includes(query) || fieldId.includes(query); + }); + }, [itemMasterFields, searchQuery]); + return ( @@ -70,6 +87,25 @@ export function MasterFieldTab({ 항목 추가 + {itemMasterFields.length > 0 && ( +
+ + setSearchQuery(e.target.value)} + className="pl-9 pr-9" + /> + {searchQuery && ( + + )} +
+ )}
{itemMasterFields.length === 0 ? ( @@ -81,7 +117,17 @@ export function MasterFieldTab({ ) : (
- {itemMasterFields.map((field, index) => ( + {searchQuery && ( +

+ {filteredFields.length}건 검색됨 (전체 {itemMasterFields.length}건) +

+ )} + {filteredFields.length === 0 && searchQuery ? ( +
+

"{searchQuery}"에 대한 검색 결과가 없습니다

+
+ ) : null} + {filteredFields.map((field, index) => (