관리자 화면 컴팩트 리디자인 + Docker 프로젝트 분리
- 테이블 타입 관리: h-screen → h-full(min-h-0) 로 탭 영역에 정확히 맞춤, 사이드바·헤더·카드 폰트/패딩 톤다운, 헤더 입력칸 grid 레이아웃으로 빈 공간 메움 - ColumnGrid: 행 높이 56px → 36px, 한글라벨/영문명 분리 표시, PK/NN/IDX/UQ 한 줄 nowrap 고정폭, 그룹 헤더 sticky, 액션 버튼 hover 노출 - 메뉴 관리: min-h-screen → h-full(min-h-0) overflow-hidden, 헤더 flex-shrink-0, 메인 컨텐츠 flex-1 로 탭 안에서 정확한 height - MenuTable: max-h-[calc(100vh-350px)] 절대값 제거, flex-1 min-h-0 overflow-auto 로 부모 컨테이너 따라 내부 스크롤 - docker-compose: name=vexplor_rps 추가 — Docker Desktop 에서 pipeline 등 다른 프로젝트와 분리되어 한 그룹으로 깔끔하게 표시 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
@@ -1,3 +1,5 @@
|
||||
name: vexplor_rps
|
||||
|
||||
services:
|
||||
# Node.js 백엔드
|
||||
backend:
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
name: vexplor_rps
|
||||
|
||||
services:
|
||||
# Next.js 프론트엔드만
|
||||
frontend:
|
||||
|
||||
@@ -873,17 +873,18 @@ export default function MenuPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background">
|
||||
<div className="space-y-6 p-6">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="space-y-2 border-b pb-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight">메뉴 관리</h1>
|
||||
<p className="text-sm text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
|
||||
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
|
||||
<div className="flex h-full min-h-0 flex-col gap-4 p-4">
|
||||
{/* 페이지 헤더 — 고정 */}
|
||||
<div className="flex-shrink-0 space-y-1 border-b pb-3">
|
||||
<h1 className="text-xl font-bold tracking-tight">메뉴 관리</h1>
|
||||
<p className="text-xs text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
|
||||
</div>
|
||||
|
||||
{/* 메인 컨텐츠 */}
|
||||
{/* 메인 컨텐츠 — 남는 공간 차지 */}
|
||||
<div className="flex flex-1 min-h-0 flex-col">
|
||||
<LoadingOverlay isLoading={deleting} text={getUITextSync("button.delete.processing")}>
|
||||
<div className="flex h-full gap-6">
|
||||
<div className="flex h-full min-h-0 gap-4">
|
||||
{/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
|
||||
<div className="w-[20%] border-r pr-6">
|
||||
<div className="space-y-4">
|
||||
@@ -933,8 +934,8 @@ export default function MenuPage() {
|
||||
</div>
|
||||
|
||||
{/* 우측 메인 영역 - 메뉴 목록 (80%) */}
|
||||
<div className="w-[80%] pl-0">
|
||||
<div className="flex h-full flex-col space-y-4">
|
||||
<div className="flex w-[80%] min-h-0 flex-col pl-0">
|
||||
<div className="flex h-full min-h-0 flex-col space-y-4">
|
||||
{/* 상단 헤더: 제목 + 검색 + 버튼 */}
|
||||
<div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
{/* 왼쪽: 제목 */}
|
||||
@@ -1104,6 +1105,7 @@ export default function MenuPage() {
|
||||
</div>
|
||||
</div>
|
||||
</LoadingOverlay>
|
||||
</div>
|
||||
|
||||
<MenuFormModal
|
||||
isOpen={formModalOpen}
|
||||
|
||||
@@ -1276,12 +1276,12 @@ export default function TableManagementPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-background flex h-screen flex-col overflow-hidden">
|
||||
{/* 컴팩트 탑바 (52px) */}
|
||||
<div className="flex h-[52px] flex-shrink-0 items-center justify-between border-b px-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className="h-4.5 w-4.5 text-muted-foreground" />
|
||||
<h1 className="text-[15px] font-bold tracking-tight">
|
||||
<div className="bg-background flex h-full min-h-0 flex-col overflow-hidden">
|
||||
{/* 컴팩트 탑바 (40px) */}
|
||||
<div className="flex h-10 flex-shrink-0 items-center justify-between border-b px-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
<h1 className="text-[13px] font-bold tracking-tight">
|
||||
{getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_TITLE, "테이블 타입 관리")}
|
||||
</h1>
|
||||
<Badge variant="secondary" className="text-[10px] font-bold">
|
||||
@@ -1298,7 +1298,7 @@ export default function TableManagementPage() {
|
||||
setCreateTableModalOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 text-xs"
|
||||
className="h-7 gap-1 px-2 text-[11px]"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
새 테이블
|
||||
@@ -1317,7 +1317,7 @@ export default function TableManagementPage() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={selectedTableIds.size !== 1}
|
||||
className="h-8 gap-1.5 text-xs"
|
||||
className="h-7 gap-1 px-2 text-[11px]"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
복제
|
||||
@@ -1327,7 +1327,7 @@ export default function TableManagementPage() {
|
||||
onClick={() => setAddColumnModalOpen(true)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 text-xs"
|
||||
className="h-7 gap-1 px-2 text-[11px]"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
컬럼 추가
|
||||
@@ -1337,7 +1337,7 @@ export default function TableManagementPage() {
|
||||
onClick={() => setDdlLogViewerOpen(true)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 text-xs"
|
||||
className="h-7 gap-1 px-2 text-[11px]"
|
||||
>
|
||||
<Activity className="h-3.5 w-3.5" />
|
||||
DDL
|
||||
@@ -1358,21 +1358,21 @@ export default function TableManagementPage() {
|
||||
|
||||
{/* 3패널 메인 */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 좌측: 테이블 목록 (240px) */}
|
||||
<div className="bg-card flex w-[280px] min-w-[280px] flex-shrink-0 flex-col border-r">
|
||||
{/* 좌측: 테이블 목록 (컴팩트 240px) */}
|
||||
<div className="bg-card flex w-[240px] min-w-[240px] flex-shrink-0 flex-col border-r">
|
||||
{/* 검색 */}
|
||||
<div className="flex-shrink-0 p-3 pb-0">
|
||||
<div className="flex-shrink-0 p-2 pb-0">
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-2 h-3 w-3 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder={getTextFromUI(TABLE_MANAGEMENT_KEYS.SEARCH_PLACEHOLDER, "테이블 검색...")}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="bg-background h-[34px] pl-8 text-xs"
|
||||
className="bg-background h-7 pl-7 text-[11px]"
|
||||
/>
|
||||
</div>
|
||||
{isSuperAdmin && (
|
||||
<div className="mt-2 flex items-center justify-between border-b pb-2">
|
||||
<div className="mt-1.5 flex items-center justify-between border-b pb-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Checkbox
|
||||
checked={
|
||||
@@ -1381,7 +1381,7 @@ export default function TableManagementPage() {
|
||||
}
|
||||
onCheckedChange={handleSelectAll}
|
||||
aria-label="전체 선택"
|
||||
className="h-3.5 w-3.5"
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<span className="text-muted-foreground text-[10px]">
|
||||
{selectedTableIds.size > 0 ? `${selectedTableIds.size}개` : "전체"}
|
||||
@@ -1392,9 +1392,9 @@ export default function TableManagementPage() {
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleBulkDeleteClick}
|
||||
className="h-6 gap-1 px-2 text-[10px]"
|
||||
className="h-5 gap-1 px-1.5 text-[10px]"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<Trash2 className="h-2.5 w-2.5" />
|
||||
삭제
|
||||
</Button>
|
||||
)}
|
||||
@@ -1423,13 +1423,13 @@ export default function TableManagementPage() {
|
||||
return (
|
||||
<div key={table.tableName}>
|
||||
{showDivider && (
|
||||
<div className="text-muted-foreground/60 mt-2 mb-1 px-2 text-[9px] font-bold uppercase tracking-widest">
|
||||
<div className="text-muted-foreground/60 mt-1.5 mb-0.5 px-1.5 text-[9px] font-bold uppercase tracking-widest">
|
||||
{isKo ? "한글" : "ENGLISH"}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"group relative flex items-center gap-2 rounded-md px-2.5 py-[7px] transition-colors",
|
||||
"group relative flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors",
|
||||
isActive
|
||||
? "bg-accent text-foreground"
|
||||
: "text-foreground/80 hover:bg-accent/50",
|
||||
@@ -1445,32 +1445,32 @@ export default function TableManagementPage() {
|
||||
}}
|
||||
>
|
||||
{isActive && (
|
||||
<div className="bg-primary absolute top-1.5 bottom-1.5 left-0 w-[3px] rounded-r" />
|
||||
<div className="bg-primary absolute top-1 bottom-1 left-0 w-[2px] rounded-r" />
|
||||
)}
|
||||
{isSuperAdmin && (
|
||||
<Checkbox
|
||||
checked={selectedTableIds.has(table.tableName)}
|
||||
onCheckedChange={(checked) => handleTableCheck(table.tableName, checked as boolean)}
|
||||
aria-label={`${table.displayName || table.tableName} 선택`}
|
||||
className="h-3.5 w-3.5 flex-shrink-0"
|
||||
className="h-3 w-3 flex-shrink-0"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={cn(
|
||||
"truncate text-[16px] leading-tight",
|
||||
"truncate text-[12px] leading-tight",
|
||||
isActive ? "font-bold" : "font-medium",
|
||||
)}>
|
||||
{table.displayName || table.tableName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground truncate font-mono text-[12px] leading-tight tracking-tight">
|
||||
<div className="text-muted-foreground truncate font-mono text-[10px] leading-tight tracking-tight">
|
||||
{table.tableName}
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn(
|
||||
"flex-shrink-0 rounded-full px-1.5 py-0.5 font-mono text-[10px] font-bold leading-none",
|
||||
"flex-shrink-0 rounded-full px-1 py-0.5 font-mono text-[9px] font-bold leading-none",
|
||||
isActive
|
||||
? "bg-primary/15 text-primary"
|
||||
: "text-muted-foreground",
|
||||
@@ -1485,7 +1485,7 @@ export default function TableManagementPage() {
|
||||
</div>
|
||||
|
||||
{/* 하단 정보 */}
|
||||
<div className="text-muted-foreground flex-shrink-0 border-t px-3 py-2 text-[10px] font-medium">
|
||||
<div className="text-muted-foreground flex-shrink-0 border-t px-2 py-1 text-[9px] font-medium">
|
||||
{filteredTables.length} / {tables.length} 테이블
|
||||
</div>
|
||||
</div>
|
||||
@@ -1501,42 +1501,42 @@ export default function TableManagementPage() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 중앙 헤더: 테이블명 + 라벨 입력 + 저장 */}
|
||||
<div className="bg-card flex flex-shrink-0 items-center gap-3 border-b px-5 py-3">
|
||||
<div className="min-w-0 flex-shrink-0">
|
||||
<div className="text-[15px] font-bold tracking-tight">
|
||||
{/* 중앙 헤더: 테이블명 + 표시명/설명 + 저장 — 한 줄 컴팩트 */}
|
||||
<div className="bg-card flex flex-shrink-0 items-center gap-2 border-b px-3 py-1.5">
|
||||
<div className="min-w-0 flex-shrink-0 border-r pr-2">
|
||||
<div className="text-[12px] font-bold tracking-tight leading-tight">
|
||||
{tableLabel || selectedTable}
|
||||
</div>
|
||||
<div className="text-muted-foreground font-mono text-[11px] tracking-tight">
|
||||
<div className="text-muted-foreground font-mono text-[10px] tracking-tight leading-tight">
|
||||
{selectedTable}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<div className="grid min-w-0 flex-1 grid-cols-[160px_1fr] items-center gap-2">
|
||||
<Input
|
||||
value={tableLabel}
|
||||
onChange={(e) => setTableLabel(e.target.value)}
|
||||
placeholder="표시명"
|
||||
className="h-8 max-w-[160px] text-xs"
|
||||
className="h-7 text-[11px]"
|
||||
/>
|
||||
<Input
|
||||
value={tableDescription}
|
||||
onChange={(e) => setTableDescription(e.target.value)}
|
||||
placeholder="설명"
|
||||
className="h-8 max-w-[200px] text-xs"
|
||||
className="h-7 text-[11px]"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={saveAllSettings}
|
||||
disabled={!selectedTable || columns.length === 0 || isSaving}
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 text-xs"
|
||||
className="h-7 gap-1 px-2.5 text-[11px]"
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
<Save className="h-3 w-3" />
|
||||
)}
|
||||
{isSaving ? "저장 중..." : "전체 설정 저장"}
|
||||
{isSaving ? "저장 중..." : "저장"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -148,10 +148,10 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{title && <h3 className="text-lg font-semibold">{title}</h3>}
|
||||
<div className="bg-card">
|
||||
<div className="max-h-[calc(100vh-350px)] overflow-auto">
|
||||
<div className="flex h-full min-h-0 flex-col gap-2">
|
||||
{title && <h3 className="flex-shrink-0 text-lg font-semibold">{title}</h3>}
|
||||
<div className="flex flex-1 min-h-0 flex-col rounded-md border bg-card">
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-20 bg-background">
|
||||
<TableRow>
|
||||
|
||||
@@ -80,21 +80,24 @@ export function ColumnGrid({
|
||||
const totalFiltered =
|
||||
filteredAndGrouped.basic.length + filteredAndGrouped.reference.length + filteredAndGrouped.meta.length;
|
||||
|
||||
const GRID_TEMPLATE = "3px minmax(180px,1fr) minmax(160px,1.4fr) 90px 124px 28px";
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<div className="flex flex-1 min-h-0 flex-col overflow-hidden">
|
||||
{/* 컬럼 헤더 — 컴팩트 */}
|
||||
<div
|
||||
className="grid flex-shrink-0 items-center border-b bg-muted/50 px-4 py-2 text-xs font-semibold text-foreground"
|
||||
style={{ gridTemplateColumns: "4px 140px 1fr 100px 160px 40px" }}
|
||||
className="grid flex-shrink-0 items-center gap-2 border-b bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
|
||||
style={{ gridTemplateColumns: GRID_TEMPLATE }}
|
||||
>
|
||||
<span />
|
||||
<span>라벨 · 컬럼명</span>
|
||||
<span>참조/설정</span>
|
||||
<span>참조 / 기본값</span>
|
||||
<span>타입</span>
|
||||
<span className="text-center">PK / NN / IDX / UQ</span>
|
||||
<span className="text-center">PK · NN · IDX · UQ</span>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
{totalFiltered === 0 ? (
|
||||
<div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
|
||||
{typeFilter ? "해당 타입의 컬럼이 없습니다." : "컬럼이 없습니다."}
|
||||
@@ -105,16 +108,18 @@ export function ColumnGrid({
|
||||
if (list.length === 0) return null;
|
||||
const { icon: Icon, label } = GROUP_LABELS[groupKey];
|
||||
return (
|
||||
<div key={groupKey} className="space-y-1 py-2">
|
||||
<div className="flex items-center gap-2 border-b border-border/60 px-4 pb-1.5">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<div key={groupKey} className="py-1">
|
||||
{/* 그룹 헤더 — 한 줄 컴팩트 */}
|
||||
<div className="sticky top-0 z-10 flex items-center gap-1.5 border-b border-border/50 bg-background/95 px-3 py-1 backdrop-blur">
|
||||
<Icon className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
<Badge variant="secondary" className="h-4 px-1 text-[10px]">
|
||||
{list.length}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="divide-y divide-border/40">
|
||||
{list.map((column) => {
|
||||
const typeConf = INPUT_TYPE_COLORS[column.inputType || "text"] || INPUT_TYPE_COLORS.text;
|
||||
const idxState = getIdxState(column.columnName);
|
||||
@@ -133,31 +138,40 @@ export function ColumnGrid({
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"grid min-h-12 cursor-pointer items-center gap-2 rounded-md border px-4 py-2 transition-colors",
|
||||
"grid-cols-[4px_140px_1fr_100px_160px_40px]",
|
||||
"bg-card border-transparent hover:border-border hover:shadow-sm",
|
||||
isSelected && "border-primary/30 bg-primary/5 shadow-sm",
|
||||
"group grid h-9 cursor-pointer items-center gap-2 px-3 transition-colors",
|
||||
"hover:bg-muted/40",
|
||||
isSelected && "bg-primary/5 ring-1 ring-inset ring-primary/30",
|
||||
)}
|
||||
style={{ gridTemplateColumns: GRID_TEMPLATE }}
|
||||
>
|
||||
{/* 4px 색상바 (타입별 진한 색) */}
|
||||
<div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />
|
||||
{/* 3px 색상바 (타입별 진한 색) */}
|
||||
<div className={cn("h-5 w-[3px] rounded-full", typeConf.barColor)} />
|
||||
|
||||
{/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">
|
||||
{column.displayName && column.displayName !== column.columnName
|
||||
? `${column.displayName} (${column.columnName})`
|
||||
: column.columnName}
|
||||
</div>
|
||||
{/* 라벨 + 컬럼명 — 한글 라벨이 우선, 영문명은 옆에 모노폰트 */}
|
||||
<div className="flex min-w-0 items-baseline gap-1.5">
|
||||
{column.displayName && column.displayName !== column.columnName ? (
|
||||
<>
|
||||
<span className="truncate text-[12px] font-medium leading-tight">
|
||||
{column.displayName}
|
||||
</span>
|
||||
<span className="truncate font-mono text-[10px] text-muted-foreground leading-tight">
|
||||
{column.columnName}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="truncate font-mono text-[12px] font-medium leading-tight">
|
||||
{column.columnName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 참조/설정 칩 */}
|
||||
<div className="flex min-w-0 flex-wrap gap-1">
|
||||
{column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" && (
|
||||
{/* 참조/설정 칩 — 한 줄 nowrap, 넘치면 잘림 */}
|
||||
<div className="flex min-w-0 items-center gap-1 overflow-hidden text-[11px]">
|
||||
{column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" ? (
|
||||
<>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs font-normal"
|
||||
className="h-4 truncate px-1 text-[10px] font-normal"
|
||||
title={
|
||||
tables
|
||||
? (() => {
|
||||
@@ -171,10 +185,10 @@ export function ColumnGrid({
|
||||
>
|
||||
{column.referenceTable}
|
||||
</Badge>
|
||||
<span className="text-muted-foreground text-xs">→</span>
|
||||
<span className="text-muted-foreground text-[10px]">→</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs font-normal"
|
||||
className="h-4 truncate px-1 text-[10px] font-normal"
|
||||
title={
|
||||
referenceTableColumns?.[column.referenceTable]
|
||||
? (() => {
|
||||
@@ -190,42 +204,36 @@ export function ColumnGrid({
|
||||
{column.referenceColumn || "—"}
|
||||
</Badge>
|
||||
</>
|
||||
)}
|
||||
{column.inputType === "code" && (
|
||||
<span className="text-muted-foreground truncate text-xs">
|
||||
{column.codeCategory ?? "—"} · {column.defaultValue ?? ""}
|
||||
) : column.inputType === "code" ? (
|
||||
<span className="truncate text-muted-foreground">
|
||||
{column.codeCategory ?? "—"}{column.defaultValue ? ` · ${column.defaultValue}` : ""}
|
||||
</span>
|
||||
)}
|
||||
{column.inputType === "numbering" && column.numberingRuleId && (
|
||||
<Badge variant="outline" className="text-xs font-normal">
|
||||
) : column.inputType === "numbering" && column.numberingRuleId ? (
|
||||
<Badge variant="outline" className="h-4 truncate px-1 text-[10px] font-normal">
|
||||
{column.numberingRuleId}
|
||||
</Badge>
|
||||
) : column.defaultValue ? (
|
||||
<span className="truncate text-muted-foreground">{column.defaultValue}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground/40">—</span>
|
||||
)}
|
||||
{column.inputType !== "entity" &&
|
||||
column.inputType !== "code" &&
|
||||
column.inputType !== "numbering" &&
|
||||
(column.defaultValue ? (
|
||||
<span className="text-muted-foreground truncate text-xs">{column.defaultValue}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground/60 text-xs">—</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 타입 뱃지 */}
|
||||
<div className={cn("rounded-md border px-2 py-0.5 text-xs", typeConf.bgColor, typeConf.color)}>
|
||||
<span className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" />
|
||||
{/* 타입 뱃지 — 컴팩트 */}
|
||||
<div className={cn("inline-flex h-5 items-center gap-1 self-center justify-self-start rounded border px-1.5 text-[10px]", typeConf.bgColor, typeConf.color)}>
|
||||
<span className="inline-block h-1 w-1 rounded-full bg-current opacity-70" />
|
||||
{typeConf.label}
|
||||
</div>
|
||||
|
||||
{/* PK / NN / IDX / UQ (클릭 토글) */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-1">
|
||||
{/* PK / NN / IDX / UQ (클릭 토글) — 한 줄 nowrap */}
|
||||
<div className="flex flex-nowrap items-center justify-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
|
||||
"h-5 w-7 rounded border text-[9px] font-bold transition-colors",
|
||||
idxState.isPk
|
||||
? "border-blue-200 bg-blue-50 text-blue-600"
|
||||
: "border-border text-muted-foreground/40 hover:border-blue-200 hover:text-blue-400",
|
||||
: "border-border/50 text-muted-foreground/40 hover:border-blue-200 hover:text-blue-400",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -238,10 +246,10 @@ export function ColumnGrid({
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
|
||||
"h-5 w-7 rounded border text-[9px] font-bold transition-colors",
|
||||
column.isNullable === "NO"
|
||||
? "border-amber-200 bg-amber-50 text-amber-600"
|
||||
: "border-border text-muted-foreground/40 hover:border-amber-200 hover:text-amber-400",
|
||||
: "border-border/50 text-muted-foreground/40 hover:border-amber-200 hover:text-amber-400",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -254,10 +262,10 @@ export function ColumnGrid({
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
|
||||
"h-5 w-7 rounded border text-[9px] font-bold transition-colors",
|
||||
idxState.hasIndex
|
||||
? "border-emerald-200 bg-emerald-50 text-emerald-600"
|
||||
: "border-border text-muted-foreground/40 hover:border-emerald-200 hover:text-emerald-400",
|
||||
: "border-border/50 text-muted-foreground/40 hover:border-emerald-200 hover:text-emerald-400",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -270,10 +278,10 @@ export function ColumnGrid({
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
|
||||
"h-5 w-7 rounded border text-[9px] font-bold transition-colors",
|
||||
column.isUnique === "YES"
|
||||
? "border-violet-200 bg-violet-50 text-violet-600"
|
||||
: "border-border text-muted-foreground/40 hover:border-violet-200 hover:text-violet-400",
|
||||
: "border-border/50 text-muted-foreground/40 hover:border-violet-200 hover:text-violet-400",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -290,19 +298,20 @@ export function ColumnGrid({
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelectColumn(column.columnName);
|
||||
}}
|
||||
aria-label="상세 설정"
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user