대시보드 화면 감지 기능 추가

frontend/components/admin/dashboard/DashboardCanvas.tsx

@@ -492,9 +492,9 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
             }}
           />
         ))} */}
-        {/* 그리드 박스들 (12px 간격, 캔버스 너비에 꽉 차게) */}
+        {/* 그리드 박스들 (12px 간격, 캔버스 너비에 꽉 차게, 마지막 행 제외) */}
         {verticalGuidelines.map((x, xIdx) =>
-          horizontalGuidelines.map((y, yIdx) => (
+          horizontalGuidelines.slice(0, -1).map((y, yIdx) => (
             <div
               key={`grid-box-${xIdx}-${yIdx}`}
               className="pointer-events-none absolute"

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -72,7 +72,11 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
 
   // 화면 해상도 자동 감지
   const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
-  const [resolution, setResolution] = useState<Resolution>("fhd"); // 초기값은 FHD, 로드 시 덮어씀
+  const [resolution, setResolution] = useState<Resolution>(() => {
+    // 새 대시보드인 경우 (dashboardId 없음) 화면 해상도 감지값 사용
+    // 기존 대시보드 편집인 경우 FHD로 시작 (로드 시 덮어씀)
+    return initialDashboardId ? "fhd" : detectScreenResolution();
+  });
 
   // resolution 변경 감지 및 요소 자동 조정
   const handleResolutionChange = useCallback(
@@ -143,8 +147,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   // 대시보드 ID가 props로 전달되면 로드
   React.useEffect(() => {
     if (initialDashboardId) {
+      console.log("📝 기존 대시보드 편집 모드");
       loadDashboard(initialDashboardId);
+    } else {
+      console.log("✨ 새 대시보드 생성 모드 - 감지된 해상도:", resolution);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialDashboardId]);
 
   // 대시보드 데이터 로드

frontend/components/admin/dashboard/ResolutionSelector.tsx

@@ -57,11 +57,27 @@ export function detectScreenResolution(): Resolution {
   const width = window.screen.width;
   const height = window.screen.height;
 
+  let detectedResolution: Resolution;
+
   // 화면 해상도에 따라 적절한 캔버스 해상도 반환
-  if (width >= 3840 || height >= 2160) return "uhd";
-  if (width >= 2560 || height >= 1440) return "qhd";
-  if (width >= 1920 || height >= 1080) return "fhd";
-  return "hd";
+  if (width >= 3840 || height >= 2160) {
+    detectedResolution = "uhd";
+  } else if (width >= 2560 || height >= 1440) {
+    detectedResolution = "qhd";
+  } else if (width >= 1920 || height >= 1080) {
+    detectedResolution = "fhd";
+  } else {
+    detectedResolution = "hd";
+  }
+
+  console.log("🖥️ 화면 해상도 자동 감지:", {
+    screenWidth: width,
+    screenHeight: height,
+    detectedResolution,
+    canvasSize: RESOLUTIONS[detectedResolution],
+  });
+
+  return detectedResolution;
 }
 
 /**