Skip to content

Commit d3a9bfe

Browse files
hchangclaude
andcommitted
style: 홈 버튼 활성 상태 표시 (하단 네비게이션 스타일)
- 홈 페이지일 때: 밝은 흰색 아이콘 + 밝은 배경 - 다른 페이지일 때: 회색빛 아이콘 + 어두운 배경 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 062d302 commit d3a9bfe

1 file changed

Lines changed: 7 additions & 2 deletions

File tree

moducon-frontend/src/components/layout/Header.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22

33
import Link from 'next/link';
44
import Image from 'next/image';
5+
import { usePathname } from 'next/navigation';
56
import { useAuthStore } from '@/store/authStore';
67
import { Home } from 'lucide-react';
78

89
export function Header() {
10+
const pathname = usePathname();
911
const { user } = useAuthStore();
12+
const isHome = pathname === '/home' || pathname === '/';
1013

1114
// 이름에서 성(첫 글자) 추출
1215
const getInitial = (name: string) => {
@@ -19,9 +22,11 @@ export function Header() {
1922
{/* 왼쪽: 홈 아이콘 */}
2023
<Link
2124
href="/home"
22-
className="w-9 h-9 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
25+
className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
26+
isHome ? 'bg-white/30' : 'bg-white/10 hover:bg-white/20'
27+
}`}
2328
>
24-
<Home className="w-5 h-5 text-white" />
29+
<Home className={`w-5 h-5 ${isHome ? 'text-white' : 'text-white/60'}`} />
2530
</Link>
2631

2732
{/* 가운데: 로고 */}

0 commit comments

Comments
 (0)