From 2b3612fc60fdb01a66a4c2b43ef70c9942a23a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 28 Jan 2026 12:48:53 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EA=B9=9C=EB=B9=A1=EC=9E=84=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 페이지 로딩 시 블러 오버레이 + 프로그레스 바 추가
- 모든 스크립트 로드 완료 후 오버레이 fade-out
- 메뉴 그룹 상태를 서버에서 기본 펼침으로 렌더링
- localStorage 기반 메뉴 상태 CSS 즉시 적용
- FOUC(Flash of Unstyled Content) 방지

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/sidebar/menu-group.blade.php   | 10 ++-
 resources/views/layouts/app.blade.php         | 88 ++++++++++++++++++-
 resources/views/partials/sidebar.blade.php    | 68 +++++++++-----
 3 files changed, 140 insertions(+), 26 deletions(-)

diff --git a/resources/views/components/sidebar/menu-group.blade.php b/resources/views/components/sidebar/menu-group.blade.php
index bfb939dd..d24ad0d3 100644
--- a/resources/views/components/sidebar/menu-group.blade.php
+++ b/resources/views/components/sidebar/menu-group.blade.php
@@ -28,7 +28,7 @@ class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 t
             </span>
             <svg
                 id="{{ $groupId }}-icon"
-                class="w-3 h-3 transition-transform sidebar-text {{ $hasChildren ? 'rotate-180' : '' }}"
+                class="w-3 h-3 transition-transform sidebar-text rotate-180"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -37,7 +37,8 @@ class="w-3 h-3 transition-transform sidebar-text {{ $hasChildren ? 'rotate-180'
             </svg>
         </button>
 
