From d29d4b596db28ee08240696f5629cdb6067c0ab3 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 23 Oct 2025 10:06:00 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=EB=84=88=EB=B9=84=20?=
 =?UTF-8?q?=EA=B0=90=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/ResolutionSelector.tsx    | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/components/admin/dashboard/ResolutionSelector.tsx b/frontend/components/admin/dashboard/ResolutionSelector.tsx
index 62ba377d..33b444f0 100644
--- a/frontend/components/admin/dashboard/ResolutionSelector.tsx
+++ b/frontend/components/admin/dashboard/ResolutionSelector.tsx
@@ -54,25 +54,50 @@ interface ResolutionSelectorProps {
 export function detectScreenResolution(): Resolution {
   if (typeof window === "undefined") return "fhd";
 
-  const width = window.screen.width;
-  const height = window.screen.height;
+  // 1. 브라우저 뷰포트 크기 (실제 사용 가능한 공간)
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // 2. 화면 해상도 + devicePixelRatio (Retina 디스플레이 대응)
+  const pixelRatio = window.devicePixelRatio || 1;
+  const physicalWidth = window.screen.width;
+  const physicalHeight = window.screen.height;
+  const logicalWidth = physicalWidth / pixelRatio;
+  const logicalHeight = physicalHeight / pixelRatio;
 
   let detectedResolution: Resolution;
 
-  // 화면 해상도에 따라 적절한 캔버스 해상도 반환
-  if (width >= 3840 || height >= 2160) {
+  // 뷰포트와 논리적 해상도 중 더 큰 값을 기준으로 결정
+  // (크램쉘 모드나 특수한 경우에도 대응)
+  const effectiveWidth = Math.max(viewportWidth, logicalWidth);
+  const effectiveHeight = Math.max(viewportHeight, logicalHeight);
+
+  // 캔버스가 여유있게 들어갈 수 있는 크기로 결정
+  // 여유 공간: 좌우 패딩, 사이드바 등을 고려하여 약 400-500px 여유
+  if (effectiveWidth >= 3400) {
+    // UHD 캔버스 2940px + 여유 460px
     detectedResolution = "uhd";
-  } else if (width >= 2560 || height >= 1440) {
+  } else if (effectiveWidth >= 2400) {
+    // QHD 캔버스 1960px + 여유 440px
     detectedResolution = "qhd";
-  } else if (width >= 1920 || height >= 1080) {
+  } else if (effectiveWidth >= 1900) {
+    // FHD 캔버스 1560px + 여유 340px
     detectedResolution = "fhd";
   } else {
+    // HD 캔버스 1160px 이하
     detectedResolution = "hd";
   }
 
   console.log("🖥️ 화면 해상도 자동 감지:", {
-    screenWidth: width,
-    screenHeight: height,
+    viewportWidth,
+    viewportHeight,
+    physicalWidth,
+    physicalHeight,
+    pixelRatio,
+    logicalWidth: Math.round(logicalWidth),
+    logicalHeight: Math.round(logicalHeight),
+    effectiveWidth: Math.round(effectiveWidth),
+    effectiveHeight: Math.round(effectiveHeight),
     detectedResolution,
     canvasSize: RESOLUTIONS[detectedResolution],
   });