Merge pull request #15 from DguFarmSystem/13-BottomInfo-layout

feat: 지원 요건 레이아웃 1차 완성
DguFarmSystem · Feb 13, 2025 · 2803474 · 2803474
2 parents 8c58f52 + a7de6ea
commit 2803474
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 7 deletions.
diff --git a/src/assets/DGULogo.png b/src/assets/DGULogo.png
diff --git a/src/assets/InstagramLogo2.png b/src/assets/InstagramLogo2.png
diff --git a/src/assets/LinktreeLogo.png b/src/assets/LinktreeLogo.png
diff --git a/src/assets/githubLogo.png b/src/assets/githubLogo.png
diff --git a/src/assets/githubLogo2.png b/src/assets/githubLogo2.png
diff --git a/src/assets/image 8 (1).png b/src/assets/image 8 (1).png
diff --git a/src/assets/instagramLogo.png b/src/assets/instagramLogo.png
diff --git a/src/pages/Main/BottomInfo/BottomInfo.styles.ts b/src/pages/Main/BottomInfo/BottomInfo.styles.ts
@@ -0,0 +1,155 @@
+import styled from 'styled-components';
+
+export const BottomInfoContainer = styled.div`
+  width: 100vw;
+  max-width: 1440px;
+  margin: 80px auto;
+  text-align: center;
+  padding: 60px 0;
+`;
+
+export const Title = styled.h2`
+  font-size: 36px;
+  color: #191919;
+  font-weight: bold;
+  margin-bottom: 30px;
+`;
+
+export const Highlight = styled.span`
+  color: #28723f;
+`;
+
+export const IconsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  margin-bottom: 40px;
+`;
+
+export const IconLink = styled.a`
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`;
+
+export const Icon = styled.img`
+  width: 75px;
+  height: 75px;
+  object-fit: cover;
+`;
+
+export const RequirementsBox = styled.div`
+  width: 900px;
+  background-color: #e5e5e5;
+  border-radius: 10px;
+  padding: 50px;
+  margin: 0 auto;
+  text-align: left;
+`;
+
+export const RequirementsTitle = styled.h3`
+  font-size: 32px;
+  color: #175321;
+  margin-bottom: 40px;
+`;
+
+export const RequirementItem = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const RequirementTitle = styled.h4`
+  font-size: 24px;
+  font-weight: bold;
+`;
+
+export const RequirementText = styled.p`
+  font-size: 20px;
+  font-weight: 500;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end; /* 오른쪽 정렬 */
+  margin-top: 40px;
+`;
+
+export const ApplyButton = styled.button`
+width: 240px;
+  background-color: #49aa59;
+  color: #ffffff;
+  font-size: 20px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
+
+  &:hover {
+    background-color: #3b8a48;
+  }
+`;
+
+export const NotificationContainer = styled.div`
+  display: flex;
+  justify-content: flex-end; /* 오른쪽 정렬 */
+  margin-top: 10px;
+  padding-right: 20px;
+`;
+
+export const NotificationLink = styled.a`
+  font-size: 18px;
+  color: #333;
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-block;
+
+  &:hover {
+    text-decoration: underline;
+    color: #28723f;
+  }
+`;
+
+/* 팝업 */
+export const PopupOverlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(113, 113, 113, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const PopupBox = styled.div`
+  width: 500px;
+  background-color: #fcfcfc;
+  border: 3px solid #28723f;
+  border-radius: 15px;
+  text-align: center;
+  padding: 40px;
+`;
+
+export const PopupText = styled.p`
+  font-size: 20px;
+  margin-bottom: 20px;
+`;
+
+export const PopupCloseButton = styled.button`
+  background-color: #28723f;
+  color: #fcfcfc;
+  font-size: 16px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
+  width: 100px;
+  margin-top: 20px;
+
+  &:hover {
+    background-color: #1f5b30;
+  }
+`;
diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx
@@ -1,9 +1,81 @@
-export default function BottomInfo() {
+import { useState } from 'react';
+import * as S from './BottomInfo.styles';
+import GitHubIcon from '../../../assets/githubLogo2.png';
+import InstagramIcon from '../../../assets/InstagramLogo2.png';
+import LinktreeIcon from '../../../assets/LinktreeLogo.png';
+import DGUIcon from "../../../assets/DGULogo.png"
+
+const BottomInfo = () => {
+  const [isPopupOpen, setPopupOpen] = useState(false);
+
+  // 구글 폼 링크 (전화번호 입력 폼) 지금은 가상의 url 입니다.
+  const googleFormLink = "https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform";
+
   return (
-    <div className="bottom-info">
-      <h2>더 알아보고 싶다면?</h2>
-      <p>2025년 2월 공개 모집 예정</p>
-      <button>지원하기</button>
-    </div>
+    <S.BottomInfoContainer>
+      <S.Title>
+        <S.Highlight>Farm System</S.Highlight>을 더 알아가고 싶나요?
+      </S.Title>
+
+      <S.IconsContainer>
+         <S.IconLink href="https://github.com/DguFarmSystem" target="_blank" rel="noopener noreferrer">
+          <S.Icon src={GitHubIcon} alt="GitHub" />
+        </S.IconLink>
+
+        <S.IconLink href="https://www.instagram.com/dgu_farm_system/" target="_blank" rel="noopener noreferrer">
+          <S.Icon src={InstagramIcon} alt="Instagram" />
+        </S.IconLink>
+
+        <S.IconLink href="https://linktr.ee/dgu_farm_system" target="_blank" rel="noopener noreferrer">
+          <S.Icon src={LinktreeIcon} alt="Linktree" />
+        </S.IconLink>
+
+        <S.IconLink href="https://www.dongguk.edu/main" target="_blank" rel="noopener noreferrer">
+          <S.Icon src={DGUIcon} alt="Community" />
+        </S.IconLink>
+      </S.IconsContainer>
+
+      <S.RequirementsBox>
+        <S.RequirementsTitle>지원 요건</S.RequirementsTitle>
+
+        <S.RequirementItem>
+          <S.RequirementTitle>🌱 누구나 환영해요!</S.RequirementTitle>
+          <S.RequirementText>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.</S.RequirementText>
+        </S.RequirementItem>
+
+        <S.RequirementItem>
+          <S.RequirementTitle>⏰ 월요일 저녁, 같이 성장해요!</S.RequirementTitle>
+          <S.RequirementText>매주 월요일 19시부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? 🌱</S.RequirementText>
+        </S.RequirementItem>
+
+        <S.RequirementItem>
+          <S.RequirementTitle>📅 언제 모집하나요?</S.RequirementTitle>
+            <S.RequirementText>2025년 2월, Farm Sysyetem 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
+        </S.RequirementItem>
+
+        <S.ButtonContainer>
+          <S.ApplyButton onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
+        </S.ButtonContainer>
+
+        <S.NotificationContainer>
+          <S.NotificationLink href={googleFormLink} target="_blank" rel="noopener noreferrer">
+            4기 모집 오픈 알림 신청 ➝
+          </S.NotificationLink>
+        </S.NotificationContainer>
+      </S.RequirementsBox>
+
+      {/* 팝업 -> 나중에 공용 컴포넌트로 뺄까 고민 중*/}
+      {isPopupOpen && (
+        <S.PopupOverlay onClick={() => setPopupOpen(false)}>
+          <S.PopupBox onClick={(e) => e.stopPropagation()}>
+            <S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
+            <S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
+            <S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
+          </S.PopupBox>
+        </S.PopupOverlay>
+      )}
+    </S.BottomInfoContainer>
   );
-}
+};
+
+export default BottomInfo;