Skip to content

Commit 04c9bd7

Browse files
dewbeenydewbeeny
authored
Merge pull request #16 from DguFarmSystem/Feature/12-create-intro-header-section
feat: 인트로, 헤더 레이아웃 1.5차 완성
2 parents 128c37b + 3e8cdef commit 04c9bd7

File tree

9 files changed

+309
-21
lines changed

9 files changed

+309
-21
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"preview": "vite preview"
1212
},
1313
"dependencies": {
14+
"@types/styled-components": "^5.1.34",
1415
"axios": "^1.7.9",
1516
"react": "^18.3.1",
1617
"react-dom": "^18.3.1",

‎src/assets/FarmLogo.png‎

4.4 KB
Loading

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import styled from "styled-components";
2+
3+
// Styled Components 정의
4+
export const HeaderContainer = styled.header`
5+
display: flex;
6+
flex-grow: 1;
7+
flex-align: flex-end;
8+
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);
16+
`;
17+
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;
27+
`;
28+
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+
}
51+
`;
52+
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;
64+
font-size: 16px;
65+
66+
text-align: center;
67+
border-radius: 10px;
68+
background-color: var(--FarmSystem_Green01);
69+
color: var(--FarmSystem_White);
70+
&:hover {
71+
background-color: #1f5a2f;
72+
}
73+
`;
74+
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+
88+
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;
96+
`;
97+
98+
export const NavItem = styled.a`
99+
color: white;
100+
font-size: 14px;
101+
text-decoration: none;
102+
font-weight: 500;
103+
104+
&:first-child {
105+
font-weight: bold; /* 첫 번째 메뉴 강조 */
106+
}
107+
`;
108+
export const Content = styled.a`{
109+
background-color: #f1f1f1; /* 배경색 */
110+
}
111+
`;

‎src/components/Header/Header.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as S from './Header.styled.tsx';
2+
3+
4+
export default function Header() {
5+
return (
6+
<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>
13+
<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>
21+
</S.Nav>
22+
<S.Button>
23+
파밍로그
24+
</S.Button>
25+
</S.HeaderContainer>
26+
27+
);
28+
}

‎src/components/Header/Heder.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Header/Heder";
1+
export { default } from "./Header/Header";

‎src/pages/Main/Intro/Intro.styled.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
align-items: flex-start;
7+
justify-content: center;
8+
height: 110vh;
9+
background: linear-gradient(90deg, #28723F, #A2E9B8);
10+
padding: 50px;
11+
color: white;
12+
`;
13+
14+
export const Logo = styled.div`
15+
display: flex;
16+
align-items: center;
17+
font-size: 64px;
18+
font-weight: 800;
19+
20+
margin-bottom: 20px;
21+
margin-left: 50px;
22+
`;
23+
24+
export const Description = styled.p`
25+
font-size: 24px;
26+
line-height: 1.5;
27+
max-width: 600px;
28+
29+
30+
margin-bottom: 20px;
31+
margin-left: 50px;
32+
`;
33+
34+
export const TrackList = styled.p`
35+
a {
36+
font-weight: 600;
37+
}
38+
font-size: 24px;
39+
line-height: 1.5;
40+
41+
margin-top: 20px;
42+
margin-bottom: 20px;
43+
margin-left: 50px;
44+
45+
`;
46+
47+
export const Apply = styled.div`
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
52+
margin-left: 50px;
53+
`;
54+
55+
export const ApplyButton = styled.button`
56+
background-color: #4CAF50;
57+
color: white;
58+
border: none;
59+
padding: 15px 80px;
60+
border-radius: 10px;
61+
font-size: 24px;
62+
margin-top: 20px;
63+
64+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
65+
66+
&:hover {
67+
background-color: #388E3C;
68+
}
69+
`;
70+
71+
export const ApplyDescription = styled.div`
72+
font-size: 16px;
73+
margin-left: 20px;
74+
margin-top: 15px;
75+
color: #E8F5E9;
76+
`;
77+
78+
export const Bud = styled.div`
79+
margin-left: 100px;
80+
font-size: 64px;
81+
top: 116px;
82+
margin-left: 50px;
83+
`;
84+
85+
86+
/* 팝업 -> 수빈님 것과 통일 */
87+
export const PopupOverlay = styled.div`
88+
position: fixed;
89+
inset: 0;
90+
background: rgba(113, 113, 113, 0.3);
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
`;
95+
96+
export const PopupBox = styled.div`
97+
width: 500px;
98+
background-color: #fcfcfc;
99+
border: 3px solid #28723f;
100+
border-radius: 15px;
101+
text-align: center;
102+
padding: 40px;
103+
`;
104+
105+
export const PopupText = styled.p`
106+
font-size: 20px;
107+
color: black;
108+
margin-bottom: 20px;
109+
`;
110+
111+
export const PopupCloseButton = styled.button`
112+
background-color: #28723f;
113+
color: #fcfcfc;
114+
font-size: 16px;
115+
padding: 10px 20px;
116+
border: none;
117+
border-radius: 10px;
118+
cursor: pointer;
119+
box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
120+
width: 100px;
121+
margin-top: 20px;
122+
&:hover {
123+
background-color: #1f5b30;
124+
}
125+
`;

‎src/pages/Main/Intro/Intro.tsx‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,44 @@
1-
export default function Intro() {
1+
import * as S from './Intro.styled.tsx';
2+
import logo from '../../../assets/FarmLogo.png';
3+
import { useState } from 'react';
4+
5+
const Intro = () => {
6+
const [isPopupOpen, setPopupOpen] = useState(false);
27
return (
3-
<div>
4-
<h2>Intro Section</h2>
5-
</div>
8+
<S.Container>
9+
<S.Bud>🌱</S.Bud>
10+
<S.Description>
11+
미래를 준비하고 성장하는 여정, <br />
12+
Farm System에서 함께하세요.
13+
</S.Description>
14+
<S.Logo>
15+
<img src = {logo} alt = "" />
16+
Farm System
17+
</S.Logo>
18+
19+
<S.TrackList>
20+
SW/AI 분야에 관심있는 학생들로 구성된 <a>자율 학습 동아리</a>로, <br/>
21+
<a>Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터</a>의 <br/>
22+
5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다.
23+
</S.TrackList>
24+
<S.Apply>
25+
<S.ApplyButton onClick={() => setPopupOpen(true)}> 지원하기 </S.ApplyButton>
26+
<S.ApplyDescription>2025년 2월 공개 모집 예정</S.ApplyDescription>
27+
</S.Apply>
28+
29+
30+
{/* 팝업 수빈님 것과 통일 */}
31+
{isPopupOpen && (
32+
<S.PopupOverlay onClick={() => setPopupOpen(false)}>
33+
<S.PopupBox onClick={(e) => e.stopPropagation()}>
34+
<S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
35+
<S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
36+
<S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
37+
</S.PopupBox>
38+
</S.PopupOverlay>
39+
)}
40+
</S.Container>
641
);
7-
}
42+
};
43+
44+
export default Intro;

0 commit comments

Comments
 (0)