Skip to content

Commit 72f5c04

Browse files
karpitonykarpitony
authored
Merge pull request #41 from DguFarmSystem/main
메인 진행상황 develop에 반영
2 parents 7673fc8 + 8255345 commit 72f5c04

File tree

15 files changed

+197
-126
lines changed

15 files changed

+197
-126
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export const TitleArea = styled.div<{ $isMobile: boolean}>`
1616
justify-content: ${({ $isMobile }) => ($isMobile ? "center" : "flex-start")};
1717
`;
1818

19-
export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
19+
export const Title = styled.h2<{ $isApp:boolean, $isMobile: boolean; $isTablet: boolean }>`
2020
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "340px" : $isTablet ? "510px" : "670px")};
21-
font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "24px" : $isTablet ? "36px" : "48px")};
21+
font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "21px" : $isMobile ? "24px" : $isTablet ? "36px" : "48px")};
2222
color: #191919;
2323
font-weight: bold;
2424
margin-bottom: 40px;
@@ -95,9 +95,9 @@ export const StatsContainer = styled.div<{ $isMobile: boolean }>`
9595

9696
const statColors = ["#62de88", "#5ccc7e", "#50b46f", "#48a164"];
9797

98-
export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet: boolean }>`
99-
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "270px")};
100-
height: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "250px")};
98+
export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet: boolean; $isApp: boolean}>`
99+
width: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "120px" : $isMobile ? "140px" : $isTablet ? "220px" : "270px")};
100+
height: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "120px" : $isMobile ? "140px" : $isTablet ? "220px" : "250px")};
101101
border-radius: 20px;
102102
background-color: ${({ index }) => statColors[index]}; /* 각 박스마다 다른 색상 적용 */
103103
display: flex;
@@ -106,8 +106,8 @@ export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet
106106
justify-content: center;
107107
`;
108108

109-
export const StatNumber = styled.div<{ $isMobile: boolean }>`
110-
font-size: ${({ $isMobile }) => ($isMobile ? "32px" : "48px")};
109+
export const StatNumber = styled.div<{ $isApp: boolean; $isMobile: boolean }>`
110+
font-size: ${({ $isApp, $isMobile }) => ($isApp ? "22px" : $isMobile ? "32px" : "48px")};
111111
font-weight: bold;
112112
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
113113
color: #fff;

‎src/pages/Main/Achievements/Achievements.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,19 @@ const settings = {
7272

7373

7474
const Achievements = () => {
75-
const { isMobile, isTablet } = useMediaQueries();
75+
const { isApp, isMobile, isTablet } = useMediaQueries();
7676
return (
7777
<S.AchievementsContainer id="achievements" $isMobile={isMobile} $isTablet={isTablet}>
7878
<S.TitleArea $isMobile={isMobile}>
79-
<S.Title $isMobile={isMobile} $isTablet={isTablet}>
80-
2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 함께 성장하고 이루어낸 성과입니다.
81-
</S.Title>
79+
{isApp ? (
80+
<S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
81+
2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 <br/> 함께 성장하고 이루어낸 성과입니다.
82+
</S.Title>
83+
) : (
84+
<S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
85+
2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 함께 성장하고 이루어낸 성과입니다.
86+
</S.Title>
87+
)}
8288
</S.TitleArea>
8389

8490
<S.SliderWrapper $isMobile={isMobile} $isTablet={isTablet}>
@@ -98,8 +104,8 @@ const Achievements = () => {
98104
{ number: "140개", label: "프로젝트" },
99105
{ number: "80개", label: "스터디" },
100106
{ number: "20회", label: "수상 경험" } ].map((stat, index) => (
101-
<S.StatBox key={index} index={index} $isMobile={isMobile} $isTablet={isTablet}>
102-
<S.StatNumber $isMobile={isMobile}>{stat.number}</S.StatNumber>
107+
<S.StatBox key={index} index={index} $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
108+
<S.StatNumber $isApp={isApp} $isMobile={isMobile}>{stat.number}</S.StatNumber>
103109
<S.StatLabel $isMobile={isMobile}>{stat.label}</S.StatLabel>
104110
</S.StatBox>
105111
))}

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export const BottomInfoContainer = styled.div<{ $isMobile: boolean; $isTablet: b
88
padding: ${({ $isMobile }) => ($isMobile ? "40px 0" : "60px 0")};
99
`;
1010

11-
export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
12-
width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )};
13-
font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "22px" : $isTablet ? "32px" : "36px")};
11+
export const Title = styled.h2<{ $isApp: boolean; $isMobile: boolean; $isTablet: boolean }>`
12+
width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )};
13+
font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "19px" : $isMobile ? "22px" : $isTablet ? "32px" : "36px")};
1414
color: #191919;
1515
font-weight: bold;
1616
text-align: center;
@@ -57,34 +57,34 @@ export const RequirementItem = styled.div`
5757
margin-bottom: 20px;
5858
`;
5959

60-
export const RequirementsTitle = styled.h3<{ $isMobile: boolean; $isTablet: boolean }>`
61-
font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "24px" : $isTablet ? "28px" : "32px")};
60+
export const RequirementsTitle = styled.h3<{ $isApp: boolean; $isMobile: boolean; $isTablet: boolean }>`
61+
font-size: ${({ $isApp, $isMobile, $isTablet }) => ($isApp ? "18px" : $isMobile ? "24px" : $isTablet ? "28px" : "32px")};
6262
color: #175321;
63-
margin-bottom: 40px;
63+
margin-bottom: ${({$isApp, $isMobile }) => ($isApp ? "10px" : $isMobile ? "20px" : "40px")};
6464
`;
6565

