Skip to content

Commit 9c666e4

Browse files
Alal11Alal11
committed
feat: Header 수정과 상단 탭 페이지 임시 구현 #3 
1 parent f694b76 commit 9c666e4

3 files changed

Lines changed: 203 additions & 80 deletions

File tree

‎src/layout/Header.tsx‎

Lines changed: 121 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,151 @@
11
'use client';
22

3-
import React from 'react';
3+
import React, {useState} from 'react';
44
import Link from 'next/link';
5-
import { useAuth } from '@/hooks/useAuth';
6-
import { useRouter } from 'next/navigation';
7-
8-
const NAVIGATION_ITEMS = [
9-
{ href: '/recommendations', label: '직무 추천' },
10-
{ href: '/jobs', label: '직무 리스트' },
11-
{ href: '/roadmap', label: '직무 로드맵' }
12-
];
5+
import Image from 'next/image';
6+
import {useAuth} from '@/hooks/useAuth';
7+
import {useRouter} from 'next/navigation';
138

149
export const Header: React.FC = () => {
15-
const { user, isLoggedIn, logout, isLoading } = useAuth();
10+
const {isLoggedIn, user, logout} = useAuth();
11+
const [showUserMenu, setShowUserMenu] = useState(false);
1612
const router = useRouter();
1713

18-
const handleLogoClick = () => {
19-
router.push('/');
20-
};
21-
2214
const handleLogout = async () => {
2315
await logout();
16+
setShowUserMenu(false);
2417
};
2518

2619
return (
2720
<header className="bg-white shadow-sm border-b border-gray-200">
2821
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2922
<div className="flex justify-between items-center h-16">
3023
{/* 로고 */}
31-
<div
32-
onClick={handleLogoClick}
33-
className="flex items-center cursor-pointer"
34-
>
35-
<div className="flex items-center space-x-2">
36-
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
37-
<span className="text-white text-xl font-bold">∞</span>
38-
</div>
39-
<span className="text-xl font-semibold text-gray-900">PathFinder</span>
40-
</div>
41-
</div>
24+
<Link href="/" className="flex items-center">
25+
<Image
26+
src="/icon/logo.svg"
27+
alt="PathFinder"
28+
width={140}
29+
height={40}
30+
className="h-8"
31+
priority
32+
/>
33+
</Link>
4234

43-
{/* Navigation - 로그인 상태일 때만 표시 */}
44-
{isLoggedIn && (
45-
<nav className="hidden md:flex space-x-8">
46-
{NAVIGATION_ITEMS.map((item) => (
47-
<Link
48-
key={item.href}
49-
href={item.href}
50-
className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
51-
>
52-
{item.label}
53-
</Link>
54-
))}
55-
</nav>
56-
)}
35+
{/* 네비게이션 메뉴 */}
36+
<nav className="hidden md:flex space-x-8">
37+
<Link
38+
href="/job-recommendations"
39+
className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors"
40+
>
41+
직무 추천
42+
</Link>
43+
<Link
44+
href="/job-roadmaps"
45+
className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors"
46+
>
47+
직무 리스트
48+
</Link>
49+
<Link
50+
href="/job-roadmaps"
51+
className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors"
52+
>
53+
직무 로드맵
54+
</Link>
55+
</nav>
5756

58-
{/* Auth Links */}
57+
{/* 사용자 영역 */}
5958
<div className="flex items-center space-x-4">
60-
{!isLoading && (
61-
<>
62-
{isLoggedIn && user ? (
63-
<div className="flex items-center space-x-4">
64-
<span className="text-gray-700 font-medium">
65-
{user.nickname}님
59+
{isLoggedIn && user ? (
60+
<div className="relative">
61+
{/* 사용자 메뉴 버튼 */}
62+
<button
63+
onClick={() => setShowUserMenu(!showUserMenu)}
64+
className="flex items-center space-x-2 text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium transition-colors"
65+
>
66+
<div className="w-8 h-8 bg-[#103D5E] rounded-full flex items-center justify-center">
67+
<span className="text-white text-sm font-semibold">
68+
{user.nickname.charAt(0).toUpperCase()}
6669
</span>
67-
<button
68-
onClick={handleLogout}
69-
className="text-gray-500 hover:text-gray-700 font-medium transition-colors duration-200"
70-
>
71-
로그아웃
72-
</button>
7370
</div>
74-
) : (
71+
<span>{user.nickname}</span>
72+
<svg className={`w-4 h-4 transition-transform ${showUserMenu ? 'rotate-180' : ''}`}
73+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
74+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
75+
d="M19 9l-7 7-7-7"/>
76+
</svg>
77+
</button>
78+
79+
{/* 드롭다운 메뉴 */}
80+
{showUserMenu && (
7581
<>
76-
<Link
77-
href="/login"
78-
className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
79-
>
80-
로그인
81-
</Link>
82-
<span className="text-gray-300">/</span>
83-
<Link
84-
href="/signup"
85-
className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200"
86-
>
87-
회원가입
88-
</Link>
82+
{/* 백드롭 */}
83+
<div
84+
className="fixed inset-0 z-10"
85+
onClick={() => setShowUserMenu(false)}
86+
/>
87+
88+
{/* 메뉴 */}
89+
<div
90+
className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20 border border-gray-200">
91+
<Link
92+
href="/mypage"
93+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
94+
onClick={() => setShowUserMenu(false)}
95+
>
96+
마이페이지
97+
</Link>
98+
<button
99+
onClick={handleLogout}
100+
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
101+
>
102+
로그아웃
103+
</button>
104+
</div>
89105
</>
90106
)}
91-
</>
107+
</div>
108+
) : (
109+
<div className="flex items-center space-x-3">
110+
<Link
111+
href="/login"
112+
className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors"
113+
>
114+
로그인
115+
</Link>
116+
<Link
117+
href="/signup"
118+
className="bg-[#103D5E] hover:bg-[#0E3450] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
119+
>
120+
회원가입
121+
</Link>
122+
</div>
92123
)}
93124
</div>
125+
</div>
126+
</div>
94127

95-
{/* 모바일 메뉴 버튼 (로그인 상태일 때만) */}
96-
{isLoggedIn && (
97-
<div className="md:hidden">
98-
<button
99-
type="button"
100-
className="text-gray-700 hover:text-blue-600 focus:outline-none"
101-
>
102-
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
103-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
104-
</svg>
105-
</button>
106-
</div>
107-
)}
128+
{/* 모바일 네비게이션 (필요시 추가) */}
129+
<div className="md:hidden border-t border-gray-200">
130+
<div className="px-2 pt-2 pb-3 space-y-1">
131+
<Link
132+
href="/job-recommendations"
133+
className="block text-gray-600 hover:text-gray-900 px-3 py-2 text-base font-medium"
134+
>
135+
직무 추천
136+
</Link>
137+
<Link
138+
href="/job-roadmaps"
139+
className="block text-gray-600 hover:text-gray-900 px-3 py-2 text-base font-medium"
140+
>
141+
직무 리스트
142+
</Link>
143+
<Link
144+
href="/job-roadmaps"
145+
className="block text-gray-600 hover:text-gray-900 px-3 py-2 text-base font-medium"
146+
>
147+
직무 로드맵
148+
</Link>
108149
</div>
109150
</div>
110151
</header>

‎src/pages/job-recommendations/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { Layout } from '@/layout/Layout';
5+
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
6+
7+
export default function JobRecommendationsPage() {
8+
return (
9+
<ProtectedRoute requiresProfile={true}>
10+
<Layout>
11+
<div className="min-h-screen bg-gray-50 py-8">
12+
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
13+
<div className="bg-white shadow rounded-lg p-8">
14+
<div className="text-center">
15+
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
16+
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
17+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
18+
</svg>
19+
</div>
20+
<h1 className="text-3xl font-bold text-gray-900 mb-4">직무 추천</h1>
21+
<p className="text-lg text-gray-600 mb-8">
22+
AI가 분석한 나만의 맞춤형 직무를 추천받아보세요
23+
</p>
24+
25+
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
26+
<h3 className="text-lg font-semibold text-blue-900 mb-2">
27+
🎉 프로필이 완성되었습니다!
28+
</h3>
29+
<p className="text-blue-700">
30+
이제 PathFinder의 모든 기능을 이용할 수 있습니다.<br/>
31+
곧 AI 기반 직무 추천 기능이 추가될 예정입니다.
32+
</p>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</Layout>
39+
</ProtectedRoute>
40+
);
41+
}

‎src/pages/job-roadmaps/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { Layout } from '@/layout/Layout';
5+
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
6+
7+
export default function JobRoadmapsPage() {
8+
return (
9+
<ProtectedRoute requiresProfile={true}>
10+
<Layout>
11+
<div className="min-h-screen bg-gray-50 py-8">
12+
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
13+
<div className="bg-white shadow rounded-lg p-8">
14+
<div className="text-center">
15+
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
16+
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
17+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
18+
</svg>
19+
</div>
20+
<h1 className="text-3xl font-bold text-gray-900 mb-4">직무 로드맵</h1>
21+
<p className="text-lg text-gray-600 mb-8">
22+
단계별 학습 계획으로 목표 직무에 도달해보세요
23+
</p>
24+
25+
<div className="bg-green-50 border border-green-200 rounded-lg p-6">
26+
<h3 className="text-lg font-semibold text-green-900 mb-2">
27+
📈 로드맵 기능 준비 중
28+
</h3>
29+
<p className="text-green-700">
30+
개인화된 학습 로드맵과 커리어 가이드를<br/>
31+
제공하는 기능을 개발 중입니다.
32+
</p>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</Layout>
39+
</ProtectedRoute>
40+
);
41+
}

0 commit comments

Comments
 (0)