From 7acb4981b5b3fffdebb44325ac6d9ba269b2d9c7 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Wed, 17 Dec 2025 16:31:58 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=ED=8F=AC=ED=8A=B8=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B4=EB=84=88=20UI=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/designer/PageListPanel.tsx         | 48 +++++++++----------
 .../report/designer/ReportDesignerCanvas.tsx  |  7 +--
 .../report/designer/ReportPreviewModal.tsx    |  5 --
 3 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/frontend/components/report/designer/PageListPanel.tsx b/frontend/components/report/designer/PageListPanel.tsx
index e350ce51..4f191d5a 100644
--- a/frontend/components/report/designer/PageListPanel.tsx
+++ b/frontend/components/report/designer/PageListPanel.tsx
@@ -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>
diff --git a/frontend/components/report/designer/ReportDesignerCanvas.tsx b/frontend/components/report/designer/ReportDesignerCanvas.tsx
index ace87249..c9c86a69 100644
--- a/frontend/components/report/designer/ReportDesignerCanvas.tsx
+++ b/frontend/components/report/designer/ReportDesignerCanvas.tsx
@@ -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">
           {/* 좌상단 코너 + 가로 눈금자 */}
diff --git a/frontend/components/report/designer/ReportPreviewModal.tsx b/frontend/components/report/designer/ReportPreviewModal.tsx
index 46f1d31c..098e4570 100644
--- a/frontend/components/report/designer/ReportPreviewModal.tsx
+++ b/frontend/components/report/designer/ReportPreviewModal.tsx
@@ -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"