1211 lines
68 KiB
PHP
1211 lines
68 KiB
PHP
<!-- Sidebar -->
|
|
<aside id="sidebar" class="sidebar bg-white shadow-lg flex-shrink-0 transition-all duration-300 ease-in-out w-64">
|
|
<div class="flex flex-col h-full">
|
|
<!-- Logo / Brand -->
|
|
<div class="flex items-center h-16 border-b border-gray-200 px-3">
|
|
<!-- 펼쳐진 상태: 햄버거 버튼 + 로고 -->
|
|
<div class="sidebar-expanded-only flex items-center gap-2 w-full">
|
|
<button
|
|
type="button"
|
|
onclick="toggleSidebar()"
|
|
class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
|
title="메뉴 접기"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<span class="text-xl font-bold text-gray-900">{{ config('app.name') }}</span>
|
|
</div>
|
|
<!-- 접힌 상태: S 버튼 (클릭하면 확장) -->
|
|
<button
|
|
type="button"
|
|
onclick="toggleSidebar()"
|
|
class="sidebar-collapsed-only hidden w-full p-2 text-xl font-bold text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
|
title="메뉴 펼치기"
|
|
>
|
|
S
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Navigation Menu -->
|
|
<nav class="flex-1 overflow-y-auto p-4 sidebar-nav">
|
|
<ul class="space-y-1">
|
|
<!-- 대시보드 -->
|
|
<li>
|
|
<a href="{{ route('dashboard') }}"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('dashboard') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
title="대시보드">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">대시보드</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 프로젝트 관리 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('pm-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">프로젝트 관리</span>
|
|
<svg id="pm-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="pm-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('pm.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('pm.index') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="프로젝트 대시보드">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">프로젝트 대시보드</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('pm.projects.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('pm.projects.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="프로젝트">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">프로젝트</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('daily-logs.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('daily-logs.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="일일 스크럼">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">일일 스크럼</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 시스템 관리 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('system-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">시스템 관리</span>
|
|
<svg id="system-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="system-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('tenants.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('tenants.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="테넌트 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">테넌트 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('users.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('users.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="사용자 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">사용자 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('departments.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('departments.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="부서 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">부서 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('menus.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('menus.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="메뉴 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">메뉴 관리</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 권한 관리 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('permission-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">권한 관리</span>
|
|
<svg id="permission-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="permission-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('roles.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('roles.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="역할 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">역할 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('permissions.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="권한 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">권한 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('role-permissions.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('role-permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="역할 권한 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">역할 권한 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('department-permissions.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('department-permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="부서 권한 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">부서 권한 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('user-permissions.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('user-permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="개인 권한 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">개인 권한 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('permission-analyze.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('permission-analyze.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="권한 분석">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">권한 분석</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 생산 관리 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('production-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">생산 관리</span>
|
|
<svg id="production-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="production-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('item-fields.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('item-fields.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="품목기준 필드 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">품목기준 필드 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('quote-formulas.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('quote-formulas.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="견적수식 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">견적수식 관리</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="제품 관리 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">제품 관리</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="자재 관리 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">자재 관리</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="BOM 관리 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">BOM 관리</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="카테고리 관리 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">카테고리 관리</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 콘텐츠 관리 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('content-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">콘텐츠 관리</span>
|
|
<svg id="content-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="content-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('boards.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('boards.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="게시판 관리">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">게시판 관리</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 시스템 그룹 -->
|
|
<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
|
|
<button onclick="toggleGroup('system-settings-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
|
|
<span class="sidebar-text">시스템</span>
|
|
<svg id="system-settings-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="system-settings-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="시스템 설정 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">시스템 설정</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-400 cursor-not-allowed"
|
|
style="padding-left: 2rem;"
|
|
title="감사 로그 (준비중)">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">감사 로그</span>
|
|
<span class="ml-auto text-xs text-gray-300 sidebar-text">준비중</span>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('archived-records.index') }}"
|
|
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('archived-records.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
style="padding-left: 2rem;"
|
|
title="삭제된 데이터 백업">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">삭제된 데이터 백업</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- R&D Labs 그룹 (탭 스타일 + 플라이아웃) -->
|
|
<li class="lab-menu-container pt-4 pb-1 border-t border-gray-200 mt-2" id="lab-menu-container">
|
|
<!-- 확장 상태: 헤더 + 탭 + 메뉴 -->
|
|
<div class="lab-expanded-view">
|
|
<button onclick="toggleGroup('lab-group'); scrollSidebarToBottom();" class="sidebar-group-header lab-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-700 uppercase tracking-wider rounded">
|
|
<span class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
<span class="sidebar-text">R&D Labs</span>
|
|
</span>
|
|
<svg id="lab-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 탭 + 메뉴 콘텐츠 -->
|
|
<div id="lab-group" class="mt-2">
|
|
<!-- S. Strategy 메뉴 -->
|
|
<ul id="lab-panel-s" class="lab-panel space-y-1">
|
|
<li><a href="{{ route('lab.strategy.labor') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="노무 전략"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg><span class="font-medium sidebar-text">노무 전략</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.chatbot') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="상담용 챗봇 전략"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg><span class="font-medium sidebar-text">상담용 챗봇 전략</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.knowledge-search') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="사내 지식 검색 시스템"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg><span class="font-medium sidebar-text">사내 지식 검색 시스템</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.chatbot-compare') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="챗봇 솔루션 비교 분석"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg><span class="font-medium sidebar-text">챗봇 솔루션 비교 분석</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.rag-startups') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="RAG 스타트업 현황"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg><span class="font-medium sidebar-text">RAG 스타트업 현황</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.douzone') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="더존비즈온 분석"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg><span class="font-medium sidebar-text">더존비즈온 분석</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.confluence-vs-notion') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="Confluence vs Notion"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg><span class="font-medium sidebar-text">Confluence vs Notion</span></a></li>
|
|
<li><a href="{{ route('lab.strategy.sales-strategy') }}" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors" title="SAM 영업전략"><svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg><span class="font-medium sidebar-text">SAM 영업전략</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 축소 상태: 아이콘 + 플라이아웃 -->
|
|
<div class="lab-collapsed-view hidden">
|
|
<div class="lab-flyout-trigger relative">
|
|
<button type="button" class="flex items-center justify-center w-full p-2 rounded-lg hover:bg-amber-50 transition-colors" title="R&D Labs">
|
|
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 플라이아웃 팝업 -->
|
|
<div class="lab-flyout hidden fixed w-56 bg-white rounded-lg shadow-xl border border-gray-200 z-[9999]">
|
|
<!-- 화살표 -->
|
|
<div class="absolute -left-2 top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
|
|
<div class="absolute -left-[9px] top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-200"></div>
|
|
|
|
<!-- 헤더 -->
|
|
<div class="px-3 py-2 bg-gradient-to-r from-amber-50 to-amber-100 rounded-t-lg border-b border-amber-200">
|
|
<span class="text-xs font-bold text-amber-800 uppercase tracking-wider">R&D Labs</span>
|
|
</div>
|
|
|
|
<!-- 메뉴 패널들 -->
|
|
<div class="p-2 max-h-64 overflow-y-auto">
|
|
<!-- S. Strategy -->
|
|
<ul id="lab-flyout-panel-s" class="lab-flyout-panel space-y-0.5">
|
|
<li><a href="{{ route('lab.strategy.labor') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">노무 전략</a></li>
|
|
<li><a href="{{ route('lab.strategy.chatbot') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">상담용 챗봇 전략</a></li>
|
|
<li><a href="{{ route('lab.strategy.knowledge-search') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">사내 지식 검색 시스템</a></li>
|
|
<li><a href="{{ route('lab.strategy.chatbot-compare') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">챗봇 솔루션 비교 분석</a></li>
|
|
<li><a href="{{ route('lab.strategy.rag-startups') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">RAG 스타트업 현황</a></li>
|
|
<li><a href="{{ route('lab.strategy.douzone') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">더존비즈온 분석</a></li>
|
|
<li><a href="{{ route('lab.strategy.confluence-vs-notion') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">Confluence vs Notion</a></li>
|
|
<li><a href="{{ route('lab.strategy.sales-strategy') }}" class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">SAM 영업전략</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- 개발 도구 (하단 고정) -->
|
|
<div class="border-t border-gray-200 p-2 bg-gray-50">
|
|
<button onclick="toggleGroup('dev-tools-group')" class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-100 rounded">
|
|
<span class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-orange-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span class="sidebar-text">개발 도구</span>
|
|
</span>
|
|
<svg id="dev-tools-group-icon" class="w-3 h-3 transition-transform sidebar-text" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<ul id="dev-tools-group" class="space-y-1 mt-1">
|
|
<li>
|
|
<a href="{{ route('dev-tools.flow-tester.index') }}"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('dev-tools.flow-tester.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
title="API 플로우 테스터">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">API 플로우 테스터</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ route('dev-tools.api-logs.index') }}"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('dev-tools.api-logs.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
|
|
title="API 요청 로그">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span class="font-medium sidebar-text">API 요청 로그</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- User Info (하단) -->
|
|
<div class="p-4 border-t border-gray-200 sidebar-user-info">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold flex-shrink-0">
|
|
{{ mb_strtoupper(mb_substr(auth()->user()->name ?? 'U', 0, 1)) }}
|
|
</div>
|
|
<div class="flex-1 min-w-0 sidebar-text">
|
|
<p class="text-sm font-medium text-gray-900 truncate">
|
|
{{ auth()->user()->name ?? 'User' }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 truncate">
|
|
{{ auth()->user()->email }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<style>
|
|
/* 사이드바 토글 스타일 */
|
|
.sidebar {
|
|
width: 16rem; /* w-64 = 256px */
|
|
overflow: visible;
|
|
}
|
|
|
|
/* 접힌 상태에서 overflow 설정 (툴팁 표시를 위해) */
|
|
html.sidebar-is-collapsed #sidebar,
|
|
.sidebar.sidebar-collapsed {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav,
|
|
.sidebar.sidebar-collapsed .sidebar-nav {
|
|
overflow-y: auto !important;
|
|
overflow-x: visible !important;
|
|
}
|
|
|
|
/* 사이드바 내부 컨테이너도 overflow visible 설정 */
|
|
html.sidebar-is-collapsed #sidebar > div,
|
|
.sidebar.sidebar-collapsed > div {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 접힌 상태에서 레이아웃 컨테이너 overflow 해제 (툴팁 표시를 위해) */
|
|
html.sidebar-is-collapsed #app-container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 접힌 상태 - html 클래스 기반 (초기 로드 깜빡임 방지) */
|
|
html.sidebar-is-collapsed #sidebar,
|
|
.sidebar.sidebar-collapsed {
|
|
width: 4rem; /* w-16 = 64px */
|
|
}
|
|
|
|
/* 접힌 상태에서 텍스트 숨김 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-text,
|
|
.sidebar.sidebar-collapsed .sidebar-text {
|
|
display: none;
|
|
}
|
|
|
|
/* 접힌 상태에서 그룹 헤더 숨김 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-group-header,
|
|
.sidebar.sidebar-collapsed .sidebar-group-header {
|
|
display: none;
|
|
}
|
|
|
|
/* 접힌 상태에서 네비게이션 패딩 조정 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav,
|
|
.sidebar.sidebar-collapsed .sidebar-nav {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* 접힌 상태에서 메뉴 아이템 중앙 정렬 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav span,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a,
|
|
.sidebar.sidebar-collapsed .sidebar-nav span {
|
|
justify-content: center;
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
|
|
/* 접힌 상태에서 사용자 정보 숨김 (아바타만 표시) */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-user-info,
|
|
.sidebar.sidebar-collapsed .sidebar-user-info {
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-user-info > div,
|
|
.sidebar.sidebar-collapsed .sidebar-user-info > div {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 접힌 상태 로고 토글 */
|
|
.sidebar .sidebar-collapsed-only {
|
|
display: none;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-expanded-only,
|
|
.sidebar.sidebar-collapsed .sidebar-expanded-only {
|
|
display: none;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-collapsed-only,
|
|
.sidebar.sidebar-collapsed .sidebar-collapsed-only {
|
|
display: block;
|
|
}
|
|
|
|
/* 접힌 상태에서 개발 도구 영역 조정 */
|
|
html.sidebar-is-collapsed #sidebar .border-t.border-gray-200.p-2,
|
|
.sidebar.sidebar-collapsed .border-t.border-gray-200.p-2 {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* 접힌 상태에서 메뉴 아이콘 호버 툴팁 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > a,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > a,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span {
|
|
position: relative;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a::after,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span::after,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a::after,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span::after {
|
|
content: attr(title);
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-left: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background-color: #1f2937;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
border-radius: 0.375rem;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a:hover::after,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span:hover::after,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a:hover::after,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* 툴팁 화살표 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a::before,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span::before,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a::before,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-left: 0.25rem;
|
|
border: 6px solid transparent;
|
|
border-right-color: #1f2937;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
|
|
z-index: 1000;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav a:hover::before,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span:hover::before,
|
|
.sidebar.sidebar-collapsed .sidebar-nav a:hover::before,
|
|
.sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span:hover::before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ========== 3단계 메뉴 스타일 ========== */
|
|
|
|
/* 서브그룹 헤더 (2단계) */
|
|
.sidebar-subgroup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-left: 1.5rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
cursor: pointer;
|
|
border-radius: 0.375rem;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.sidebar-subgroup-header:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
/* 서브그룹 컨테이너 */
|
|
.sidebar-subgroup-items {
|
|
margin-left: 0.5rem;
|
|
border-left: 2px solid #e5e7eb;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* 3단계 메뉴 아이템 들여쓰기 */
|
|
.sidebar-subgroup-items a,
|
|
.sidebar-subgroup-items span {
|
|
padding-left: 2.5rem !important;
|
|
}
|
|
|
|
/* 서브그룹 아이콘 회전 */
|
|
.sidebar-subgroup-header .subgroup-icon {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.sidebar-subgroup-header.collapsed .subgroup-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* 접힌 상태에서 서브그룹 헤더 숨김 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-subgroup-header,
|
|
.sidebar.sidebar-collapsed .sidebar-subgroup-header {
|
|
display: none;
|
|
}
|
|
|
|
/* 접힌 상태에서 서브그룹 아이템 border 숨김 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-subgroup-items,
|
|
.sidebar.sidebar-collapsed .sidebar-subgroup-items {
|
|
margin-left: 0;
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* 접힌 상태에서 3단계 메뉴 아이템 패딩 리셋 */
|
|
html.sidebar-is-collapsed #sidebar .sidebar-subgroup-items a,
|
|
html.sidebar-is-collapsed #sidebar .sidebar-subgroup-items span,
|
|
.sidebar.sidebar-collapsed .sidebar-subgroup-items a,
|
|
.sidebar.sidebar-collapsed .sidebar-subgroup-items span {
|
|
padding-left: 0.75rem !important;
|
|
}
|
|
|
|
/* R&D Labs 그룹 특별 스타일 */
|
|
.lab-group-header {
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
border: 1px solid #f59e0b;
|
|
}
|
|
|
|
.lab-group-header:hover {
|
|
background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
|
|
}
|
|
|
|
/* ========== R&D Labs 탭 + 플라이아웃 스타일 ========== */
|
|
|
|
/* 탭 버튼 스타일 */
|
|
.lab-tabs .lab-tab {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lab-tabs .lab-tab.active {
|
|
background: white;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.lab-tabs .lab-tab:not(.active):hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* 확장 상태에서 축소 뷰 숨김 */
|
|
.lab-expanded-view {
|
|
display: block;
|
|
}
|
|
|
|
.lab-collapsed-view {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 축소 상태에서 확장 뷰 숨김, 축소 뷰 표시 */
|
|
html.sidebar-is-collapsed #sidebar .lab-expanded-view,
|
|
.sidebar.sidebar-collapsed .lab-expanded-view {
|
|
display: none !important;
|
|
}
|
|
|
|
html.sidebar-is-collapsed #sidebar .lab-collapsed-view,
|
|
.sidebar.sidebar-collapsed .lab-collapsed-view {
|
|
display: block !important;
|
|
}
|
|
|
|
/* 플라이아웃 트리거 */
|
|
.lab-flyout-trigger {
|
|
position: relative;
|
|
}
|
|
|
|
/* 플라이아웃 표시 - JavaScript로 제어 */
|
|
.lab-flyout.show {
|
|
display: block !important;
|
|
animation: flyoutFadeIn 0.15s ease-out;
|
|
}
|
|
|
|
/* 플라이아웃 왼쪽 투명 브릿지 영역 (hover gap 연결) */
|
|
.lab-flyout::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 0;
|
|
width: 20px;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
@keyframes flyoutFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* 플라이아웃 탭 스타일 */
|
|
.lab-flyout-tab {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lab-flyout-tab.active {
|
|
background: white;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.lab-flyout-tab:not(.active):hover {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* 접힌 상태에서 R&D Labs 메뉴 아이템 스타일 리셋 */
|
|
html.sidebar-is-collapsed #sidebar .lab-panel span,
|
|
.sidebar.sidebar-collapsed .lab-panel span {
|
|
display: none;
|
|
}
|
|
|
|
/* 접힌 상태에서 탭 숨김 */
|
|
html.sidebar-is-collapsed #sidebar .lab-tabs,
|
|
.sidebar.sidebar-collapsed .lab-tabs {
|
|
display: none;
|
|
}
|
|
|
|
/* 접힌 상태에서 R&D Labs 그룹 border-t 유지 */
|
|
html.sidebar-is-collapsed #sidebar .lab-menu-container,
|
|
.sidebar.sidebar-collapsed .lab-menu-container {
|
|
border-top: 1px solid #e5e7eb;
|
|
padding-top: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function toggleGroup(groupId) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
// 사이드바가 접힌 상태면 그룹 토글 무시
|
|
if (sidebar.classList.contains('sidebar-collapsed')) {
|
|
return;
|
|
}
|
|
|
|
const group = document.getElementById(groupId);
|
|
const icon = document.getElementById(groupId + '-icon');
|
|
|
|
if (group.style.display === 'none') {
|
|
group.style.display = 'block';
|
|
icon.style.transform = 'rotate(0deg)';
|
|
localStorage.setItem('sidebar-' + groupId, 'open');
|
|
} else {
|
|
group.style.display = 'none';
|
|
icon.style.transform = 'rotate(-90deg)';
|
|
localStorage.setItem('sidebar-' + groupId, 'closed');
|
|
}
|
|
}
|
|
|
|
// 서브그룹 토글 함수 (3단계 메뉴용)
|
|
function toggleSubgroup(subgroupId) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
// 사이드바가 접힌 상태면 서브그룹 토글 무시
|
|
if (sidebar.classList.contains('sidebar-collapsed') || document.documentElement.classList.contains('sidebar-is-collapsed')) {
|
|
return;
|
|
}
|
|
|
|
const subgroup = document.getElementById(subgroupId);
|
|
const icon = document.getElementById(subgroupId + '-icon');
|
|
const header = icon ? icon.closest('.sidebar-subgroup-header') : null;
|
|
|
|
if (subgroup.style.display === 'none') {
|
|
subgroup.style.display = 'block';
|
|
if (header) header.classList.remove('collapsed');
|
|
localStorage.setItem('sidebar-' + subgroupId, 'open');
|
|
} else {
|
|
subgroup.style.display = 'none';
|
|
if (header) header.classList.add('collapsed');
|
|
localStorage.setItem('sidebar-' + subgroupId, 'closed');
|
|
}
|
|
}
|
|
|
|
// 페이지 로드 시 저장된 상태 복원
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 1단계 그룹 상태 복원
|
|
['system-group', 'permission-group', 'production-group', 'content-group', 'system-settings-group', 'pm-group', 'dev-tools-group', 'lab-group'].forEach(function(groupId) {
|
|
const state = localStorage.getItem('sidebar-' + groupId);
|
|
if (state === 'closed') {
|
|
const group = document.getElementById(groupId);
|
|
const icon = document.getElementById(groupId + '-icon');
|
|
if (group) group.style.display = 'none';
|
|
if (icon) icon.style.transform = 'rotate(-90deg)';
|
|
}
|
|
});
|
|
|
|
// 서브그룹 (2단계) 상태 복원
|
|
['lab-s-group', 'lab-a-group', 'lab-m-group'].forEach(function(subgroupId) {
|
|
const state = localStorage.getItem('sidebar-' + subgroupId);
|
|
if (state === 'closed') {
|
|
const subgroup = document.getElementById(subgroupId);
|
|
const icon = document.getElementById(subgroupId + '-icon');
|
|
const header = icon ? icon.closest('.sidebar-subgroup-header') : null;
|
|
if (subgroup) subgroup.style.display = 'none';
|
|
if (header) header.classList.add('collapsed');
|
|
}
|
|
});
|
|
|
|
// 사이드바 접힌 상태에서 메뉴 아이템 호버 시 툴팁 표시
|
|
initSidebarTooltips();
|
|
});
|
|
|
|
// JavaScript 기반 툴팁 (overflow 제약 우회) - 이벤트 위임 방식
|
|
function initSidebarTooltips() {
|
|
// 이미 초기화되었으면 스킵
|
|
if (document.getElementById('sidebar-tooltip')) {
|
|
return;
|
|
}
|
|
|
|
// 툴팁 엘리먼트 생성
|
|
const tooltip = document.createElement('div');
|
|
tooltip.id = 'sidebar-tooltip';
|
|
tooltip.className = 'fixed bg-gray-800 text-white text-sm font-medium px-3 py-2 rounded-lg shadow-lg z-[9999] pointer-events-none opacity-0 transition-opacity duration-150 whitespace-nowrap';
|
|
tooltip.style.cssText = 'display: none;';
|
|
document.body.appendChild(tooltip);
|
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
let currentTarget = null;
|
|
|
|
// 이벤트 위임: sidebar에서 mouseover/mouseout 처리
|
|
sidebar.addEventListener('mouseover', function(e) {
|
|
// 사이드바가 펼쳐진 상태면 무시
|
|
if (!sidebar.classList.contains('sidebar-collapsed') && !document.documentElement.classList.contains('sidebar-is-collapsed')) {
|
|
return;
|
|
}
|
|
|
|
// 가장 가까운 a 또는 span[title] 찾기
|
|
const target = e.target.closest('.sidebar-nav a[title], .sidebar-nav span[title], #dev-tools-group a[title]');
|
|
if (!target || target === currentTarget) return;
|
|
|
|
currentTarget = target;
|
|
const title = target.getAttribute('title');
|
|
if (!title) return;
|
|
|
|
// data-tooltip에 저장하고 title 제거 (브라우저 기본 툴팁 방지)
|
|
if (!target.hasAttribute('data-tooltip')) {
|
|
target.setAttribute('data-tooltip', title);
|
|
}
|
|
target.removeAttribute('title');
|
|
|
|
// 툴팁 표시
|
|
tooltip.textContent = title;
|
|
tooltip.style.display = 'block';
|
|
|
|
// 위치 계산
|
|
const rect = target.getBoundingClientRect();
|
|
tooltip.style.left = (rect.right + 12) + 'px';
|
|
tooltip.style.top = (rect.top + (rect.height / 2) - (tooltip.offsetHeight / 2)) + 'px';
|
|
|
|
// 페이드 인
|
|
requestAnimationFrame(() => {
|
|
tooltip.style.opacity = '1';
|
|
});
|
|
});
|
|
|
|
sidebar.addEventListener('mouseout', function(e) {
|
|
const target = e.target.closest('.sidebar-nav a, .sidebar-nav span, #dev-tools-group a');
|
|
if (!target) return;
|
|
|
|
// relatedTarget이 같은 요소 내부면 무시
|
|
const relatedTarget = e.relatedTarget;
|
|
if (relatedTarget && target.contains(relatedTarget)) {
|
|
return;
|
|
}
|
|
|
|
// title 속성 복원
|
|
const originalTitle = target.getAttribute('data-tooltip');
|
|
if (originalTitle) {
|
|
target.setAttribute('title', originalTitle);
|
|
}
|
|
|
|
currentTarget = null;
|
|
tooltip.style.opacity = '0';
|
|
setTimeout(() => {
|
|
if (tooltip.style.opacity === '0') {
|
|
tooltip.style.display = 'none';
|
|
}
|
|
}, 150);
|
|
});
|
|
}
|
|
|
|
// ========== R&D Labs 사이드바 스크롤 함수 ==========
|
|
|
|
// 사이드바를 최하단으로 스크롤하고 위치 저장
|
|
function scrollSidebarToBottom() {
|
|
const sidebarNav = document.querySelector('.sidebar-nav');
|
|
if (sidebarNav) {
|
|
// 약간의 딜레이 후 스크롤 (DOM 업데이트 대기)
|
|
setTimeout(function() {
|
|
sidebarNav.scrollTo({
|
|
top: sidebarNav.scrollHeight,
|
|
behavior: 'smooth'
|
|
});
|
|
// 스크롤 위치 저장 (최하단 표시)
|
|
localStorage.setItem('sidebar-scroll-bottom', 'true');
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
// 저장된 스크롤 위치 복원
|
|
function restoreSidebarScroll() {
|
|
const sidebarNav = document.querySelector('.sidebar-nav');
|
|
const scrollToBottom = localStorage.getItem('sidebar-scroll-bottom');
|
|
|
|
if (sidebarNav && scrollToBottom === 'true') {
|
|
// 페이지 로드 후 스크롤 복원
|
|
setTimeout(function() {
|
|
sidebarNav.scrollTop = sidebarNav.scrollHeight;
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
// 일반 메뉴 클릭 시 스크롤 위치 초기화
|
|
function resetSidebarScroll() {
|
|
localStorage.removeItem('sidebar-scroll-bottom');
|
|
}
|
|
|
|
// ========== R&D Labs 탭 전환 함수 ==========
|
|
|
|
// 확장 상태: 탭 전환
|
|
function switchLabTab(tabKey) {
|
|
const tabs = ['s', 'a', 'm'];
|
|
|
|
// 모든 탭 버튼에서 active 제거
|
|
tabs.forEach(function(key) {
|
|
const tab = document.getElementById('lab-tab-' + key);
|
|
const panel = document.getElementById('lab-panel-' + key);
|
|
|
|
if (tab) {
|
|
tab.classList.remove('active');
|
|
}
|
|
if (panel) {
|
|
panel.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 선택된 탭 활성화
|
|
const activeTab = document.getElementById('lab-tab-' + tabKey);
|
|
const activePanel = document.getElementById('lab-panel-' + tabKey);
|
|
|
|
if (activeTab) {
|
|
activeTab.classList.add('active');
|
|
}
|
|
if (activePanel) {
|
|
activePanel.classList.remove('hidden');
|
|
}
|
|
|
|
// 상태 저장
|
|
localStorage.setItem('lab-active-tab', tabKey);
|
|
|
|
// 사이드바 최하단으로 스크롤 (페이지 로드 시 복원 중에는 스킵)
|
|
if (!window._skipLabScroll) {
|
|
scrollSidebarToBottom();
|
|
}
|
|
}
|
|
|
|
// 축소 상태 (플라이아웃): 탭 전환
|
|
function switchLabFlyoutTab(tabKey) {
|
|
const tabs = ['s', 'a', 'm'];
|
|
|
|
// 모든 탭 버튼에서 active 제거
|
|
tabs.forEach(function(key) {
|
|
const tab = document.getElementById('lab-flyout-tab-' + key);
|
|
const panel = document.getElementById('lab-flyout-panel-' + key);
|
|
|
|
if (tab) {
|
|
tab.classList.remove('active');
|
|
}
|
|
if (panel) {
|
|
panel.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 선택된 탭 활성화
|
|
const activeTab = document.getElementById('lab-flyout-tab-' + tabKey);
|
|
const activePanel = document.getElementById('lab-flyout-panel-' + tabKey);
|
|
|
|
if (activeTab) {
|
|
activeTab.classList.add('active');
|
|
}
|
|
if (activePanel) {
|
|
activePanel.classList.remove('hidden');
|
|
}
|
|
|
|
// 상태 저장 (확장 탭과 동기화)
|
|
localStorage.setItem('lab-active-tab', tabKey);
|
|
}
|
|
|
|
// 페이지 로드 시 저장된 탭 상태 복원
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTab = localStorage.getItem('lab-active-tab');
|
|
if (savedTab && ['s', 'a', 'm'].includes(savedTab)) {
|
|
// 탭 복원 시에는 스크롤하지 않도록 임시 플래그
|
|
window._skipLabScroll = true;
|
|
switchLabTab(savedTab);
|
|
switchLabFlyoutTab(savedTab);
|
|
window._skipLabScroll = false;
|
|
}
|
|
|
|
// 플라이아웃 위치 동적 계산 초기화
|
|
initLabFlyoutPosition();
|
|
|
|
// 저장된 스크롤 위치 복원
|
|
restoreSidebarScroll();
|
|
|
|
// R&D Labs 메뉴 항목 클릭 시 사이드바 스크롤 (이벤트 위임)
|
|
const labMenuContainer = document.getElementById('lab-menu-container');
|
|
if (labMenuContainer) {
|
|
labMenuContainer.addEventListener('click', function(e) {
|
|
// a 태그 클릭 시 스크롤 (페이지 이동 전 스크롤 상태 저장용)
|
|
if (e.target.closest('a[href]')) {
|
|
scrollSidebarToBottom();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 일반 메뉴 (R&D Labs 외) 클릭 시 스크롤 위치 초기화
|
|
const sidebarNav = document.querySelector('.sidebar-nav');
|
|
if (sidebarNav) {
|
|
sidebarNav.addEventListener('click', function(e) {
|
|
const link = e.target.closest('a[href]');
|
|
if (link && !link.closest('#lab-menu-container')) {
|
|
// R&D Labs 외부 메뉴 클릭 시 스크롤 상태 초기화
|
|
resetSidebarScroll();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 플라이아웃 위치 동적 계산 및 hover 제어
|
|
function initLabFlyoutPosition() {
|
|
const trigger = document.querySelector('.lab-flyout-trigger');
|
|
const flyout = document.querySelector('.lab-flyout');
|
|
|
|
if (!trigger || !flyout) return;
|
|
|
|
let hideTimeout = null;
|
|
const HIDE_DELAY = 150; // ms - 간격을 지나갈 시간
|
|
|
|
function showFlyout() {
|
|
// 숨기기 타이머 취소
|
|
if (hideTimeout) {
|
|
clearTimeout(hideTimeout);
|
|
hideTimeout = null;
|
|
}
|
|
|
|
const triggerRect = trigger.getBoundingClientRect();
|
|
const sidebar = document.getElementById('sidebar');
|
|
const sidebarRect = sidebar.getBoundingClientRect();
|
|
|
|
// 플라이아웃 위치 설정 (사이드바 오른쪽, 트리거 버튼 높이에 맞춤)
|
|
flyout.style.left = (sidebarRect.right + 8) + 'px';
|
|
flyout.style.top = Math.max(triggerRect.top - 10, 10) + 'px';
|
|
|
|
// 화면 하단을 넘어가면 위치 조정
|
|
const flyoutHeight = flyout.offsetHeight || 300;
|
|
const windowHeight = window.innerHeight;
|
|
if (triggerRect.top + flyoutHeight > windowHeight - 20) {
|
|
flyout.style.top = Math.max(windowHeight - flyoutHeight - 20, 10) + 'px';
|
|
}
|
|
|
|
// 플라이아웃 표시
|
|
flyout.classList.add('show');
|
|
}
|
|
|
|
function hideFlyout() {
|
|
// 딜레이 후 숨기기 (간격을 지나갈 시간 확보)
|
|
hideTimeout = setTimeout(function() {
|
|
flyout.classList.remove('show');
|
|
}, HIDE_DELAY);
|
|
}
|
|
|
|
// 트리거 hover 이벤트
|
|
trigger.addEventListener('mouseenter', showFlyout);
|
|
trigger.addEventListener('mouseleave', hideFlyout);
|
|
|
|
// 플라이아웃 hover 이벤트 (플라이아웃 위에 마우스가 있으면 닫히지 않음)
|
|
flyout.addEventListener('mouseenter', function() {
|
|
if (hideTimeout) {
|
|
clearTimeout(hideTimeout);
|
|
hideTimeout = null;
|
|
}
|
|
});
|
|
flyout.addEventListener('mouseleave', hideFlyout);
|
|
}
|
|
</script> |