refactor: FlowWidget 데이터 테이블 헤더 제거
변경사항: - 스텝 이름 복원 (탭 영역에 표시되므로 필요) - 데이터 테이블 위 헤더 영역 제거 - 스텝 이름 중복 표시 제거 - '총 N건의 데이터' 표시 제거 - 필터링/선택 건수 표시 제거 - 필터 설정 및 그룹 설정 버튼은 유지 - justify-end로 버튼 오른쪽 정렬 UI 개선: - 데이터 영역 확대로 더 많은 정보 표시 - 중복 정보 제거로 깔끔한 인터페이스 - 필요한 설정 버튼만 간결하게 배치
This commit is contained in:
parent
4386a009a4
commit
e6cc671808
|
|
@ -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 && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue