From d9681bb64de4d9b190ed558c493511a2720675d1 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:32:51 +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=EB=A5=BC=20=EC=84=A4=EC=A0=95=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EA=B3=BC=20=EA=B0=99=EC=9D=80=20=EC=A4=84=EC=97=90=20?=
 =?UTF-8?q?=EB=B0=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

UI 개선:
- 모든 컨트롤이 하나의 수평선상에 위치
- 공간 효율성 극대화
- 사용자가 요청한 레이아웃 정확히 구현
---
 .../components/screen/widgets/FlowWidget.tsx  | 139 +++++++++---------
 1 file changed, 70 insertions(+), 69 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index d5835ef3..fd24ea19 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -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>
-              )}
             </>
           )}