refactor: FlowWidget 검색 필터 UI를 한 줄로 통합
변경사항: - 검색 필터 입력 필드를 버튼과 같은 Y좌표에 배치 - Label 제거 (placeholder로 충분) - flex-wrap으로 여러 필터 자동 줄바꿈 - 고정 너비(w-40)로 일관된 입력 필드 크기 - 초기화 버튼 ml-auto로 오른쪽 정렬 - grid 레이아웃 제거하고 flex로 변경 UI 개선: - TableListComponent와 동일한 스타일 적용 - 공간 절약 및 깔끔한 인터페이스 - 필터 설정, 그룹 설정, 검색 입력이 모두 같은 영역에 위치
This commit is contained in:
parent
9f4884f761
commit
57738fbfc2
|
|
@ -936,26 +936,13 @@ export function FlowWidget({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 🆕 검색 필터 입력 영역 */}
|
{/* 🆕 검색 필터 입력 영역 */}
|
||||||
{searchFilterColumns.size > 0 && (
|
{searchFilterColumns.size > 0 && (
|
||||||
<div className="mt-2 space-y-3 p-4">
|
<div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
{Object.keys(searchValues).length > 0 && (
|
{Array.from(searchFilterColumns).map((col) => (
|
||||||
<Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-7 text-xs">
|
|
||||||
<X className="mr-1 h-3 w-3" />
|
|
||||||
초기화
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
|
|
||||||
{Array.from(searchFilterColumns).map((col) => (
|
|
||||||
<div key={col} className="space-y-1.5">
|
|
||||||
<Label htmlFor={`search-${col}`} className="text-xs">
|
|
||||||
{columnLabels[col] || col}
|
|
||||||
</Label>
|
|
||||||
<Input
|
<Input
|
||||||
id={`search-${col}`}
|
key={col}
|
||||||
value={searchValues[col] || ""}
|
value={searchValues[col] || ""}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setSearchValues((prev) => ({
|
setSearchValues((prev) => ({
|
||||||
|
|
@ -964,12 +951,17 @@ export function FlowWidget({
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
placeholder={`${columnLabels[col] || col} 검색...`}
|
placeholder={`${columnLabels[col] || col} 검색...`}
|
||||||
className="h-8 text-xs"
|
className="h-8 text-xs w-40"
|
||||||
/>
|
/>
|
||||||
</div>
|
))}
|
||||||
))}
|
{Object.keys(searchValues).length > 0 && (
|
||||||
|
<Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs ml-auto">
|
||||||
|
<X className="mr-1 h-3 w-3" />
|
||||||
|
초기화
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue