From e53bdd15ef3504391bc3166d318961812f3fdd71 Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Fri, 17 Oct 2025 12:04:40 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=91=90=EA=B0=9C?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0,=20=ED=97=A4=EB=8D=94?=
 =?UTF-8?q?=20=EC=97=86=EC=95=A0=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(main)/dashboard/[dashboardId]/page.tsx   | 26 +++++----
 .../admin/dashboard/DashboardDesigner.tsx     |  3 +-
 .../components/dashboard/DashboardViewer.tsx  |  3 +-
 .../dashboard/widgets/CalculatorWidget.tsx    | 53 ++++++++++++++++++-
 frontend/components/layout/AppLayout.tsx      |  2 +-
 5 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
index 6f5af7ba..f8af0d0f 100644
--- a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
+++ b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
@@ -105,8 +105,8 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 
   return (
     <div className="h-screen bg-gray-50">
-      {/* 대시보드 헤더 */}
-      <div className="border-b border-gray-200 bg-white px-6 py-4">
+      {/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
+      {/* <div className="border-b border-gray-200 bg-white px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl font-bold text-gray-800">{dashboard.title}</h1>
@@ -114,7 +114,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
           </div>
 
           <div className="flex items-center gap-3">
-            {/* 새로고침 버튼 */}
+            {/* 새로고침 버튼 *\/}
             <button
               onClick={loadDashboard}
               className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
@@ -123,7 +123,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
               🔄
             </button>
 
-            {/* 전체화면 버튼 */}
+            {/* 전체화면 버튼 *\/}
             <button
               onClick={() => {
                 if (document.fullscreenElement) {
@@ -138,7 +138,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
               ⛶
             </button>
 
-            {/* 편집 버튼 */}
+            {/* 편집 버튼 *\/}
             <button
               onClick={() => {
                 router.push(`/admin/dashboard?load=${resolvedParams.dashboardId}`);
@@ -150,22 +150,20 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
           </div>
         </div>
 
-        {/* 메타 정보 */}
+        {/* 메타 정보 *\/}
         <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
           <span>생성: {new Date(dashboard.createdAt).toLocaleString()}</span>
           <span>수정: {new Date(dashboard.updatedAt).toLocaleString()}</span>
           <span>요소: {dashboard.elements.length}개</span>
         </div>
-      </div>
+      </div> */}
 
       {/* 대시보드 뷰어 */}
-      <div className="h-[calc(100vh-120px)]">
-        <DashboardViewer 
-          elements={dashboard.elements} 
-          dashboardId={dashboard.id}
-          backgroundColor={dashboard.settings?.backgroundColor}
-        />
-      </div>
+      <DashboardViewer 
+        elements={dashboard.elements} 
+        dashboardId={dashboard.id}
+        backgroundColor={dashboard.settings?.backgroundColor}
+      />
     </div>
   );
 }
diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx
index 8ab08710..0f35ede6 100644
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -470,7 +470,8 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         />
 
       {/* 캔버스 영역 - 해상도에 따른 크기, 중앙 정렬 */}
-      <div className="flex flex-1 items-start justify-center overflow-auto bg-gray-100 p-8">
+      {/* overflow-auto 제거 - 외부 페이지 스크롤 사용 */}
+      <div className="flex flex-1 items-start justify-center bg-gray-100 p-8">
         <div
           className="relative shadow-2xl"
           style={{
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 5fd7c907..1a8d007f 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -254,7 +254,8 @@ export function DashboardViewer({ elements, dashboardId, refreshInterval, backgr
 
   return (
     <DashboardProvider>
-      <div className="flex h-full items-start justify-center overflow-auto bg-gray-100 p-8">
+      {/* overflow-auto 제거 - 외부 페이지 스크롤 사용 */}
+      <div className="flex h-full items-start justify-center bg-gray-100 p-8">
         {/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}
         <div
           className="relative overflow-hidden rounded-lg"
diff --git a/frontend/components/dashboard/widgets/CalculatorWidget.tsx b/frontend/components/dashboard/widgets/CalculatorWidget.tsx
index b8816bbc..fb652fbf 100644
--- a/frontend/components/dashboard/widgets/CalculatorWidget.tsx
+++ b/frontend/components/dashboard/widgets/CalculatorWidget.tsx
@@ -7,7 +7,7 @@
  * - 대시보드 위젯으로 사용 가능
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { DashboardElement } from '@/components/admin/dashboard/types';
 
@@ -117,6 +117,57 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
     setDisplay(String(value / 100));
   };
 
+  // 키보드 입력 처리
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const key = event.key;
+
+      // 숫자 키 (0-9)
+      if (/^[0-9]$/.test(key)) {
+        event.preventDefault();
+        handleNumber(key);
+      }
+      // 연산자 키
+      else if (key === '+' || key === '-' || key === '*' || key === '/') {
+        event.preventDefault();
+        handleOperation(key);
+      }
+      // 소수점
+      else if (key === '.') {
+        event.preventDefault();
+        handleDecimal();
+      }
+      // Enter 또는 = (계산)
+      else if (key === 'Enter' || key === '=') {
+        event.preventDefault();
+        handleEquals();
+      }
+      // Escape 또는 c (초기화)
+      else if (key === 'Escape' || key.toLowerCase() === 'c') {
+        event.preventDefault();
+        handleClear();
+      }
+      // Backspace (지우기)
+      else if (key === 'Backspace') {
+        event.preventDefault();
+        handleBackspace();
+      }
+      // % (퍼센트)
+      else if (key === '%') {
+        event.preventDefault();
+        handlePercent();
+      }
+    };
+
+    // 이벤트 리스너 등록
+    window.addEventListener('keydown', handleKeyDown);
+
+    // 클린업
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [display, previousValue, operation, waitingForOperand]);
+
   return (
     <div className={`h-full w-full p-3 bg-gradient-to-br from-slate-50 to-gray-100 ${className}`}>
       <div className="h-full flex flex-col gap-2">
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 3fee965f..b6e0139b 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -457,7 +457,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         </aside>
 
         {/* 가운데 컨텐츠 영역 - overflow 문제 해결 */}
-        <main className="min-w-0 flex-1 overflow-auto bg-white">{children}</main>
+        <main className="min-w-0 flex-1 bg-white">{children}</main>
       </div>
 
       {/* 프로필 수정 모달 */}