[SP3] 메인페이지 QA 작업 (#331)

* style : word-break 지정 * chore : 오타 수정 * feat : 최근 뉴스 * style : 리쿠르팅 메시지 스타일 수정 * feat : 배너 버튼 커서 위치 수정 * feat : 배너 버튼 반응형
sopt-makers · Dec 22, 2023 · ff22482 · ff22482
1 parent f8fca92
commit ff22482
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 51 deletions.
diff --git a/src/assets/icons/ic_instagram.svg b/src/assets/icons/ic_instagram.svg
diff --git a/src/lib/constants/main.ts b/src/lib/constants/main.ts
@@ -48,7 +48,7 @@ export const Activity: ActivityListType = {
   [ActivityType.SOPKATHON]: {
     img: ImgSoptkaton.src,
     navKor: '솝커톤',
-    navEng: 'Sopkaton',
+    navEng: 'Sopkathon',
     description: [
       { content: '무박 2일 ', color: 'yellow' },
       {

diff --git a/src/views/MainPage/components/Activity/index.tsx b/src/views/MainPage/components/Activity/index.tsx
@@ -11,7 +11,7 @@ export default function CardHover() {
   return (
     <div>
       <Tab
-        tab={'(1) 기수내 정기 행사'}
+        tab={'(1) 기수 내 정기 행사'}
         title={'매 기수 진행되는, 다양한 활동들!'}
         description={
           'SOPT에서는 매 기수 내 정기적으로 진행되는 다양한 활동들이 있어요. \n 각 파트원들과 친목 및 실력을 쌓을 수 있는 행사들을 통해, SOPT를 보다 즐겨봅시다.'

diff --git a/src/views/MainPage/components/Banner/RecruitButton/index.tsx b/src/views/MainPage/components/Banner/RecruitButton/index.tsx
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { PropsWithChildren, useState } from 'react';
 import * as S from './style';
 
@@ -13,12 +12,10 @@ export default function RecruitButton({ children }: PropsWithChildren<object>) {
   };
 
   return (
-    <Link href="/recruit">
-      <S.RecruitButtonWrapper>
-        <S.MouseTrackerWrapper onMouseMove={handleMouseMove} x={blurPosition.x} y={blurPosition.y}>
-          <div>{children}</div>
-        </S.MouseTrackerWrapper>
-      </S.RecruitButtonWrapper>
-    </Link>
+    <S.RecruitButtonWrapper href="/recruit">
+      <S.MouseTrackerWrapper onMouseMove={handleMouseMove} x={blurPosition.x} y={blurPosition.y}>
+        <div>{children}</div>
+      </S.MouseTrackerWrapper>
+    </S.RecruitButtonWrapper>
   );
 }
diff --git a/src/views/MainPage/components/Banner/RecruitButton/style.ts b/src/views/MainPage/components/Banner/RecruitButton/style.ts
@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import Link from 'next/link';
 import { BackgroundMove } from '@src/lib/styles/animation';
 
-export const RecruitButtonWrapper = styled.div`
-  cursor: pointer;
-
+export const RecruitButtonWrapper = styled(Link)`
   margin-top: 40px;
   display: inline-flex;
   justify-content: center;
@@ -29,10 +28,6 @@ export const RecruitButtonWrapper = styled.div`
   /* 모바일 뷰 */
   @media (max-width: 375px) {
     margin-top: 28px;
-    display: flex;
-    width: 182px;
-    height: 44px;
-    padding: 15px 18px;
     font-size: 18px;
     line-height: 28px; /* 155.556% */
     letter-spacing: -0.36px;
@@ -42,12 +37,20 @@ export const RecruitButtonWrapper = styled.div`
 export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
   border-radius: 99px;
   border: none;
-  cursor: pointer;
   height: 60px;
   padding: 15px 28px;
   background: transparent;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    padding: 15px 18px;
+    height: 44px;
+  }
 
   &::before {
     content: '';

diff --git a/src/views/MainPage/components/RecentNews/index.tsx b/src/views/MainPage/components/RecentNews/index.tsx
@@ -23,7 +23,9 @@ function RecentNews(_props: unknown, ref: React.Ref<HTMLDivElement>) {
       </S.SliderWrapper>
       <S.GoToInstagram>
         <S.IcInstagram />
-        <S.Description>더 많은 소식이 궁금하다면</S.Description>
+        <S.Description href="https://www.instagram.com/sopt_official/">
+          더 많은 소식이 궁금하다면
+        </S.Description>
       </S.GoToInstagram>
     </div>
   );

diff --git a/src/views/MainPage/components/RecentNews/style.ts b/src/views/MainPage/components/RecentNews/style.ts
@@ -1,16 +1,17 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import Link from 'next/link';
 import Slider from 'react-slick';
 import { ReactComponent as IconInstagram } from '@src/assets/icons/ic_instagram.svg';
 
 export const TitleWrapper = styled.section`
-  margin-left: 78px;
+  margin-left: 10px;
 
   @media (max-width: 768px) and (min-width: 429px) {
-    margin-left: 48px;
+    margin-left: 16px;
   }
   @media (max-width: 428px) {
-    margin-left: 28px;
+    margin-left: 0px;
   }
 `;
 
@@ -74,7 +75,7 @@ export const SliderList = styled.ul`
   display: flex;
   position: relative;
   width: calc(313px * 10);
-  animation: desktopAutoPlay 7s linear infinite;
+  animation: desktopAutoPlay 10s linear infinite;
 
   @media (max-width: 768px) and (min-width: 429px) {
     width: calc(264px * 10);
@@ -141,16 +142,16 @@ export const GoToInstagram = styled.section`
 `;
 
 export const IcInstagram = styled(IconInstagram)`
-  width: 23px;
-  height: 23px;
+  width: 17px;
+  height: 17px;
 
   @media (max-width: 428px) {
     width: 12px;
     height: 12px;
   }
 `;
 
-export const Description = styled.p`
+export const Description = styled(Link)`
   color: #ededed;
   font-family: SUIT;
   font-size: 15.998px;
@@ -167,14 +168,15 @@ export const Description = styled.p`
     font-size: 9.194px;
     line-height: 15.436px; /* 167.895% */
     letter-spacing: -0.368px;
+    margin-left: 4px;
   }
 `;
 
 export const Gradient = styled.div`
-  width: 112.967px;
-  height: 380px;
+  width: 44.967px;
+  height: 382px;
   position: absolute;
-  top: 0;
+  top: -1px;
   z-index: 50;
   margin-top: 72px;
 
@@ -190,9 +192,10 @@ export const Gradient = styled.div`
 
 export const LeftGradient = styled(Gradient)`
   background: linear-gradient(90deg, #0d1120 12.15%, rgba(13, 17, 32, 0.01) 82.86%);
+  left: -1px;
 `;
 
 export const RightGradient = styled(Gradient)`
   background: linear-gradient(270deg, #0d1120 12.15%, rgba(13, 17, 32, 0.01) 82.86%);
-  right: 0;
+  right: -1px;
 `;
diff --git a/src/views/MainPage/components/RecruitMessage/style.ts b/src/views/MainPage/components/RecruitMessage/style.ts
@@ -2,35 +2,38 @@ import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 
 export const Background = styled.section`
-  height: 1100px;
+  margin-top: 400px;
+  margin-bottom: 800px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
   @media (max-width: 768px) and (min-width: 429px) {
-    height: 960px;
+    margin-top: 250px;
+    margin-bottom: 500px;
   }
 
   @media (max-width: 428px) {
-    height: 360px;
+    margin-top: 100px;
+    margin-bottom: 200px;
   }
 `;
 
 export const Title = styled.h1`
   color: ${colors.white};
   text-align: center;
   font-family: SUIT;
-  font-size: 40px;
+  font-size: 30px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 56px */
   letter-spacing: -0.8px;
   margin-bottom: 11px;
 
   @media (max-width: 768px) and (min-width: 429px) {
-    font-size: 34px;
+    font-size: 30px;
     letter-spacing: -0.68px;
   }
   @media (max-width: 428px) {
@@ -43,15 +46,14 @@ export const Description = styled.p`
   color: rgba(255, 255, 255, 0.7);
   text-align: center;
   font-family: SUIT;
-  font-size: 24px;
+  font-size: 22px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%; /* 33.6px */
   letter-spacing: -0.48px;
   margin-bottom: 75px;
 
   @media (max-width: 768px) and (min-width: 429px) {
-    font-size: 22px;
     line-height: 142%; /* 17.04px */
     letter-spacing: -0.24px;
     margin-bottom: 34px;
@@ -67,26 +69,22 @@ export const GoToRecruit = styled.a`
   border-radius: 25px;
   border: 2.218px solid #5b88f8;
   background: #40578d;
-  height: 83.701px;
-  padding: 27px 44px;
+  padding: 19px 31px;
   justify-content: center;
   align-items: center;
 
   color: #e8f1ff;
   font-family: SUIT;
-  font-size: 30px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: 30px; /* 100% */
   letter-spacing: -0.6px;
 
   @media (max-width: 768px) and (min-width: 429px) {
-    padding: 20.758px 33.828px;
     border-radius: 19.221px;
     border: 1.705px solid #5b88f8;
-    height: 64.352px;
 
-    font-size: 23px;
     line-height: 23.065px; /* 100.282% */
     letter-spacing: -0.46px;
   }

diff --git a/src/views/MainPage/components/Tab/style.ts b/src/views/MainPage/components/Tab/style.ts
@@ -42,6 +42,7 @@ export const Title = styled.h1`
   letter-spacing: -1.35px;
 
   margin-bottom: 16px;
+  word-break: keep-all;
 
   @media (max-width: 768px) and (min-width: 429px) {
     font-size: 36px;
@@ -63,6 +64,7 @@ export const Description = styled.p`
   font-weight: 400;
   line-height: 28px; /* 164.706% */
   letter-spacing: -0.68px;
+  word-break: keep-all;
 
   @media (max-width: 768px) and (min-width: 429px) {
     font-size: 16px;