From eb17309b50e9fa667d4422220d1fcbb6630a61ba Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 4 Nov 2025 11:47:46 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/screens/[screenId]/page.tsx    | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

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<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={{