From 1dcf05762e6067e8c2682589441ccb7c91c8d947 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Mon, 4 Sep 2023 02:46:56 +0900 Subject: [PATCH] fix: fix styles --- src/views/RecruitPage/RecruitPage.tsx | 4 +-- .../ActivityReview/ActivityReview.tsx | 7 ++++-- .../components/ApplySection/index.tsx | 7 +++--- .../components/ChapterInfo/index.tsx | 14 +++++++---- .../RecruitPage/components/Contact/index.tsx | 12 +++++++-- .../RecruitPage/components/FAQ/index.tsx | 8 +++--- .../components/NotificationSection/index.tsx | 14 +++++------ .../components/RecruteeInfo/index.tsx | 12 +++++++-- .../RecruitPage/components/Schedule/index.tsx | 25 ++++++++++++------- .../RecruitPage/components/common/styles.ts | 13 +++++++++- 10 files changed, 80 insertions(+), 36 deletions(-) diff --git a/src/views/RecruitPage/RecruitPage.tsx b/src/views/RecruitPage/RecruitPage.tsx index 5d17d501..841f6d5f 100644 --- 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 index 31e15577..27adeee8 100644 --- 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 ( - {'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'} + + Activity Review + {'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'} + 활동후기 더보기 diff --git a/src/views/RecruitPage/components/ApplySection/index.tsx b/src/views/RecruitPage/components/ApplySection/index.tsx index 73aec306..d1a0bf40 100644 --- 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 index 2de1a922..2b8c21da 100644 --- 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.PLAN); return ( - - {'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'} + + + Positions + {'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'} + + {infoMap[selectedTab].info} {infoMap[selectedTab].fit.map((fit, idx) => (
- {fit}
))} - + ); }; -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 index 5f232a6c..ca24c460 100644 --- 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 (
- 문의하기 + + Inquiry + 문의하기 + SOPT 지원에 대해 궁금한 것이 있나요? diff --git a/src/views/RecruitPage/components/FAQ/index.tsx b/src/views/RecruitPage/components/FAQ/index.tsx index 4a84d3c4..bc3eaa6a 100644 --- 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 ( - FAQ - 자주 묻는 질문 + + FAQ + 자주 묻는 질문 + {faqMap[selectedTab].map((info, index) => ( diff --git a/src/views/RecruitPage/components/NotificationSection/index.tsx b/src/views/RecruitPage/components/NotificationSection/index.tsx index 328b3651..d2c7c911 100644 --- 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 index f3c7421f..5570b373 100644 --- 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 ( - 모집 대상 + + Recruitment target + 모집 대상 + IT 창업 및 웹/앱 서비스에 관심이 많고, 수도권 내에서 활동이 가능한 열정적인 대학생 diff --git a/src/views/RecruitPage/components/Schedule/index.tsx b/src/views/RecruitPage/components/Schedule/index.tsx index bb7ef000..f22fa17f 100644 --- 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 ( - 모집 일정 + + Schedule + 모집 일정 + - YB 서류 접수 + YB 서류 접수 9월 4일 - 9월 9일 YB 면접 9월 16일 - 9월 17일 @@ -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 index b0ae7585..a49e029f 100644 --- 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;