Skip to content

Commit 9ed7ac7

Browse files
dewbeenydewbeeny
committed
fix: Hedaer, 메인 페이지 네비게이션 분리
1 parent 2803474 commit 9ed7ac7

File tree

10 files changed

+164
-133
lines changed

10 files changed

+164
-133
lines changed

‎package-lock.json‎

Lines changed: 32 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Header/Header.styled.tsx‎

Lines changed: 48 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,71 @@
11
import styled from "styled-components";
22

3-
// Styled Components 정의
43
export const HeaderContainer = styled.header`
4+
position: relative;
5+
width: 100%;
6+
height: 70px;
7+
background-color: #fcfcfc;
58
display: flex;
6-
flex-grow: 1;
7-
flex-align: flex-end;
89
align-items: center;
9-
background-color: var(--FarmSystem_White);
10-
padding: 0.5rem 1rem;
11-
width: auto;
12-
height: 70px;
13-
font-style: normal;
14-
padding-bottom: 0px;
15-
border-bottom: 4px solid var(--FarmSystem_White);
10+
justify-content: space-between;
11+
padding: 0 40px;
1612
`;
1713

18-
export const Nav = styled.nav`
19-
padding-top: 40px;
20-
width: 600px;
21-
flex-grow: 1;
22-
text-align: center;
23-
display: flex;
24-
justify-content: center;
25-
padding-right: 420px;
26-
padding-bottom: 0px;
14+
export const Logo = styled.div`
15+
font-size: 20px;
16+
font-weight: bold;
17+
color: #28723f;
18+
letter-spacing: -0.24px;
2719
`;
2820

29-
export const NavList = styled.ul`
30-
list-style: none;
31-
display: flex;
32-
flex: 1 1 auto;
33-
justify-content: center;
34-
35-
padding: 0;
36-
margin: 0;
37-
margin-left: 100px;
38-
39-
40-
li {
41-
color: var(--FarmSystem_Green04);
42-
width: 120px;
43-
font-weight: 400;
44-
font-size: 16px;
45-
&:hover {
46-
color: var(--FarmSystem_Green01);
47-
border-bottom: 2px solid var(--FarmSystem_Green01);
48-
}
49-
border-bottom: 2px solid var(--FarmSystem_Green04);
50-
}
21+
export const Nav = styled.nav`
22+
display: flex;
23+
align-items: flex-end;
24+
justify-content: flex-start;
25+
gap: 30px;
5126
`;
5227

53-
export const Button = styled.button`
54-
width: 120px;
55-
height: 40px;
56-
57-
margin-right: 0px;
58-
margin-top: 5px;
59-
60-
box-shadow: 0px 2px 10px 0px #19191933;
61-
62-
font-style: normal;
63-
font-weight: 400;
28+
export const NavItem = styled.a`
29+
position: relative;
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
text-decoration: none;
6434
font-size: 16px;
65-
66-
text-align: center;
67-
border-radius: 10px;
68-
background-color: var(--FarmSystem_Green01);
69-
color: var(--FarmSystem_White);
35+
font-weight: 500;
36+
color: #49aa59;
37+
cursor: pointer;
38+
margin-left: 30px;
7039
&:hover {
71-
background-color: #1f5a2f;
40+
color: #28723f;
7241
}
7342
`;
7443

75-
export const TextBlock = styled.div`
76-
font-size: 20px;
77-
font-weight: 700;
78-
color: #28723f;
79-
text-align: center;
80-
81-
margin-top: 5px;
82-
margin-left: 20px;
83-
`
84-
;
85-
86-
// Styled Components 중 navbar
87-
44+
export const NavLineActive = styled.img`
45+
position: absolute;
46+
top: 30px;
47+
width: 120px;
48+
`;
8849

89-
export const Navbar = styled.nav`
90-
background-color: #216D35; /* 배경색 */
91-
padding: 10px 20px;
92-
border-radius: 20px; /* 모서리 둥글게 */
93-
display: flex;
94-
align-items: center;
95-
gap: 20px;
50+
export const NavLineInactive = styled.img`
51+
position: absolute;
52+
top: 30px;
53+
width: 120px;
9654
`;
9755

