fix: 인트로 웹뷰 반응형 적용 및 줄글 삭제

Author: dewbeeny

src/pages/Main/Intro/Intro.styled.tsx

@@ -136,12 +136,12 @@ export const AppApplyButton = styled.div`
 `;
 
 export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
-  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "100vh" : $isTablet ? "100vh" : "90vh")};
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "80vh" : $isTablet ? "100vh" : "90vh")};
+  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "80vh" : $isTablet ? "100vh" : "100vh")};
   background: linear-gradient(90deg, #102C19, #194326);
   padding: ${({ $isMobile }) => ($isMobile ? "0px" : "50px")};
   color: white;
@@ -150,10 +150,9 @@ export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
 export const Logo = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   display: flex;
   align-items: center;
-  font-size: 5vw;
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "50px" : $isTablet ? "60px" : "75px")};
   font-weight: 800;
-  margin-bottom: 20px;
-  margin-left: 50px;
+  margin-left: ${({ $isMobile, $isTablet }) => ($isMobile || $isTablet ? "20px" : "0")};
   img {
     width: ${({ $isMobile, $isTablet }) => ($isMobile ? "100px" : $isTablet ? "140px" : "180px")};
     height: auto;
@@ -230,25 +229,25 @@ export const Apply = styled.div`
 `;
 
 export const ApplyButton = styled.button<{ $isMobile: boolean; $isTablet: boolean }>`
-  background-color: #4CAF50;
+  background-color:rgb(74, 151, 76);
   color: white;
   border: none;
-  padding: ${({ $isMobile, $isTablet }) => ($isMobile ? "10px 50px" : $isTablet ? "12px 65px" : "15px 80px")};
+  padding: ${({ $isMobile, $isTablet }) => ($isMobile ? "8px 40px" : $isTablet ? "10px 55px" : "12px 70px")};
   border-radius: 10px;
-  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "18px" : $isTablet ? "22px" : "24px")};
-  margin-top: 20px;
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "16px" : $isTablet ? "20px" : "22px")};
+  margin-top: 100px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   
   &:hover {
     background-color: #388E3C;
   }
 `;
 
-export const ApplyDescription = styled.div<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "16px")};
+export const ApplyDescription = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "13px" : $isTablet ? "17px" : "20px")};
   margin-top: 15px;
   color: #E8F5E9;
-  text-align: center;
+  text-align: left;
 `;
 
 export const Bud = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`

src/pages/Main/Intro/Intro.tsx

@@ -135,26 +135,36 @@ SW/AI의 핵심 개념을 익히고, <S.greenHighlight>탄탄한 기초를 바
 
   return (
     <S.Container id="about" $isMobile={isMobile} $isTablet={isTablet}>
-      <S.Bud $isMobile={isMobile} $isTablet={isTablet}>🌱</S.Bud>
-      <S.Description $isMobile={isMobile} $isTablet={isTablet}>
-        미래를 준비하고 성장하는 여정, <br />
-        Farm System에서 함께하세요.
-      </S.Description>
-      <S.Logo $isMobile={isMobile} $isTablet={isTablet}>
-        <img src={logo} alt="" />
-        Farm System
-      </S.Logo>
-
-      <S.TrackList $isMobile={isMobile} $isTablet={isTablet}>
+      <motion.div
+        initial={{ opacity: 0, y: -50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1 }}
+      >
+        <S.Logo $isMobile={isMobile} $isTablet={isTablet}>
+          <img src={logo} alt="Farm System Logo" />
+          Farm System
+        </S.Logo>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, delay: 0.5 }}
+      >
+        <S.Description $isMobile={isMobile} $isTablet={isTablet}>
+          미래를 준비하고 성장하는 여정,
+          Farm System에서 함께하세요.
+        </S.Description>
+        <S.Apply>
+        <S.ApplyButton $isMobile={isMobile} $isTablet={isTablet} onClick={() => setPopupOpen(true)}> 지원하기 </S.ApplyButton>
+        <S.ApplyDescription $isMobile={isMobile} $isTablet={isTablet}>2025년 2월 공개 모집 예정</S.ApplyDescription>
+      </S.Apply>
+      </motion.div>
+      {/* <S.TrackList $isMobile={isMobile} $isTablet={isTablet}>
         SW/AI 분야에 관심있는 학생들로 구성된 <a>자율 학습 동아리</a>로, <br/>
         <a>Union · 게임/영상 · 보안/웹 · 사물인터넷/로봇 · 인공지능 · 빅데이터</a>의 <br/>
         5가지 신기술 트랙을 제공하여 학습 경험을 통해 SW/AI 역량을 배양합니다.
-      </S.TrackList>
-      <S.Apply>
-        <S.ApplyButton $isMobile={isMobile} $isTablet={isTablet} onClick={() => setPopupOpen(true)}> 지원하기 </S.ApplyButton>
-        <S.ApplyDescription $isMobile={isMobile}>2025년 2월 공개 모집 예정</S.ApplyDescription>
-      </S.Apply>
-
+      </S.TrackList> */}
+  
       {isPopupOpen && (
         <Popup 
           isOpen={isPopupOpen}