From e6cc671808faff9ac5146a624563464ba0557f7c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:28:03 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20FlowWidget=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경사항:
- 스텝 이름 복원 (탭 영역에 표시되므로 필요)
- 데이터 테이블 위 헤더 영역 제거
  - 스텝 이름 중복 표시 제거
  - '총 N건의 데이터' 표시 제거
  - 필터링/선택 건수 표시 제거
- 필터 설정 및 그룹 설정 버튼은 유지
- justify-end로 버튼 오른쪽 정렬

UI 개선:
- 데이터 영역 확대로 더 많은 정보 표시
- 중복 정보 제거로 깔끔한 인터페이스
- 필요한 설정 버튼만 간결하게 배치
---
 .../components/screen/widgets/FlowWidget.tsx  | 42 ++++++++-----------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index b40e2358..d0a7aabf 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -781,7 +781,16 @@ export function FlowWidget({
               onClick={() => handleStepClick(step.id, step.stepName)}
             >
               {/* 콘텐츠 */}
-              <div className="relative flex flex-col items-center justify-center gap-2 pb-3 sm:gap-2.5 sm:pb-4">
+              <div className="relative flex flex-col items-center justify-center gap-2 pb-5 sm:gap-2.5 sm:pb-6">
+                {/* 스텝 이름 */}
+                <h4
+                  className={`text-base font-semibold leading-tight transition-colors duration-300 sm:text-lg lg:text-xl ${
+                    selectedStepId === step.id ? "text-primary" : "text-foreground group-hover:text-primary/80"
+                  }`}
+                >
+                  {step.stepName}
+                </h4>
+
                 {/* 데이터 건수 */}
                 {showStepCount && (
                   <div
@@ -848,28 +857,11 @@ export function FlowWidget({
       {/* 선택된 스텝의 데이터 리스트 */}
       {selectedStepId !== null && (
         <div className="mt-4 flex w-full flex-col sm:mt-6 lg:mt-8">
-          {/* 헤더 - 자동 높이 */}
-          <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
-            <div className="flex items-start justify-between gap-3">
-              <div className="flex-1">
-                <h4 className="text-foreground text-base font-semibold sm:text-lg">
-                  {steps.find((s) => s.id === selectedStepId)?.stepName}
-                </h4>
-                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
-                  총 {stepData.length}건의 데이터
-                  {filteredData.length > 0 && (
-                    <span className="text-primary ml-2 font-medium">(필터링: {filteredData.length}건)</span>
-                  )}
-                  {selectedRows.size > 0 && (
-                    <span className="text-primary ml-2 font-medium">({selectedRows.size}건 선택됨)</span>
-                  )}
-                </p>
-              </div>
-
-              {/* 🆕 필터 설정 버튼 */}
-              {stepDataColumns.length > 0 && (
-                <div className="flex gap-2">
-                  <Button
+          {/* 필터 및 그룹 설정 */}
+          {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={() => {
@@ -910,8 +902,8 @@ export function FlowWidget({
                     )}
                   </Button>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
 
             {/* 🆕 그룹 표시 배지 */}
             {groupByColumns.length > 0 && (