Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 메뉴 재배치 및 UX 개선

Browse Source 
- 메뉴: 즐겨찾기를 할일 좌측으로 이동
- 게시판: 답글 있는 게시글 삭제 방지 (댓글은 허용)
- 즐겨찾기: ESC 키로 다이얼로그 닫기 지원
- 프로젝트: 기본 필터를 검토/진행/완료로 변경 (보류 해제)
This commit is contained in:
backuppc
2025-12-03 10:32:10 +09:00
parent c1c615fe1b
commit 8e8d1f91b4
6 changed files with 122 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
Project/frontend/src/components/layout/Header.tsx
View File

@@ -80,13 +80,12 @@ const leftDropdownMenus: DropdownMenuConfig[] = [
},
];
// 좌측 단독 액션 버튼 (즐겨찾기)
const leftActionItems: NavItem[] = [
{ icon: Star, label: '즐겨찾기', action: 'favorite' },
];
// 좌측 단독 액션 버튼
const leftActionItems: NavItem[] = [];
// 우측 메뉴 항목
const rightNavItems: NavItem[] = [
{ icon: Star, label: '즐겨찾기', action: 'favorite' },
{ path: '/todo', icon: CheckSquare, label: '할일' },
];
@@ -490,23 +489,34 @@ export function Header(_props: HeaderProps) {
<DropdownNavMenu key={menu.label} menu={menu} onAction={handleAction} />
))}
{/* 우측 메뉴들 (할일) */}
{/* 우측 메뉴들 (즐겨찾기, 할일) */}
{rightNavItems.map((item) => (
<NavLink
key={item.path}
to={item.path!}
className={({ isActive }) =>
clsx(
'flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium',
isActive
? 'bg-white/20 text-white shadow-lg'
: 'text-white/70 hover:bg-white/10 hover:text-white'
)
}
>
<item.icon className="w-4 h-4" />
<span>{item.label}</span>
</NavLink>
item.path ? (
<NavLink
key={item.path}
to={item.path}
className={({ isActive }) =>
clsx(
'flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium',
isActive
? 'bg-white/20 text-white shadow-lg'
: 'text-white/70 hover:bg-white/10 hover:text-white'
)
}
>
<item.icon className="w-4 h-4" />
<span>{item.label}</span>
</NavLink>
) : (
<button
key={item.label}
onClick={() => item.action && handleAction(item.action)}
className="flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium text-white/70 hover:bg-white/10 hover:text-white"
>
<item.icon className="w-4 h-4" />
<span>{item.label}</span>
</button>
)
))}
</nav>
</div>
@@ -573,24 +583,38 @@ export function Header(_props: HeaderProps) {
/>
))}
{/* 우측 메뉴들 (할일) */}
{/* 우측 메뉴들 (즐겨찾기, 할일) */}
{rightNavItems.map((item) => (
<NavLink
key={item.path}
to={item.path!}
onClick={() => setIsMobileMenuOpen(false)}
className={({ isActive }) =>
clsx(
'flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200',
isActive
? 'bg-white/20 text-white'
: 'text-white/70 hover:bg-white/10 hover:text-white'
)
}
>
<item.icon className="w-5 h-5" />
<span className="font-medium">{item.label}</span>
</NavLink>
item.path ? (
<NavLink
key={item.path}
to={item.path}
onClick={() => setIsMobileMenuOpen(false)}
className={({ isActive }) =>
clsx(
'flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200',
isActive
? 'bg-white/20 text-white'
: 'text-white/70 hover:bg-white/10 hover:text-white'
)
}
>
<item.icon className="w-5 h-5" />
<span className="font-medium">{item.label}</span>
</NavLink>
) : (
<button
key={item.label}
onClick={() => {
if (item.action) handleAction(item.action);
setIsMobileMenuOpen(false);
}}
className="flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 text-white/70 hover:bg-white/10 hover:text-white w-full text-left"
>
<item.icon className="w-5 h-5" />
<span className="font-medium">{item.label}</span>
</button>
)
))}
</nav>
</div>