Skip to content

Commit 2803474

Browse files
dewbeenydewbeeny
authored
Merge pull request #15 from DguFarmSystem/13-BottomInfo-layout
feat: 지원 요건 레이아웃 1차 완성
2 parents 8c58f52 + a7de6ea commit 2803474

File tree

9 files changed

+234
-7
lines changed

9 files changed

+234
-7
lines changed

‎src/assets/DGULogo.png‎

36.3 KB
Loading

‎src/assets/InstagramLogo2.png‎

61.7 KB
Loading

‎src/assets/LinktreeLogo.png‎

36.5 KB
Loading

‎src/assets/githubLogo.png‎

1.89 KB
Loading

‎src/assets/githubLogo2.png‎

12 KB
Loading

‎src/assets/image 8 (1).png‎

4.58 KB
Loading

‎src/assets/instagramLogo.png‎

8.92 KB
Loading

‎src/pages/Main/BottomInfo/BottomInfo.styles.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import styled from 'styled-components';
2+
3+
export const BottomInfoContainer = styled.div`
4+
width: 100vw;
5+
max-width: 1440px;
6+
margin: 80px auto;
7+
text-align: center;
8+
padding: 60px 0;
9+
`;
10+
11+
export const Title = styled.h2`
12+
font-size: 36px;
13+
color: #191919;
14+
font-weight: bold;
15+
margin-bottom: 30px;
16+
`;
17+
18+
export const Highlight = styled.span`
19+
color: #28723f;
20+
`;
21+
22+
export const IconsContainer = styled.div`
23+
display: flex;
24+
justify-content: center;
25+
gap: 50px;
26+
margin-bottom: 40px;
27+
`;
28+
29+
export const IconLink = styled.a`
30+
display: inline-block;
31+
transition: transform 0.2s ease-in-out;
32+
33+
&:hover {
34+
transform: scale(1.1);
35+
}
36+
`;
37+
38+
export const Icon = styled.img`
39+
width: 75px;
40+
height: 75px;
41+
object-fit: cover;
42+
`;
43+
44+
export const RequirementsBox = styled.div`
45+
width: 900px;
46+
background-color: #e5e5e5;
47+
border-radius: 10px;
48+
padding: 50px;
49+
margin: 0 auto;
50+
text-align: left;
51+
`;
52+
53+
export const RequirementsTitle = styled.h3`
54+
font-size: 32px;
55+
color: #175321;
56+
margin-bottom: 40px;
57+
`;
58+
59+
export const RequirementItem = styled.div`
60+
margin-bottom: 20px;
61+
`;
62+
63+
export const RequirementTitle = styled.h4`
64+
font-size: 24px;
65+
font-weight: bold;
66+
`;
67+
68+
export const RequirementText = styled.p`
69+
font-size: 20px;
70+
font-weight: 500;
71+
`;
72+
73+
export const ButtonContainer = styled.div`
74+
display: flex;
75+
justify-content: flex-end; /* 오른쪽 정렬 */
76+
margin-top: 40px;
77+
`;
78+
79+
export const ApplyButton = styled.button`
80+
width: 240px;
81+
background-color: #49aa59;
82+
color: #ffffff;
83+
font-size: 20px;
84+
padding: 12px 24px;
85+
border: none;
86+
border-radius: 10px;
87+
cursor: pointer;
88+
box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
89+
90+
&:hover {
91+
background-color: #3b8a48;
92+
}
93+
`;
94+
95+
export const NotificationContainer = styled.div`
96+
display: flex;
97+
justify-content: flex-end; /* 오른쪽 정렬 */
98+
margin-top: 10px;
99+
padding-right: 20px;
100+
`;
101+
102+
export const NotificationLink = styled.a`
103+
font-size: 18px;
104+
color: #333;
105+
text-decoration: none;
106+
font-weight: 500;
107+
cursor: pointer;
108+
display: inline-block;
109+
110+
&:hover {
111+
text-decoration: underline;
112+
color: #28723f;
113+
}
114+
`;
115+
116+
/* 팝업 */
117+
export const PopupOverlay = styled.div`
118+
position: fixed;
119+
inset: 0;
120+
background: rgba(113, 113, 113, 0.3);
121+
display: flex;
122+
align-items: center;
123+
justify-content: center;
124+
`;
125+
126+
export const PopupBox = styled.div`
127+
width: 500px;
128+
background-color: #fcfcfc;
129+
border: 3px solid #28723f;
130+
border-radius: 15px;
131+
text-align: center;
132+
padding: 40px;
133+
`;
134+
135+
export const PopupText = styled.p`
136+
font-size: 20px;
137+
margin-bottom: 20px;
138+
`;
139+
140+
export const PopupCloseButton = styled.button`
141+
background-color: #28723f;
142+
color: #fcfcfc;
143+
font-size: 16px;
144+
padding: 10px 20px;
145+
border: none;
146+
border-radius: 10px;
147+
cursor: pointer;
148+
box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
149+
width: 100px;
150+
margin-top: 20px;
151+
152+
&:hover {
153+
background-color: #1f5b30;
154+
}
155+
`;

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

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,81 @@
1-
export default function BottomInfo() {
1+
import { useState } from 'react';
2+
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"
7+
8+
const BottomInfo = () => {
9+
const [isPopupOpen, setPopupOpen] = useState(false);
10+
11+
// 구글 폼 링크 (전화번호 입력 폼) 지금은 가상의 url 입니다.
12+
const googleFormLink = "https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform";
13+
214
return (
3-
<div className="bottom-info">
4-
<h2>더 알아보고 싶다면?</h2>
5-
<p>2025년 2월 공개 모집 예정</p>
6-
<button>지원하기</button>
7-
</div>
15+
<S.BottomInfoContainer>
16+
<S.Title>
17+
<S.Highlight>Farm System</S.Highlight>을 더 알아가고 싶나요?
18+
</S.Title>
19+
20+
<S.IconsContainer>
21+
<S.IconLink href="https://github.com/DguFarmSystem" target="_blank" rel="noopener noreferrer">
22+
<S.Icon src={GitHubIcon} alt="GitHub" />
23+
</S.IconLink>
24+
25+
<S.IconLink href="https://www.instagram.com/dgu_farm_system/" target="_blank" rel="noopener noreferrer">
26+
<S.Icon src={InstagramIcon} alt="Instagram" />
27+
</S.IconLink>
28+
29+
<S.IconLink href="https://linktr.ee/dgu_farm_system" target="_blank" rel="noopener noreferrer">
30+
<S.Icon src={LinktreeIcon} alt="Linktree" />
31+
</S.IconLink>
32+
33+
<S.IconLink href="https://www.dongguk.edu/main" target="_blank" rel="noopener noreferrer">
34+
<S.Icon src={DGUIcon} alt="Community" />
35+
</S.IconLink>
36+
</S.IconsContainer>
37+
38+
<S.RequirementsBox>
39+
<S.RequirementsTitle>지원 요건</S.RequirementsTitle>
40+
41+
<S.RequirementItem>
42+
<S.RequirementTitle>🌱 누구나 환영해요!</S.RequirementTitle>
43+
<S.RequirementText>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.</S.RequirementText>
44+
</S.RequirementItem>
45+
46+
<S.RequirementItem>
47+
<S.RequirementTitle>⏰ 월요일 저녁, 같이 성장해요!</S.RequirementTitle>
48+
<S.RequirementText>매주 월요일 19시부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? 🌱</S.RequirementText>
49+
</S.RequirementItem>
50+
51+
<S.RequirementItem>
52+
<S.RequirementTitle>📅 언제 모집하나요?</S.RequirementTitle>
53+
<S.RequirementText>2025년 2월, Farm Sysyetem 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
54+
</S.RequirementItem>
55+
56+
<S.ButtonContainer>
57+
<S.ApplyButton onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
58+
</S.ButtonContainer>
59+
60+
<S.NotificationContainer>
61+
<S.NotificationLink href={googleFormLink} target="_blank" rel="noopener noreferrer">
62+
4기 모집 오픈 알림 신청 ➝
63+
</S.NotificationLink>
64+
</S.NotificationContainer>
65+
</S.RequirementsBox>
66+
67+
{/* 팝업 -> 나중에 공용 컴포넌트로 뺄까 고민 중*/}
68+
{isPopupOpen && (
69+
<S.PopupOverlay onClick={() => setPopupOpen(false)}>
70+
<S.PopupBox onClick={(e) => e.stopPropagation()}>
71+
<S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
72+
<S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
73+
<S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
74+
</S.PopupBox>
75+
</S.PopupOverlay>
76+
)}
77+
</S.BottomInfoContainer>
878
);
9-
}
79+
};
80+
81+
export default BottomInfo;

0 commit comments

Comments
 (0)