화면 로딩 표시

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<HTMLDivElement>(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 (
     <ScreenPreviewProvider isPreviewMode={false}>
       <div ref={containerRef} className="bg-background h-full w-full overflow-hidden">
+        {/* 레이아웃 준비 중 로딩 표시 */}
+        {!layoutReady && (
+          <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
+            <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
+              <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+              <p className="text-foreground mt-4 text-sm font-medium">화면 준비 중...</p>
+            </div>
+          </div>
+        )}
+
         {/* 절대 위치 기반 렌더링 */}
-        {layout && layout.components.length > 0 ? (
+        {layoutReady && layout && layout.components.length > 0 ? (
           <div
             className="bg-background relative flex h-full origin-top-left items-start justify-start"
             style={{