- ))}
-
- )}
+ {status && {answer}}
);
}
@@ -54,44 +29,48 @@ function QuestionBox(props: QuestionBoxProps) {
export default QuestionBox;
const Styled = {
- Root: styled.div`
+ Root: styled.div<{ isOpened: boolean }>`
+ transition: 0.2s;
display: flex;
flex-direction: column;
- background: #262626;
- border-radius: 10px;
- padding: 56px;
- padding-right: 54px;
+ background: ${({ isOpened }) => (isOpened ? '#21212C' : '#1a1a20')};
+ border-radius: 30px;
+ padding: 40px 50px;
cursor: pointer;
/* 태블릿 뷰 */
@media (max-width: 1919.9px) and (min-width: 766px) {
font-size: 25px;
- padding: 48px;
+ padding: 32px 40px;
+ border-radius: 20px;
}
/* 모바일 뷰 */
@media (max-width: 765.9px) {
- padding: 28px;
+ padding: 18px 30px;
+ border-radius: 20px;
}
`,
QuestionWrapper: styled.div<{ isOpened: boolean }>`
display: flex;
align-items: center;
justify-content: space-between;
- /* align-items: center; */
- margin-bottom: ${({ isOpened }) => (isOpened ? '37px' : '0')};
/* 태블릿 뷰 */
@media (max-width: 1919.9px) and (min-width: 766px) {
margin-bottom: ${({ isOpened }) => (isOpened ? '16px' : '0')};
}
`,
Title: styled.h1`
- font-weight: 700;
+ font-weight: 600;
font-size: 30px;
line-height: 100%;
color: #ffffff;
+ &::before {
+ content: 'Q. ';
+ color: #1deda2;
+ }
/* 태블릿 뷰 */
@media (max-width: 1919.9px) and (min-width: 766px) {
- font-size: 25px;
+ font-size: 24px;
}
/* 모바일 뷰 */
@media (max-width: 765.9px) {
@@ -107,36 +86,27 @@ const Styled = {
height: 40px;
/* 태블릿 뷰 */
@media (max-width: 1919.9px) and (min-width: 766px) {
- width: 32px;
- height: 32px;
+ transform: ${({ isOpened }) => (isOpened ? 'rotate(180deg)' : 'rotate(0deg)')} scale(0.9);
+ transform-origin: center;
}
/* 모바일 뷰 */
@media (max-width: 765.9px) {
- width: 24px;
- height: 24px;
+ transform: ${({ isOpened }) => (isOpened ? 'rotate(180deg)' : 'rotate(0deg)')} scale(0.7);
+ transform-origin: center;
}
- & > svg {
- width: 25px;
- height: 18.33px;
- /* 태블릿 뷰 */
- @media (max-width: 1919.9px) and (min-width: 766px) {
- width: 20px;
- height: 14.67px;
- }
- /* 모바일 뷰 */
- @media (max-width: 765.9px) {
- width: 15px;
- height: 11px;
- }
- }
- transform: ${({ isOpened }) => (isOpened ? 'rotate(90deg)' : 'rotate(0deg')};
`,
Content: styled.div`
font-weight: 400;
font-size: 25px;
line-height: 40px;
-
+ word-break: keep-all;
color: rgba(253, 253, 253, 0.8);
+ margin-top: 12px;
+
+ &::before {
+ content: 'A. ';
+ color: #1deda2;
+ }
/* 태블릿 뷰 */
@media (max-width: 1919.9px) and (min-width: 766px) {
font-size: 22px;
diff --git a/src/views/FAQPage/lib/constants.ts b/src/views/FAQPage/lib/constants.ts
index a14da766..51b64069 100644
--- a/src/views/FAQPage/lib/constants.ts
+++ b/src/views/FAQPage/lib/constants.ts
@@ -9,17 +9,17 @@ export const contactInfo: ContactInfoType[] = [
export const questionList: FAQType[] = [
{
- question: 'Q. 직장인/휴학생/졸업유예생도 활동할 수 있나요?',
+ question: '직장인/휴학생/졸업유예생도 활동할 수 있나요?',
answer:
'재직, 휴학, 졸업유예 여부에 관계없이 대학생이면 지원 가능해요.\n다만, 대부분의 SOPT 회원들이 활동에 많은 시간을 투자하고 있으므로 직장 재직자는 활동에 충분히 참여할\n 여유가 있을 경우에 지원하시는 것을 권장해요.',
},
{
- question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+ question: '파트별 커리큘럼이 어떻게 되나요?',
answer:
'상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT 인스타그램’에 파트별로 자세하게 안내되어 있으니 참고해 주세요.',
},
{
- question: 'Q. 경험과 실력이 부족한데 지원해도 괜찮을까요?',
+ question: '경험과 실력이 부족한데 지원해도 괜찮을까요?',
answer:
'SOPT는 기획, 디자인, 개발 각 분야에 열정이 있는 사람들이 모여 화합을 통해 변화하고 성장하는 가치를\n추구해요. 따라서 경험과 실력보다는 각 파트에 대한 열정과 SOPT 활동을 통해 이루고자 하는 명확한 목표를 더\n중요시해요. 열정을 갖춘 분들의 용기 있는 도전을 기다릴게요! Shout Our Passion Together!',
},
@@ -27,17 +27,17 @@ export const questionList: FAQType[] = [
export const questionListTablet: FAQType[] = [
{
- question: 'Q. 직장인/휴학생/졸업유예생도 활동할 수 있나요?',
+ question: '직장인/휴학생/졸업유예생도 활동할 수 있나요?',
answer:
'재직, 휴학, 졸업유예 여부에 관계없이 대학생이면 지원\n가능해요.다만, 대부분의 SOPT 회원들이 활동에 많은\n시간을 투자하고 있으므로 직장 재직자는 활동에 충분히\n참여할 여유가 있을 경우에 지원하시는 것을 권장해요.',
},
{
- question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+ question: '파트별 커리큘럼이 어떻게 되나요?',
answer:
'상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT 인스타그램’에 파트별로\n자세하게 안내되어 있으니 참고해 주세요.',
},
{
- question: 'Q. 경험과 실력이 부족한데 지원해도 괜찮을까요?',
+ question: '경험과 실력이 부족한데 지원해도 괜찮을까요?',
answer:
'SOPT는 기획, 디자인, 개발 각 분야에 열정이 있는\n사람들이 모여 화합을 통해 변화하고 성장하는 가치를\n추구해요. 따라서 경험과 실력보다는 각 파트에 대한 열정과\nSOPT 활동을 통해 이루고자 하는 명확한 목표를 더 중요시\n해요. 열정을 갖춘 분들의 용기 있는 도전을 기다릴게요!\nShout Our Passion Together!',
},
@@ -45,17 +45,17 @@ export const questionListTablet: FAQType[] = [
export const questionListMobile: FAQType[] = [
{
- question: 'Q. 직장인/휴학생/졸업유예생도\n활동할 수 있나요?',
+ question: '직장인/휴학생/졸업유예생도\n활동할 수 있나요?',
answer:
'재직, 휴학, 졸업유예 여부에 관계없이\n대학생이면 지원 가능해요.다만, 대부분의\nSOPT 회원들이 활동에 많은 시간을\n투자하고 있으므로 직장 재직자는 활동에\n충분히 참여할 여유가 있을 경우에\n지원하시는 것을 권장해요.',
},
{
- question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+ question: '파트별 커리큘럼이 어떻게 되나요?',
answer:
'상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT\n인스타그램’에 파트별로 자세하게 안내되어\n있으니 참고해 주세요.',
},
{
- question: 'Q. 경험과 실력이 부족한데\n지원해도 괜찮을까요?',
+ question: '경험과 실력이 부족한데\n지원해도 괜찮을까요?',
answer:
'SOPT는 기획, 디자인, 개발 각 분야에\n열정이 있는 사람들이 모여 화합을 통해\n변화하고 성장하는 가치를 추구해요.\n따라서 경험과 실력보다는 각 파트에 대한\n열정과 SOPT 활동을 통해 이루고자 하는\n명확한 목표를 더 중요시해요. 열정을 갖춘\n분들의 용기 있는 도전을 기다릴게요!\nShout Our Passion Together!',
},
diff --git a/src/views/MainPage/assets/arrow_right_white.svg b/src/views/MainPage/assets/arrow_right_white.svg
index db00caab..0c0b26f6 100644
--- a/src/views/MainPage/assets/arrow_right_white.svg
+++ b/src/views/MainPage/assets/arrow_right_white.svg
@@ -1,5 +1,5 @@
diff --git a/src/views/RecruitPage/RecruitPage.tsx b/src/views/RecruitPage/RecruitPage.tsx
index 841f6d5f..b87af64c 100644
--- a/src/views/RecruitPage/RecruitPage.tsx
+++ b/src/views/RecruitPage/RecruitPage.tsx
@@ -35,15 +35,6 @@ const Root = styled.div`
align-items: center;
min-height: 100vh;
margin: 0 auto;
-
- /* 태블릿 뷰 */
- @media (max-width: 1299px) and (min-width: 766px) {
- margin-top: 90px;
- }
- /* 모바일 뷰 */
- @media (max-width: 765.9px) {
- margin-top: 90px;
- }
`;
const ContentWrapper = styled.div`
diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
index 27adeee8..c3830a73 100644
--- a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
+++ b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
@@ -1,7 +1,7 @@
import Link from 'next/link';
import { ReactComponent as ArrowLeft } from '@src/views/MainPage/assets/arrow-left-28x28.svg';
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 arrowRightWhite from '@src/views/MainPage/assets/arrow_right_white.svg';
import { useHorizontalScroll } from '@src/views/MainPage/lib';
import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
import useFetch from './hooks/useFetch';
@@ -17,7 +17,6 @@ import {
DescName,
DescWrapper,
MoreLinkWrapper,
- TitleWrapper,
} from './styles';
import { parsePartToKorean } from './utils/parsePartToKorean';
@@ -35,15 +34,10 @@ export function ActivityReview() {
return (
-
-
- Activity Review
- {'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}
-
-
- 활동후기 더보기
-
-
+
+ Activity Review
+ {'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}
+ onClickLeftButton(scrollableRef.current)}>
@@ -58,7 +52,7 @@ export function ActivityReview() {
{parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
{review.reviewer}
-
+
@@ -68,6 +62,9 @@ export function ActivityReview() {
+
+ 활동후기 더보기
+
);
}
diff --git a/src/views/RecruitPage/components/ActivityReview/styles.ts b/src/views/RecruitPage/components/ActivityReview/styles.ts
index bbf1b162..e6927abc 100644
--- a/src/views/RecruitPage/components/ActivityReview/styles.ts
+++ b/src/views/RecruitPage/components/ActivityReview/styles.ts
@@ -49,9 +49,9 @@ export const MoreLinkWrapper = styled.a`
line-height: 40px; /* 160% */
letter-spacing: -0.25px;
opacity: 0.6;
+ border-bottom: 1px solid #959595;
@media (max-width: 1299px) and (min-width: 766px) {
- font-family: SUIT;
font-size: 20px;
font-weight: 400;
line-height: 100%; /* 20px */
@@ -59,7 +59,7 @@ export const MoreLinkWrapper = styled.a`
}
@media (max-width: 765.9px) {
- display: none;
+ font-size: 16px;
}
`;
@@ -98,7 +98,7 @@ export const Content = styled.div`
export const CardWrapper = styled.div`
cursor: pointer;
- background-color: #ffffff;
+ background-color: #1a1a20;
border-radius: 10px;
display: flex;
flex-direction: column;
@@ -125,7 +125,7 @@ export const CardTitle = styled.div`
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
- color: #262626;
+ color: #c8c8c8;
font-weight: 500;
font-size: 25px;
line-height: 40px;
@@ -146,7 +146,7 @@ export const DescWrapper = styled.div`
`;
export const Desc = styled.div`
- color: rgba(38, 38, 38, 0.6);
+ color: #c8c8c8;
font-weight: 500;
font-size: 25px;
line-height: 40px;
@@ -163,6 +163,7 @@ export const Desc = styled.div`
export const DescName = styled.div`
font-weight: 700;
+ line-height: 100%;
@media (max-width: 765.9px) {
font-weight: 500;
}
diff --git a/src/views/RecruitPage/components/ApplySection/index.tsx b/src/views/RecruitPage/components/ApplySection/index.tsx
index d1a0bf40..87d6ca43 100644
--- a/src/views/RecruitPage/components/ApplySection/index.tsx
+++ b/src/views/RecruitPage/components/ApplySection/index.tsx
@@ -22,7 +22,14 @@ const BlurOverlay = styled.div`
left: 0;
width: 100%;
height: 100%;
- background: linear-gradient(rgba(24, 24, 24, 0.5), rgba(24, 24, 24, 1));
+ background: linear-gradient(
+ rgba(24, 24, 24, 0.6),
+ rgba(24, 24, 24, 0.6),
+ rgba(24, 24, 24, 0.6),
+ rgba(24, 24, 24, 0.6),
+ rgba(24, 24, 24, 0.9),
+ rgba(24, 24, 24, 1)
+ );
z-index: 1;
`;
@@ -69,7 +76,7 @@ const Title = styled.div`
}
/* 모바일 뷰 */
@media (max-width: 765.9px) {
- font-size: 32px;
+ font-size: 28px;
}
`;
@@ -82,6 +89,19 @@ const Chip = styled.div`
color: #1deda2;
text-align: center;
z-index: 2;
+ line-height: 100%;
+
+ /* 태블릿 뷰 */
+ @media (max-width: 1299px) and (min-width: 766px) {
+ padding: 6px 0;
+ font-size: 16px;
+ width: 184px;
+ }
+ /* 모바일 뷰 */
+ @media (max-width: 765.9px) {
+ font-size: 12px;
+ width: 164px;
+ }
`;
const Wrapper = styled.div`
diff --git a/src/views/RecruitPage/components/ChapterInfo/constants.ts b/src/views/RecruitPage/components/ChapterInfo/constants.ts
index e3cd696d..349e2f25 100644
--- a/src/views/RecruitPage/components/ChapterInfo/constants.ts
+++ b/src/views/RecruitPage/components/ChapterInfo/constants.ts
@@ -2,25 +2,25 @@ import { Part } from '@src/lib/types/universal';
export const infoMap: Record = {
[Part.PLAN]: {
- info: '린스타트업에 기초하여 고객 시장 분석 - 문제정의 - 가설 검증 - 솔루션/BM 도출- 전략 수립까지 IT 프로덕트를 기획하고 매니징하는 전과정을 경험합니다.',
+ info: '린스타트업에 기초하여 고객 시장 분석 - 문제정의 - 가설 검증 - 솔루션/BM 도출- 전략 수립까지 IT 프로덕트를 기획하고 매니징하는 전과정을 경험합니다.',
fit: [
- '문제를 세밀하게 뜯어보는 집요함과 꼼꼼함을 갖춘 사람',
- '원활한 커뮤니케이션을 위한 열린 마음을 가진 사람',
- '자신의 목표를 이루기 위해 계획을 세우고, 이를 실행에 옮길 줄 아는 사람',
- '열정을 가지고 기획에 진심으로 임할 사람',
+ '문제를 세밀하게 뜯어보는 집요함과 꼼꼼함을 갖춘 분',
+ '원활한 커뮤니케이션을 위한 열린 마음을 가진 분',
+ '자신의 목표를 이루기 위해 계획을 세우고, 이를 실행에 옮길 줄 아는 분',
+ '열정을 가지고 기획에 진심으로 임할 분',
],
},
[Part.DESIGN]: {
- info: '피그마와 같은 협업툴을 통해 UXUI 디자인의 전반적인 과정을 배우고 기획자, 개발자와 함께 새로운 프로덕트를 만들어 내는 과정에 참여할 수 있습니다.',
+ info: '피그마와 같은 협업툴을 통해 UXUI 디자인의 전반적인 과정을 배우고 기획자, 개발자와 함께 새로운 프로덕트를 만들어 내는 과정에 참여합니다.',
fit: [
- '솝트를 끝까지 완주해 내겠다는 열정을 가진 사람',
- '사용자를 위한 디자인에 대해 끊임없이 고민해 본 사람',
- '자신의 디자인을 논리적으로 설명할 수 있는 사람',
- '사람들과 협업하는 것을 즐길 줄 아는 사람',
+ '사용자를 위한 디자인에 대해 끊임없이 고민해 보신 분',
+ '자신의 디자인을 논리적으로 설명할 수 있으신 분',
+ '사람들과 협업하는 것을 즐길 줄 아시는 분',
+ '솝트를 끝까지 완주해 내겠다는 열정을 가지신 분',
],
},
[Part.ANDROID]: {
- info: '안드로이드 파트에서는 Kotlin 언어를 활용해 안드로이드 UI 구현 기초/심화부터 서버통신 등 앱 제작에 필요한 내용들을 배웁니다.\n세미나, 페어 프로그래밍을 통한 실습, 스터디, 합동세미나 등 여러 활동을 통해 안드로이드에 몰입할 수 있는 환경을 제공합니다',
+ info: 'Kotlin 언어를 활용해 안드로이드 UI 구현 기초/심화부터 서버통신 등 앱 제작에 필요한 내용들을 배웁니다. 안드로이드에 몰입할 수 있는 세미나, 페어 프로그래밍을 통한 실습, 스터디, 합동세미나 등 여러 활동에 참여합니다.',
fit: [
'안드로이드에 흥미가 있으신 분',
'코틀린 언어에 관심이 있으신 분',
@@ -29,16 +29,16 @@ export const infoMap: Record = {
],
},
[Part.IOS]: {
- info: 'iOS 파트에서는 Swift와 UIKit을 이용해서 iOS 앱 서비스를 만들 수 있는 능력을 기를 수 있습니다. \niOS가 처음인 분들을 위한 왕초보 스터디와 보충 세미나, 그리고 실력적 도약을 위한 심화 세미나까지.\niOS파트는 자신의 성장을 위해 열정적으로 도전하는 사람들로 구성되어 있습니다. ',
+ info: 'Swift와 UI Kit를 이용해서 iOS 앱 서비스를 만들 수 있는 능력을 기를 수 있습니다. iOS가 처음인 분들을 위한 왕초보 스터디와 보충 세미나, 그리고 실력적 도약을 위한 심화 세미나까지. 자신의 성장을 위해 열정적으로 도전하는 사람들과 함께 활동에 필요한 부분들을 학습할 수 있습니다.',
fit: [
- '개발에 대한 열정이 넘치고, 애플 장비를 3개 이상 보유한 사람!',
- '할땐 하고, 놀땐 그 누구보다 신나게 놀 수 있는 사람!',
- '우리의 서비스를 만드는데 그 누구보다 진심인 사람',
- '문제를 직시 하고 원인을 파악해 해결할 줄 아는 사람',
+ '개발에 대하나 열정이 넘치고, 애플 장비를 3개 이상 보유하신 분',
+ '할 땐 하고, 놀 땐 그 누구보다 신나게 놀 수 있으신 분',
+ '우리의 서비스를 만드는데 그 누구보다 진심이신 분',
+ '문제를 직시하고 원인을 파악해 해결할 줄 아시는 분',
],
},
[Part.WEB]: {
- info: '웹 파트에서는 UI 구현, 서버 통신 등 웹 서비스 개발에 필요한 역량들을 기초부터 심화까지 학습합니다. 또한 기획자, 디자이너, 서버 개발자와의 협업 경험을 통해 개발 협업 방식을 익힐 수 있습니다.',
+ info: 'UI 구현, 서버 통신 등 웹 서비스 개발에 필요한 역량들을 기초부터 심화까지 학습합니다. 또한 기획자, 디자이너, 서버 개발자와의 협업 경험을 통해 개발 협업 방식을 익힐 수 있습니다.',
fit: [
'웹 프론트엔드 개발에 흥미를 느껴 푹 빠져본 경험이 있으신 분',
'기획자, 디자이너, 개발자와의 협업을 경험하고 싶으신 분',
@@ -47,10 +47,10 @@ export const infoMap: Record = {
],
},
[Part.SERVER]: {
- info: '서버 파트에서는 Spring 프레임워크, 관계형 데이터베이스와 AWS를 기반으로 서버 애플리케이션을 구축하고 운영하는 과정을 학습합니다. 또한 미니 세미나, 코드리뷰, 스터디를 통해 개발 실력을 증진시키고, 기획자, 디자이나, 클라이언트 개발자와의 협업을 통해 협업 방식을 익힐 수 있습니다.',
+ info: 'Spring 프레임 워크, 관계형 데이터베이스와 AWS를 기반으로 서버 애플리케이션을 구축하고 운영하는 과정을 학습합니다. 또한 세미나, 코드리뷰, 스터디를 통해 개발 실력을 증진시키고, 기획자, 디자이너, 클라이언트 개발자와의 협업을 통해 협업 방식을 익힐 수 있습니다.',
fit: [
- 'SOPT 서버파트에 뜨거운 열정을 불태워 성장할 준비가 되어 있으신 분',
- '공부한 지식을 아낌없이 상호 공유하고 이를 통해 함께 성장하는 파트를 만들어가실 분',
+ '뜨거운 열정을 불태워 성장할 준비가 되어있으신 분',
+ '공부한 지식을 아낌없이 상호 공유하고, 이를 통해 함게 성장하는 파트를 만들어가실 분',
'개발부터 네트워킹, 추억 쌓기 등을 통해 SOPT 최고의 서버파트를 만들고 싶으신 분',
'프로젝트에 열정적으로 참여하여, 협업 경험과 함께 자신만의 프로덕트를 개발하고 싶으신 분',
],
diff --git a/src/views/RecruitPage/components/ChapterInfo/index.tsx b/src/views/RecruitPage/components/ChapterInfo/index.tsx
index 2b8c21da..d614dd6b 100644
--- a/src/views/RecruitPage/components/ChapterInfo/index.tsx
+++ b/src/views/RecruitPage/components/ChapterInfo/index.tsx
@@ -1,6 +1,8 @@
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/views/MainPage/components/ActivityReview/utils/parsePartToKorean';
import TabBar from '../common/Tabs';
import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
import { infoMap } from './constants';
@@ -15,17 +17,66 @@ const ChapterInfo = () => {
{'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'}
-
- {infoMap[selectedTab].info}
-
- {infoMap[selectedTab].fit.map((fit, idx) => (
-
- {fit}
- ))}
-
+
+ {parsePartToKorean(selectedTab)} 파트가 배우는 것
+ {infoMap[selectedTab].info}
+
+
+ 이런 분이면 좋아요!
+
+ {infoMap[selectedTab].fit.map((fit, idx) => (
+
{fit}
+ ))}
+
+
);
};
+const BaseChip = styled.div`
+ border-radius: 30px;
+ align-self: flex-start;
+ padding: 12px 28px;
+ line-height: 42px;
+ font-size: 22px;
+ border-width: 2px;
+ border-style: solid;
+
+ /* 태블릿 뷰 */
+ @media (max-width: 1299px) and (min-width: 766px) {
+ padding: 8px 14px;
+ line-height: 22px;
+ font-size: 14px;
+ }
+
+ @media (max-width: 765.9px) {
+ padding: 6px 10px;
+ line-height: 18px;
+ font-size: 12px;
+ border-width: 1px;
+ }
+`;
+
+const BlueChip = styled(BaseChip)`
+ border-color: #51c0ff;
+ color: #51c0ff;
+ background: #1b2530;
+ &:before {
+ content: '✏️';
+ padding-right: 10px;
+ }
+`;
+
+const GreenChip = styled(BaseChip)`
+ border-color: #1deda2;
+ color: #1deda2;
+ background: #172928;
+ &:before {
+ content: '👍';
+ padding-right: 10px;
+ }
+`;
+
const Wrapper = styled.div`
display: flex;
flex-direction: column;
@@ -65,37 +116,46 @@ const BaseText = styled.div`
letter-spacing: -0.18px;
}
`;
+
const InfoWrapper = styled(BaseText)`
- border-radius: 10px;
- background: #504ebf;
+ border-radius: 30px;
+ background: #1b2530;
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: 10px;
- background: #000;
+ border-radius: 30px;
+ background: #172928;
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;
}
`;
diff --git a/src/views/RecruitPage/components/Contact/index.tsx b/src/views/RecruitPage/components/Contact/index.tsx
index ca24c460..6661c60d 100644
--- a/src/views/RecruitPage/components/Contact/index.tsx
+++ b/src/views/RecruitPage/components/Contact/index.tsx
@@ -16,7 +16,7 @@ const Contact = () => {
Inquiry문의하기
- SOPT 지원에 대해 궁금한 것이 있나요?
+ SOPT 지원에 대해 궁금한 것이 더 있나요?
{contactInDisplayOrder.map((contact) => {
@@ -55,10 +55,10 @@ const Contact = () => {
const Wrapper = styled.div`
display: flex;
flex-direction: column;
- gap: 20px;
+ gap: 8px;
/* 태블릿 뷰 */
@media (max-width: 1299px) and (min-width: 766px) {
- gap: 20px;
+ gap: 8px;
}
/* 모바일 뷰 */
@media (max-width: 765.9px) {
diff --git a/src/views/RecruitPage/components/FAQ/constant.ts b/src/views/RecruitPage/components/FAQ/constant.ts
index b4e574a3..84f1f5dd 100644
--- a/src/views/RecruitPage/components/FAQ/constant.ts
+++ b/src/views/RecruitPage/components/FAQ/constant.ts
@@ -5,96 +5,96 @@ export const faqMap: Record =
[PartExtraType.ALL]: questionList,
[Part.PLAN]: [
{
- question: 'Q. 개발지식이 필요한가요?',
+ question: '개발지식이 필요한가요?',
answer:
'아니요 무관합니다!\n협업에 있어 기초적인 개발지식은 알면 좋지만, 이는 세미나를 통해 충분히 다뤄질 것이므로 걱정하지 않으셔도 됩니다.',
},
{
- question: 'Q. 포트폴리오는 필수인가요?',
+ question: '포트폴리오는 필수인가요?',
answer: '포트폴리오는 필수가 아닌 선택입니다.\n제출하지 않으셔도 불이익은 없습니다.',
},
{
- question: 'Q. 서비스 기획에 대한 경험과 경력이 없어도 괜찮을까요?',
+ question: '서비스 기획에 대한 경험과 경력이 없어도 괜찮을까요?',
answer:
'경험과 실력보다는 기획에 대한 열정과 기획파트를 통해 이루고자 하는 명확한 목표를 더 중요시합니다.\n시장에 대한 관심, 열정, 그리고 실행력 이 세가지만 있다면 기획파트 지원에 전혀 무리가 없습니다.',
},
],
[Part.DESIGN]: [
{
- question: 'Q. 디자인 경험이 없는데 지원해도 되나요?',
+ question: '디자인 경험이 없는데 지원해도 되나요?',
answer:
'네! 경험이 없어도 세미나와 파트 내 스터디를 통해 충분히 배워나갈 수 있습니다. 디자인을 배우고자 하는 의지와 솝트 활동에 참여하겠다는 열정만 있으면 누구든지 지원해도 좋습니다.',
},
{
- question: 'Q. 디자인 파트에서 어떤 툴을 주로 사용하나요?',
+ question: '디자인 파트에서 어떤 툴을 주로 사용하나요?',
answer:
'정규 세미나에서는 협업툴 Figma를 주로 사용하며, 협업 시 필요한 경우 Zeplin을 사용하기도 합니다.',
},
{
- question: 'Q. 세미나는 어떻게 진행되나요?',
+ question: '세미나는 어떻게 진행되나요?',
answer:
'세미나에서는 UXUI 디자인과 관련된 이론을 배우고, 팀원들과 함께 배운 것을 적용해 보는 실습 시간을 가지게 됩니다. 자세한 내용은 33기 커리큘럼을 참고해 주세요!',
},
],
[Part.ANDROID]: [
{
- question: 'Q. 아이폰, 맥북을 사용하고 있는데 지원이 가능한가요?',
+ question: '아이폰, 맥북을 사용하고 있는데 지원이 가능한가요?',
answer:
'당연히 가능합니다! 갤럭시 핸드폰 또는 공기계가 없어도 본인이 개발한 앱을 확인해 볼 수 있습니다. MacOS 환경에서도 충분히 개발이 가능합니다.',
},
{
- question: 'Q. 개발 경험이 거의 없는데 지원이 가능한가요?',
+ question: '개발 경험이 거의 없는데 지원이 가능한가요?',
answer:
'저 역시 SOPT에서 처음으로 개발 커리어를 시작했습니다! 몰입과 실천의 마음가짐을 겸비하고, 안드로이드에 대한 흥미가 생길 준비가 되신 모든 분들을 환영합니다. 왕초보 스터디를 통해 빠른 성장을 이룰 수 있습니다!',
},
{
- question: 'Q. 안드로이드 파트는 어떤 활동을 진행하나요?',
+ question: '안드로이드 파트는 어떤 활동을 진행하나요?',
answer:
'먼저, 세미나에서는 안드로이드 앱 제작에 필요한 전반적인 이론에 대해 배우고, 파트원들과의 페어 프로그래밍 실습 시간을 가집니다. 이후, 다양한 난이도의 과제와 코드리뷰 환경을 통해 성장하실 수 있는 환경을 제공합니다. 합동 세미나와 솝커톤, SOPT의 꽃인 5주동안의 해커톤 앱잼을 통해 협엄 경험을 하실 수 있습니다. 다양한 취미 또는 학술 스터디를 통해 자유로운 네트워킹을 하실 수 있습니다.',
},
],
[Part.IOS]: [
{
- question: 'Q. MacOS를 가진 장비가 필수인가요? 맥북이 필수인가요?',
+ question: 'MacOS를 가진 장비가 필수인가요? 맥북이 필수인가요?',
answer:
'iOS 파트는 매주 정해진 공간에 모여 세미나및 실습을 진행하기 때문에, ‘맥북’이 필수입니다.',
},
{
- question: 'Q. 개발 경험이 아예 없는데 지원해도 되나요?',
+ question: '개발 경험이 아예 없는데 지원해도 되나요?',
answer:
'매주 세미나를 통해 iOS의 기본부터 함께 배워가기 때문에, 개발경험은 상관이 없습니다. 하고자 하는 열정이 가장 중요한 요소라고 생각합니다.',
},
{
- question: 'Q. UIKit을 이용해서 개발하나요?',
+ question: 'UIKit을 이용해서 개발하나요?',
answer:
'33기 iOS파트의 정규 세미나는 UIKit으로 진행됩니다. 하지만, 스터디를 통해 SwiftUI와 같은 선언형 UI도 파트원들과 함께 공부해볼 수 있습니다!',
},
],
[Part.WEB]: [
{
- question: 'Q. 개발 경험이 거의 없는데 지원이 가능한가요?',
+ question: '개발 경험이 거의 없는데 지원이 가능한가요?',
answer:
'물론입니다. 모든 파트원분들이 33기 웹파트에서 큰 성장을 얻어 가실 수 있도록 최선을 다해 준비하고 있는 만큼, 그에 걸맞은 웹에 대한 진심과 열정을 가장 중요한 요소로 평가할 예정입니다.',
},
{
- question: 'Q. 세미나 진행은 어떻게 되나요?',
+ question: '세미나 진행은 어떻게 되나요?',
answer:
'매주 커리큘럼에 따라 웹 개발에 필요한 이론들을 배우게 됩니다. 이후 배운 내용을 적용할 수 있는 재미있는 과제와 파트원 간 코드 리뷰를 통해 실력을 더 탄탄하게 쌓아 나가실 수 있습니다. 자세한 내용은 33기 커리큘럼을 참고해 주세요!',
},
{
- question: 'Q. 스터디에는 어떤 것들이 있나요?',
+ question: '스터디에는 어떤 것들이 있나요?',
answer:
'파트 내 스터디 경우에는 대표적으로 왕초보 스터디, 웹 심화 스터디 그리고 React, JavaScript, TypeScript 등 다양한 스터디가 있습니다. 또 수요에 따라 원하는 스터디를 개설하실 수도 있습니다! :)',
},
],
[Part.SERVER]: [
{
- question: 'Q. 개발 경험이 없거나 얼마 안되는데 지원 가능한가요?',
+ question: '개발 경험이 없거나 얼마 안되는데 지원 가능한가요?',
answer:
'가능합니다! 성장에 대한 뜨거운 열정이 있으신 분들은 모두 환영합니다. 정규 세미나와 스터디, 코드리뷰 등 열정을 다해',
},
{
- question: 'Q. 정규 세미나외에 진행하는 미니세미나는 무엇인가요?',
+ question: '정규 세미나외에 진행하는 미니세미나는 무엇인가요?',
answer:
'정규 세미나는 최대한 기초적인 내용들을 토대로 모든 파트원들이 서버 애플리케이션을 구축할 수 있는 경험을 제공할 것입니다. 미니 세미나는 그 외에 프로젝트에 필요한 기술, 챌린지 요소가 있는 기술들을 구성하여, 추가로 공부할 수 있는 내용으로 구성할 예정입니다. 진행은 평일 밤에 진행될 것 같습니다.',
},
diff --git a/src/views/RecruitPage/components/FAQ/index.tsx b/src/views/RecruitPage/components/FAQ/index.tsx
index bc3eaa6a..0f1e899f 100644
--- a/src/views/RecruitPage/components/FAQ/index.tsx
+++ b/src/views/RecruitPage/components/FAQ/index.tsx
@@ -25,15 +25,23 @@ const FaqInfo = () => {
- {faqMap[selectedTab].map((info, index) => (
-