[S0] 배포 후 QA

src/views/AboutPage/components/CoreValue/Item/style.ts

@@ -7,15 +7,13 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
   color: white;
   position: relative;
 
-  max-width: 380px;
-  width: calc(230px + 7.8vw);
-  max-height: 323px;
-  height: calc(196px + 6.6vw);
+  width: 380px;
+  height: 323px;
 
   padding: min(35.98px, 5vw) 0 min(80.5px, 4.19vw) 0;
   border-radius: 10px;
   background: center bottom 0px no-repeat #181818 url(${({ src }) => src});
-  background-size: min(170px + 7vw) min(170px + 7vw);
+  background-size: calc(170px + 7vw);
 
   opacity: 0;
 
@@ -30,16 +28,14 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
 
   /* 태블릿 뷰 */
   @media (max-width: 768px) {
-    width: 380px;
-    height: 323px;
     background-size: 90%;
     background-position: center bottom -20px;
   }
 
   /* 모바일 뷰 */
   @media (max-width: 428px) {
-    width: 268.769px;
-    height: 228.454px;
+    width: 269px;
+    height: 228px;
     background-position: center bottom -20px;
   }
 `;
@@ -142,7 +138,7 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>`
   white-space: pre-line;
   word-break: keep-all;
 
-  width: 237.081px;
+  width: 237px;
   height: 117px;
 
   display: flex;
@@ -153,7 +149,7 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>`
   color: #fff;
   text-align: center;
   font-family: SUIT;
-  font-size: min(23px, calc(17px + 0.26vw));
+  font-size: 23px;
 
   font-style: normal;
   font-weight: 500;
@@ -163,11 +159,6 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>`
   opacity: 0;
   ${({ isHovered }) => isHovered && 'opacity: 1'};
 
-  /* 태블릿 뷰 */
-  @media (max-width: 768px) {
-    font-size: 23px;
-    line-height: 39px;
-  }
 
   /* 모바일 뷰 */
   @media (max-width: 428px) {

src/views/MainPage/components/Banner/RecruitButton/style.ts

@@ -9,14 +9,7 @@ export const RecruitButtonWrapper = styled(Link)`
   justify-content: center;
   align-items: center;
   border-radius: 99px;
-  background: radial-gradient(
-      9.16% 35.18% at 50% 50%,
-      rgba(112, 149, 185, 0) 0%,
-      rgba(184, 200, 216, 0) 100%
-    ),
-    linear-gradient(274deg, #BDEC00 10.57%, #F0FFB6 100%);
-
-  background-size: 200% 200%;
+  background: linear-gradient(274deg, #BDEC00 10%, #F0FFB6 100%);
   animation: ${BackgroundMove} 3s linear 0s infinite alternate;
   color: ${colors.gray800};
   text-align: center;
@@ -33,6 +26,10 @@ export const RecruitButtonWrapper = styled(Link)`
     line-height: 28px; /* 155.556% */
     letter-spacing: -0.36px;
   }
+
+  &:hover {
+    background: #F0FFAA;
+  }
 `;
 
 export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
@@ -48,7 +45,7 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
   justify-content: center;
 
   /* 모바일 뷰 */
-  @media (max-width: 375px) {
+  @media (max-width: 428px) {
     padding: 15px 18px;
     height: 44px;
   }
@@ -61,18 +58,13 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
     right: 0;
     bottom: 0;
     background-image: radial-gradient(
-        circle 36px at ${(props) => props.x}px ${(props) => props.y}px,
-        #3e5e7d90,
-        transparent
-      ),
-      radial-gradient(
-        circle 80px at ${(props) => props.x}px ${(props) => props.y}px,
-        #3e5e7d50,
+        circle 110px at ${(props) => props.x}px ${(props) => props.y}px,
+        #BDEC00,
         transparent
       ),
       radial-gradient(
-        circle 108px at ${(props) => props.x}px ${(props) => props.y}px,
-        #3e5e7d50,
+        circle 180px at ${(props) => props.x}px ${(props) => props.y}px,
+        #FDFFAA,
         transparent
       );
     opacity: 0;

src/views/MainPage/components/RecruitMessage/index.tsx

@@ -1,16 +1,14 @@
 import { useIsMobile } from '@src/hooks/useDevice';
 import * as S from './style';
+import RecruitButton from '../Banner/RecruitButton';
 
 export default function RecruitMessage() {
   const isMobileSize = useIsMobile('768px');
 
   return (
     <S.Background>
       <S.Title>SOPT의 34번째 {isMobileSize && <br />} 열정이 되어주세요!</S.Title>
-      <S.Description>
-        아직 모집기간이 아니에요. {isMobileSize && <br />} 알림 신청을 하시면, 봄에 찾아갈게요!
-      </S.Description>
-      <S.GoToRecruit href="/recruit">모집시 알림 받기</S.GoToRecruit>
+      <RecruitButton>34기 YB 지원하기 &gt; </RecruitButton>
     </S.Background>
   );
 }

src/views/MainPage/components/TopBanner/style.ts

@@ -54,7 +54,7 @@ export const Wrapper = styled.section`
   width: 100%;
 
   /* 모바일 뷰 */
