From 57738fbfc20d17a42c1861505e3a3aa1b4c44fac Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:31:27 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20FlowWidget=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=20UI=EB=A5=BC=20=ED=95=9C=20=EC=A4=84?=
 =?UTF-8?q?=EB=A1=9C=20=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경사항:
- 검색 필터 입력 필드를 버튼과 같은 Y좌표에 배치
- Label 제거 (placeholder로 충분)
- flex-wrap으로 여러 필터 자동 줄바꿈
- 고정 너비(w-40)로 일관된 입력 필드 크기
- 초기화 버튼 ml-auto로 오른쪽 정렬
- grid 레이아웃 제거하고 flex로 변경

UI 개선:
- TableListComponent와 동일한 스타일 적용
- 공간 절약 및 깔끔한 인터페이스
- 필터 설정, 그룹 설정, 검색 입력이 모두 같은 영역에 위치
---
 .../components/screen/widgets/FlowWidget.tsx  | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index dcc4c677..d5835ef3 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -936,26 +936,13 @@ export function FlowWidget({
               </div>
             )}
 
-            {/* 🆕 검색 필터 입력 영역 */}
-            {searchFilterColumns.size > 0 && (
-              <div className="mt-2 space-y-3 p-4">
-                <div className="flex items-center justify-end">
-                  {Object.keys(searchValues).length > 0 && (
-                    <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>
+              {/* 🆕 검색 필터 입력 영역 */}
+              {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
-                        id={`search-${col}`}
+                        key={col}
                         value={searchValues[col] || ""}
                         onChange={(e) =>
                           setSearchValues((prev) => ({
@@ -964,12 +951,17 @@ export function FlowWidget({
                           }))
                         }
                         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>
               )}
             </>
           )}