kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: FlowWidget 검색 필터를 설정 버튼과 같은 줄에 배치 

변경사항:
- 검색 필터 입력 필드를 필터 설정/그룹 설정 버튼과 동일한 Y좌표에 배치
- 한 줄 레이아웃: [검색입력들...] [초기화] ... [필터설정] [그룹설정]
- ml-auto로 설정 버튼들 오른쪽 정렬
- 검색 필드는 왼쪽부터, 설정 버튼은 오른쪽에 배치
- 중복된 검색 필터 입력 영역 제거

UI 개선:
- 모든 컨트롤이 하나의 수평선상에 위치
- 공간 효율성 극대화
- 사용자가 요청한 레이아웃 정확히 구현
This commit is contained in:
kjs 2025-11-03 14:32:51 +09:00
parent 57738fbfc2
commit d9681bb64d
1 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
frontend/components/screen/widgets/FlowWidget.tsx
View File

@ -861,47 +861,76 @@ export function FlowWidget({
{stepDataColumns.length > 0 && (
<>
<div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
<div className="flex justify-end gap-2">
<Button
variant="outline"
size="sm"
onClick={() => {
if (isPreviewMode) {
return;
}
setIsFilterSettingOpen(true);
}}
disabled={isPreviewMode}
className="h-8 shrink-0 text-xs sm:text-sm"
>
<Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
검색 필터 설정
{searchFilterColumns.size > 0 && (
<Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
{searchFilterColumns.size}
</Badge>
)}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => {
if (isPreviewMode) {
return;
}
setIsGroupSettingOpen(true);
}}
disabled={isPreviewMode}
className="h-8 shrink-0 text-xs sm:text-sm"
>
<Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
그룹 설정
{groupByColumns.length > 0 && (
<Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
{groupByColumns.length}
</Badge>
)}
</Button>
<div className="flex items-center gap-2 flex-wrap">
{/* 검색 필터 입력 영역 */}
{searchFilterColumns.size > 0 && (
<>
{Array.from(searchFilterColumns).map((col) => (
<Input
key={col}
value={searchValues[col] || ""}
onChange={(e) =>
setSearchValues((prev) => ({
...prev,
[col]: e.target.value,
}))
}
placeholder={`${columnLabels[col] || col} 검색...`}
className="h-8 text-xs w-40"
/>
))}
{Object.keys(searchValues).length > 0 && (
<Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs">
<X className="mr-1 h-3 w-3" />
초기화
</Button>
)}
</>
)}
{/* 필터/그룹 설정 버튼 */}
<div className="flex gap-2 ml-auto">
<Button
variant="outline"
size="sm"
onClick={() => {
if (isPreviewMode) {
return;
}
setIsFilterSettingOpen(true);
}}
disabled={isPreviewMode}
className="h-8 shrink-0 text-xs sm:text-sm"
>
<Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
검색 필터 설정
{searchFilterColumns.size > 0 && (
<Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
{searchFilterColumns.size}
</Badge>
)}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => {
if (isPreviewMode) {
return;
}
setIsGroupSettingOpen(true);
}}
disabled={isPreviewMode}
className="h-8 shrink-0 text-xs sm:text-sm"
>
<Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
그룹 설정
{groupByColumns.length > 0 && (
<Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
{groupByColumns.length}
</Badge>
)}
</Button>
</div>
</div>
</div>
@ -935,34 +964,6 @@ export function FlowWidget({
</div>
</div>
)}
{/* 🆕 검색 필터 입력 영역 */}
{searchFilterColumns.size > 0 && (
<div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
<div className="flex items-center gap-2 flex-wrap">
{Array.from(searchFilterColumns).map((col) => (
<Input
key={col}
value={searchValues[col] || ""}
onChange={(e) =>
setSearchValues((prev) => ({
...prev,
[col]: e.target.value,
}))
}
placeholder={`${columnLabels[col] || col} 검색...`}
className="h-8 text-xs w-40"
/>
))}
{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>
)}
</>
)}