refactor: FlowWidget 데이터 테이블 헤더 제거

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

UI 개선:
- 데이터 영역 확대로 더 많은 정보 표시
- 중복 정보 제거로 깔끔한 인터페이스
- 필요한 설정 버튼만 간결하게 배치
This commit is contained in:
kjs 2025-11-03 14:28:03 +09:00
parent 4386a009a4
commit e6cc671808
1 changed files with 17 additions and 25 deletions

View File

@ -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,27 +857,10 @@ 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">
<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"
@ -910,8 +902,8 @@ export function FlowWidget({
)}
</Button>
</div>
)}
</div>
)}
{/* 🆕 그룹 표시 배지 */}
{groupByColumns.length > 0 && (