-        <ul id="{{ $groupId }}" class="space-y-1 mt-1" style="display: {{ $hasChildren ? 'block' : 'none' }};">
+        {{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
+        <ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
             @foreach($children as $child)
                 @if($child->menuChildren && $child->menuChildren->isNotEmpty())
                     <x-sidebar.menu-group :menu="$child" :depth="$depth + 1" />
@@ -63,7 +64,7 @@ class="sidebar-subgroup-header w-full flex items-center justify-between px-3 py-
             </span>
             <svg
                 id="{{ $groupId }}-icon"
-                class="w-3 h-3 transition-transform sidebar-text {{ $isExpanded ? 'rotate-180' : '' }}"
+                class="w-3 h-3 transition-transform sidebar-text rotate-180"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -72,7 +73,8 @@ class="w-3 h-3 transition-transform sidebar-text {{ $isExpanded ? 'rotate-180' :
             </svg>
         </button>
 
-        <ul id="{{ $groupId }}" class="space-y-1 mt-1" style="display: {{ $isExpanded ? 'block' : 'none' }};">
+        {{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
+        <ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
             @foreach($children as $child)
                 @if($child->menuChildren && $child->menuChildren->isNotEmpty())
                     <x-sidebar.menu-group :menu="$child" :depth="$depth + 1" />
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index b08c2e0d..60323cb9 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -37,12 +37,86 @@
         sessionStorage.removeItem('api_token_expires_at');
         @endif
     </script>
-    <!-- 사이드바 상태 즉시 적용 (깜빡임 방지) -->
+    <!-- 페이지 로딩 오버레이 스타일 -->
+    <style id="page-loader-styles">
+        .page-loader-overlay {
+            position: fixed;
+            inset: 0;
+            z-index: 99999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+        }
+        .page-loader-content {
+            text-align: center;
+        }
+        .page-loader-bar {
+            width: 200px;
+            height: 4px;
+            background: #e5e7eb;
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        .page-loader-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            border-radius: 2px;
+            animation: loader-progress 1.5s ease-in-out infinite;
+        }
+        @keyframes loader-progress {
+            0% { width: 0%; margin-left: 0; }
+            50% { width: 60%; margin-left: 20%; }
+            100% { width: 0%; margin-left: 100%; }
+        }
+        .page-loader-text {
+            margin-top: 12px;
+            font-size: 14px;
+            color: #6b7280;
+        }
+        /* 블러 해제 애니메이션 */
+        .page-loader-overlay.fade-out {
+            animation: loader-fade-out 0.3s ease-out forwards;
+        }
+        @keyframes loader-fade-out {
+            to {
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+    </style>
+    <!-- 사이드바 + 메뉴 상태 즉시 적용 -->
     <script>
         (function() {
+            // 사이드바 접힘 상태
             if (localStorage.getItem('sidebar-collapsed') === 'true') {
                 document.documentElement.classList.add('sidebar-is-collapsed');
             }
+            // 메뉴 그룹: hidden 상태인 것만 CSS로 숨김
+            var style = document.createElement('style');
+            style.id = 'menu-group-preload-styles';
+            var css = '';
+            var iconCss = '';
+            for (var i = 0; i < localStorage.length; i++) {
+                var key = localStorage.key(i);
+                if (key && key.startsWith('menu-group-menu-group-')) {
+                    var groupId = key.replace('menu-group-', '');
+                    var state = localStorage.getItem(key);
+                    if (state === 'hidden') {
+                        css += '#' + groupId + '{display:none!important}';
+                        iconCss += '#' + groupId + '-icon{transform:rotate(0deg)!important}';
+                    }
+                }
+            }
+            if (css || iconCss) {
+                style.textContent = css + iconCss;
+                document.head.appendChild(style);
+            }
+            // 스크롤 위치 미리 저장
+            window._savedSidebarScroll = localStorage.getItem('sidebar-scroll-top');
+            window._savedSidebarScrollBottom = localStorage.getItem('sidebar-scroll-bottom');
         })();
     </script>
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
@@ -181,7 +255,17 @@ function initPageScripts() {
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     @stack('styles')
 </head>
-<body class="bg-gray-100">
+<body class="bg-gray-100 no-transition">
+    <!-- 페이지 로딩 오버레이 -->
+    <div id="page-loader" class="page-loader-overlay">
+        <div class="page-loader-content">
+            <div class="page-loader-bar">
+                <div class="page-loader-progress"></div>
+            </div>
+            <div class="page-loader-text">Loading...</div>
+        </div>
+    </div>
+
     <div class="flex h-screen overflow-hidden" id="app-container">
         <!-- 모바일 사이드바 백드롭 (lg 미만에서만 동작) -->
         <div id="sidebar-backdrop"
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php
index 5ac6a1e6..6c3b7bd5 100644
--- a/resources/views/partials/sidebar.blade.php
+++ b/resources/views/partials/sidebar.blade.php
@@ -93,6 +93,14 @@ class="w-full border-gray-300 rounded-lg text-sm focus:ring-primary focus:border
 </aside>
 
 <style>
+    /* ========== 초기 로드 시 transition 비활성화 (깜빡임 방지) ========== */
+    body.no-transition .sidebar,
+    body.no-transition .sidebar *,
+    body.no-transition .sidebar-nav,
+    body.no-transition [id^="menu-group-"] {
+        transition: none !important;
+    }
+
     /* ========== 사이드바 기본 스타일 ========== */
     .sidebar {
         width: 16rem;
@@ -545,18 +553,19 @@ function toggleMenuGroup(groupId) {
 
     if (!group) return;
 
-    const isHidden = group.style.display === 'none' || group.style.display === '';
+    // computed style로 실제 표시 상태 확인
+    const isHidden = window.getComputedStyle(group).display === 'none';
 
     if (isHidden) {
         group.style.display = 'block';
         if (icon) {
-            icon.classList.add('rotate-180');
+            icon.style.transform = 'rotate(180deg)';
         }
         localStorage.setItem('menu-group-' + groupId, 'visible');
     } else {
         group.style.display = 'none';
         if (icon) {
-            icon.classList.remove('rotate-180');
+            icon.style.transform = 'rotate(0deg)';
         }
         localStorage.setItem('menu-group-' + groupId, 'hidden');
     }
@@ -578,22 +587,20 @@ function scrollSidebarToBottom() {
     }
 }
 
-// 저장된 스크롤 위치 복원
+// 저장된 스크롤 위치 복원 (즉시 적용, 깜빡임 방지)
 function restoreSidebarScroll() {
     const sidebarNav = document.querySelector('.sidebar-nav');
     if (!sidebarNav) return;
 
-    const scrollToBottom = localStorage.getItem('sidebar-scroll-bottom');
-    const savedScrollTop = localStorage.getItem('sidebar-scroll-top');
+    // head에서 미리 읽은 값 사용 (더 빠른 적용)
+    const scrollToBottom = window._savedSidebarScrollBottom || localStorage.getItem('sidebar-scroll-bottom');
+    const savedScrollTop = window._savedSidebarScroll || localStorage.getItem('sidebar-scroll-top');
 
+    // 즉시 적용 (setTimeout 제거)
     if (scrollToBottom === 'true') {
-        setTimeout(function() {
-            sidebarNav.scrollTop = sidebarNav.scrollHeight;
-        }, 100);
+        sidebarNav.scrollTop = sidebarNav.scrollHeight;
     } else if (savedScrollTop) {
-        setTimeout(function() {
-            sidebarNav.scrollTop = parseInt(savedScrollTop, 10);
-        }, 100);
+        sidebarNav.scrollTop = parseInt(savedScrollTop, 10);
     }
 }
 
@@ -814,6 +821,9 @@ function initSidebarTooltips() {
 
 // 페이지 로드 시 상태 복원
 document.addEventListener('DOMContentLoaded', function() {
+    // 스크롤 위치 먼저 복원 (가장 먼저 실행)
+    restoreSidebarScroll();
+
     // 사이드바 상태 복원
     const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
     if (isCollapsed) {
@@ -832,22 +842,29 @@ function initSidebarTooltips() {
         }
     });
 
-    // 메뉴 그룹 상태 복원 (동적 메뉴) - inline style로 통일
+    // CSS preload 스타일을 inline style로 교체 (이후 JS 토글이 정상 동작하도록)
     document.querySelectorAll('[id^="menu-group-"]').forEach(function(group) {
         const groupId = group.id;
         const savedState = localStorage.getItem('menu-group-' + groupId);
         const icon = document.getElementById(groupId + '-icon');
 
+        // CSS에서 설정한 상태를 inline style로 이전
         if (savedState === 'hidden') {
             group.style.display = 'none';
-            icon?.classList.remove('rotate-180');
-        } else if (savedState === 'visible') {
+            if (icon) icon.style.transform = 'rotate(0deg)';
+        } else {
+            // visible 또는 미설정: 펼침 상태 유지
             group.style.display = 'block';
-            icon?.classList.add('rotate-180');
+            if (icon) icon.style.transform = 'rotate(180deg)';
         }
-        // savedState가 없으면 서버에서 렌더링한 초기 상태 유지
     });
 
+    // preload 스타일 제거 (이제 inline style이 적용됨)
+    const preloadStyle = document.getElementById('menu-group-preload-styles');
+    if (preloadStyle) {
+        preloadStyle.remove();
+    }
+
     // R&D Labs 탭 상태 복원
     const savedTab = localStorage.getItem('lab-active-tab');
     if (savedTab && ['s', 'a', 'm'].includes(savedTab)) {
@@ -860,12 +877,23 @@ function initSidebarTooltips() {
     // 플라이아웃 위치 초기화
     initLabFlyoutPosition();
 
-    // 스크롤 위치 복원
-    restoreSidebarScroll();
-
     // 사이드바 툴팁 초기화
     initSidebarTooltips();
 
+    // transition 활성화 + 로딩 오버레이 제거
+    requestAnimationFrame(function() {
+        document.body.classList.remove('no-transition');
+
+        // 로딩 오버레이 fade-out 후 제거
+        const loader = document.getElementById('page-loader');
+        if (loader) {
+            loader.classList.add('fade-out');
+            loader.addEventListener('animationend', function() {
+                loader.remove();
+            });
+        }
+    });
+
     // R&D Labs 메뉴 클릭 시 스크롤
     const labMenuContainer = document.getElementById('lab-menu-container');
     if (labMenuContainer) {