-  @media (max-width: 428px) {
+  @media (max-width: 570px) {
     flex-direction: column;
     justify-content: start;
     align-items: baseline;
@@ -82,9 +82,13 @@ export const Description = styled.div`
   font-weight: 500;
 
   /* 모바일 뷰 */
-  @media (max-width: 428px) {
+  @media (max-width: 570px) {
     justify-content: space-between;
     width: 100%;
+  }
+
+  /* 모바일 뷰 */
+  @media (max-width: 428px) {
     font-size: 11px;
   }
 `;

src/views/RecruitPage/components/ChapterInfo/index.tsx

@@ -1,20 +1,23 @@
-import styled from '@emotion/styled';
 import { useState } from 'react';
 import Flex from '@src/components/common/Flex';
 import { Part } from '@src/lib/types/universal';
 import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import TabBar from '../common/Tabs';
 import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import { infoMap } from './constants';
+import * as S from './style';
 
 const ChapterInfo = () => {
   const [selectedTab, setSelectedTab] = useState<Part>(Part.PLAN);
 
   return (
-    <Wrapper id="chapter-info">
+    <S.Wrapper id="chapter-info">
       <SectionTitleWrapper>
         <SectionTitleTranslate>Positions</SectionTitleTranslate>
-        <SectionTitle>{'SOPT 34기는 총 6개의 파트로 이루어져 있어요.'}</SectionTitle>
+        <S.SectionWrapper>
+          <SectionTitle>SOPT 34기는 </SectionTitle>
+          <SectionTitle>총 6개의 파트로 이루어져 있어요.</SectionTitle>
+        </S.SectionWrapper>
       </SectionTitleWrapper>
       <TabBar
         type="without-all"
@@ -23,132 +26,19 @@ const ChapterInfo = () => {
         amplitudeTrackingName={'click_recruit_description_part'}
       />
       <Flex dir="column" gap="15px">
-        <BlueChip>{parsePartToKorean(selectedTab)} 파트는 이런 걸 배워요</BlueChip>
-        <InfoWrapper>{infoMap[selectedTab].info}</InfoWrapper>
+        <S.BlueChip>{parsePartToKorean(selectedTab)} 파트는 이런 걸 배워요</S.BlueChip>
+        <S.Container><S.InfoWrapper>{infoMap[selectedTab].info}</S.InfoWrapper></S.Container>
       </Flex>
       <Flex dir="column" gap="15px">
-        <GreenChip>이런 분이면 좋아요!</GreenChip>
-        <FitWrapper>
+        <S.GreenChip>이런 분이면 좋아요!</S.GreenChip>
+        <S.Container><S.FitWrapper>
           {infoMap[selectedTab].fit.map((fit, idx) => (
             <div key={idx}>{fit}</div>
           ))}
-        </FitWrapper>
+        </S.FitWrapper></S.Container>
       </Flex>
-    </Wrapper>
+    </S.Wrapper>
   );
 };
 
-const BaseChip = styled.div`
-  line-height: 42px;
-  font-size: 22px;
-
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    font-size: 18px;
-  }
-
-  @media (max-width: 765.9px) {
-    line-height: 18px;
-    font-size: 12px;
-  }
-`;
-
-const BlueChip = styled(BaseChip)`
-  color: #fff;
-  &:before {
-    content: '✏️';
-    padding: 0px 10px;
-  }
-`;
-
-const GreenChip = styled(BaseChip)`
-  color: #BDEC00;
-  &:before {
-    content: '👍';
-    padding: 0px 10px;
-  }
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 70px;
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    gap: 40px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
-    gap: 24px;
-  }
-`;
-
-const BaseText = styled.div`
-  color: #fff;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 40px; /* 142.857% */
-  letter-spacing: -0.28px;
-  white-space: pre-line;
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 27px */
-    letter-spacing: -0.18px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 27px */
-    letter-spacing: -0.18px;
-  }
-`;
-
-const InfoWrapper = styled(BaseText)`
-  border-radius: 30px;
-  background: #222220;
-  padding: 48px 80px;
-
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    padding: 24px 40px;
-    border-radius: 24px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
-    padding: 18px 30px;
-    border-radius: 20px;
-  }
-`;
-
-const FitWrapper = styled(BaseText)`
-  border-radius: 30px;
-  background: #21270F;
-  padding: 60px 80px;
-  display: flex;
-  flex-direction: column;
-  line-height: 40px;
-  gap: 12px;
-  & div::before {
-    content: '-';
-    padding-right: 10px;
-  }
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    padding: 30px 40px;
-    border-radius: 24px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
-    padding: 21px 28px;
-    gap: 8px;
-    border-radius: 20px;
-  }
-`;
-
 export default ChapterInfo;