From 64d71d0e3031d4cb4464c3b18bae5972bc35cc0c Mon Sep 17 00:00:00 2001 From: dewbeeny Date: Mon, 17 Feb 2025 05:39:19 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=9B=B9/=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20UI=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Icons/Hamburger.png | Bin 0 -> 378 bytes src/assets/Icons/Hamburger.svg | 3 - src/assets/Icons/IntroLogo.svg | 10 - src/assets/Icons/close.png | Bin 0 -> 796 bytes src/components/Header/Header.styled.tsx | 71 ++++--- src/components/Header/Header.tsx | 63 ++++--- .../Achievements/AchievementItem.styles.ts | 7 +- .../Main/Achievements/Achievements.styles.ts | 6 +- src/pages/Main/Achievements/Achievements.tsx | 10 +- .../Main/BottomInfo/BottomInfo.styles.ts | 8 +- src/pages/Main/BottomInfo/BottomInfo.tsx | 13 +- .../FarmSyetemNav/FarmSystemNav.styled.ts | 4 +- .../Main/FarmSyetemNav/MobileNav.styled.ts | 6 +- src/pages/Main/Intro/Intro.styled.tsx | 173 ++++++++---------- src/pages/Main/Intro/Intro.tsx | 138 ++++++++------ src/pages/Main/Union/ContentBox.styled.ts | 30 ++- src/pages/Main/index.styled.tsx | 2 +- 17 files changed, 286 insertions(+), 258 deletions(-) create mode 100644 src/assets/Icons/Hamburger.png delete mode 100644 src/assets/Icons/Hamburger.svg delete mode 100644 src/assets/Icons/IntroLogo.svg create mode 100644 src/assets/Icons/close.png diff --git a/src/assets/Icons/Hamburger.png b/src/assets/Icons/Hamburger.png new file mode 100644 index 0000000000000000000000000000000000000000..a97a92edc4a0637ce05f691c7e05ef8544daeaa6 GIT binary patch literal 378 zcmeAS@N?(olHy`uVBq!ia0vp^F(Ayr1|%Q9zZ3zaI14-?iy0Vnyg`_8sqM6tKtaah zAa^H*b?0PW0y!+{j=qiz3>*8o|0J>k<@h~a978G?-`?4n%j78FaPec3ic?ep`;>(8 zN8Ft{(;slj2tM|EBNW4=Dv-zY!^3Q!>nDy2)hAV@|7L`l-{Jt82n2bzozFjfTef@6 z)^$y38zcVk9o{g%>Yt(2oaE_2`~VmAA1mfigQtY>dL{(JwLikIf;%P+r3nQXn*zd@~V zFN?ogg%RAS*Ru}0?=Ix~&n1;D1Tx@GulF?-yXI#F7Cf)NR+)eOqna&r{@~F+4Iaq4 vgl!_P%hc5wt-JP1$i#NK97rbv!@Gm>r&TSN7tIu10^)kQ`njxgN@xNA{w9&Y literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..5ae36abc94f65ceb9251165b1cb7fc314a5ad3b2 GIT binary patch literal 796 zcmV+%1LOROP)Px%)=5M`RCr$P++T8=Fc1cCgfHSJ%f3Z>k~Sx4e3B+7iErUQPq~P#Mx8LjctH9j zvBG9Qo>y!9V-Z3EOv6o7z=&pN@`k{|ML=Kz3kwLRX9W{jSU@;ED>wo8a=HB8Y&LHR zO*o1`u}-JchcV_y(=>0^+84APD;SXK;daq5GJzw&1Gq`Z1P%ZPaA9Nuj{pO>UCX_- z_I2zy5qLlb#dXddw%hH`P%razz<#JS_J^+5>tVOseFE35(U2)|{f|5y@cDdpqo<=W zFRA0yey*u;3Eb0_z$NfEuoNzVo2HS(RSztUs~Wflu3F$)xGI5b;;I9#jjIZH4qP?B zbK$B0o)dTRz;oj+8u$@#7YqC-xQhh7-EP0WSAT=k!pLNK$-Hvcc2V=eC`c{b#Z@o@ zToYFvaBW;wz;ocL0iFw23-G5gW{>pGV=*PG)hb63so17qwVJ?yHh}@8k`Mxy=mBjB z3?P++5V%ASXiH!KsU&0;VE>e(bM9}+j_0(s);`t9CwpfJjFkt0F{kV(0%y}<4GD}n zWk(S>n+|J8V9Y5yDjWECJg!%(m4CG~dvnhH`Fb^VosvM!Ff9dTC>C8>zi&%mKt31O zrzUU&xCEEL!ngzu0GC#7mzrI~05Xc}SAW~KeGg3{5%>-`1=qh=9h*cVa1S^Y*Ec0F zFbwk{Ik*HC#w9QSoLjkFYIYG548=mviV=7OxU_Ov!NQeGVByLoaN!+V?CVSfF1$kn z1|a`Kc#$i(i9nFm15Y(t7{gW#ERCzWi>QIC7PuC!2ac^)mwed|xdu!f6J55ii97Y5 zdxU&J;MfJH`vY^nhxQ1Fp?wGf`_r{;TmQ9F|A5HgM%?frj&>0tWa7rppD1v5;kmD5 z;>K}(1O$AKOk4~%3AjImdbXhw&M|!?T*1@-w2q7f7Cz1dCa|!8aC%lSfrSNx)3btw af&T%$P}O%PSA@y{0000` 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/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..3633718 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 }, @@ -24,7 +23,7 @@ const Intro = () => { { ))} - {/* 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; From c10b0d7c0ea25f43e2128a246dac268527a2fa5d Mon Sep 17 00:00:00 2001 From: dongmin0204 Date: Mon, 17 Feb 2025 12:26:41 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=95=B1=EB=B7=B0=EC=97=90=EC=84=9C?= =?UTF-8?q?=20id=3Dabout=EC=9D=B8=EC=8B=9D=EC=9D=B4=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EC=97=88=EB=8D=98=20=EC=A0=90=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/FarmSyetemNav/MobileNav.tsx | 4 ++++ src/pages/Main/Intro/Intro.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) 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.tsx b/src/pages/Main/Intro/Intro.tsx index 3633718..30761f4 100644 --- a/src/pages/Main/Intro/Intro.tsx +++ b/src/pages/Main/Intro/Intro.tsx @@ -20,7 +20,7 @@ const Intro = () => { if (isApp) { return ( - +