sam-react-prod/src/components/layout/Sidebar.tsx

import { ChevronRight } from 'lucide-react';
import type { MenuItem } from '@/store/menuStore';
import { useEffect, useRef } from 'react';

interface SidebarProps {
  menuItems: MenuItem[];
  activeMenu: string;
  expandedMenus: string[];
  sidebarCollapsed: boolean;
  isMobile: boolean;
  onMenuClick: (menuId: string, path: string) => void;
  onToggleSubmenu: (menuId: string) => void;
  onCloseMobileSidebar?: () => void;
}

export default function Sidebar({
  menuItems,
  activeMenu,
  expandedMenus,
  sidebarCollapsed,
  isMobile,
  onMenuClick,
  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);
    } else {
      onMenuClick(menuId, path);
      if (isMobile && onCloseMobileSidebar) {
        onCloseMobileSidebar();
      }
    }
  };

  return (
    <div className={`h-full flex flex-col clean-glass rounded-2xl overflow-hidden transition-all duration-300 ${
      sidebarCollapsed ? 'sidebar-collapsed' : ''
    }`}>
      {/* 메뉴 */}
      <div
        ref={menuContainerRef}
        className={`sidebar-scroll flex-1 overflow-y-auto transition-all duration-300 ${
          sidebarCollapsed ? 'px-2 py-3' : 'px-3 py-4 md:px-4 md:py-4'
        }`}
      >
        <div className={`transition-all duration-300 ${
          sidebarCollapsed ? 'space-y-1.5 mt-4' : 'space-y-1.5 mt-3'
        }`}>
          {menuItems.map((item) => {
            const IconComponent = item.icon;
            const hasChildren = item.children && item.children.length > 0;
            const isExpanded = expandedMenus.includes(item.id);
            const isActive = activeMenu === item.id;

            return (
              <div
                key={item.id}
                className="relative"
                ref={isActive ? activeMenuRef : null}
              >
                {/* 메인 메뉴 버튼 */}
                <button
                  onClick={() => handleMenuClick(item.id, item.path, !!hasChildren)}
                  className={`w-full flex items-center rounded-xl transition-all duration-200 ease-out touch-manipulation group relative overflow-hidden sidebar-menu-item ${
                    sidebarCollapsed ? 'p-3 justify-center' : 'space-x-2.5 p-3 md:p-3.5'
                  } ${
                    isActive
                      ? "text-white clean-shadow scale-[0.98]"
                      : "text-foreground hover:bg-accent hover:scale-[1.02] active:scale-[0.98]"
                  }`}
                  style={isActive ? { backgroundColor: '#3B82F6' } : {}}
                  title={sidebarCollapsed ? item.label : undefined}
                >
                  <div className={`rounded-lg flex items-center justify-center transition-all duration-200 sidebar-menu-icon aspect-square ${
                    sidebarCollapsed ? 'w-7' : 'w-8'
                  } ${
                    isActive
                      ? "bg-white/20"
                      : "bg-primary/10 group-hover:bg-primary/20"
                  }`}>
                    {IconComponent && <IconComponent className={`transition-all duration-200 ${
                      sidebarCollapsed ? 'h-4 w-4' : 'h-5 w-5'
                    } ${
                      isActive ? "text-white" : "text-primary"
                    }`} />}
                  </div>
                  {!sidebarCollapsed && (
                    <>
                      <span className="flex-1 font-medium transition-all duration-200 opacity-100 text-left text-sm">{item.label}</span>
                      {hasChildren && (
                        <div className={`transition-transform duration-200 ${
                          isExpanded ? 'rotate-90' : ''
                        }`}>
                          <ChevronRight className="h-4 w-4" />
                        </div>
                      )}
                    </>
                  )}
                  {isActive && !sidebarCollapsed && (
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  )}
                </button>

                {/* 서브메뉴 */}
                {hasChildren && isExpanded && !sidebarCollapsed && (
                  <div className="mt-1.5 ml-3 space-y-1.5 border-l-2 border-primary/20 pl-3">
                    {item.children?.map((subItem) => {
                      const SubIcon = subItem.icon;
                      const isSubActive = activeMenu === subItem.id;
                      return (
                        <div
                          key={subItem.id}
                          ref={isSubActive ? activeMenuRef : null}
                        >
                          <button
                            onClick={() => handleMenuClick(subItem.id, subItem.path, false)}
                            className={`w-full flex items-center rounded-lg transition-all duration-200 p-2.5 space-x-2.5 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-sm font-medium">{subItem.label}</span>
                          </button>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}