fix: fix styles

sopt-makers · Sep 3, 2023 · 1dcf057 · 1dcf057
1 parent 4d4e9f7
commit 1dcf057
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 36 deletions.
diff --git a/src/views/RecruitPage/RecruitPage.tsx b/src/views/RecruitPage/RecruitPage.tsx
@@ -37,7 +37,7 @@ const Root = styled.div`
   margin: 0 auto;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     margin-top: 90px;
   }
   /* 모바일 뷰 */
@@ -55,7 +55,7 @@ const ContentWrapper = styled.div`
   padding: 100px 0;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     width: 700px;
     gap: 120px;
   }

diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
@@ -3,7 +3,7 @@ import { ReactComponent as ArrowLeft } from '@src/views/MainPage/assets/arrow-le
 import { ReactComponent as ArrowRight } from '@src/views/MainPage/assets/arrow-right-28x28.svg';
 import ArrowRightWhite from '@src/views/MainPage/assets/arrow_right_white.svg';
 import { useHorizontalScroll } from '@src/views/MainPage/lib';
-import { SectionTitle } from '../common/styles';
+import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import useFetch from './hooks/useFetch';
 import {
   Arrow,
@@ -36,7 +36,10 @@ export function ActivityReview() {
   return (
     <ContainerWrapper>
       <TitleWrapper>
-        <SectionTitle>{'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}</SectionTitle>
+        <SectionTitleWrapper>
+          <SectionTitleTranslate>Activity Review</SectionTitleTranslate>
+          <SectionTitle>{'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}</SectionTitle>
+        </SectionTitleWrapper>
         <Link href="/review">
           <MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
         </Link>

diff --git a/src/views/RecruitPage/components/ApplySection/index.tsx b/src/views/RecruitPage/components/ApplySection/index.tsx
@@ -40,7 +40,7 @@ const ApplyButton = styled.a`
   background-color: #1dedae;
   z-index: 2;
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     font-size: 18px;
     width: 180px;
     padding: 20px 0;
@@ -62,8 +62,9 @@ const Title = styled.div`
   line-height: 140%; /* 60.2px */
   letter-spacing: -0.86px;
   z-index: 2;
+  word-break: keep-all;
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     font-size: 36px;
   }
   /* 모바일 뷰 */
@@ -98,7 +99,7 @@ const Wrapper = styled.div`
   background-repeat: no-repeat;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     padding-top: 0;
     height: 440px;
     background-size: auto 160px;

diff --git a/src/views/RecruitPage/components/ChapterInfo/index.tsx b/src/views/RecruitPage/components/ChapterInfo/index.tsx
@@ -2,27 +2,31 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { Part } from '@src/lib/types/universal';
 import TabBar from '../common/Tabs';
-import { SectionTitle } from '../common/styles';
+import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import { infoMap } from './constants';
 
 const ChapterInfo = () => {
   const [selectedTab, setSelectedTab] = useState<Part>(Part.PLAN);
 
   return (
-    <W>
-      <SectionTitle>{'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'}</SectionTitle>
+    <Wrapper>
+      <SectionTitleWrapper>
+        <SectionTitleTranslate>Positions</SectionTitleTranslate>
+        <SectionTitle>{'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'}</SectionTitle>
+      </SectionTitleWrapper>
       <TabBar type="without-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
+
       <InfoWrapper>{infoMap[selectedTab].info}</InfoWrapper>
       <FitWrapper>
         {infoMap[selectedTab].fit.map((fit, idx) => (
           <div key={idx}>- {fit}</div>
         ))}
       </FitWrapper>
-    </W>
+    </Wrapper>
   );
 };
 
-const W = styled.div`
+const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 70px;

diff --git a/src/views/RecruitPage/components/Contact/index.tsx b/src/views/RecruitPage/components/Contact/index.tsx
@@ -1,13 +1,21 @@
 import styled from '@emotion/styled';
 import Image from 'next/image';
-import { SectionSubTitle, SectionTitle } from '../common/styles';
+import {
+  SectionSubTitle,
+  SectionTitle,
+  SectionTitleTranslate,
+  SectionTitleWrapper,
+} from '../common/styles';
 import { contactInDisplayOrder, contactMap } from './constant';
 
 const Contact = () => {
   return (
     <div>
       <Wrapper>
-        <SectionTitle>문의하기</SectionTitle>
+        <SectionTitleWrapper>
+          <SectionTitleTranslate>Inquiry</SectionTitleTranslate>
+          <SectionTitle>문의하기</SectionTitle>
+        </SectionTitleWrapper>
         <SectionSubTitle>SOPT 지원에 대해 궁금한 것이 있나요?</SectionSubTitle>
       </Wrapper>
       <GridWrapper>

diff --git a/src/views/RecruitPage/components/FAQ/index.tsx b/src/views/RecruitPage/components/FAQ/index.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { ExtraPart, PartExtraType } from '@src/lib/types/universal';
 import QuestionBox from '@src/views/FAQPage/components/faq/QuestionBox';
 import TabBar from '../common/Tabs';
-import { SectionSubTitle, SectionTitle } from '../common/styles';
+import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import { faqMap } from './constant';
 
 const FaqInfo = () => {
@@ -19,8 +19,10 @@ const FaqInfo = () => {
   return (
     <W>
       <Wrapper>
-        <SectionTitle>FAQ</SectionTitle>
-        <SectionSubTitle>자주 묻는 질문</SectionSubTitle>
+        <SectionTitleWrapper>
+          <SectionTitleTranslate>FAQ</SectionTitleTranslate>
+          <SectionTitle>자주 묻는 질문</SectionTitle>
+        </SectionTitleWrapper>
       </Wrapper>
       <TabBar type="with-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
       {faqMap[selectedTab].map((info, index) => (

diff --git a/src/views/RecruitPage/components/NotificationSection/index.tsx b/src/views/RecruitPage/components/NotificationSection/index.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import axios from 'axios';
 import { useRef, useState } from 'react';
+import axios from 'axios';
 
 const NotificationSection = () => {
   const [isRegistered, setIsRegistered] = useState(false);
@@ -62,7 +62,7 @@ const Wrapper = styled.div`
   padding-top: 90px;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     padding-top: 0;
     height: 440px;
   }
@@ -83,7 +83,7 @@ const TitleText = styled.div`
   line-height: 140%;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     font-size: 30px;
   }
   /* 모바일 뷰 */
@@ -104,7 +104,7 @@ const FormWrapper = styled.form`
   padding: 15px 20px;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     height: 85px;
     padding: 13px 15px;
     max-width: 639px;
@@ -135,7 +135,7 @@ const Input = styled.input`
   }
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     font-size: 20px;
   }
   /* 모바일 뷰 */
@@ -161,7 +161,7 @@ const SubmitButton = styled.input`
   letter-spacing: -0.22px;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     width: 172px;
     font-size: 20px;
   }
@@ -182,7 +182,7 @@ const ConfirmText = styled.div<{ visible: boolean }>`
   color: rgba(255, 255, 255, 0.5);
 
   /* 태블릿 뷰 */
-  @media (max-width: 1199px) and (min-width: 766px) {
+  @media (max-width: 1299px) and (min-width: 766px) {
     font-size: 20px;
   }
   /* 모바일 뷰 */

diff --git a/src/views/RecruitPage/components/RecruteeInfo/index.tsx b/src/views/RecruitPage/components/RecruteeInfo/index.tsx
@@ -1,10 +1,18 @@
 import styled from '@emotion/styled';
-import { SectionDesc, SectionTitle } from '../common/styles';
+import {
+  SectionDesc,
+  SectionTitle,
+  SectionTitleTranslate,
+  SectionTitleWrapper,
+} from '../common/styles';
 
 const RecruiteeInfo = () => {
   return (
     <Wrapper>
-      <SectionTitle>모집 대상</SectionTitle>
+      <SectionTitleWrapper>
+        <SectionTitleTranslate>Recruitment target</SectionTitleTranslate>
+        <SectionTitle>모집 대상</SectionTitle>
+      </SectionTitleWrapper>
       <SectionDesc>
         IT 창업 및 웹/앱 서비스에 관심이 많고, 수도권 내에서 활동이 가능한 열정적인 대학생
       </SectionDesc>

diff --git a/src/views/RecruitPage/components/Schedule/index.tsx b/src/views/RecruitPage/components/Schedule/index.tsx
@@ -1,12 +1,15 @@
 import styled from '@emotion/styled';
-import { SectionTitle } from '../common/styles';
+import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 
 const Schedule = () => {
   return (
     <Wrapper>
-      <SectionTitle>모집 일정</SectionTitle>
+      <SectionTitleWrapper>
+        <SectionTitleTranslate>Schedule</SectionTitleTranslate>
+        <SectionTitle>모집 일정</SectionTitle>
+      </SectionTitleWrapper>
       <GridWrapper>
-        <OddText>YB 서류 접수</OddText>
+        <OddText> YB 서류 접수</OddText>
         <EvenText>9월 4일 - 9월 9일</EvenText>
         <OddText>YB 면접</OddText>
         <EvenText>9월 16일 - 9월 17일</EvenText>
@@ -35,23 +38,24 @@ const Wrapper = styled.div`
 
 const GridWrapper = styled.div`
   display: grid;
-  grid-template-columns: 560px auto;
-  border-radius: 10px;
-  background-color: #000;
+  justify-content: center;
+  grid-template-columns: 240px 220px;
+  row-gap: 25px;
+  column-gap: 220px;
+  border-radius: 30px;
+  background-color: #1a1a20;
   padding: 85px 88px;
-  gap: 25px;
+
   /* 태블릿 뷰 */
   @media (max-width: 1299px) and (min-width: 766px) {
     grid-template-columns: 340px auto;
     padding: 38px 54px;
-    background: linear-gradient(to right, #000 30%, transparent);
     gap: 15px;
   }
   /* 모바일 뷰 */
   @media (max-width: 765.9px) {
     grid-template-columns: 170px auto;
     padding: 18px 26px;
-    background: linear-gradient(to right, #000 30%, transparent);
     gap: 7px;
   }
 `;
@@ -62,6 +66,9 @@ const OddText = styled.div`
   font-size: 28px;
   font-weight: 700;
   line-height: 150%; /* 42px */
+  &::before {
+    content: '🗓 ';
+  }
   /* 태블릿 뷰 */
   @media (max-width: 1299px) and (min-width: 766px) {
     color: #fff;

diff --git a/src/views/RecruitPage/components/common/styles.ts b/src/views/RecruitPage/components/common/styles.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+export const SectionTitleWrapper = styled.div``;
+
 export const SectionTitle = styled.h3`
   color: #fff;
   font-family: SUIT;
@@ -9,6 +11,7 @@ export const SectionTitle = styled.h3`
   line-height: 60px;
   letter-spacing: -0.45px;
   white-space: pre-line;
+  text-align: center;
 
   /* 태블릿 뷰 */
   @media (max-width: 1299px) and (min-width: 766px) {
@@ -23,10 +26,18 @@ export const SectionTitle = styled.h3`
     line-height: 28px;
     letter-spacing: -0.18px;
     width: 360px;
-    text-align: center;
   }
 `;
 
+export const SectionTitleTranslate = styled.h4`
+  color: #1dedae;
+  text-align: center;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 140%; /* 23.8px */
+  letter-spacing: -0.34px;
+`;
+
 export const SectionSubTitle = styled.h3`
   color: #787878;
   font-size: 30px;