design: 리크루팅페이지 ChapterInfo 레이아웃 수정

sopt-makers · Mar 2, 2024 · 0b2aab0 · 0b2aab0
1 parent 370dd09
commit 0b2aab0
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 128 deletions.
diff --git a/src/views/RecruitPage/components/ChapterInfo/index.tsx b/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;
diff --git a/src/views/RecruitPage/components/ChapterInfo/style.ts b/src/views/RecruitPage/components/ChapterInfo/style.ts
@@ -0,0 +1,147 @@
+import styled from '@emotion/styled';
+
+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: 16px;
+  }
+`;
+
+const BlueChip = styled(BaseChip)`
+  color: #fff;
+  padding-left: 20px;
+  &:before {
+    content: '✏️';
+    padding-right: 10px;
+  }
+`;
+
+const GreenChip = styled(BaseChip)`
+  color: #BDEC00;
+  padding-left: 20px;
+  &:before {
+    content: '👍';
+    padding-right: 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;
+  letter-spacing: -0.48px;
+  white-space: pre-line;
+  /* 태블릿 뷰 */
+  @media (max-width: 1299px) and (min-width: 766px) {
+    font-size: 16px;
+    font-style: normal;
+    letter-spacing: -0.32px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {
+    font-size: 16px;
+    font-style: normal;
+    letter-spacing: -0.32px;
+  }
+`;
+
+const InfoWrapper = styled(BaseText)`
+  border-radius: 30px;
+  background: #222220;
+  padding: 45px 80px;
+  font-weight: 600;
+  line-height: 42px;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 1299px) and (min-width: 766px) {
+    width: 640px;
+    padding: 32px 56px;
+    border-radius: 20px;
+    line-height: 180%;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {
+    width: 323px;
+    padding: 22px 28px;
+    border-radius: 20px;
+    line-height: 170%;
+  }
+`;
+
+const FitWrapper = styled(BaseText)`
+  border-radius: 30px;
+  background: #21270F;
+  padding: 60px 80px;
+  display: flex;
+  flex-direction: column;
+  line-height: 40px;
+  gap: 12px;
+  width: 100%;
+
+  font-weight: 400;
+  line-height: 50px;
+
+  & div {
+    padding-left: 14px;
+    text-indent: -14px;
+  }
+
+  & div::before {
+    content: '-';
+    padding-right: 5px;
+  }
+  /* 태블릿 뷰 */
+  @media (max-width: 1299px) and (min-width: 766px) {
+    width: 640px;
+    padding: 32px 56px;
+    border-radius: 24px;
+    line-height: 180%;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {
+    width: 323px;
+    padding: 22px 28px;
+    gap: 8px;
+    border-radius: 20px;
+    line-height: 170%;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+const SectionWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+
+  @media (max-width: 765.9px) {
+    flex-direction: column;
+  }
+`;
+
+export { BaseChip, BaseText, BlueChip, GreenChip, FitWrapper, InfoWrapper, Wrapper, Container, SectionWrapper };
diff --git a/src/views/RecruitPage/components/common/Tabs/style.ts b/src/views/RecruitPage/components/common/Tabs/style.ts
@@ -4,7 +4,11 @@ export const TabBar = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 12px;
+  gap: 25px;
+
+  @media (max-width: 765.9px) {
+    gap: 10px;
+  }
 `;
 
 export const Tab = styled.div<{ selected: boolean }>`
@@ -14,17 +18,21 @@ export const Tab = styled.div<{ selected: boolean }>`
   border-radius: 10px;
   color: ${({ selected }) => (selected ? '#FFFFFF' : '#cccccc')};
   background-color: ${({ selected }) => (selected ? '#222220' : 'inherit')};
-  font-size: 18px;
+  font-size: 23px;
 
-  min-width: 160px;
+  min-width: 121px;
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
 
-  /* 태블릿 뷰 */
+  @media (max-width: 1299px) and (min-width: 766px) {
+    padding: 12px 0;
+    font-size: 14px;
+  }
+
   @media (max-width: 765.9px) {
-    min-width: 72px;
+    min-width: 101px;
     padding: 12px 0;
-    font-size: 12px;
+    font-size: 16px;
   }
 `;