fix:사이드바 메뉴 깜빡임 현상 개선

- 페이지 로딩 시 블러 오버레이 + 프로그레스 바 추가 - 모든 스크립트 로드 완료 후 오버레이 fade-out - 메뉴 그룹 상태를 서버에서 기본 펼침으로 렌더링 - localStorage 기반 메뉴 상태 CSS 즉시 적용 - FOUC(Flash of Unstyled Content) 방지 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 12:48:53 +09:00
parent 982dee994c
commit 2b3612fc60
3 changed files with 140 additions and 26 deletions
--- 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" />
--- 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"
--- 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) {