화면너비 감지 기능 추가

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],
   });