diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx index a0b12c7f..510b3b3b 100644 --- a/frontend/app/(main)/screens/[screenId]/page.tsx +++ b/frontend/app/(main)/screens/[screenId]/page.tsx @@ -61,6 +61,9 @@ export default function ScreenViewPage() { modalDescription?: string; }>({}); + // 레이아웃 준비 완료 상태 (버튼 위치 계산 완료 후 화면 표시) + const [layoutReady, setLayoutReady] = useState(true); + const containerRef = React.useRef(null); const [scale, setScale] = useState(1); const [containerWidth, setContainerWidth] = useState(0); @@ -106,6 +109,7 @@ export default function ScreenViewPage() { const loadScreen = async () => { try { setLoading(true); + setLayoutReady(false); // 화면 로드 시 레이아웃 준비 초기화 setError(null); // 화면 정보 로드 @@ -174,6 +178,9 @@ export default function ScreenViewPage() { setScale(newScale); // 컨테이너 너비 업데이트 setContainerWidth(containerWidth); + + // 스케일 계산 완료 후 레이아웃 준비 완료 표시 + setLayoutReady(true); } }; @@ -222,8 +229,18 @@ export default function ScreenViewPage() { return (
+ {/* 레이아웃 준비 중 로딩 표시 */} + {!layoutReady && ( +
+
+ +

화면 준비 중...

+
+
+ )} + {/* 절대 위치 기반 렌더링 */} - {layout && layout.components.length > 0 ? ( + {layoutReady && layout && layout.components.length > 0 ? (