From fa92cada66ab3108f6684645f1126cc0be0a2486 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 11:34:07 +0900 Subject: [PATCH 1/9] =?UTF-8?q?[Feat]=20=EC=9D=B8=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Intro/Intro.styled.tsx | 36 ++++++++++++++------- src/pages/Main/Intro/Intro.tsx | 46 ++++++++++++++++----------- 2 files changed, 52 insertions(+), 30 deletions(-) diff --git a/src/pages/Main/Intro/Intro.styled.tsx b/src/pages/Main/Intro/Intro.styled.tsx index 0045906..34d0590 100644 --- a/src/pages/Main/Intro/Intro.styled.tsx +++ b/src/pages/Main/Intro/Intro.styled.tsx @@ -5,7 +5,7 @@ export const AppContainer = styled.div` flex-direction: column; align-items: center; justify-content: space-between; - height: 160vh; + height: 150vh; background: linear-gradient(90deg, #102C19, #194326); color: white; text-align: center; @@ -18,7 +18,7 @@ export const TopSection = styled.div` align-items: center; justify-content: center; flex: 1; - margin-top: 5vh; + margin-top: -10vh; `; export const BottomSection = styled.div` @@ -26,8 +26,8 @@ export const BottomSection = styled.div` flex-direction: column; align-items: center; justify-content: center; - flex: 1; - margin-bottom: 15vh; + height: 450px; + margin-bottom: 10vh; background-color: rgba(229, 229, 229, 0.3); @@ -112,23 +112,31 @@ export const Description = styled.p<{ $isMobile: boolean; $isTablet: boolean }>` line-height: 1.5; max-width: 600px; margin-bottom: 20px; - margin-left: 30px; + margin-left: ${({ $isMobile }) => ($isMobile ? "0" : "30px")}; + margin-top: ${({ $isMobile }) => ($isMobile ? "30px" : "0px")}; font-weight: 600; `; -export const TrackList = styled.p<{ $isMobile: boolean; $isTablet: boolean }>` +export const TopBox = styled.div<{ $isMobile: boolean }>` + position: absolute; + left: 30px; + top: ${({ $isMobile }) => ($isMobile ? "10px" : "50px")}; + display: flex; + flex-direction: column; +` + +export const TrackList = styled.p<{ $isApp: boolean; $isMobile: boolean; $isTablet: boolean }>` font-size: ${({ $isMobile, $isTablet}) => ($isMobile ? "15px": $isTablet ? "15px" : "20px")}; - text-align: ${({ $isMobile }) => ($isMobile ? "center":"left")}; + text-align: ${({ $isApp }) => ($isApp ? "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 WebviewBox = styled.div` +export const WebviewBox = styled.div<{ $isMobile: boolean }>` display: flex; flex-direction: column; align-items: flex-start; @@ -136,14 +144,15 @@ export const WebviewBox = styled.div` width: 100%; - min-height: 400px; - height: auto; + /* min-height: 400px; */ + height: ${({ $isMobile }) => ($isMobile ? "350px":"400px")}; background-color: rgba(229, 229, 229, 0.3); border-radius: 20px; padding: 25px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + position: relative; `; export const ApplyBox = styled.div` @@ -153,6 +162,9 @@ export const ApplyBox = styled.div` justify-content: flex-end; width: 100%; padding: 10px 20px; + position: absolute; + right: 30px; + bottom: 10px; `; @@ -161,6 +173,8 @@ export const Apply = styled.div` align-items: center; justify-content: space-between; margin-left: 50px; + /* background-color: orange; */ + `; export const ApplyButton = styled.button<{ $isMobile: boolean; $isTablet: boolean }>` diff --git a/src/pages/Main/Intro/Intro.tsx b/src/pages/Main/Intro/Intro.tsx index 3633718..654a3b6 100644 --- a/src/pages/Main/Intro/Intro.tsx +++ b/src/pages/Main/Intro/Intro.tsx @@ -29,6 +29,11 @@ const Intro = () => { animate="visible" variants={fadeInUp} custom={0} + style={{ + width: "80%", + maxWidth: "200px", + height: "auto" + }} /> {["미래를 준비하고 성장하는 여정,", "Farm System에서 함께하세요."].map((text, index) => ( @@ -54,10 +59,10 @@ const Intro = () => { > 🌱 Farm System이란? - SW/AI 분야에 관심 있는 학생들로 구성된
자율 학습 동아리입니다. + SW/AI 분야에 관심 있는 학생들로
구성된 자율 학습 동아리입니다. - + Union · 게임/영상 · 보안/웹 ·
사물인터넷/로봇 · 인공지능 · 빅데이터의
5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다. @@ -124,24 +129,27 @@ const Intro = () => { transition={{ duration: 0.8, delay: 2, ease: "easeOut" }} viewport={{ once: true }} > - - - 🌱Farm System이란? - + + + + 🌱Farm System이란? + + + + SW/AI 분야에 관심있는 학생들로 구성된 자율 학습 동아리로,
+ Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터의
+ 5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다. + + - - SW/AI 분야에 관심있는 학생들로 구성된 자율 학습 동아리로,
- Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터의
- 5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다. - - - - setPopupOpen(true)}> - 지원하기 - - 2025년 2월 공개 모집 예정 - - + + + setPopupOpen(true)}> + 지원하기 + + 2025년 2월 공개 모집 예정 + + From e1b523816a4b76aaf49d7f8331b4830dba73a911 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 11:34:29 +0900 Subject: [PATCH 2/9] =?UTF-8?q?[Feat]=20=EC=9C=A0=EB=8B=88=EC=98=A8=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 ---- src/pages/Main/Union/ContentBox.styled.ts | 29 +++++++++---- src/pages/Main/Union/ContentBox.tsx | 50 +++++++++++++++++------ src/pages/Main/Union/Union.styled.ts | 6 ++- src/pages/Main/Union/Union.tsx | 4 +- 5 files changed, 63 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bdf7f4..75f764f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2651,13 +2651,6 @@ "dev": true, "license": "ISC" }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "license": "MIT", - "peer": true - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -3160,7 +3153,6 @@ "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", - "license": "MIT", "peerDependencies": { "react": "*" } diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts index 8655cd9..9204327 100644 --- a/src/pages/Main/Union/ContentBox.styled.ts +++ b/src/pages/Main/Union/ContentBox.styled.ts @@ -2,7 +2,7 @@ import styled from "styled-components"; export const Container = styled.div<{ $isMobile: boolean }>` width: 100%; - height: ${(props) => (props.$isMobile ? "auto" : "500px")}; + height: ${(props) => (props.$isMobile ? "370px" : "500px")}; display: flex; justify-content: center; @@ -10,6 +10,7 @@ export const Container = styled.div<{ $isMobile: boolean }>` position: relative; padding: ${(props) => (props.$isMobile ? "20px 0" : "0")}; + /* background-color: yellow; */ `; // 테두리에 Gradient가 안돼서 박스 두개를 겹쳐서 테두리 Gradient를 만들었습니다. @@ -99,14 +100,23 @@ export const ActivityList = styled.ul<{ $isMobile: boolean; $isTiny: boolean; }> display: flex; flex-direction: row; - flex-wrap: wrap; - align-items: flex-end; - align-content: flex-start; + /* flex-wrap: wrap; */ + align-items: center; + justify-content: center; + align-content: center; gap: ${(props) => (props.$isMobile ? "0 10px" : "10px 20px")}; list-style-type: disc; `; +export const ListBox = styled.div<{ $isApp: boolean}>` + display: flex; + flex-direction: column; + align-items: ${(props) => (props.$isApp ? "center" : "start")}; + justify-content: center; + /* background-color: orange; */ +` + export const Li = styled.li<{ $isMobile: boolean; $isTiny?: boolean; @@ -114,9 +124,9 @@ export const Li = styled.li<{ height: 35px; font-style: normal; - font-weight: 500; + font-weight: 300; font-size: ${(props) => - props.$isMobile ? "13px" : "22px"}; + props.$isMobile ? "15px" : "20px"}; line-height: ${(props) => (props.$isMobile ? "30px" : "35px")}; color: var(--FarmSystem_Black); @@ -135,16 +145,17 @@ export const GradientContainer = styled.div<{ $isMobile: boolean, $isTablet: boo position: absolute; top: 0; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; /* ✅ 블러 크기 조정 */ height: ${(props) => (props.$isMobile ? "370px" : props.$isTablet ? "500px" : "500px")}; gap: ${(props) => (props.$isMobile ? "30vw" : props.$isTablet ? "200px" : "80px")}; + /* background-color: orange; */ `; export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean }>` - width: ${(props) => (props.$isMobile ? "200px" : props.$isTablet ? "400px" : "550px")}; + width: ${(props) => (props.$isMobile ? "280px" : props.$isTablet ? "400px" : "550px")}; height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")}; background: linear-gradient( @@ -157,7 +168,7 @@ export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean `; export const GradientRight = styled.div<{ $isMobile: boolean, $isTablet: boolean }>` - width: ${(props) => (props.$isMobile ? "200px" : props.$isTablet ? "400px" : "550px")}; + width: ${(props) => (props.$isMobile ? "280px" : props.$isTablet ? "400px" : "550px")}; height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")}; background: linear-gradient( diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx index ea9565e..8caaf0a 100644 --- a/src/pages/Main/Union/ContentBox.tsx +++ b/src/pages/Main/Union/ContentBox.tsx @@ -2,7 +2,7 @@ import * as S from "./ContentBox.styled"; import useMediaQueries from "@/hooks/useMediaQueries"; export default function ContentBox() { - const { isTiny, isMobile, isTablet } = useMediaQueries(); + const { isApp, isTiny, isMobile, isTablet } = useMediaQueries(); return ( @@ -33,18 +33,42 @@ export default function ContentBox() { 한 학기 활동 - - 월별 기술 블로그 - - - Farm System 아이디어톤 참가 - - - 스터디 정기 모임 - - - 트랙 멘토-멘티 프로그램 - + {isApp ? ( + + + 월별 기술 블로그 + + + 스터디 정기 모임 + + + Farm System 아이디어톤 참가 + + + 트랙 멘토-멘티 프로그램 + + + ) : ( + <> + + + 월별 기술 블로그 + + + 스터디 정기 모임 + + + + + Farm System 아이디어톤 참가 + + + 트랙 멘토-멘티 프로그램 + + + + )} + diff --git a/src/pages/Main/Union/Union.styled.ts b/src/pages/Main/Union/Union.styled.ts index 566eef5..ef92462 100644 --- a/src/pages/Main/Union/Union.styled.ts +++ b/src/pages/Main/Union/Union.styled.ts @@ -25,7 +25,7 @@ export const IntroduceText = styled.p<{ $isMobile: boolean }>` margin-bottom: ${(props) => (props.$isMobile ? "50px" : "70px")}; `; -export const UnionTextContainer = styled.div<{ $isMobile: boolean }>` +export const UnionTextContainer = styled.div<{ $isMobile: boolean; $isApp: boolean }>` display: grid; grid-template-columns: ${(props) => props.$isMobile ? "1fr 2fr 1fr" : "1fr 1fr 1fr 1fr"}; @@ -33,9 +33,11 @@ export const UnionTextContainer = styled.div<{ $isMobile: boolean }>` align-items: start; width: ${(props) => (props.$isMobile ? "220px" : "300px")}; - margin-bottom: ${(props) => (props.$isMobile ? "0" : "50px")}; + margin-bottom: ${(props) => + props.$isApp ? "30px" : props.$isMobile ? "0px" : "50px"}; `; + export const UnionText = styled.h2<{ $isMobile: boolean }>` grid-column: 2 / 4; text-align: center; diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx index d376c2e..1f3509d 100644 --- a/src/pages/Main/Union/Union.tsx +++ b/src/pages/Main/Union/Union.tsx @@ -3,7 +3,7 @@ import useMediaQueries from "@/hooks/useMediaQueries"; import * as S from './Union.styled'; export default function Union() { - const { isMobile } = useMediaQueries(); + const { isApp, isMobile } = useMediaQueries(); return ( @@ -11,7 +11,7 @@ export default function Union() {