98-
export const NavItem = styled.a`
56+
export const FarmingLogButton = styled.button`
57+
width: 120px;
58+
height: 40px;
59+
border-radius: 10px;
60+
background-color: #28723f;
9961
color: white;
100-
font-size: 14px;
101-
text-decoration: none;
10262
font-weight: 500;
103-
104-
&:first-child {
105-
font-weight: bold; /* 첫 번째 메뉴 강조 */
63+
font-size: 16px;
64+
text-align: center;
65+
cursor: pointer;
66+
box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
67+
68+
&:hover {
69+
background-color: #1f5a2f;
10670
}
10771
`;
108-
export const Content = styled.a`{
109-
background-color: #f1f1f1; /* 배경색 */
110-
}
111-
`;

‎src/components/Header/Header.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
1-
import * as S from './Header.styled.tsx';
2-
1+
import { useCallback } from 'react';
2+
import * as S from './Header.styled';
33

44
export default function Header() {
5+
const onContainerClick = useCallback(() => {
6+
}, []);
7+
58
return (
69
<S.HeaderContainer>
7-
<S.Navbar>
8-
<S.NavItem href="#">● Farm System이란?</S.NavItem>
9-
<S.NavItem href="#">● 트랙 및 커리큘럼</S.NavItem>
10-
<S.NavItem href="#">● 활동 및 성과</S.NavItem>
11-
<S.NavItem href="#">● 지원 요건</S.NavItem>
12-
</S.Navbar>
10+
<S.Logo>Farm System</S.Logo>
11+
1312
<S.Nav>
14-
<S.NavList>
15-
<li><a href="#home">홈</a></li>
16-
<li><a href="#about">블로그 / 프로젝트</a></li>
17-
<li><a href="#tracks">소식</a></li>
18-
<li><a href="#contact">FAQ</a></li>
19-
<li><a href="#contact">지원하기</a></li>
20-
</S.NavList>
13+
<S.NavItem href="/">
14+
홈
15+
</S.NavItem>
16+
<S.NavItem href="/blog">
17+
블로그 / 프로젝트
18+
</S.NavItem>
19+
<S.NavItem href="/news">
20+
소식
21+
</S.NavItem>
22+
<S.NavItem href="/faq" onClick={onContainerClick}>
23+
FAQ
24+
</S.NavItem>
25+
<S.NavItem href="/apply">
26+
지원하기
27+
</S.NavItem>
2128
</S.Nav>
22-
<S.Button>
23-
파밍로그
24-
</S.Button>
25-
</S.HeaderContainer>
2629

30+
{/* 파밍로그 버튼 */}
31+
<S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
32+
</S.HeaderContainer>
2733
);
28-
}
34+
}

‎src/pages/Layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import Header from '@/components';
12
import { Outlet } from 'react-router';
23

34
export default function Layout() {
45
return (
56
<>
6-
{/* 헤더 여기에 */}
7+
<Header/>
78
<main>
89
<Outlet />
910
</main>

‎src/pages/Main/BottomInfo/BottomInfo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useState } from 'react';
22
import * as S from './BottomInfo.styles';
3-
import GitHubIcon from '../../../assets/githubLogo2.png';
4-
import InstagramIcon from '../../../assets/InstagramLogo2.png';
5-
import LinktreeIcon from '../../../assets/LinktreeLogo.png';
6-
import DGUIcon from "../../../assets/DGULogo.png"
3+
import GitHubIcon from '@/assets/githubLogo2.png';
4+
import InstagramIcon from '@/assets/InstagramLogo2.png';
5+
import LinktreeIcon from '@/assets/LinktreeLogo.png';
6+
import DGUIcon from "@/assets/DGULogo.png"
77

88
const BottomInfo = () => {
99
const [isPopupOpen, setPopupOpen] = useState(false);

‎src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from 'styled-components';
2+
3+
export const Navbar = styled.nav`
4+
background-color: #216D35;
5+
padding: 10px 20px;
6+
border-radius: 20px;
7+
display: flex;
8+
align-items: center;
9+
gap: 20px;
10+
`;
11+
12+
export const NavItem = styled.a`
13+
color: white;
14+
font-size: 14px;
15+
text-decoration: none;
16+
font-weight: 500;
17+
18+
&:first-child {
19+
font-weight: bold;
20+
`;

‎src/pages/Main/FarmSyetemNav/FarmSystemNav.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as S from './FarmSystemNav.styled';
2+
3+
export default function FarmSystemNav() {
4+
return (
5+
<S.Navbar>
6+
<S.NavItem href="#about">● Farm System이란?</S.NavItem>
7+
<S.NavItem href="#tracks">● 트랙 및 커리큘럼</S.NavItem>
8+
<S.NavItem href="#achievements">● 활동 및 성과</S.NavItem>
9+
<S.NavItem href="#eligibility">● 지원 요건</S.NavItem>
10+
</S.Navbar>
11+
);
12+
}

0 commit comments

Comments
 (0)