66-
export const RequirementTitle = styled.h4<{ $isMobile: boolean }>`
67-
font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")};
66+
export const RequirementTitle = styled.h4<{ $isApp: boolean; $isMobile: boolean }>`
67+
font-size: ${({ $isApp, $isMobile }) => ($isApp ? "14px" : $isMobile ? "18px" : "24px")};
6868
font-weight: bold;
6969
`;
7070

71-
export const RequirementText = styled.p<{ $isMobile: boolean }>`
72-
margin-top: 10px;
73-
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")};
74-
font-weight: 500;
71+
export const RequirementText = styled.p<{ $isApp: boolean; $isMobile: boolean }>`
72+
margin-top: ${({ $isApp, $isMobile }) => ($isApp ? "5px" : $isMobile ? "7px" : "10px")};
73+
font-size: ${({ $isApp, $isMobile }) => ($isApp ? "12px" : $isMobile ? "14px" : "20px")};
74+
font-weight: 300;
7575
`;
7676

77-
export const ButtonContainer = styled.div`
77+
export const ButtonContainer = styled.div<{ $isApp: boolean; $isMobile: boolean }>`
7878
display: flex;
7979
justify-content: flex-end;
80-
margin-top: 40px;
80+
margin-top: ${({$isApp, $isMobile }) => ($isApp ? "10px" : $isMobile ? "20px" : "40px")};
8181
`;
8282

83-
export const ApplyButton = styled.button<{ $isMobile: boolean }>`
84-
width: ${({ $isMobile }) => ($isMobile ? "180px" : "240px")};
83+
export const ApplyButton = styled.button<{ $isApp: boolean; $isMobile: boolean }>`
84+
width: ${({ $isApp, $isMobile }) => ($isApp ? "110px" : $isMobile ? "180px" : "240px")};
8585
background-color: #49aa59;
8686
color: #ffffff;
87-
font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "20px")};
87+
font-size: ${({ $isApp, $isMobile }) => ($isApp ? "14px" : $isMobile ? "18px" : "20px")};
8888
padding: 12px 24px;
8989
border: none;
9090
border-radius: 10px;

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import useMediaQueries from '@/hooks/useMediaQueries';
99

1010
const BottomInfo = () => {
1111
const [isPopupOpen, setPopupOpen] = useState(false);
12-
const { isMobile, isTablet } = useMediaQueries();
12+
const { isApp, isMobile, isTablet } = useMediaQueries();
1313

1414
const googleFormLink = "https://docs.google.com/forms/d/e/1FAIpQLSdaELf6PNpRSD18nPPcgH_934Wsm9Gju54P62vWlczusmRg3w/viewform";
1515

1616
return (
1717
<S.BottomInfoContainer id="eligibility" $isMobile={isMobile} $isTablet={isTablet}>
18-
<S.Title $isMobile={isMobile} $isTablet={isTablet}>
18+
<S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
1919
<S.Highlight>Farm System</S.Highlight>을 더 알아가고 싶나요?
2020
</S.Title>
2121

@@ -35,21 +35,21 @@ const BottomInfo = () => {
3535
</S.IconsContainer>
3636

3737
<S.RequirementsBox $isMobile={isMobile} $isTablet={isTablet}>
38-
<S.RequirementsTitle $isMobile={isMobile} $isTablet={isTablet}>지원 요건</S.RequirementsTitle>
38+
<S.RequirementsTitle $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>지원 요건</S.RequirementsTitle>
3939
<S.RequirementItem>
40-
<S.RequirementTitle $isMobile={isMobile}>- 누구나 환영해요!</S.RequirementTitle>
41-
<S.RequirementText $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱</S.RequirementText>
40+
<S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 누구나 환영해요!</S.RequirementTitle>
41+
<S.RequirementText $isApp={isApp} $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱</S.RequirementText>
4242
</S.RequirementItem>
4343
<S.RequirementItem>
44-
<S.RequirementTitle $isMobile={isMobile}>- 월요일 저녁, 같이 성장해요.</S.RequirementTitle>
45-
<S.RequirementText $isMobile={isMobile}>매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? </S.RequirementText>
44+
<S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 월요일 저녁, 같이 성장해요.</S.RequirementTitle>
45+
<S.RequirementText $isApp={isApp} $isMobile={isMobile}>매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? </S.RequirementText>
4646
</S.RequirementItem>
4747
<S.RequirementItem>
48-
<S.RequirementTitle $isMobile={isMobile}>- 언제 모집하나요?</S.RequirementTitle>
49-
<S.RequirementText $isMobile={isMobile}>2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
48+
<S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 언제 모집하나요?</S.RequirementTitle>
49+
<S.RequirementText $isApp={isApp} $isMobile={isMobile}>2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
5050
</S.RequirementItem>
51-
<S.ButtonContainer>
52-
<S.ApplyButton $isMobile={isMobile} onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
51+
<S.ButtonContainer $isApp={isApp} $isMobile={isMobile}>
52+
<S.ApplyButton $isApp={isApp} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
5353
</S.ButtonContainer>
5454
<S.NotificationContainer $isMobile={isMobile}>
5555
<S.NotificationLink $isMobile={isMobile} href={googleFormLink} target="_blank" rel="noopener noreferrer">

‎src/pages/Main/FarmSyetemNav/MobileNav.styled.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import styled from 'styled-components';
22

3-
export const MobileNavbar = styled.div<{ isNavOpen: boolean }>`
3+
export const MobileNavbar = styled.div<{ isNavOpen: boolean, isAbout: boolean }>`
44
max-height: ${({ isNavOpen }) => (isNavOpen ? "300px" : "80px")};
55
overflow: hidden;
66
transition: max-height 0.1s ease-in-out;
77
88
display: inline-flex;
99
10-
height: auto;
10+
height: ${({ isAbout }) => (isAbout ? "0px" : "auto")};
1111
padding: 10px 10px;
1212
flex-direction: column;
1313
justify-content: center;
@@ -16,7 +16,7 @@ export const MobileNavbar = styled.div<{ isNavOpen: boolean }>`
1616
width: 150px;
1717
1818
border-radius: 20px 0px 20px 20px;
19-
background: rgba(40, 114, 63, 0.7);
19+
background: rgba(230, 230, 230, 0.7)
2020
`;
2121

2222
export const MobileNavItem = styled.a`
@@ -29,7 +29,7 @@ export const MobileNavItem = styled.a`
2929
`;
3030

