diff --git a/frontend/components/admin/dashboard/DashboardCanvas.tsx b/frontend/components/admin/dashboard/DashboardCanvas.tsx index ac0d69a4..c77cf541 100644 --- a/frontend/components/admin/dashboard/DashboardCanvas.tsx +++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx @@ -492,9 +492,9 @@ export const DashboardCanvas = forwardRef( }} /> ))} */} - {/* 그리드 박스들 (12px 간격, 캔버스 너비에 꽉 차게) */} + {/* 그리드 박스들 (12px 간격, 캔버스 너비에 꽉 차게, 마지막 행 제외) */} {verticalGuidelines.map((x, xIdx) => - horizontalGuidelines.map((y, yIdx) => ( + horizontalGuidelines.slice(0, -1).map((y, yIdx) => (
(() => detectScreenResolution()); - const [resolution, setResolution] = useState("fhd"); // 초기값은 FHD, 로드 시 덮어씀 + const [resolution, setResolution] = useState(() => { + // 새 대시보드인 경우 (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]); // 대시보드 데이터 로드 diff --git a/frontend/components/admin/dashboard/ResolutionSelector.tsx b/frontend/components/admin/dashboard/ResolutionSelector.tsx index 5f5bda53..62ba377d 100644 --- a/frontend/components/admin/dashboard/ResolutionSelector.tsx +++ b/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; } /**