Merge pull request #29 from DguFarmSystem/Feature/#27

Feature/#27
DguFarmSystem · Feb 16, 2025 · 16a7342 · 16a7342
2 parents b70dee1 + 9450e42
commit 16a7342
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.9",
+    "framer-motion": "^12.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",

diff --git a/src/assets/Icons/FarmLogo1.png b/src/assets/Icons/FarmLogo1.png
diff --git a/src/assets/Icons/IntroLogo.svg b/src/assets/Icons/IntroLogo.svg
diff --git a/src/hooks/useMediaQueries.ts b/src/hooks/useMediaQueries.ts
@@ -5,16 +5,20 @@ const useMediaQueries = () => {
    * Union 작업중 콘텐츠 박스에서 767보다 더 작은 크기 조절이 필요해서 isTiny를 추가했습니다.
    * 반응형 작업하실 때 한번더 봐주시고 고쳐주시면 좋을거 같습니다. 
   */
-  const isTiny = useMediaQuery({ query: "(max-width: 385px)" })
+  const isTiny = useMediaQuery({ query: "(max-width: 385px)" });
+  const isApp = useMediaQuery({ query: "(max-width: 440px)"});
   const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
   const isTablet = useMediaQuery({
     query: "(min-width: 768px) and (max-width: 1023px)",
   });
+  const isIpadPro = useMediaQuery({
+    query: "(min-width: 700px) and (max-width: 1400px)",
+  });
   const isDesktop = useMediaQuery({
     query: "(min-width: 1024px)" 
   });
 
-  return { isTiny, isMobile, isTablet, isDesktop };
+  return { isTiny, isApp, isMobile, isTablet, isDesktop, isIpadPro };
 };
 
 export default useMediaQueries;
diff --git a/src/pages/Main/Intro/Intro.styled.tsx b/src/pages/Main/Intro/Intro.styled.tsx
@@ -1,19 +1,87 @@
 import styled from 'styled-components';
 
-export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
+export const AppContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 160vh;
+    background: linear-gradient(90deg, #102C19, #194326);
+    color: white;
+    text-align: center;
+    padding: 0 20px;
+`;
+
+export const TopSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    margin-top: 5vh;
+`;
+
+export const BottomSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    margin-bottom: 15vh;
+`;
+
+export const IntroPhrase = styled.p`
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+    padding-top: 10px;
+    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;
+    background-color: #28723F;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    color: white;
+    font-size: 13px;
+    font-weight: 500;
+    margin-top: 20px;
+`;
+
+export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean; $isApp: boolean, $isIpadPro: boolean }>`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    height: ${({ $isMobile, $isTablet }) => ($isMobile ? "80vh" : $isTablet ? "100vh" : "110vh")};
-    background: ${({ $isMobile }) => (
-        $isMobile ? "linear-gradient(90deg, #28723F, #75e298)" 
-        : "linear-gradient(90deg, #28723F, #A2E9B8)"
+    height: ${({ $isMobile, $isTablet, $isApp, $isIpadPro }) => 
+        $isMobile ? "75vh" : $isTablet ? "80vh" : $isApp ? "90vh" : $isIpadPro ? "105h" : "120vh"};
+    
+    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)"
     )};
+
     padding: ${({ $isMobile }) => ($isMobile ? "0px" : "50px")};
     color: white;
 `;
 
+
 /* 추가된 네비게이션 정렬용 스타일 */
 export const NavWrapper = styled.div`
     width: 100%;

diff --git a/src/pages/Main/Intro/Intro.tsx b/src/pages/Main/Intro/Intro.tsx
@@ -1,15 +1,98 @@
-import * as S from './Intro.styled.tsx';
-import logo from '../../../assets/FarmLogo.png';
+import * as S from './Intro.styled';
+import logo from '../../../assets/Icons/FarmLogo1.png';
 import { useState } from 'react';
-import Popup from '@/components/Popup/Popup.tsx';
-import useMediaQueries from '@/hooks/useMediaQueries.ts';
+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, isMobile, isTablet } = useMediaQueries();
-
+  const { isTiny, isApp, isMobile, isTablet, isIpadPro } = useMediaQueries();
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 30 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      y: 0,
+      transition: { delay: i * 0.3, duration: 0.6, ease: "easeOut" }
+    }),
+  };
+
+  if (isApp) {
+    return (
+      <S.AppContainer>
+        <S.TopSection>
+          <motion.img 
+            src={IntroLogo} 
+            alt="" 
+            initial="hidden"
+            animate="visible"
+            variants={fadeInUp}
+            custom={0} 
+          />
+
+          {["미래를 준비하고 성장하는 여정,", "Farm System에서 함께하세요."].map((text, index) => (
+            <S.IntroPhrase 
+              as={motion.div}
+              key={index}
+              variants={fadeInUp}
+              initial="hidden"
+              animate="visible"
+              custom={index + 2} 
+            >
+              {text}
+            </S.IntroPhrase>
+          ))}
+        </S.TopSection>
+
+        {/* 2/3 지점: Description - 화면에 들어올 때 애니메이션 적용 */}
+        <S.BottomSection>
+          {[
+            "Farm System은 SW/AI 분야에 관심있는",
+            "학생들로 구성된 자율 학습 동아리로,",
+            "Union · 게임/영상 · 보안/웹 ·",
+            "사물인터넷/로봇 · 인공지능 · 빅데이터의",
+            "5가지 신기술 트랙을 제공하여",
+            "학습 경험을 통해 SW/AI 역량을 배양합니다."
+          ].map((text, index) => (
+            <S.IntroDescription
+              as={motion.p}
+              key={index}
+              initial={{ color: "#333", clipPath: "inset(0 100% 0 0)" }} 
+              whileInView={{ color: "#ffffff", clipPath: "inset(0 0 0 0)" }}
+              transition={{ duration: 1.2, delay: index * 0.5, ease: "easeOut" }}
+              viewport={{ once: true }}
+            >
+              {text}
+            </S.IntroDescription>
+          ))}
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 3.5, ease: "easeOut" }} // description 마지막보다 살짝 더 늦게 실행
+            viewport={{ once: true }} // 한 번만 실행
+          >
+            <S.AppApplyButton onClick={() => setPopupOpen(true)}>
+              지원하기
+            </S.AppApplyButton>
+          </motion.div>
+        </S.BottomSection>
+
+
+        <Popup 
+          isOpen={isPopupOpen} 
+          onClose={() => setPopupOpen(false)} 
+          title={"지금은 모집 기간이 아닙니다."} 
+          content={"공개 모집 예정: 2025년 2월월"} 
+        />
+      </S.AppContainer>
+    );
+  }
+
   return (
-    <S.Container id="about" $isMobile={isMobile} $isTablet={isTablet}>
+    <S.Container id="about" $isApp={isApp} $isMobile={isMobile} $isTablet={isTablet} $isIpadPro={isIpadPro}>
       <S.Bud $isMobile={isMobile} $isTablet={isTablet}>🌱</S.Bud>
       <S.Description $isMobile={isMobile} $isTablet={isTablet}>
         미래를 준비하고 성장하는 여정, <br />
@@ -41,4 +124,4 @@ const Intro = () => {
   );
 };
 
-export default Intro;
+export default Intro;