신입생이라서

어떤 트랙을 선택할지 고민되나요?

- + Union New From e7823a40991340f93db4f4dc05c7ec4cdf313694 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 11:48:23 +0900 Subject: [PATCH 3/9] =?UTF-8?q?[Feat]=20=EC=84=B1=EA=B3=BC=20=EC=95=B1?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Main/Achievements/Achievements.styles.ts | 14 +++++++------- src/pages/Main/Achievements/Achievements.tsx | 18 ++++++++++++------ 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts index c5123f0..dbb3706 100644 --- a/src/pages/Main/Achievements/Achievements.styles.ts +++ b/src/pages/Main/Achievements/Achievements.styles.ts @@ -16,9 +16,9 @@ export const TitleArea = styled.div<{ $isMobile: boolean}>` justify-content: ${({ $isMobile }) => ($isMobile ? "center" : "flex-start")}; `; -export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>` +export const Title = styled.h2<{ $isApp:boolean, $isMobile: boolean; $isTablet: boolean }>` width: ${({ $isMobile, $isTablet }) => ($isMobile ? "340px" : $isTablet ? "510px" : "670px")}; - font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "24px" : $isTablet ? "36px" : "48px")}; + font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "21px" : $isMobile ? "24px" : $isTablet ? "36px" : "48px")}; color: #191919; font-weight: bold; margin-bottom: 40px; @@ -95,9 +95,9 @@ export const StatsContainer = styled.div<{ $isMobile: boolean }>` const statColors = ["#62de88", "#5ccc7e", "#50b46f", "#48a164"]; -export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet: boolean }>` - width: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "270px")}; - height: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "250px")}; +export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet: boolean; $isApp: boolean}>` + width: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "120px" : $isMobile ? "140px" : $isTablet ? "220px" : "270px")}; + height: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "120px" : $isMobile ? "140px" : $isTablet ? "220px" : "250px")}; border-radius: 20px; background-color: ${({ index }) => statColors[index]}; /* 각 박스마다 다른 색상 적용 */ display: flex; @@ -106,8 +106,8 @@ export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet justify-content: center; `; -export const StatNumber = styled.div<{ $isMobile: boolean }>` - font-size: ${({ $isMobile }) => ($isMobile ? "32px" : "48px")}; +export const StatNumber = styled.div<{ $isApp: boolean; $isMobile: boolean }>` + font-size: ${({ $isApp, $isMobile }) => ($isApp ? "28px" : $isMobile ? "32px" : "48px")}; font-weight: bold; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); color: #fff; diff --git a/src/pages/Main/Achievements/Achievements.tsx b/src/pages/Main/Achievements/Achievements.tsx index 8a58ef1..f75bbc1 100644 --- a/src/pages/Main/Achievements/Achievements.tsx +++ b/src/pages/Main/Achievements/Achievements.tsx @@ -72,13 +72,19 @@ const settings = { const Achievements = () => { - const { isMobile, isTablet } = useMediaQueries(); + const { isApp, isMobile, isTablet } = useMediaQueries(); return ( - - 2024년 Farm System 3기에서 함께 성장하고 이루어낸 성과입니다. - + {isApp ? ( + + 2024년 Farm System 3기에서
함께 성장하고 이루어낸 성과입니다. + + ) : ( + + 2024년 Farm System 3기에서 함께 성장하고 이루어낸 성과입니다. + + )} @@ -98,8 +104,8 @@ const Achievements = () => { { number: "140개", label: "프로젝트" }, { number: "80개", label: "스터디" }, { number: "20회", label: "수상 경험" } ].map((stat, index) => ( - - {stat.number} + + {stat.number} {stat.label} ))} From 98b8ff9368e3d4ed046493bee3c36c7e23c76bfa Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 12:11:31 +0900 Subject: [PATCH 4/9] =?UTF-8?q?[Feat]=20=EB=B0=94=ED=85=80=20=EC=9D=B8?= =?UTF-8?q?=ED=8F=AC=20=EC=95=B1=EB=B7=B0=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Main/BottomInfo/BottomInfo.styles.ts | 34 +++++++++---------- src/pages/Main/BottomInfo/BottomInfo.tsx | 22 ++++++------ 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/pages/Main/BottomInfo/BottomInfo.styles.ts b/src/pages/Main/BottomInfo/BottomInfo.styles.ts index c08e897..4a683cf 100644 --- a/src/pages/Main/BottomInfo/BottomInfo.styles.ts +++ b/src/pages/Main/BottomInfo/BottomInfo.styles.ts @@ -8,9 +8,9 @@ export const BottomInfoContainer = styled.div<{ $isMobile: boolean; $isTablet: b padding: ${({ $isMobile }) => ($isMobile ? "40px 0" : "60px 0")}; `; -export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>` - width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; - font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "22px" : $isTablet ? "32px" : "36px")}; +export const Title = styled.h2<{ $isApp: boolean; $isMobile: boolean; $isTablet: boolean }>` + width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; + font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "19px" : $isMobile ? "22px" : $isTablet ? "32px" : "36px")}; color: #191919; font-weight: bold; text-align: center; @@ -57,34 +57,34 @@ export const RequirementItem = styled.div` margin-bottom: 20px; `; -export const RequirementsTitle = styled.h3<{ $isMobile: boolean; $isTablet: boolean }>` - font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "24px" : $isTablet ? "28px" : "32px")}; +export const RequirementsTitle = styled.h3<{ $isApp: boolean; $isMobile: boolean; $isTablet: boolean }>` + font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "18px" : $isMobile ? "24px" : $isTablet ? "28px" : "32px")}; color: #175321; - margin-bottom: 40px; + margin-bottom: ${({$isApp, $isMobile }) => ($isApp ? "10px" : $isMobile ? "20px" : "40px")}; `; -export const RequirementTitle = styled.h4<{ $isMobile: boolean }>` - font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")}; +export const RequirementTitle = styled.h4<{ $isApp: boolean; $isMobile: boolean }>` + font-size: ${({ $isApp, $isMobile }) => ($isApp ? "14px" : $isMobile ? "18px" : "24px")}; font-weight: bold; `; -export const RequirementText = styled.p<{ $isMobile: boolean }>` -margin-top: 10px; - font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")}; - font-weight: 500; +export const RequirementText = styled.p<{ $isApp: boolean; $isMobile: boolean }>` + margin-top: ${({ $isApp, $isMobile }) => ($isApp ? "5px" : $isMobile ? "7px" : "10px")}; + font-size: ${({ $isApp, $isMobile }) => ($isApp ? "12px" : $isMobile ? "14px" : "20px")}; + font-weight: 300; `; -export const ButtonContainer = styled.div` +export const ButtonContainer = styled.div<{ $isApp: boolean; $isMobile: boolean }>` display: flex; justify-content: flex-end; - margin-top: 40px; + margin-top: ${({$isApp, $isMobile }) => ($isApp ? "10px" : $isMobile ? "20px" : "40px")}; `; -export const ApplyButton = styled.button<{ $isMobile: boolean }>` - width: ${({ $isMobile }) => ($isMobile ? "180px" : "240px")}; +export const ApplyButton = styled.button<{ $isApp: boolean; $isMobile: boolean }>` + width: ${({ $isApp, $isMobile }) => ($isApp ? "110px" : $isMobile ? "180px" : "240px")}; background-color: #49aa59; color: #ffffff; - font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "20px")}; + font-size: ${({ $isApp, $isMobile }) => ($isApp ? "14px" : $isMobile ? "18px" : "20px")}; padding: 12px 24px; border: none; border-radius: 10px; diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx index 2f282d8..fc13acf 100644 --- a/src/pages/Main/BottomInfo/BottomInfo.tsx +++ b/src/pages/Main/BottomInfo/BottomInfo.tsx @@ -9,13 +9,13 @@ import useMediaQueries from '@/hooks/useMediaQueries'; const BottomInfo = () => { const [isPopupOpen, setPopupOpen] = useState(false); - const { isMobile, isTablet } = useMediaQueries(); + const { isApp, isMobile, isTablet } = useMediaQueries(); const googleFormLink = "https://docs.google.com/forms/d/e/1FAIpQLSdaELf6PNpRSD18nPPcgH_934Wsm9Gju54P62vWlczusmRg3w/viewform"; return ( - + Farm System을 더 알아가고 싶나요? @@ -35,21 +35,21 @@ const BottomInfo = () => { - 지원 요건 + 지원 요건 - - 누구나 환영해요! - Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱 + - 누구나 환영해요! + Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱 - - 월요일 저녁, 같이 성장해요. - 매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? + - 월요일 저녁, 같이 성장해요. + 매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? - - 언제 모집하나요? - 2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉 + - 언제 모집하나요? + 2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉 - - setPopupOpen(true)}>지원하기 + + setPopupOpen(true)}>지원하기 From 80bc8920006ea5d130dcf9ecfbcb96c522a727fa Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 12:21:57 +0900 Subject: [PATCH 5/9] =?UTF-8?q?[Feat]=20=EC=9C=A0=EB=8B=88=EC=98=A8=20?= =?UTF-8?q?=EC=95=B1=EB=B7=B0=20=EB=B0=98=EC=9D=91=ED=98=95=202=EC=B0=A8?= =?UTF-8?q?=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/Union/ContentBox.styled.ts | 4 +++- src/pages/Main/Union/ContentBox.tsx | 16 ++++++++-------- src/pages/Main/Union/Union.styled.ts | 6 +++--- src/pages/Main/Union/Union.tsx | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts index 9204327..93abb81 100644 --- a/src/pages/Main/Union/ContentBox.styled.ts +++ b/src/pages/Main/Union/ContentBox.styled.ts @@ -114,14 +114,16 @@ export const ListBox = styled.div<{ $isApp: boolean}>` flex-direction: column; align-items: ${(props) => (props.$isApp ? "center" : "start")}; justify-content: center; + padding-bottom: ${(props) => (props.$isApp ? "15px" : "0px")}; /* background-color: orange; */ ` export const Li = styled.li<{ + $isApp: boolean; $isMobile: boolean; $isTiny?: boolean; }>` - height: 35px; + height: ${(props) => (props.$isApp ? "25px" : "35px")}; font-style: normal; font-weight: 300; diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx index 8caaf0a..a18d15e 100644 --- a/src/pages/Main/Union/ContentBox.tsx +++ b/src/pages/Main/Union/ContentBox.tsx @@ -35,34 +35,34 @@ export default function ContentBox() { {isApp ? ( - + 월별 기술 블로그 - + 스터디 정기 모임 - + Farm System 아이디어톤 참가 - + 트랙 멘토-멘티 프로그램 ) : ( <> - + 월별 기술 블로그 - + 스터디 정기 모임 - + Farm System 아이디어톤 참가 - + 트랙 멘토-멘티 프로그램 diff --git a/src/pages/Main/Union/Union.styled.ts b/src/pages/Main/Union/Union.styled.ts index ef92462..0b8ed82 100644 --- a/src/pages/Main/Union/Union.styled.ts +++ b/src/pages/Main/Union/Union.styled.ts @@ -11,7 +11,7 @@ export const Container = styled.section<{ $isMobile: boolean }>` padding: ${(props) => (props.$isMobile ? "5px" : "0")}; `; -export const IntroduceText = styled.p<{ $isMobile: boolean }>` +export const IntroduceText = styled.p<{ $isApp: boolean; $isMobile: boolean }>` width: ${(props) => (props.$isMobile ? "100%" : "500px")}; height: ${(props) => (props.$isMobile ? "auto" : "86px")}; @@ -19,10 +19,10 @@ export const IntroduceText = styled.p<{ $isMobile: boolean }>` color: var(--FarmSystem_Black); font-style: normal; font-weight: 500; - font-size: ${(props) => (props.$isMobile ? "24px" : "36px")}; + font-size: ${(props) => (props.$isApp ? "20px" : props.$isMobile ? "24px" : "36px")}; line-height: ${(props) => (props.$isMobile ? "32px" : "43px")}; - margin-bottom: ${(props) => (props.$isMobile ? "50px" : "70px")}; + margin-bottom: ${(props) => (props.$isApp ? "30px" : props.$isMobile ? "50px" : "70px")}; `; export const UnionTextContainer = styled.div<{ $isMobile: boolean; $isApp: boolean }>` diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx index 1f3509d..42266bd 100644 --- a/src/pages/Main/Union/Union.tsx +++ b/src/pages/Main/Union/Union.tsx @@ -7,7 +7,7 @@ export default function Union() { return ( - +

