diff --git a/src/assets/Icons/Hamburger.png b/src/assets/Icons/Hamburger.png
new file mode 100644
index 0000000..a97a92e
Binary files /dev/null and b/src/assets/Icons/Hamburger.png differ
diff --git a/src/assets/Icons/Hamburger.svg b/src/assets/Icons/Hamburger.svg
deleted file mode 100644
index f84034f..0000000
--- a/src/assets/Icons/Hamburger.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/Icons/IntroLogo.svg b/src/assets/Icons/IntroLogo.svg
deleted file mode 100644
index a4f3a31..0000000
--- a/src/assets/Icons/IntroLogo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/assets/Icons/close.png b/src/assets/Icons/close.png
new file mode 100644
index 0000000..5ae36ab
Binary files /dev/null and b/src/assets/Icons/close.png differ
diff --git a/src/components/Header/Header.styled.tsx b/src/components/Header/Header.styled.tsx
index 6b439e3..925091a 100644
--- a/src/components/Header/Header.styled.tsx
+++ b/src/components/Header/Header.styled.tsx
@@ -4,38 +4,45 @@ export const HeaderContainer = styled.header`
position: relative;
width: 100%;
height: 70px;
- background-color: #fcfcfc;
+ background-color: rgb(245, 245, 245);
display: flex;
align-items: center;
justify-content: space-between;
- padding: 0 40px;
+ padding: 0 25px;
+`;
+
+export const MobileHeader = styled.div`
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
`;
export const Logo = styled.div`
font-size: 20px;
font-weight: bold;
- color: #28723f;
+ color: #102C19;
letter-spacing: -0.24px;
`;
-export const Nav = styled.nav`
+export const NavWrapper = styled.div`
display: flex;
- align-items: flex-end;
- justify-content: flex-start;
- gap: 30px;
+ align-items: center;
+ gap: 35px;
+`;
- @media (max-width: 768px) {
- display: none;
- }
+export const Nav = styled.nav`
+ display: flex;
+ align-items: center;
+ gap: 20px;
`;
-export const NavItem = styled.a`
+export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean }>`
text-decoration: none;
- font-size: 16px;
- font-weight: 500;
- color: #49aa59;
+ font-size: ${({$isTablet}) => ($isTablet ? "15px": "18px")}
+ font - weight: 500;
+ color: #102C19;
cursor: pointer;
- margin: 10px 0;
&:hover {
color: #28723f;
}
@@ -52,39 +59,40 @@ export const FarmingLogButton = styled.button`
text-align: center;
cursor: pointer;
box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
-
- &:hover {
- background-color: #1f5a2f;
- }
`;
export const HamburgerIcon = styled.img`
width: 30px;
height: 30px;
cursor: pointer;
-
- @media (min-width: 769px) {
- display: none;
- }
`;
export const MobileNavWrapper = styled.div<{ $isMenuOpen: boolean }>`
- position: absolute;
- top: 70px;
+ position: fixed;
+ top: 0;
left: 0;
width: 100%;
- background-color: #fcfcfc;
+ background-color: rgb(245, 245, 245);
display: flex;
flex-direction: column;
align-items: center;
- padding: 10px 0;
+ padding: ${({ $isMenuOpen }) => ($isMenuOpen ? "20px 0" : "0")};
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
- overflow: hidden;
height: ${({ $isMenuOpen }) => ($isMenuOpen ? "auto" : "0")};
opacity: ${({ $isMenuOpen }) => ($isMenuOpen ? "1" : "0")};
- transform: ${({ $isMenuOpen }) => ($isMenuOpen ? "translateY(0)" : "translateY(-10px)")};
- transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
+ transform: ${({ $isMenuOpen }) => ($isMenuOpen ? "translateY(0)" : "translateY(-100%)")};
+ transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease;
+ overflow: hidden;
+`;
+
+export const CloseButton = styled.img`
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
`;
export const MobileNav = styled.nav`
@@ -92,4 +100,7 @@ export const MobileNav = styled.nav`
flex-direction: column;
align-items: center;
width: 100%;
+ gap: 25px;
+ margin-top: 20px;
`;
+
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 8e3ef69..4127914 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,51 +2,60 @@ import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router';
import * as S from './Header.styled';
import Popup from '../Popup/Popup';
-import Hamburger from '../../assets/Icons/Hamburger.svg';
+import Hamburger from '../../assets/Icons/Hamburger.png';
+import CloseIcon from '../../assets/Icons/close.png';
import useMediaQueries from '@/hooks/useMediaQueries';
export default function Header() {
const [isPopupOpen, setPopupOpen] = useState(false);
const [isMenuOpen, setMenuOpen] = useState(false);
const navigate = useNavigate();
- const { isMobile } = useMediaQueries();
-
+ const { isMobile, isTablet } = useMediaQueries();
+
const onContainerClick = useCallback(() => {}, []);
+ const handleNavItemClick = (path?: string) => {
+ if (path) navigate(path);
+ setMenuOpen(false);
+ };
+
return (
- navigate('/')}>Farm System
-
{isMobile ? (
- setMenuOpen(!isMenuOpen)} />
+
+ navigate('/')}>Farm System
+ setMenuOpen(true)} />
+
) : (
<>
-
- navigate('/')}>홈
- setPopupOpen(true)}>블로그 / 프로젝트
- setPopupOpen(true)}>소식
- setPopupOpen(true)}>FAQ
- navigate('/apply')}>지원하기
-
-
- {/* 파밍로그 버튼 */}
- 파밍로그
+ navigate('/')}>Farm System
+
+
+ navigate('/')}>홈
+ setPopupOpen(true)}>블로그 / 프로젝트
+ setPopupOpen(true)}>소식
+ setPopupOpen(true)}>FAQ
+
+ 파밍로그
+
)}
-
+
{isMobile && (
-
- navigate('/')}>홈
- setPopupOpen(true)}>블로그 / 프로젝트
- setPopupOpen(true)}>소식
- setPopupOpen(true)}>FAQ
- navigate('/apply')}>지원하기
- setPopupOpen(true)}>파밍로그
-
+ <>
+ setMenuOpen(false)} />
+
+ handleNavItemClick('/')}>홈
+ handleNavItemClick()}>블로그 / 프로젝트
+ handleNavItemClick()}>소식
+ handleNavItemClick()}>FAQ
+ handleNavItemClick()}>파밍로그
+
+
)}
-
+
setPopupOpen(false)}
@@ -55,4 +64,4 @@ export default function Header() {
/>
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/Main/Achievements/AchievementItem.styles.ts b/src/pages/Main/Achievements/AchievementItem.styles.ts
index b2eaea7..daf0170 100644
--- a/src/pages/Main/Achievements/AchievementItem.styles.ts
+++ b/src/pages/Main/Achievements/AchievementItem.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
export const ItemContainer = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")};
- height: ${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")};
+ height: ${({ $isMobile, $isTablet }) => ($isMobile ? "360px" : $isTablet ? "420px" : "480px")};
margin-left: 30px;
margin-right: 30px;
background-color: #175321;
@@ -14,16 +14,17 @@ export const ItemContainer = styled.div<{ $isMobile: boolean; $isTablet: boolean
export const Image = styled.img<{ $isMobile: boolean }>`
width: 100%;
- height: ${({ $isMobile }) => ($isMobile ? "140px" : "180px")};
+ height: ${({ $isMobile }) => ($isMobile ? "66.6%" : "66.6%")};
object-fit: cover;
`;
export const Content = styled.div<{ $isMobile: boolean }>`
+margin-top: 30px;
padding: ${({ $isMobile }) => ($isMobile ? "10px" : "20px")};
`;
export const Title = styled.h3<{ $isMobile: boolean }>`
- font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "14px")};
+ font-size: ${({ $isMobile }) => ($isMobile ? "10px" : "14px")};
color: #fcfcfc;
`;
diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts
index 6036f14..c5123f0 100644
--- a/src/pages/Main/Achievements/Achievements.styles.ts
+++ b/src/pages/Main/Achievements/Achievements.styles.ts
@@ -32,7 +32,7 @@ export const Highlight = styled.span`
export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
width: 100vw;
- position: relative; /* 블러 효과 위치 */
+ position: relative;
overflow: visible;
z-index: 0;
@@ -44,7 +44,7 @@ export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean
width: 100vw;
margin: 0;
padding: 20px 0;
- min-height: auto; /* 높이를 자동으로 조절 -> QA 후 일부 조정 필요 */
+ min-height: auto;
}
.slick-track {
@@ -64,7 +64,7 @@ export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean
content: "";
position: absolute;
top: 0;
- width: ${({ $isMobile, $isTablet }) => ($isMobile ? "80px" : $isTablet ? "250px" : "400px")};
+ width: ${({ $isMobile, $isTablet }) => ($isMobile ? "90px" : $isTablet ? "250px" : "400px")};
height: 100%;
z-index: 1;
pointer-events: none;
diff --git a/src/pages/Main/Achievements/Achievements.tsx b/src/pages/Main/Achievements/Achievements.tsx
index 117531a..8a58ef1 100644
--- a/src/pages/Main/Achievements/Achievements.tsx
+++ b/src/pages/Main/Achievements/Achievements.tsx
@@ -10,31 +10,31 @@ const achievementsData = [
id: 1,
title: '2024 사회보장정보와 공공•민간 빅데이터 활용 국민행복서비스',
description: '한국사회보장정보원 표창장',
- imageUrl: 'path/to/image1.jpg',
+ imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_2.png',
},
{
id: 2,
title: '2024 창업 아이디어 경진대회',
description: '동국대학교 총장상(대상)',
- imageUrl: 'path/to/image2.jpg',
+ imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_3.png',
},
{
id: 3,
title: '2024 동국대학교 AI융합대학 해커톤',
description: 'AI융합대학장상(대상)',
- imageUrl: 'path/to/image3.jpg',
+ imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_4.png',
},
{
id: 4,
title: '2024 DPG AI Challenge',
description: '디지털플랫폼정부위원장상(최우수상)',
- imageUrl: 'path/to/image4.jpg',
+ imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_1.png',
},
{
id: 5,
title: '22024 E2GEE Lab(이지랩) 메이커톤',
description: '동국대학교 총장상(대상)',
- imageUrl: 'path/to/image4.jpg',
+ imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_5.png',
},
];
diff --git a/src/pages/Main/BottomInfo/BottomInfo.styles.ts b/src/pages/Main/BottomInfo/BottomInfo.styles.ts
index 6d8ba0e..c08e897 100644
--- a/src/pages/Main/BottomInfo/BottomInfo.styles.ts
+++ b/src/pages/Main/BottomInfo/BottomInfo.styles.ts
@@ -9,7 +9,7 @@ export const BottomInfoContainer = styled.div<{ $isMobile: boolean; $isTablet: b
`;
export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
- width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; /*아래 정보 타이틀 사이즈 조절*/
+ width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )};
font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "22px" : $isTablet ? "32px" : "36px")};
color: #191919;
font-weight: bold;
@@ -64,12 +64,13 @@ export const RequirementsTitle = styled.h3<{ $isMobile: boolean; $isTablet: bool
`;
export const RequirementTitle = styled.h4<{ $isMobile: boolean }>`
- font-size: ${({ $isMobile }) => ($isMobile ? "20px" : "24px")};
+ font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")};
font-weight: bold;
`;
export const RequirementText = styled.p<{ $isMobile: boolean }>`
- font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "20px")};
+margin-top: 10px;
+ font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")};
font-weight: 500;
`;
@@ -115,7 +116,6 @@ export const NotificationLink = styled.a<{ $isMobile: boolean }>`
}
`;
-/* 팝업 */
export const PopupOverlay = styled.div`
position: fixed;
inset: 0;
diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx
index 1c9bf66..2f282d8 100644
--- a/src/pages/Main/BottomInfo/BottomInfo.tsx
+++ b/src/pages/Main/BottomInfo/BottomInfo.tsx
@@ -11,8 +11,7 @@ const BottomInfo = () => {
const [isPopupOpen, setPopupOpen] = useState(false);
const { isMobile, isTablet } = useMediaQueries();
- // 구글 폼 링크 (전화번호 입력 폼) 지금은 가상의 url 입니다.
- const googleFormLink = "https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform";
+ const googleFormLink = "https://docs.google.com/forms/d/e/1FAIpQLSdaELf6PNpRSD18nPPcgH_934Wsm9Gju54P62vWlczusmRg3w/viewform";
return (
@@ -38,15 +37,15 @@ const BottomInfo = () => {
지원 요건
- 🌱 누구나 환영해요!
- Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.
+ - 누구나 환영해요!
+ Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱
- ⏰ 월요일 저녁, 같이 성장해요!
- 매주 월요일 19시부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? 🌱
+ - 월요일 저녁, 같이 성장해요.
+ 매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요?
- 📅 언제 모집하나요?
+ - 언제 모집하나요?
2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉
diff --git a/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts b/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts
index dcf584b..b948690 100644
--- a/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts
+++ b/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts
@@ -16,8 +16,8 @@ export const FixedNavWrapper = styled.div`
export const Navbar = styled.nav<{ $isMobile: boolean }>`
- background-color: #216D35;
- padding: 10px 20px;
+ background-color: rgba(33, 109, 53, 0.7);
+ padding: 10px 10px;
border-radius: 17px;
display: flex;
align-items: center;
diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts
index b2eb02c..10dccdf 100644
--- a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts
+++ b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts
@@ -6,6 +6,7 @@ export const MobileNavbar = styled.div<{ isNavOpen: boolean }>`
transition: max-height 0.1s ease-in-out;
display: inline-flex;
+
height: auto;
padding: 10px 10px;
flex-direction: column;
@@ -15,8 +16,7 @@ export const MobileNavbar = styled.div<{ isNavOpen: boolean }>`
width: 150px;
border-radius: 20px 0px 20px 20px;
- border: 1px solid var(--FarmSystem_White, #FCFCFC);
- background: var(--FarmSystem_Green01, #28723F);
+background: rgba(40, 114, 63, 0.7);
`;
export const MobileNavItem = styled.a`
@@ -25,6 +25,7 @@ export const MobileNavItem = styled.a`
align-items: center;
gap: 3px;
flex: 1 0 0;
+ margin-bottom: 8px;
`;
export const MobileNavText = styled.p`
@@ -37,7 +38,6 @@ export const MobileNavText = styled.p`
letter-spacing: -0.24px;
`;
-/* 확장/축소 버튼 스타일 */
export const ExpandButton = styled.button`
color: var(--FarmSystem_White, #FCFCFC);
font-size: 24px;
diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.tsx b/src/pages/Main/FarmSyetemNav/MobileNav.tsx
index 7209914..f476982 100644
--- a/src/pages/Main/FarmSyetemNav/MobileNav.tsx
+++ b/src/pages/Main/FarmSyetemNav/MobileNav.tsx
@@ -21,6 +21,10 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile
const [isNavOpen, setIsNavOpen] = useState(false);
const currentNavItem = navItems.find(item => item.id === currentSection) ?? navItems[0];
+ if(currentSection === "about") {
+ return null;
+ }
+
return (
{/*
diff --git a/src/pages/Main/Intro/Intro.styled.tsx b/src/pages/Main/Intro/Intro.styled.tsx
index d47efb6..0045906 100644
--- a/src/pages/Main/Intro/Intro.styled.tsx
+++ b/src/pages/Main/Intro/Intro.styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
export const AppContainer = styled.div`
display: flex;
@@ -28,10 +28,34 @@ export const BottomSection = styled.div`
justify-content: center;
flex: 1;
margin-bottom: 15vh;
+
+ background-color: rgba(229, 229, 229, 0.3);
+
+ border-radius: 20px;
+ padding: 25px;
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+`;
+
+export const BottomSectionTitle = styled.h2`
+ font-size: 22px;
+ font-weight: 700;
+ color: rgb(245, 245, 245);
+ text-align: center;
+ margin-bottom: 50px;
+`;
+
+export const BottomSectionDescription = styled.p`
+ font-size: 16px;
+ font-weight: 500;
+ text-align: center;
+ line-height: 1.6;
+ color: #102C19;
+ max-width: 600px;
+ margin-bottom: 8px;
`;
export const IntroPhrase = styled.p`
- color: white;
+ color: rgb(245, 245, 245);
font-size: 18px;
font-weight: 600;
text-align: center;
@@ -39,15 +63,6 @@ export const IntroPhrase = styled.p`
padding-bottom: 10px;
`;
-export const IntroDescription = styled.p`
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- padding-top: 5px;
- padding-bottom: 5px;
- color: #333; // 기본적으로 어두운 회색
-`;
-
export const AppApplyButton = styled.div`
width: 110px;
height: 35px;
@@ -67,14 +82,14 @@ export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean; $i
flex-direction: column;
align-items: flex-start;
justify-content: center;
- height: ${({ $isMobile, $isTablet, $isApp, $isIpadPro }) =>
- $isMobile ? "75vh" : $isTablet ? "80vh" : $isApp ? "90vh" : $isIpadPro ? "105h" : "120vh"};
-
+ height: ${({ $isMobile, $isTablet}) =>
+ $isMobile ? "80vh" : $isTablet ? "120vh" : "130vh"};
+
background: ${({ $isMobile, $isTablet, $isApp }) => (
$isApp ? "linear-gradient(90deg, #102C19, #194326)" :
- $isMobile ? "linear-gradient(90deg, #28723F, #75e298)" :
- $isTablet ? "linear-gradient(90deg, #28723F, #A2E9B8)" :
- "linear-gradient(90deg, #28723F, #A2E9B8)"
+ $isMobile ? "linear-gradient(90deg, #102C19, #28723F)" :
+ $isTablet ? "linear-gradient(90deg, #102C19, #28723F)" :
+ "linear-gradient(90deg, #102C19, #28723F)"
)};
padding: ${({ $isMobile }) => ($isMobile ? "0px" : "50px")};
@@ -82,48 +97,67 @@ export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean; $i
`;
-/* 추가된 네비게이션 정렬용 스타일 */
-export const NavWrapper = styled.div`
- width: 100%;
- display: flex;
- justify-content: flex-end; /* 오른쪽 정렬 */
- margin-bottom: 20px;
-`;
-
export const Logo = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
display: flex;
align-items: center;
- font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "40px" : $isTablet ? "50px" : "64px")};
- font-weight: 800;
- margin-bottom: 20px;
- margin-left: 50px;
+ font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "19px" : $isTablet ? "27px" : "35px")};
img {
- width: ${({ $isMobile, $isTablet }) => ($isMobile ? "100px" : $isTablet ? "140px" : "180px")};
+ width: ${({ $isMobile, $isTablet }) => ($isMobile ? "100px" : $isTablet ? "200px" : "250px")};
height: auto;
}
`;
export const Description = styled.p<{ $isMobile: boolean; $isTablet: boolean }>`
- font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "16px" : $isTablet ? "20px" : "24px")};
+ font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "16px" : $isTablet ? "20px" : "30px")};
line-height: 1.5;
max-width: 600px;
margin-bottom: 20px;
- margin-left: 50px;
+ margin-left: 30px;
+ font-weight: 600;
`;
-export const TrackList = styled.p<{ $isMobile: boolean; $isTablet: boolean, $isTiny: boolean}>`
- a {
- font-weight: 600;
- }
- font-size: ${({ $isTiny, $isMobile, $isTablet }) => ($isTiny ? "12px" : $isMobile ? "15px" : $isTablet ? "20px" : "24px")};
- line-height: 1.5;
- margin-top: 20px;
- margin-bottom: 20px;
- margin-left: 50px;
+export const TrackList = styled.p<{ $isMobile: boolean; $isTablet: boolean }>`
+ font-size: ${({ $isMobile, $isTablet}) => ($isMobile ? "15px": $isTablet ? "15px" : "20px")};
+ text-align: ${({ $isMobile }) => ($isMobile ? "center":"left")};
+ color: rgb(245, 245, 245);
+ max-width: 600px;
+ margin-top: 15px;
+ line-height: 1.8;
+ margin-left: ${({ $isMobile }) => ($isMobile ? "0" : "30px")};
+ margin-bottom: ${({ $isMobile }) => ($isMobile ? "20px":"0")};
+
`;
-export const Apply = styled.div`
+export const WebviewBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+
+ width: 100%;
+
+ min-height: 400px;
+ height: auto;
+
+ background-color: rgba(229, 229, 229, 0.3);
+
+ border-radius: 20px;
+ padding: 25px;
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+`;
+
+export const ApplyBox = styled.div`
display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ width: 100%;
+ padding: 10px 20px;
+`;
+
+
+export const Apply = styled.div`
+ display: colunm;
align-items: center;
justify-content: space-between;
margin-left: 50px;
@@ -133,10 +167,10 @@ export const ApplyButton = styled.button<{ $isMobile: boolean; $isTablet: boolea
background-color: #4CAF50;
color: white;
border: none;
- padding: ${({ $isMobile, $isTablet }) => ($isMobile ? "10px 50px" : $isTablet ? "12px 65px" : "15px 80px")};
+ padding: ${({ $isMobile, $isTablet }) => ($isMobile ? "10px 50px" : $isTablet ? "12px 65px" : "15px 65px")};
border-radius: 10px;
font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "18px" : $isTablet ? "22px" : "24px")};
- margin-top: 20px;
+ margin-top: ${({ $isMobile }) => ($isMobile ? "50px":"20px")};
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
&:hover {
@@ -144,57 +178,12 @@ export const ApplyButton = styled.button<{ $isMobile: boolean; $isTablet: boolea
}
`;
-
export const ApplyDescription = styled.div`
font-size: 16px;
- margin-left: 20px;
margin-top: 15px;
color: #E8F5E9;
-`;
+ text-align: center;
-export const Bud = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
- font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "40px" : $isTablet ? "50px" : "64px")};
- margin-left: ${({ $isMobile, $isTablet }) => ($isMobile ? "30px" : $isTablet ? "40px" : "50px")};
- top: 116px;
-`;
-
-/* 팝업 스타일 */
-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;
- color: black;
- 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/Intro/Intro.tsx b/src/pages/Main/Intro/Intro.tsx
index 95357ef..30761f4 100644
--- a/src/pages/Main/Intro/Intro.tsx
+++ b/src/pages/Main/Intro/Intro.tsx
@@ -3,12 +3,11 @@ import logo from '../../../assets/Icons/FarmLogo1.png';
import { useState } from 'react';
import Popup from '@/components/Popup/Popup';
import useMediaQueries from '@/hooks/useMediaQueries';
-import IntroLogo from '../../../assets/Icons/IntroLogo.svg';
import { motion } from 'framer-motion';
const Intro = () => {
const [isPopupOpen, setPopupOpen] = useState(false);
- const { isTiny, isApp, isMobile, isTablet, isIpadPro } = useMediaQueries();
+ const { isApp, isMobile, isTablet, isIpadPro } = useMediaQueries();
const fadeInUp = {
hidden: { opacity: 0, y: 30 },
@@ -21,10 +20,10 @@ const Intro = () => {
if (isApp) {
return (
-
+
{
))}
- {/* 2/3 지점: Description - 화면에 들어올 때 애니메이션 적용 */}
-
- {[
- "Farm System은 SW/AI 분야에 관심있는",
- "학생들로 구성된 자율 학습 동아리로,",
- "Union · 게임/영상 · 보안/웹 ·",
- "사물인터넷/로봇 · 인공지능 · 빅데이터의",
- "5가지 신기술 트랙을 제공하여",
- "학습 경험을 통해 SW/AI 역량을 배양합니다."
- ].map((text, index) => (
-
- {text}
-
- ))}
+
+ 🌱 Farm System이란?
+
+ SW/AI 분야에 관심 있는 학생들로 구성된
자율 학습 동아리입니다.
+
+
+
+ Union · 게임/영상 · 보안/웹 ·
사물인터넷/로봇 · 인공지능 · 빅데이터의
+ 5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다.
+
- setPopupOpen(true)}>
- 지원하기
-
+ setPopupOpen(true)}>지원하기
-
setPopupOpen(false)}
title={"지금은 모집 기간이 아닙니다."}
- content={"공개 모집 예정: 2025년 2월월"}
+ content={"공개 모집 예정: 2025년 2월"}
/>
);
@@ -93,26 +84,71 @@ const Intro = () => {
return (
- 🌱
-
- 미래를 준비하고 성장하는 여정,
- Farm System에서 함께하세요.
-
-
- 
- Farm System
-
+
+
+
+ 미래를 준비하고 성장하는 여정,
+ Farm System에서 함께하세요.
+
+
+
+
+
+
+ 🌱Farm System이란?
+
+
+
+ SW/AI 분야에 관심있는 학생들로 구성된 자율 학습 동아리로,
+ Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터의
+ 5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다.
+
+
+
+ setPopupOpen(true)}>
+ 지원하기
+
+ 2025년 2월 공개 모집 예정
+
+
+
+
+
+
+
-
- SW/AI 분야에 관심있는 학생들로 구성된 자율 학습 동아리로,
- Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터의
- 5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다.
-
-
- setPopupOpen(true)}> 지원하기
- 2025년 2월 공개 모집 예정
-
`
position: absolute;
top: 0;
-
- //높이 문제로 정상적으로 진행 못했던 것 같아서 모바일 뷰로 처리해서 해결 했습니다.
- height: ${(props) => (props.$isMobile ? "300px" : props.$isTablet ? "470px": "500px")};
-
- // 배경 Gradient를 모바일에서도 보이게 하려면 이 부분 고쳐주시면 됩니다!
display: flex;
-
- /*gap 차이로 인해 2개의 사각형 보이기 힘듦*/
- gap: ${(props) => (props.$isMobile ? "60vw" : props.$isTablet ? "300px": "80px")};
justify-content: center;
align-items: center;
+
+ /* ✅ 블러 크기 조정 */
+ height: ${(props) => (props.$isMobile ? "370px" : props.$isTablet ? "500px" : "500px")};
+ gap: ${(props) => (props.$isMobile ? "30vw" : props.$isTablet ? "200px" : "80px")};
`;
export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
- width: ${(props) => (props.$isMobile ? "240px" : "560px")};
- height: ${(props) => (props.$isMobile ? "30vh" : props.$isTablet ? "300px" : "400px")};
- /*일단 최대한 맞추어봤습니다. QA진행때 확인 다시하면 좋을 것 같습니다.*/
+ width: ${(props) => (props.$isMobile ? "200px" : props.$isTablet ? "400px" : "550px")};
+ height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")};
background: linear-gradient(
270deg,
var(--FarmSystem_Orange) 50%,
var(--FarmSystem_White) 100%
);
- opacity: 0.5;
+ opacity: 0.4;
border-radius: 20px;
`;
export const GradientRight = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
- width: ${(props) => (props.$isMobile ? "240px" : "560px")};
- height: ${(props) => (props.$isMobile ? "30vh" : props.$isTablet ? "300px" : "400px")};
-
+ width: ${(props) => (props.$isMobile ? "200px" : props.$isTablet ? "400px" : "550px")};
+ height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")};
+
background: linear-gradient(
90deg,
var(--FarmSystem_Green02) 50%,
var(--FarmSystem_White) 100%
);
- opacity: 0.5;
+ opacity: 0.4;
border-radius: 20px;
-`;
+`;
\ No newline at end of file
diff --git a/src/pages/Main/index.styled.tsx b/src/pages/Main/index.styled.tsx
index b0da590..c958120 100644
--- a/src/pages/Main/index.styled.tsx
+++ b/src/pages/Main/index.styled.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
export const MainContainer = styled.div<{ $isMobile: boolean }>`
position: relative;
- width: 100vw;
+ width: 100%;
min-height: 100vh;
z-index: 2;
overflow-x: hidden;