kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

리포트 디자이너 UI 개선

This commit is contained in:
dohyeons 2025-12-17 16:31:58 +09:00
parent 5e0dae0aae
commit 7acb4981b5
3 changed files with 25 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/components/report/designer/PageListPanel.tsx
View File

@ -76,25 +76,25 @@ export function PageListPanel() {
};
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">
<h3 className="text-sm font-semibold">페이지 목록</h3>
<Button size="sm" variant="ghost" onClick={() => addPage()}>
<Plus className="h-4 w-4" />
<div className="flex items-center justify-between border-b px-2 py-1.5">
<h3 className="text-[10px] font-semibold">페이지</h3>
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={() => addPage()}>
<Plus className="h-3 w-3" />
</Button>
</div>
{/* 페이지 목록 */}
<div className="flex-1 overflow-hidden">
<ScrollArea className="h-full p-2">
<div className="space-y-2">
<ScrollArea className="h-full p-1">
<div className="space-y-1">
{layoutConfig.pages
.sort((a, b) => a.page_order - b.page_order)
.map((page, index) => (
<div
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
? "border-primary bg-primary/10"
: "border-border hover:border-primary/50 hover:bg-accent/50"
@ -103,7 +103,7 @@ export function PageListPanel() {
onDragOver={(e) => handleDragOver(e, index)}
onDrop={(e) => handleDrop(e, index)}
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{/* 드래그 핸들 */}
<div
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"
onClick={(e) => e.stopPropagation()}
>
<GripVertical className="h-3 w-3" />
<GripVertical className="h-2.5 w-2.5" />
</div>
{/* 페이지 정보 */}
<div className="min-w-0 flex-1">
{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
value={editingName}
onChange={(e) => setEditingName(e.target.value)}
@ -129,21 +129,21 @@ export function PageListPanel() {
if (e.key === "Enter") handleSaveEdit();
if (e.key === "Escape") handleCancelEdit();
}}
className="h-6 text-xs"
className="h-5 text-[10px]"
autoFocus
/>
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={handleSaveEdit}>
<Check className="h-3 w-3" />
<Button size="sm" variant="ghost" className="h-4 w-4 p-0" onClick={handleSaveEdit}>
<Check className="h-2.5 w-2.5" />
</Button>
<Button size="sm" variant="ghost" className="h-5 w-5 p-0" onClick={handleCancelEdit}>
<X className="h-3 w-3" />
<Button size="sm" variant="ghost" className="h-4 w-4 p-0" onClick={handleCancelEdit}>
<X className="h-2.5 w-2.5" />
</Button>
</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]">
{page.width}x{page.height}mm • {page.components.length}개
<div className="text-muted-foreground text-[8px]">
{page.width}x{page.height}mm
</div>
</div>
@ -153,10 +153,10 @@ export function PageListPanel() {
<Button
size="sm"
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="text-sm leading-none">⋮</span>
<span className="text-[10px] leading-none">⋮</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@ -199,9 +199,9 @@ export function PageListPanel() {
</div>
{/* 푸터 */}
<div className="border-t p-2">
<Button size="sm" variant="outline" className="w-full" onClick={() => addPage()}>
<Plus className="mr-2 h-4 w-4" />새 페이지 추가
<div className="border-t p-1">
<Button size="sm" variant="outline" className="h-6 w-full text-[10px]" onClick={() => addPage()}>
<Plus className="mr-1 h-3 w-3" />추가
</Button>
</div>
</div>

7
frontend/components/report/designer/ReportDesignerCanvas.tsx
View File

@ -297,13 +297,8 @@ export function ReportDesignerCanvas() {
return (
<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">
{/* 좌상단 코너 + 가로 눈금자 */}

5
frontend/components/report/designer/ReportPreviewModal.tsx
View File

@ -395,11 +395,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
.sort((a, b) => a.page_order - b.page_order)
.map((page) => (
<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
className="relative mx-auto shadow-lg"