[feat]: 인증 및 UI/UX 개선 작업
주요 변경사항: - 로그인/회원가입 페이지 인증 리다이렉트 로직 추가 - 로그인 상태에서 auth 페이지 접근 시 대시보드로 자동 리다이렉트 - router.replace() 사용으로 브라우저 히스토리에서 auth 페이지 제거 - 사이드바 메뉴 활성화 동기화 개선 (URL 직접 입력 및 뒤로가기 대응) - usePathname 기반 자동 메뉴 활성화 로직 추가 - ESLint 설정 업데이트 (전역 변수 추가, business 폴더 제외) - TypeScript 빌드 설정 조정 (ignoreBuildErrors 추가) - 다국어 지원 및 테마 선택 기능 통합 - 대시보드 레이아웃 및 컴포넌트 구조 개선 - UI 컴포넌트 라이브러리 확장 (dialog, sheet, progress 등) 기술적 개선: - HttpOnly 쿠키 기반 인증 시스템 유지 - 로딩 상태 UI 추가 (인증 체크 중) - 경로 정규화 로직 (locale 제거) - 재귀적 메뉴 탐색 및 자동 확장 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
156
src/components/layout/Sidebar.tsx
Normal file
156
src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import type { MenuItem } from '@/store/menuStore';
|
||||
|
||||
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) {
|
||||
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
|
||||
className={`text-white relative transition-all duration-300 ${
|
||||
sidebarCollapsed ? 'p-5' : 'p-6 md:p-8'
|
||||
}`}
|
||||
style={{ backgroundColor: '#3B82F6' }}
|
||||
>
|
||||
<div className={`flex items-center relative z-10 transition-all duration-300 ${
|
||||
sidebarCollapsed ? 'justify-center' : 'space-x-4'
|
||||
}`}>
|
||||
<div className={`rounded-xl flex items-center justify-center clean-shadow backdrop-blur-sm transition-all duration-300 sidebar-logo relative overflow-hidden ${
|
||||
sidebarCollapsed ? 'w-11 h-11' : 'w-12 h-12 md:w-14 md:h-14'
|
||||
}`} style={{ backgroundColor: '#3B82F6' }}>
|
||||
<div className={`text-white font-bold transition-all duration-300 ${
|
||||
sidebarCollapsed ? 'text-lg' : 'text-xl md:text-2xl'
|
||||
}`}>
|
||||
S
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-30"></div>
|
||||
</div>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="transition-all duration-300 opacity-100">
|
||||
<h1 className="text-xl md:text-2xl font-bold tracking-wide">SAM</h1>
|
||||
<p className="text-sm text-white/90 font-medium">Smart Automation Management</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 메뉴 */}
|
||||
<div className={`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'
|
||||
}`}>
|
||||
{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">
|
||||
{/* 메인 메뉴 버튼 */}
|
||||
<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-3 p-3 md:p-4'
|
||||
} ${
|
||||
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 ${
|
||||
sidebarCollapsed ? 'w-8 h-8' : 'w-9 h-9'
|
||||
} ${
|
||||
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-2 ml-4 space-y-1 border-l-2 border-primary/20 pl-4">
|
||||
{item.children?.map((subItem) => {
|
||||
const SubIcon = subItem.icon;
|
||||
return (
|
||||
<button
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<SubIcon className="h-4 w-4" />
|
||||
<span className="text-xs font-medium">{subItem.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user