feat: [item-master] 항목 탭 검색 기능 추가

- 항목명, 입력타입, 카테고리, 설명, ID로 실시간 필터링
- 검색 결과 건수 표시 및 초기화 버튼
This commit is contained in:
김보곤
2026-03-19 07:55:45 +09:00
parent 523f549069
commit 3fe876cd76

View File

@@ -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 (
<Card>
<CardHeader>
@@ -70,6 +87,25 @@ export function MasterFieldTab({
<Plus className="h-4 w-4 mr-2" />
</Button>
</div>
{itemMasterFields.length > 0 && (
<div className="relative mt-3">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="항목명, 입력타입, 카테고리, ID로 검색..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-9"
/>
{searchQuery && (
<button
onClick={() => setSearchQuery('')}
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
<X className="h-4 w-4" />
</button>
)}
</div>
)}
</CardHeader>
<CardContent>
{itemMasterFields.length === 0 ? (
@@ -81,7 +117,17 @@ export function MasterFieldTab({
</div>
) : (
<div className="space-y-2">
{itemMasterFields.map((field, index) => (
{searchQuery && (
<p className="text-sm text-muted-foreground mb-2">
{filteredFields.length} ( {itemMasterFields.length})
</p>
)}
{filteredFields.length === 0 && searchQuery ? (
<div className="text-center py-8">
<p className="text-muted-foreground">"{searchQuery}" </p>
</div>
) : null}
{filteredFields.map((field, index) => (
<div key={`masterfield-${field.id}-${index}`} className="flex items-center justify-between p-4 border rounded hover:bg-gray-50 transition-colors">
<div className="flex-1">
<div className="flex items-center gap-2">