jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 관리자 테이블 스타일 개선 및 탭 컴포넌트 디자인 수정

Browse Source 
- 외부 커넥션 관리 테이블 표준화 (DB 연결, REST API 연결)
- 모든 관리자 테이블의 그림자 제거 (테이블 타입 관리 왼쪽 카드 제외)
- 테이블 타입 관리 왼쪽 카드 호버 효과 강화 (shadow-lg, bg-muted/20)
- 탭 컴포넌트 배경색 밝게 조정 (bg-muted/30)
- 탭 트리거 테두리 제거
This commit is contained in:
kjs
2025-10-30 17:55:55 +09:00
parent 4924fbe71d
commit 148155e6fe
16 changed files with 560 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/components/dataflow/DataFlowList.tsx
View File

@@ -146,12 +146,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
return (
<div className="space-y-4">
{/* 섹션 제목 */}
<div className="space-y-1">
<h2 className="text-xl font-semibold">플로우 목록</h2>
<p className="text-sm text-muted-foreground">저장된 노드 플로우를 불러오거나 새로운 플로우를 생성합니다</p>
</div>
{/* 검색 및 액션 영역 */}
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
{/* 검색 영역 */}
@@ -184,33 +178,33 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
{loading ? (
<>
{/* 데스크톱 테이블 스켈레톤 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<div className="hidden bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 text-sm font-semibold">플로우명</TableHead>
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 text-sm font-semibold">최근 수정</TableHead>
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, index) => (
<TableRow key={index} className="border-b">
<TableCell className="h-16">
<TableRow key={index} className="bg-background">
<TableCell className="h-16 px-6 py-3">
<div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="h-4 w-48 animate-pulse rounded bg-muted"></div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="flex justify-end">
<div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
</div>
@@ -264,46 +258,46 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
) : (
<>
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<div className="hidden bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 text-sm font-semibold">플로우명</TableHead>
<TableHead className="h-12 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 text-sm font-semibold">최근 수정</TableHead>
<TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredFlows.map((flow) => (
<TableRow
key={flow.flowId}
className="cursor-pointer border-b transition-colors hover:bg-muted/50"
className="bg-background transition-colors hover:bg-muted/50 cursor-pointer"
onClick={() => onLoadFlow(flow.flowId)}
>
<TableCell className="h-16 text-sm">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center font-medium">
<Network className="mr-2 h-4 w-4 text-primary" />
{flow.flowName}
</div>
</TableCell>
<TableCell className="h-16 text-sm">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</div>
</TableCell>
<TableCell className="h-16 text-sm">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center text-muted-foreground">
<Calendar className="mr-1 h-3 w-3" />
{new Date(flow.createdAt).toLocaleDateString()}
</div>
</TableCell>
<TableCell className="h-16 text-sm">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center text-muted-foreground">
<Calendar className="mr-1 h-3 w-3" />
{new Date(flow.updatedAt).toLocaleDateString()}
</div>
</TableCell>
<TableCell className="h-16" onClick={(e) => e.stopPropagation()}>
<TableCell className="h-16 px-6 py-3" onClick={(e) => e.stopPropagation()}>
<div className="flex justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>