신입생이라서

어떤 트랙을 선택할지 고민되나요?

 From a40c0f97c42ed7d32d52091828d7352c0458b793 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 12:38:04 +0900 Subject: [PATCH 6/9] =?UTF-8?q?[Feat]=20MobileNav=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Main/FarmSyetemNav/MobileNav.styled.ts | 6 ++--- src/pages/Main/FarmSyetemNav/MobileNav.tsx | 24 ++++++++++++++----- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts index 10dccdf..dc8e853 100644 --- a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts +++ b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts @@ -16,7 +16,7 @@ export const MobileNavbar = styled.div<{ isNavOpen: boolean }>` width: 150px; border-radius: 20px 0px 20px 20px; -background: rgba(40, 114, 63, 0.7); + background: rgba(230, 230, 230, 0.7) `; export const MobileNavItem = styled.a` @@ -29,7 +29,7 @@ export const MobileNavItem = styled.a` `; export const MobileNavText = styled.p` - color: var(--FarmSystem_White, #FCFCFC); + color: #303030; text-align: center; font-size: 14px; font-style: normal; @@ -43,7 +43,7 @@ export const ExpandButton = styled.button` font-size: 24px; cursor: pointer; width: 80%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(50, 50, 50, 0.6); border-radius: 15px; display: flex; diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.tsx b/src/pages/Main/FarmSyetemNav/MobileNav.tsx index 7209914..d364f5d 100644 --- a/src/pages/Main/FarmSyetemNav/MobileNav.tsx +++ b/src/pages/Main/FarmSyetemNav/MobileNav.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import * as S from './MobileNav.styled'; import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io"; +import { motion, AnimatePresence } from "framer-motion"; interface MobileNavProps { currentSection: string; @@ -17,9 +18,14 @@ const navItems = [ { id: "eligibility", text: "지원 요건" }, ]; -export default function MobileNav({ currentSection, handleSmoothScroll }: MobileNavProps) { +export default function MobileNav({ + currentSection, + handleSmoothScroll, +}: MobileNavProps) { const [isNavOpen, setIsNavOpen] = useState(false); - const currentNavItem = navItems.find(item => item.id === currentSection) ?? navItems[0]; + const currentNavItem = + navItems.find((item) => item.id === currentSection) ?? navItems[0]; + return ( @@ -36,8 +42,13 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile )} - {isNavOpen && ( - <> + + {isNavOpen && ( + handleSmoothScroll(e, "#about")} @@ -62,8 +73,9 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile > 지원 요건 - - )} + + )} + {/* 확장/축소 버튼 */} setIsNavOpen((prev) => !prev)}> From 8f09d7327eb5f277a39dba5247d4fa11098f8105 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 12:47:34 +0900 Subject: [PATCH 7/9] =?UTF-8?q?[Fix]=20=EA=B8=B0=ED=83=80=20=EC=97=AC?= =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Achievements/Achievements.styles.ts | 2 +- src/pages/Main/Tracks/Tracks.styled.ts | 4 ++-- src/pages/Main/Tracks/Tracks.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts index dbb3706..ae13b47 100644 --- a/src/pages/Main/Achievements/Achievements.styles.ts +++ b/src/pages/Main/Achievements/Achievements.styles.ts @@ -107,7 +107,7 @@ export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet `; export const StatNumber = styled.div<{ $isApp: boolean; $isMobile: boolean }>` - font-size: ${({ $isApp, $isMobile }) => ($isApp ? "28px" : $isMobile ? "32px" : "48px")}; + font-size: ${({ $isApp, $isMobile }) => ($isApp ? "22px" : $isMobile ? "32px" : "48px")}; font-weight: bold; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); color: #fff; diff --git a/src/pages/Main/Tracks/Tracks.styled.ts b/src/pages/Main/Tracks/Tracks.styled.ts index d6f3912..b089e65 100644 --- a/src/pages/Main/Tracks/Tracks.styled.ts +++ b/src/pages/Main/Tracks/Tracks.styled.ts @@ -9,13 +9,13 @@ export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean }>` `; -export const CenterContainer = styled.div` +export const CenterContainer = styled.div<{ $isApp: boolean; $isMobile: boolean }>` max-width: 1170px; display: flex; flex-direction: column; justify-content: center; align-items: center; - margin-top: 100px; + margin-top: ${({ $isMobile }) => ($isMobile ? "50px" : "100px")}; `; export const Title = styled.h2 <{ $isMobile: boolean }>` diff --git a/src/pages/Main/Tracks/Tracks.tsx b/src/pages/Main/Tracks/Tracks.tsx index 9605493..aed6cf0 100644 --- a/src/pages/Main/Tracks/Tracks.tsx +++ b/src/pages/Main/Tracks/Tracks.tsx @@ -7,7 +7,7 @@ import useMediaQueries from "@/hooks/useMediaQueries"; export default function Tracks() { const [selectedTrack, setSelectedTrack] = useState(TracksData[0]); - const { isMobile, isTablet } = useMediaQueries(); + const { isApp, isMobile, isTablet } = useMediaQueries(); const handleSmoothScroll = (event: React.MouseEvent, targetId: string) => { @@ -24,7 +24,7 @@ export default function Tracks() { return ( - + 트랙 및 커리큘럼 handleSmoothScroll(e, "#union")} $isMobile={isMobile}> From 61b0066d09cce1b12a67b0e3a10eb553f55db403 Mon Sep 17 00:00:00 2001 From: parkjoohyung Date: Mon, 17 Feb 2025 13:04:06 +0900 Subject: [PATCH 8/9] =?UTF-8?q?[Feat]=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20about=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Intro/Intro.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Main/Intro/Intro.tsx b/src/pages/Main/Intro/Intro.tsx index 654a3b6..3b14e03 100644 --- a/src/pages/Main/Intro/Intro.tsx +++ b/src/pages/Main/Intro/Intro.tsx @@ -20,7 +20,7 @@ const Intro = () => { if (isApp) { return ( - + Date: Mon, 17 Feb 2025 13:10:28 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=EB=B0=94=20?= =?UTF-8?q?=ED=8E=BC=EC=B9=A8=20=EC=83=81=ED=83=9C=EC=9D=BC=20=EB=95=8C,?= =?UTF-8?q?=20=EC=95=88=EC=A7=80=EC=9B=8C=EC=A7=80=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/FarmSyetemNav/MobileNav.styled.ts | 4 ++-- src/pages/Main/FarmSyetemNav/MobileNav.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts index dc8e853..7e7c78e 100644 --- a/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts +++ b/src/pages/Main/FarmSyetemNav/MobileNav.styled.ts @@ -1,13 +1,13 @@ import styled from 'styled-components'; -export const MobileNavbar = styled.div<{ isNavOpen: boolean }>` +export const MobileNavbar = styled.div<{ isNavOpen: boolean, isAbout: boolean }>` max-height: ${({ isNavOpen }) => (isNavOpen ? "300px" : "80px")}; overflow: hidden; transition: max-height 0.1s ease-in-out; display: inline-flex; - height: auto; + height: ${({ isAbout }) => (isAbout ? "0px" : "auto")}; padding: 10px 10px; flex-direction: column; justify-content: center; diff --git a/src/pages/Main/FarmSyetemNav/MobileNav.tsx b/src/pages/Main/FarmSyetemNav/MobileNav.tsx index d364f5d..29e5fee 100644 --- a/src/pages/Main/FarmSyetemNav/MobileNav.tsx +++ b/src/pages/Main/FarmSyetemNav/MobileNav.tsx @@ -28,7 +28,7 @@ export default function MobileNav({ return ( - + {/* isNavOpen이 false면 첫 번째 메뉴만 보이게, true면 모든 메뉴가 보이게 설정