DguFarmSystem · karpitony · Feb 17, 2025 · Feb 16, 2025 · Feb 16, 2025 · Feb 17, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git 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 ? "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/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 (
     <S.AchievementsContainer id="achievements" $isMobile={isMobile} $isTablet={isTablet}>
       <S.TitleArea $isMobile={isMobile}>
-        <S.Title $isMobile={isMobile} $isTablet={isTablet}>
-          2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 함께 성장하고 이루어낸 성과입니다.
-        </S.Title>
+        {isApp ? (
+          <S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
+            2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 <br/> 함께 성장하고 이루어낸 성과입니다.
+          </S.Title>
+        ) : (
+          <S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
+            2024년 <S.Highlight>Farm System 3기</S.Highlight>에서 함께 성장하고 이루어낸 성과입니다.
+          </S.Title>
+        )}
       </S.TitleArea>
 
       <S.SliderWrapper $isMobile={isMobile} $isTablet={isTablet}>
@@ -98,8 +104,8 @@ const Achievements = () => {
            { number: "140개", label: "프로젝트" },
            { number: "80개", label: "스터디" },
            { number: "20회", label: "수상 경험" } ].map((stat, index) => (
-          <S.StatBox key={index} index={index} $isMobile={isMobile} $isTablet={isTablet}>
-            <S.StatNumber $isMobile={isMobile}>{stat.number}</S.StatNumber>
+          <S.StatBox key={index} index={index} $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
+            <S.StatNumber $isApp={isApp} $isMobile={isMobile}>{stat.number}</S.StatNumber>
             <S.StatLabel $isMobile={isMobile}>{stat.label}</S.StatLabel>
           </S.StatBox>
         ))}

diff --git 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
@@ -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 (
     <S.BottomInfoContainer id="eligibility" $isMobile={isMobile} $isTablet={isTablet}>
-      <S.Title $isMobile={isMobile} $isTablet={isTablet}>
+      <S.Title $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>
         <S.Highlight>Farm System</S.Highlight>을 더 알아가고 싶나요?
       </S.Title>
 
@@ -35,21 +35,21 @@ const BottomInfo = () => {
       </S.IconsContainer>
 
       <S.RequirementsBox $isMobile={isMobile} $isTablet={isTablet}>
-        <S.RequirementsTitle $isMobile={isMobile} $isTablet={isTablet}>지원 요건</S.RequirementsTitle>
+        <S.RequirementsTitle $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet}>지원 요건</S.RequirementsTitle>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>- 누구나 환영해요!</S.RequirementTitle>
-          <S.RequirementText $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱</S.RequirementText>
+          <S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 누구나 환영해요!</S.RequirementTitle>
+          <S.RequirementText $isApp={isApp} $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱</S.RequirementText>
         </S.RequirementItem>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>- 월요일 저녁, 같이 성장해요.</S.RequirementTitle>
-          <S.RequirementText $isMobile={isMobile}>매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? </S.RequirementText>
+          <S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 월요일 저녁, 같이 성장해요.</S.RequirementTitle>
+          <S.RequirementText $isApp={isApp} $isMobile={isMobile}>매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? </S.RequirementText>
         </S.RequirementItem>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>- 언제 모집하나요?</S.RequirementTitle>
-          <S.RequirementText $isMobile={isMobile}>2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
+          <S.RequirementTitle $isApp={isApp} $isMobile={isMobile}>- 언제 모집하나요?</S.RequirementTitle>
+          <S.RequirementText $isApp={isApp} $isMobile={isMobile}>2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
         </S.RequirementItem>
-        <S.ButtonContainer>
-          <S.ApplyButton $isMobile={isMobile} onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
+        <S.ButtonContainer $isApp={isApp} $isMobile={isMobile}>
+          <S.ApplyButton $isApp={isApp} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
         </S.ButtonContainer>
         <S.NotificationContainer $isMobile={isMobile}>
           <S.NotificationLink $isMobile={isMobile} href={googleFormLink} target="_blank" rel="noopener noreferrer">

diff --git 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;
@@ -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
@@ -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,16 +18,21 @@ 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];
+
 
   if(currentSection === "about") {
     return null;
   }
 
   return (
-    <S.MobileNavbar isNavOpen={isNavOpen}>
+    <S.MobileNavbar isNavOpen={isNavOpen} isAbout={currentSection === "about"}>
       {/* 
         isNavOpen이 false면 첫 번째 메뉴만 보이게, 
         true면 모든 메뉴가 보이게 설정 
@@ -40,8 +46,13 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile
         </S.MobileNavItem>
       )}
 
-      {isNavOpen && (
-        <>
+      <AnimatePresence>
+        {isNavOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+          >
           <S.MobileNavItem
             href="#about"
             onClick={(e) => handleSmoothScroll(e, "#about")}
@@ -66,8 +77,9 @@ export default function MobileNav({ currentSection, handleSmoothScroll }: Mobile
           >
             <S.MobileNavText>지원 요건</S.MobileNavText>
           </S.MobileNavItem>
-        </>
-      )}
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* 확장/축소 버튼 */}
       <S.ExpandButton onClick={() => setIsNavOpen((prev) => !prev)}>