리포트 디자이너 UI 개선
This commit is contained in:
dohyeons
parent
5e0dae0aae
commit
7acb4981b5
|
|
@ -76,25 +76,25 @@ export function PageListPanel() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-background flex h-full w-64 flex-col border-r">
|
<div className="bg-background flex h-full w-32 flex-col border-r">
|
||||||
{/* 헤더 */}
|
{/* 헤더 */}
|
||||||
<div className="flex items-center justify-between border-b p-3">
|
<div className="flex items-center justify-between border-b px-2 py-1.5">
|
||||||
<h3 className="text-sm font-semibold">페이지 목록</h3>
|
<h3 className="text-[10px] font-semibold">페이지</h3>
|
||||||
<Button size="sm" variant="ghost" onClick={() => addPage()}>
|
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={() => addPage()}>
|
||||||
<Plus className="h-4 w-4" />
|
<Plus className="h-3 w-3" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 페이지 목록 */}
|
{/* 페이지 목록 */}
|
||||||
<div className="flex-1 overflow-hidden">
|
<div className="flex-1 overflow-hidden">
|
||||||
<ScrollArea className="h-full p-2">
|
<ScrollArea className="h-full p-1">
|
||||||
<div className="space-y-2">
|
<div className="space-y-1">
|
||||||
{layoutConfig.pages
|
{layoutConfig.pages
|
||||||
.sort((a, b) => a.page_order - b.page_order)
|
.sort((a, b) => a.page_order - b.page_order)
|
||||||
.map((page, index) => (
|
.map((page, index) => (
|
||||||
<div
|
<div
|
||||||
key={page.page_id}
|
key={page.page_id}
|
||||||
className={`group relative cursor-pointer rounded-md border p-2 transition-all ${
|
className={`group relative cursor-pointer rounded border p-1.5 transition-all ${
|
||||||
page.page_id === currentPageId
|
page.page_id === currentPageId
|
||||||
? "border-primary bg-primary/10"
|
? "border-primary bg-primary/10"
|
||||||
: "border-border hover:border-primary/50 hover:bg-accent/50"
|
: "border-border hover:border-primary/50 hover:bg-accent/50"
|
||||||
|
|
@ -103,7 +103,7 @@ export function PageListPanel() {
|
||||||
onDragOver={(e) => handleDragOver(e, index)}
|
onDragOver={(e) => handleDragOver(e, index)}
|
||||||
onDrop={(e) => handleDrop(e, index)}
|
onDrop={(e) => handleDrop(e, index)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1">
|
||||||
{/* 드래그 핸들 */}
|
{/* 드래그 핸들 */}
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
|
|
@ -115,13 +115,13 @@ export function PageListPanel() {
|
||||||
className="text-muted-foreground cursor-grab opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
|
className="text-muted-foreground cursor-grab opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<GripVertical className="h-3 w-3" />
|
<GripVertical className="h-2.5 w-2.5" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 페이지 정보 */}
|
{/* 페이지 정보 */}
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
{editingPageId === page.page_id ? (
|
{editingPageId === page.page_id ? (
|
||||||
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
<div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
|
||||||
<Input
|
<Input
|
||||||
value={editingName}
|
value={editingName}
|
||||||
onChange={(e) => setEditingName(e.target.value)}
|
onChange={(e) => setEditingName(e.target.value)}
|
||||||
|
|
@ -129,21 +129,21 @@ export function PageListPanel() {
|
||||||
if (e.key === "Enter") handleSaveEdit();
|
if (e.key === "Enter") handleSaveEdit();
|
||||||
if (e.key === "Escape") handleCancelEdit();
|
if (e.key === "Escape") handleCancelEdit();
|
||||||
}}
|
}}
|
||||||
className="h-6 text-xs"
|
className="h-5 text-[10px]"
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={handleSaveEdit}>
|
<Button size="sm" variant="ghost" className="h-4 w-4 p-0" onClick={handleSaveEdit}>
|
||||||
<Check className="h-3 w-3" />
|
<Check className="h-2.5 w-2.5" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={handleCancelEdit}>
|
<Button size="sm" variant="ghost" className="h-4 w-4 p-0" onClick={handleCancelEdit}>
|
||||||
<X className="h-3 w-3" />
|
<X className="h-2.5 w-2.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="truncate text-xs font-medium">{page.page_name}</div>
|
<div className="truncate text-[10px] font-medium">{page.page_name}</div>
|
||||||
)}
|
)}
|
||||||
<div className="text-muted-foreground text-[10px]">
|
<div className="text-muted-foreground text-[8px]">
|
||||||
{page.width}x{page.height}mm • {page.components.length}개
|
{page.width}x{page.height}mm
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -153,10 +153,10 @@ export function PageListPanel() {
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="h-5 w-5 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
className="h-4 w-4 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
||||||
>
|
>
|
||||||
<span className="sr-only">메뉴</span>
|
<span className="sr-only">메뉴</span>
|
||||||
<span className="text-sm leading-none">⋮</span>
|
<span className="text-[10px] leading-none">⋮</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
|
@ -199,9 +199,9 @@ export function PageListPanel() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 푸터 */}
|
{/* 푸터 */}
|
||||||
<div className="border-t p-2">
|
<div className="border-t p-1">
|
||||||
<Button size="sm" variant="outline" className="w-full" onClick={() => addPage()}>
|
<Button size="sm" variant="outline" className="h-6 w-full text-[10px]" onClick={() => addPage()}>
|
||||||
<Plus className="mr-2 h-4 w-4" />새 페이지 추가
|
<Plus className="mr-1 h-3 w-3" />추가
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -297,13 +297,8 @@ export function ReportDesignerCanvas() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-1 flex-col overflow-hidden bg-gray-100">
|
<div className="flex flex-1 flex-col overflow-hidden bg-gray-100">
|
||||||
{/* 작업 영역 제목 */}
|
|
||||||
<div className="border-b bg-white px-4 py-2 text-center text-sm font-medium text-gray-700">
|
|
||||||
{currentPage.page_name} ({currentPage.width} x {currentPage.height}mm)
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 캔버스 스크롤 영역 */}
|
{/* 캔버스 스크롤 영역 */}
|
||||||
<div className="flex flex-1 items-center justify-center overflow-auto p-8">
|
<div className="flex flex-1 items-center justify-center overflow-auto px-8 pt-[280px] pb-8">
|
||||||
{/* 눈금자와 캔버스를 감싸는 컨테이너 */}
|
{/* 눈금자와 캔버스를 감싸는 컨테이너 */}
|
||||||
<div className="inline-flex flex-col">
|
<div className="inline-flex flex-col">
|
||||||
{/* 좌상단 코너 + 가로 눈금자 */}
|
{/* 좌상단 코너 + 가로 눈금자 */}
|
||||||
|
|
|
||||||
|
|
@ -395,11 +395,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
||||||
.sort((a, b) => a.page_order - b.page_order)
|
.sort((a, b) => a.page_order - b.page_order)
|
||||||
.map((page) => (
|
.map((page) => (
|
||||||
<div key={page.page_id} className="relative">
|
<div key={page.page_id} className="relative">
|
||||||
{/* 페이지 번호 라벨 */}
|
|
||||||
<div className="mb-2 text-center text-xs text-gray-500">
|
|
||||||
페이지 {page.page_order + 1} - {page.page_name}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 페이지 컨텐츠 */}
|
{/* 페이지 컨텐츠 */}
|
||||||
<div
|
<div
|
||||||
className="relative mx-auto shadow-lg"
|
className="relative mx-auto shadow-lg"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue