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

feat: 테이블 타입 관리 페이지 UI 개선 및 테이블 삭제 방식 변경

Browse Source 
- 테이블 삭제 방식을 체크박스 선택 기반 일괄 삭제로 변경
- 좌측 테이블 리스트 영역에 스크롤 적용
- 선택된 테이블에 검정 테두리 표시 (border-2 border-black)
- 우측 상단 타이틀 제거
- 각 테이블 카드에 라운딩 적용 (rounded-lg)
- 컬럼 간 간격 개선 (입력 타입-상세 설정 간격 증가)
- Entity 설정 박스 스타일 제거 (평면적 레이아웃으로 변경)
- 좌측 영역 우측 여백 조정 (pr-4)
This commit is contained in:
kjs
2025-10-30 17:02:30 +09:00
parent 21af6c5c17
commit 4924fbe71d
9 changed files with 458 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/components/screen/ScreenList.tsx
View File

@@ -429,31 +429,28 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
{/* 활성 화면 탭 */}
<TabsContent value="active">
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<div className="border-b p-6">
<h3 className="text-lg font-semibold">화면 목록 ({screens.length})</h3>
</div>
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<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-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
<TableRow>
<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-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{screens.map((screen) => (
<TableRow
key={screen.screenId}
className={`hover:bg-muted/50 cursor-pointer border-b transition-colors ${
className={`bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors ${
selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
}`}
onClick={() => onDesignScreen(screen)}
>
<TableCell className="h-16 cursor-pointer">
<TableCell className="h-16 px-6 py-3 cursor-pointer">
<div>
<div className="font-medium">{screen.screenName}</div>
{screen.description && (
@@ -461,26 +458,26 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
)}
</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<Badge variant="outline" className="font-mono">
{screen.screenCode}
</Badge>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<span className="text-muted-foreground font-mono text-sm">
{screen.tableLabel || screen.tableName}
</span>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
{screen.isActive === "Y" ? "활성" : "비활성"}
</Badge>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="text-muted-foreground text-sm">{screen.createdDate.toLocaleDateString()}</div>
<div className="text-muted-foreground text-xs">{screen.createdBy}</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
@@ -671,52 +668,37 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
{/* 휴지통 탭 */}
<TabsContent value="trash">
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<div className="flex items-center justify-between border-b p-6">
<h3 className="text-lg font-semibold">휴지통 ({deletedScreens.length})</h3>
{selectedScreenIds.length > 0 && (
<Button
variant="destructive"
size="sm"
onClick={handleBulkDelete}
disabled={bulkDeleting}
className="h-9 gap-2 text-sm font-medium"
>
<Trash className="h-4 w-4" />
{bulkDeleting ? "삭제 중..." : `선택된 ${selectedScreenIds.length}개 영구삭제`}
</Button>
)}
</div>
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<TableHead className="h-12 w-12">
<TableRow>
<TableHead className="h-12 w-12 px-6 py-3">
<Checkbox
checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
onCheckedChange={handleSelectAll}
aria-label="전체 선택"
/>
</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-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 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-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>
</TableRow>
</TableHeader>
<TableBody>
{deletedScreens.map((screen) => (
<TableRow key={screen.screenId} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16">
<TableRow key={screen.screenId} className="bg-background hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 px-6 py-3">
<Checkbox
checked={selectedScreenIds.includes(screen.screenId)}
onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
aria-label={`${screen.screenName} 선택`}
/>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div>
<div className="font-medium">{screen.screenName}</div>
{screen.description && (
@@ -724,28 +706,28 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
)}
</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<Badge variant="outline" className="font-mono">
{screen.screenCode}
</Badge>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<span className="text-muted-foreground font-mono text-sm">
{screen.tableLabel || screen.tableName}
</span>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="text-muted-foreground text-sm">{screen.deletedDate?.toLocaleDateString()}</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="text-muted-foreground text-sm">{screen.deletedBy}</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="text-muted-foreground max-w-32 truncate text-sm" title={screen.deleteReason}>
{screen.deleteReason || "-"}
</div>
</TableCell>
<TableCell className="h-16">
<TableCell className="h-16 px-6 py-3">
<div className="flex items-center gap-2">
<Button
variant="outline"
@@ -789,7 +771,6 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
onCheckedChange={handleSelectAll}
aria-label="전체 선택"
/>
<h3 className="text-base font-semibold">휴지통 ({deletedScreens.length})</h3>
</div>
{selectedScreenIds.length > 0 && (
<Button