[26기] Yapp 공식 웹페이지 1차 개선 버그 수정 (#178)

Author: ppinppini

components/home/Dday/index.tsx

@@ -91,35 +91,48 @@ const DdayContainer = styled.div`
   position: relative;
   display: flex;
   gap: 12px;
+  ${media.small} {
+    gap: 4px;
+  }
 `;
 const StyledBox = styled(Box)`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  ${media.tablet} {
+  ${media.mobile} {
     width: 151.75px;
     height: 147px;
   }
-  ${media.mobile} {
+  ${media.small} {
     width: 64.75px;
     height: 81px;
+    border-radius: 8px;
   }
 `;
 const TimeSpan = styled.span`
   color: ${({ theme }) => theme.palette.blue_100};
   font-weight: 700;
   font-size: 6rem;
-  ${media.mobile} {
+  line-height: 140%;
+
+  ${media.small} {
+    line-height: 160%;
+    letter-spacing: -2%;
     font-size: 2.4rem;
   }
 `;
 const TimeText = styled.span`
   color: ${({ theme }) => theme.palette.grey_400};
   font-weight: 600;
   font-size: 2.6rem;
-  ${media.mobile} {
+  line-height: 100%;
+  letter-spacing: -2%;
+
+  ${media.small} {
     font-size: 1.5rem;
+    line-height: 130%;
+    letter-spacing: 0%;
   }
 `;
 const Dot = styled.div`
@@ -130,8 +143,9 @@ const Dot = styled.div`
   line-height: 160%;
   display: flex;
   align-items: center;
-  margin: 0 0.4rem;
-  ${media.mobile} {
+
+  ${media.small} {
+    width: 7px;
     font-size: 2.4rem;
   }
 `;

components/home/IntroSection/Banner26th.tsx

@@ -29,15 +29,15 @@ const Banner26th = () => {
         <StyledButton
           width={265}
           height={72}
-          borderRadius={20}
+          borderRadius={16}
           buttonColor={'blue_100'}
           fontColor={'white'}
           onClick={() => (window.location.href = NEXT_GENERATION_RECRUIT_LINK)}
         >
           ⏰ 26기 모집 알림 신청하기
         </StyledButton>
       </Banner25thTextContentBox>
-      <BannerBackgroundInner className={mounted ? 'appear' : ''} />;
+      <BannerBackgroundInner className={mounted ? 'appear' : ''} />
     </>
   );
 };
@@ -103,6 +103,9 @@ const Banner25thTextContentBox = styled.div`
     transform: translate3d(-50%, 0, 0);
     opacity: 1;
   }
+  ${media.small} {
+    gap: 4rem;
+  }
 `;
 
 const BannerTitleBox = styled.div`
@@ -122,18 +125,13 @@ const BannerTitleBox = styled.div`
     letter-spacing: -0.07rem;
     color: ${({ theme }) => theme.palette.black};
   }
-  ${media.mobile} {
-    & > h3 {
-      font-size: 3.6rem;
-      letter-spacing: -0.032rem;
-    }
-  }
+
   ${media.small} {
     top: 20%;
     gap: 1rem;
 
     & > h3 {
-      font-size: 2rem;
+      font-size: 3.6rem;
       letter-spacing: -0.032rem;
     }
   }
@@ -156,17 +154,24 @@ const BannerRecruitDateBox = styled.div`
 const YappuLogoBox = styled(YappuLogo)``;
 
 const YappSubTitleBox = styled.div`
-  font-size: 2.8rem;
+  font-size: 2.6rem;
+  font-weight: 600;
   color: ${({ theme }) => theme.palette.grey_700};
   margin-top: 1.4rem;
 
   ${media.small} {
+    font-size: 1.6rem;
   }
 `;
 
 const StyledButton = styled(Button)`
   ${media.mobile} {
+    font-size: 2rem;
+  }
+  ${media.small} {
+    font-size: 1.6rem;
     width: 229px;
     height: 59px;
+    border-radius: 12px;
   }
 `;

components/home/IntroSection/index.tsx

@@ -1,4 +1,3 @@
-import { FloatingArrow } from 'components/common';
 import type { MouseEvent, ReactElement } from 'react';
 import { useState } from 'react';
 import styled from 'styled-components';
@@ -25,7 +24,6 @@ function IntroSection(): ReactElement {
       onMouseMove={handleMove}
     >
       <Banner26th />
-      <FloatingArrow />
     </IntroSectionContainer>
   );
 }
@@ -40,9 +38,12 @@ const IntroSectionContainer = styled.div`
   width: 100%;
   height: calc(100vh - 70px);
   @media (max-height: 874px) {
-    height: 110vh;
+    height: 120vh;
   }
   ${media.mobile} {
+    height: 120vh;
+  }
+  ${media.small} {
     height: calc(100vh - 64px);
   }
   overflow: hidden;