Skip to content

Commit 75038bb

Browse files
limtjdghkslimtjdghks
authored
feat: 페이지 route 추가, Header 페이지 이동 추가
* feat: 페이지 route 추가, Header 각 페이지 연결 추가 * refactor: App.tsx로 Header 옮김
1 parent 2fb235e commit 75038bb

File tree

9 files changed

+58
-24
lines changed

9 files changed

+58
-24
lines changed

‎src/App.tsx‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
11
import React from 'react'
22
import './assets/styles/index.css'
3-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
3+
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'
44
import Main from './pages/Main'
55
import Login from './pages/Login'
66
import RecruitMeeting from './pages/RecruitMeeting'
77
import RecruitSubmitMeeting from './pages/RecruitSubmitMeeting'
88
import News from './pages/News'
99
import NewsInfo from './pages/NewsInfo'
10+
import Recruit from './pages/Recruit'
11+
import CoreMembers from './pages/CoreMembers'
12+
import { Header } from './components/UI/Header'
1013

1114
function App() {
1215
return (
1316
<div className='App'>
1417
<Router>
15-
<Routes>
16-
<Route path='/' element={<Main />} />
17-
<Route path='/login' element={<Login />} />
18-
<Route path='/recruit-meeting' element={<RecruitMeeting />} />
19-
<Route path='/recruit-meeting/submit' element={<RecruitSubmitMeeting />} />
20-
<Route path='/news' element={<News />} />
21-
<Route path='/news/:no' element={<NewsInfo />} />
22-
</Routes>
18+
<AppContent />
2319
</Router>
2420
</div>
2521
)
2622
}
2723

24+
function AppContent() {
25+
const location = useLocation()
26+
const hideHeader = ['/login'] // 헤더를 숨길 페이지
27+
28+
return (
29+
<>
30+
{/* 지정한 페이지 header 숨기기 */}
31+
{!hideHeader.includes(location.pathname) && <Header />}
32+
<Routes>
33+
<Route path='/' element={<Main />} />
34+
<Route path='/login' element={<Login />} />
35+
<Route path='/recruit' element={<Recruit />} />
36+
<Route path='/coremember' element={<CoreMembers />} />
37+
<Route path='/recruit-meeting' element={<RecruitMeeting />} />
38+
<Route path='/recruit-meeting/submit' element={<RecruitSubmitMeeting />} />
39+
<Route path='/news' element={<News />} />
40+
<Route path='/news/:no' element={<NewsInfo />} />
41+
</Routes>
42+
</>
43+
)
44+
}
45+
2846
export default App

‎src/components/UI/Header.tsx‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { JSX, useState, useEffect } from 'react'
1+
import React, { JSX, useState, useEffect, use } from 'react'
22
import MobileLayout from '../layout/MobileLayout'
33
import headerMenu from '../../assets/images/headerMenu.svg'
44
import headerMenuUndo from '../../assets/images/headerMenuUndo.svg'
5+
import { useNavigate } from 'react-router-dom'
56