3131
export const MobileNavText = styled.p`
32-
color: var(--FarmSystem_White, #FCFCFC);
32+
color: #303030;
3333
text-align: center;
3434
font-size: 14px;
3535
font-style: normal;
@@ -43,7 +43,7 @@ export const ExpandButton = styled.button`
4343
font-size: 24px;
4444
cursor: pointer;
4545
width: 80%;
46-
background-color: rgba(0, 0, 0, 0.5);
46+
background-color: rgba(50, 50, 50, 0.6);
4747
border-radius: 15px;
4848
4949
display: flex;

‎src/pages/Main/FarmSyetemNav/MobileNav.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from 'react';
22
import * as S from './MobileNav.styled';
33
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
4+
import { motion, AnimatePresence } from "framer-motion";
45

56
interface MobileNavProps {
67
currentSection: string;
@@ -17,16 +18,21 @@ const navItems = [
1718
{ id: "eligibility", text: "지원 요건" },
1819
];
1920

20-
export default function MobileNav({ currentSection, handleSmoothScroll }: MobileNavProps) {
21+
export default function MobileNav({
22+
currentSection,
23+
handleSmoothScroll,
24+
}: MobileNavProps) {
2125
const [isNavOpen, setIsNavOpen] = useState(false);
22-
const currentNavItem = navItems.find(item => item.id === currentSection) ?? navItems[0];
26+
const currentNavItem =
27+
navItems.find((item) => item.id === currentSection) ?? navItems[0];
28+
2329

2430
if(currentSection === "about") {
2531
return null;
2632
}
2733

2834
return (
29-
<S.MobileNavbar isNavOpen={isNavOpen}>
35+
<S.MobileNavbar isNavOpen={isNavOpen} isAbout={currentSection === "about"}>
3036
{/*
3137
isNavOpen이 false면 첫 번째 메뉴만 보이게,
3238
true면 모든 메뉴가 보이게 설정
@@ -40,8 +46,13 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile
4046
</S.MobileNavItem>
4147
)}
4248

43-
{isNavOpen && (
44-
<>
49+
<AnimatePresence>
50+
{isNavOpen && (
51+
<motion.div
52+
initial={{ opacity: 0, height: 0 }}
53+
animate={{ opacity: 1, height: "auto" }}
54+
transition={{ duration: 0.3, ease: "easeInOut" }}
55+
>
4556
<S.MobileNavItem
4657
href="#about"
4758
onClick={(e) => handleSmoothScroll(e, "#about")}
@@ -66,8 +77,9 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile
6677
>
6778
<S.MobileNavText>지원 요건</S.MobileNavText>
6879
</S.MobileNavItem>
69-
</>
70-
)}
80+
</motion.div>
81+
)}
82+
</AnimatePresence>
7183

7284
{/* 확장/축소 버튼 */}
7385
<S.ExpandButton onClick={() => setIsNavOpen((prev) => !prev)}>

0 commit comments

Comments
 (0)