[feat]: Safari 쿠키 호환성 및 UI/UX 개선

주요 변경사항:
- Safari 쿠키 호환성 개선 (SameSite=Lax, 개발 환경 Secure 제외)
- Sidebar 활성 메뉴 자동 스크롤 기능 추가
- Sidebar 스크롤바 스타일링 (호버 시에만 표시)
- DashboardLayout sticky 포지셔닝 적용
- IE 브라우저 차단 및 안내 페이지 추가
- 메뉴 탐색 로직 개선 (서브메뉴 우선 매칭)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/layout/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { ChevronRight } from 'lucide-react';
 import type { MenuItem } from '@/store/menuStore';
+import { useEffect, useRef } from 'react';
 
 interface SidebarProps {
   menuItems: MenuItem[];
@@ -22,6 +23,24 @@ export default function Sidebar({
   onToggleSubmenu,
   onCloseMobileSidebar,
 }: SidebarProps) {
+  // 활성 메뉴 자동 스크롤을 위한 ref
+  // eslint-disable-next-line no-undef
+  const activeMenuRef = useRef<HTMLDivElement | null>(null);
+  // eslint-disable-next-line no-undef
+  const menuContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // 활성 메뉴가 변경될 때 자동 스크롤
+  useEffect(() => {
+    if (activeMenuRef.current && menuContainerRef.current) {
+      // 부드러운 스크롤로 활성 메뉴를 화면에 표시
+      activeMenuRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  }, [activeMenu]); // activeMenu 변경 시에만 스크롤 (메뉴 클릭 시)
+
   const handleMenuClick = (menuId: string, path: string, hasChildren: boolean) => {
     if (hasChildren) {
       onToggleSubmenu(menuId);
@@ -67,9 +86,12 @@ export default function Sidebar({
       </div>
 
       {/* 메뉴 */}
-      <div className={`flex-1 overflow-y-auto transition-all duration-300 ${
-        sidebarCollapsed ? 'px-3 py-4' : 'p-4 md:p-6'
-      }`}>
+      <div
+        ref={menuContainerRef}
+        className={`sidebar-scroll flex-1 overflow-y-auto transition-all duration-300 ${
+          sidebarCollapsed ? 'px-3 py-4' : 'p-4 md:p-6'
+        }`}
+      >
         <div className={`transition-all duration-300 ${
           sidebarCollapsed ? 'space-y-2' : 'space-y-3'
         }`}>
@@ -80,7 +102,11 @@ export default function Sidebar({
             const isActive = activeMenu === item.id;
 
             return (
-              <div key={item.id} className="relative">
+              <div
+                key={item.id}
+                className="relative"
+                ref={isActive ? activeMenuRef : null}
+              >
                 {/* 메인 메뉴 버튼 */}
                 <button
                   onClick={() => handleMenuClick(item.id, item.path, !!hasChildren)}
@@ -129,19 +155,24 @@ export default function Sidebar({
                   <div className="mt-2 ml-4 space-y-1 border-l-2 border-primary/20 pl-4">
                     {item.children?.map((subItem) => {
                       const SubIcon = subItem.icon;
+                      const isSubActive = activeMenu === subItem.id;
                       return (
-                        <button
+                        <div
                           key={subItem.id}
-                          onClick={() => handleMenuClick(subItem.id, subItem.path, false)}
-                          className={`w-full flex items-center rounded-lg transition-all duration-200 p-2 space-x-2 group ${
-                            activeMenu === subItem.id
-                              ? "bg-primary/10 text-primary"
-                              : "text-muted-foreground hover:bg-accent hover:text-foreground"
-                          }`}
+                          ref={isSubActive ? activeMenuRef : null}
                         >
-                          <SubIcon className="h-4 w-4" />
-                          <span className="text-xs font-medium">{subItem.label}</span>
-                        </button>
+                          <button
+                            onClick={() => handleMenuClick(subItem.id, subItem.path, false)}
+                            className={`w-full flex items-center rounded-lg transition-all duration-200 p-2 space-x-2 group ${
+                              isSubActive
+                                ? "bg-primary/10 text-primary"
+                                : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                            }`}
+                          >
+                            <SubIcon className="h-4 w-4" />
+                            <span className="text-xs font-medium">{subItem.label}</span>
+                          </button>
+                        </div>
                       );
                     })}
                   </div>