67
export const Header = (): JSX.Element => {
78
const [isMenuOpen, setIsMenuOpen] = useState(false)
89
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
10+
const navigate = useNavigate()
911

1012
const toggleMenu = () => {
1113
setIsMenuOpen((prev) => !prev)
@@ -35,7 +37,10 @@ export const Header = (): JSX.Element => {
3537
margin: '0 auto',
3638
}}
3739
>
38-
<div className='font-black text-mainColor text-2xl'>DASOM</div>
40+
<div className='font-black text-mainColor text-2xl cursor-pointer' onClick={() => {
41+
navigate('/')
42+
isMenuOpen? toggleMenu() : null
43+
}}>DASOM</div>
3944

4045
{/* 메뉴 버튼 */}
4146
<img
@@ -61,37 +66,55 @@ export const Header = (): JSX.Element => {
6166
<ul className='flex flex-col items-center space-y-6 text-center'>
6267
<li
6368
className='font-pretendardBlack text-mainColor text-[20px] cursor-pointer hover:text-white'
64-
onClick={() => console.log('About 이동')}
69+
onClick={() => {console.log('About 이동')
70+
navigate('/')
71+
toggleMenu()
72+
}}
6573
>
6674
About
6775
</li>
6876
<li
6977
className='font-pretendardBlack text-mainColor text-[20px] cursor-pointer hover:text-white'
70-
onClick={() => console.log('News 이동')}
78+
onClick={() => {console.log('News 이동')
79+
navigate('/news')
80+
toggleMenu()
81+
}}
7182
>
7283
News
7384
</li>
7485
<li
7586
className='font-pretendardBlack text-mainColor text-[20px] cursor-pointer hover:text-white'
76-
onClick={() => console.log('Members 이동')}
87+
onClick={() =>{console.log('Members 이동')
88+
navigate('/coremember')
89+
toggleMenu()
90+
}}
7791
>
7892
Members
7993
</li>
8094
<li
8195
className='font-pretendardBlack text-mainColor text-[20px] cursor-pointer hover:text-white'
82-
onClick={() => console.log('FAQ 이동')}
96+
onClick={() => {console.log('FAQ 이동')
97+
navigate('/faq')
98+
toggleMenu()
99+
}}
83100
>
84101
FAQ
85102
</li>
86103
<li
87104
className='font-pretendardBlack text-white text-[20px] cursor-pointer hover:scale-110'
88-
onClick={() => console.log('form 이동')}
105+
onClick={() => {console.log('form 이동')
106+
navigate('/recruit')
107+
toggleMenu()
108+
}}
89109
>
90110
34기 지원하기
91111
</li>
92112
<li
93113
className='font-pretendardBlack text-white text-[20px] cursor-pointer hover:scale-110'
94-
onClick={() => console.log('합격여부 이동')}
114+
onClick={() => {console.log('합격여부 이동')
115+
navigate('/')
116+
toggleMenu()
117+
}}
95118
>
96119
합격여부 확인하기
97120
</li>

‎src/pages/CoreMembers.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const GitHubLinkUrl = ({ username }: { username: string }) => {
6464
const CoreMembers: React.FC = () => {
6565
return (
6666
<MobileLayout>
67-
<Header/>
6867
<div className='mt-[28px] ml-[12px] flex'>
6968
<img
7069
className='w-[21px] h-[24px] cursor-pointer'

‎src/pages/Main.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ const Main: React.FC = () => {
6262

6363
return (
6464
<MobileLayout>
65-
<Header />
6665
<div className='top-44 text-4xl md:text-[24px] lg:text-[36px] font-semibold max-w-7xl mx-auto text-center mt-6 relative z-20 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 via-neutral-400 to-neutral-300 dark:from-neutral-800 dark:via-white dark:to-white'>
6766
Code Beyond Limits, <br /> Discover <Cover>New Spaces</Cover> with <div className='text-mainColor'>DASOM</div>
6867
</div>

‎src/pages/News.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const News: React.FC = () => {
3131

3232
return (
3333
<MobileLayout>
34-
<Header />
3534
<div className='mt-[65px] mb-2 ml-[12px] flex'>
3635
<img className='w-[21px] h-[24px] cursor-pointer' alt='logo' src={dasomLogo} />
3736
<div className='font-pretendardSemiBold text-white text-[16px] ml-[9px]'>다솜 소식</div>

‎src/pages/NewsInfo.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ interface notice {
1515
const NewsInfo: React.FC = () => {
1616
return (
1717
<MobileLayout>
18-
<Header />
1918
<div className='mt-[65px] mb-2 ml-[12px] flex'>
2019
<img className='w-[21px] h-[24px] cursor-pointer' alt='logo' src={dasomLogo} />
2120
<div className='font-pretendardSemiBold text-white text-[16px] ml-[9px]'>다솜 소식</div>

‎src/pages/Recruit.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { Button } from '../components/UI/Recruit_Button'
88
const Recruit: React.FC = () => {
99
return (
1010
<MobileLayout>
11-
<Header />
1211
<RecruitHeader title="컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 모집 폼" />
1312
<RecruitUI />
1413
<div className=" flex flex-col items-center gap-6">

‎src/pages/RecruitMeeting.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const RecruitMeeting: React.FC = () => {
3636

3737
return (
3838
<MobileLayout>
39-
<Header />
4039
<RecruitHeader title='컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 모집 폼' />
4140
<RecruitUI />
4241
<div className='flex flex-col items-center w-full'>

‎src/pages/RecruitSubmitMeeting.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const RecruitSubmitMeeting: React.FC = () => {
99

1010
return (
1111
<MobileLayout>
12-
<Header />
1312
<div className='flex flex-col items-center w-full mt-6'>
1413
<p className='font-pretendardBold text-white text-center bg-mainColor w-[90%]'>
1514
면접일 제출이 완료되었습니다.

0 commit comments

Comments
 (0)