diff --git a/public/images/16th/about/activity/chat.png b/public/images/16th/about/activity/chat.png new file mode 100644 index 00000000..cd30b021 Binary files /dev/null and b/public/images/16th/about/activity/chat.png differ diff --git a/public/images/16th/about/activity/club.png b/public/images/16th/about/activity/club.png new file mode 100644 index 00000000..16de799c Binary files /dev/null and b/public/images/16th/about/activity/club.png differ diff --git a/public/images/16th/about/activity/gathering.png b/public/images/16th/about/activity/gathering.png new file mode 100644 index 00000000..141ca66c Binary files /dev/null and b/public/images/16th/about/activity/gathering.png differ diff --git a/public/images/16th/about/activity/invite.png b/public/images/16th/about/activity/invite.png new file mode 100644 index 00000000..5bec0428 Binary files /dev/null and b/public/images/16th/about/activity/invite.png differ diff --git a/public/images/16th/about/activity/mt.png b/public/images/16th/about/activity/mt.png new file mode 100644 index 00000000..83d78fe5 Binary files /dev/null and b/public/images/16th/about/activity/mt.png differ diff --git a/public/images/16th/about/activity/networking.png b/public/images/16th/about/activity/networking.png new file mode 100644 index 00000000..9fd25612 Binary files /dev/null and b/public/images/16th/about/activity/networking.png differ diff --git a/public/images/16th/about/activity/study.png b/public/images/16th/about/activity/study.png new file mode 100644 index 00000000..371eeb8f Binary files /dev/null and b/public/images/16th/about/activity/study.png differ diff --git a/public/images/16th/about/session/final.png b/public/images/16th/about/session/final.png new file mode 100644 index 00000000..6711b09f Binary files /dev/null and b/public/images/16th/about/session/final.png differ diff --git a/public/images/16th/about/session/hackerton.png b/public/images/16th/about/session/hackerton.png new file mode 100644 index 00000000..927fb66d Binary files /dev/null and b/public/images/16th/about/session/hackerton.png differ diff --git a/public/images/16th/about/session/launching.png b/public/images/16th/about/session/launching.png new file mode 100644 index 00000000..822fe0ac Binary files /dev/null and b/public/images/16th/about/session/launching.png differ diff --git a/public/images/16th/about/session/midterm.png b/public/images/16th/about/session/midterm.png new file mode 100644 index 00000000..8ba015bc Binary files /dev/null and b/public/images/16th/about/session/midterm.png differ diff --git a/public/images/16th/about/session/orientation.png b/public/images/16th/about/session/orientation.png new file mode 100644 index 00000000..495e7741 Binary files /dev/null and b/public/images/16th/about/session/orientation.png differ diff --git a/public/images/16th/about/session/planing.png b/public/images/16th/about/session/planing.png new file mode 100644 index 00000000..6c2e7f9f Binary files /dev/null and b/public/images/16th/about/session/planing.png differ diff --git a/public/images/16th/about/session/usability.png b/public/images/16th/about/session/usability.png new file mode 100644 index 00000000..e7b09e59 Binary files /dev/null and b/public/images/16th/about/session/usability.png differ diff --git a/public/images/16th/icon/index.ts b/public/images/16th/icon/index.ts index 5f34ef22..53fcdfce 100644 --- a/public/images/16th/icon/index.ts +++ b/public/images/16th/icon/index.ts @@ -1,4 +1,5 @@ export * from './popup'; export * from './common'; export * from './blog'; -export * from './fab'; \ No newline at end of file +export * from './fab'; +export * from './recruit' \ No newline at end of file diff --git a/public/images/16th/icon/recruit/arrow_b.svg b/public/images/16th/icon/recruit/arrow_b.svg new file mode 100644 index 00000000..cce53228 --- /dev/null +++ b/public/images/16th/icon/recruit/arrow_b.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/16th/icon/recruit/arrow_w.svg b/public/images/16th/icon/recruit/arrow_w.svg new file mode 100644 index 00000000..dc55e1ce --- /dev/null +++ b/public/images/16th/icon/recruit/arrow_w.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/16th/icon/recruit/index.ts b/public/images/16th/icon/recruit/index.ts new file mode 100644 index 00000000..6c650aa2 --- /dev/null +++ b/public/images/16th/icon/recruit/index.ts @@ -0,0 +1,2 @@ +export { default as ic_arrow_black_accordion } from './arrow_b.svg'; +export { default as ic_arrow_white_accordion } from './arrow_w.svg' \ No newline at end of file diff --git a/src/components/Blog/BlogPostThumbnail.tsx b/src/components/Blog/BlogPostThumbnail.tsx index 4faa0440..d8f77d30 100644 --- a/src/components/Blog/BlogPostThumbnail.tsx +++ b/src/components/Blog/BlogPostThumbnail.tsx @@ -68,7 +68,7 @@ const articleCss = css` ${mediaQuery('tablet')} { } ${mediaQuery('mobile')} { - height: 180px; + height: 220px; max-width: 460px; } &:hover { diff --git a/src/components/FAB/FloatingActionButton.tsx b/src/components/FAB/FloatingActionButton.tsx index 427835e2..dcc09438 100644 --- a/src/components/FAB/FloatingActionButton.tsx +++ b/src/components/FAB/FloatingActionButton.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { css } from '@emotion/react'; import { DEPROMEET_EMAIL, DEPROMEET_KAKAO_PLUS_FRIEND } from '~/constant/depromeet'; +import { theme } from '~/styles/theme'; import { Icon } from '../Icon/Icon'; @@ -115,6 +116,7 @@ const menuStyle = css` `; const menuItemStyle = css` + ${theme.typosV2.pretendard.semibold14} background-color: #333; color: #fff; padding: 12px 24px; diff --git a/src/components/FAQ/FAQItem.tsx b/src/components/FAQ/FAQItem.tsx index 69f7f2cf..5db3d6bc 100644 --- a/src/components/FAQ/FAQItem.tsx +++ b/src/components/FAQ/FAQItem.tsx @@ -25,11 +25,7 @@ export function FAQItem({ isOpen, onClickOpenButton, question, answer }: FAQItem transition={{ duration: 0.3, ease: 'easeOut' }} css={theme => arrowContainerCss(theme, isOpen)} > - + { const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile'); + const { pathname } = useRouter(); + const isAboutPage = pathname === '/about'; return (
-

후원사

-

- 디프만은 IT비영리단체로 후원을 통해 {isMobileSize &&
}더 많은 교육 기회에 도움을 받고 +

후원사

+

+ 디프만은 IT 비영리단체로 후원을 통해 {isMobileSize &&
}더 많은 교육 기회에 도움을 받고 있습니다.

@@ -36,9 +39,9 @@ const layoutCss = css` `; const introCss = { - headline: css` - ${theme.typosV2.pretendard.bold44} + headline: (isAboutPage = false) => css` line-height: 150%; + ${isAboutPage ? theme.typosV2.pretendard.bold32 : theme.typosV2.pretendard.bold44} color: ${theme.colors.white}; ${mediaQuery('mobile')} { @@ -46,10 +49,10 @@ const introCss = { line-height: 150%; } `, - description: css` - ${theme.typosV2.pretendard.semibold20} + description: (isAboutPage = false) => css` + ${isAboutPage ? theme.typosV2.pretendard.semibold18 : theme.typosV2.pretendard.semibold20} line-height: 150%; - margin-top: 42px; + margin-top: 24px; text-align: center; color: ${theme.colors.white}; diff --git a/src/constant/faq.ts b/src/constant/faq.ts index d1e83a1e..d0498ff0 100644 --- a/src/constant/faq.ts +++ b/src/constant/faq.ts @@ -18,7 +18,7 @@ export const FAQS: FAQType[] = [ group: '지원 자격', question: '관련 경험이 없어도 지원 가능한가요?', answer: - '관련 직무 경험이 없어도 지원 가능하지만, UI/UX Designer 직군은 지원 시 포트폴리오 제출이 필수입니다.', + '관련 직무 경험이 없어도 지원 가능하지만, Product Designer 직군은 지원 시 포트폴리오 제출이 필수입니다.', }, { group: '지원 자격', diff --git a/src/constant/offline.ts b/src/constant/offline.ts index 2518da69..df7a03c8 100644 --- a/src/constant/offline.ts +++ b/src/constant/offline.ts @@ -4,34 +4,39 @@ export const REGULARS_SESSIONS = [ { title: '오리엔테이션', description: '디프만의 첫 시작, 서로를 알아갈 수 있는 오리엔테이션에 모두가 함께 해요.', - img: '/images/offline-session/orientation.png', + img: '/images/16th/about/session/orientation.png', }, { title: '기획 발표', description: '팀별 핵심 가설 검증 과정과 인사이트를 공유하는 시간을 가져요. 피드백을 통해 기획 구체화에 도움을 얻어요.', - img: '/images/offline-session/networking.png', + img: '/images/16th/about/session/planing.png', }, { title: '사용성 테스트', description: '사용성 테스트를 통해 문제를 발견하고 개선하여 더 가치있는 서비스를 만들어요.', - img: '/images/offline-session/usability.png', + img: '/images/16th/about/session/usability.png', }, { title: '중간발표', description: '각 팀의 진행 상황을 공유하며 실질적인 피드백을 주고 받을 수 있어요.', - img: '/images/offline-session/midterm.png', + img: '/images/16th/about/session/midterm.png', }, { title: '해커톤', description: '모든 팀이 함께 모여 스프린트 단위로 시간을 나누어 주요 기능을 집중 개발 할 수 있는 시간을 가져요.', - img: '/images/offline-session/launching.png', + img: '/images/16th/about/session/hackerton.png', }, { title: '런칭데이', description: '런칭된 서비스를 팀 부스에서 공개해요. 모든 팀의 서비스를 사용해볼 수 있어요.', - img: '/images/offline-session/final.png', + img: '/images/16th/about/session/launching.png', + }, + { + title: '최종발표', + description: '런칭된 서비스를 팀 부스에서 공개해요. 모든 팀의 서비스를 사용해볼 수 있어요.', + img: '/images/16th/about/session/final.png', }, ]; @@ -40,36 +45,42 @@ export const ACTIVITIES = [ title: '연사 초청', description: '외부 연사 초청을 통해 다양한 세미나가 진행돼요. 연사분들의 경험이나 전문성을 바탕으로 인사이트를 얻고 성장해요.', - img: '/images/offline-session/orientation.png', + img: '/images/16th/about/activity/invite.png', }, { title: '네트워킹 데이', description: '다른 팀, 직군의 디퍼들을 만나요. TMI부터 커리어 토크까지 친해지는 시간을 가져요.', - img: '/images/offline-session/networking.png', + img: '/images/16th/about/activity/networking.png', }, { title: '스터디', description: '자율적으로 스터디를 개설하고, 참여할 수 있는 기회를 제공해요. 스터디를 통해네트워킹 기회도 함께 가져요.', - img: '/images/offline-session/usability.png', + img: '/images/16th/about/activity/study.png', }, { title: '커피챗', + description: + '취업, 이직, 커리어 고민이 있는 멤버분들을 위해 이전 기수 멘토와의 커피챗 기회를 제공해요.', + img: '/images/16th/about/activity/chat.png', + }, + { + title: '게더링', description: '24시간 제한없는 게더 공간을 통해 팀 미팅 외에도 다른 팀, 직군의 디퍼와 가까워질 수 있는 기회를 제공해요.', - img: '/images/offline-session/midterm.png', + img: '/images/16th/about/activity/gathering.png', }, { title: '번개모임', description: '관심사별 활동 등 다양한 이벤트를 열어 다른 팀, 직군의 디퍼와 친해질 수 있는 다양한 네트워킹 기회를 제공해요. ', - img: '/images/offline-session/launching.png', + img: '/images/16th/about/activity/club.png', }, { title: 'MT', description: '프로젝트에 잠시 벗어나 디퍼들이 서로 가까워질 수 있는 기회와 잊지 못할 즐거운 추억을 만들어요.', - img: '/images/offline-session/final.png', + img: '/images/16th/about/activity/mt.png', }, ]; @@ -109,14 +120,14 @@ export const OFFLINE_SESSIONS = [ title: 'LAUNCHING DAY', subTitle: '런칭데이', description: '런칭된 서비스를 팀 부스에서 공개해요. 모든 팀의 서비스를 사용해볼 수 있어요.', - img: '/images/offline-session/launching.png', + img: '/images/16th/about/session/launching.png', titleTextColor: colors.pink, }, { title: 'FINAL ANNOUNCE', subTitle: '최종발표', description: '서비스의 성과와 그 과정을 공유 및 회고하며 프로젝트를 마무리해요.', - img: '/images/offline-session/final.png', + img: '/images/16th/about/session/final.png', titleTextColor: colors.purple, }, ]; diff --git a/src/features/Blog/BlogContentSection.tsx b/src/features/Blog/BlogContentSection.tsx index 2e7418e7..5d60dabc 100644 --- a/src/features/Blog/BlogContentSection.tsx +++ b/src/features/Blog/BlogContentSection.tsx @@ -74,5 +74,6 @@ const blogContainerCss = css` } ${mediaQuery('mobile')} { grid-template-columns: repeat(1, 1fr); + gap: 20px; } `; diff --git a/src/features/Blog/BlogSubscribeSection.tsx b/src/features/Blog/BlogSubscribeSection.tsx index ea07327e..8c69282f 100644 --- a/src/features/Blog/BlogSubscribeSection.tsx +++ b/src/features/Blog/BlogSubscribeSection.tsx @@ -81,8 +81,4 @@ const linkCss = (theme: Theme) => css` color: white; background-color: black; text-align: center; - - &:hover { - color: ${theme.colors.pink}; - } `; diff --git a/src/features/Main/sections/MainProjectSection.tsx b/src/features/Main/sections/MainProjectSection.tsx index 7c720d41..5bc980fe 100644 --- a/src/features/Main/sections/MainProjectSection.tsx +++ b/src/features/Main/sections/MainProjectSection.tsx @@ -38,8 +38,7 @@ export const MainProjectSection = () => {

프로젝트

디프만 멤버 '디퍼(DEEPER)' 들의 - {isMobileSize &&
} - 다양한 프로젝트를 확인해보세요 + {isMobileSize &&
} 다양한 프로젝트를 확인해보세요

diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 187fbf6c..83f591b3 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -151,84 +151,84 @@ export const typosV2 = { bold62: css` font-size: ${pxToRem(62)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(74)}; letter-spacing: -0.04em; `, bold44: css` font-size: ${pxToRem(44)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(53)}; letter-spacing: -0.04em; `, bold32: css` font-size: ${pxToRem(32)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(38)}; letter-spacing: -0.04em; `, bold28: css` font-size: ${pxToRem(28)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(33)}; letter-spacing: -0.04em; `, bold24: css` font-size: ${pxToRem(24)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: normal; letter-spacing: ${pxToRem(-0.48)}; `, bold20: css` font-size: ${pxToRem(20)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(24)}; letter-spacing: -0.04em; `, bold18: css` font-size: ${pxToRem(18)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: normal; letter-spacing: ${pxToRem(-0.36)}; `, bold16: css` font-size: ${pxToRem(16)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(19)}; letter-spacing: -0.04em; `, bold10: css` font-size: ${pxToRem(10)}; font-style: normal; - font-weight: 700; + font-weight: 600; line-height: ${pxToRem(15)}; letter-spacing: ${pxToRem(-0.4)}; `, semibold48: css` font-size: ${pxToRem(48)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(57)}; letter-spacing: -0.04em; `, semibold32: css` font-size: ${pxToRem(32)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(48)}; letter-spacing: -0.04em; `, semibold28: css` font-size: ${pxToRem(28)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(40)}; letter-spacing: -0.04em; `, @@ -236,125 +236,125 @@ export const typosV2 = { font-size: ${pxToRem(26)}; font-style: normal; line-height: ${pxToRem(40)}; - font-weight: 600; + font-weight: 500; letter-spacing: -0.04em; `, semibold24: css` font-size: ${pxToRem(24)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(36)}; letter-spacing: -0.04em; `, semibold20: css` font-size: ${pxToRem(20)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(30)}; letter-spacing: -0.04em; `, semibold18: css` font-size: ${pxToRem(18)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(32)}; letter-spacing: -0.04em; `, semibold16: css` font-size: ${pxToRem(16)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(24)}; letter-spacing: -0.04em; `, semibold15: css` font-size: ${pxToRem(15)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(22.5)}; letter-spacing: ${pxToRem(-0.75)}; `, semibold14: css` font-size: ${pxToRem(14)}; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: ${pxToRem(21)}; letter-spacing: -0.04em; `, medium18: css` font-size: ${pxToRem(18)}; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: ${pxToRem(27)}; letter-spacing: ${pxToRem(-0.54)}; `, medium16: css` font-size: ${pxToRem(16)}; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: ${pxToRem(24)}; letter-spacing: -0.05em; `, medium15: css` font-size: ${pxToRem(15)}; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: ${pxToRem(22.5)}; letter-spacing: ${pxToRem(-0.6)}; `, medium14: css` font-size: ${pxToRem(14)}; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: ${pxToRem(17)}; letter-spacing: -0.05em; `, medium13: css` font-size: ${pxToRem(13)}; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: ${pxToRem(15)}; letter-spacing: -0.01em; `, regular20: css` font-size: ${pxToRem(20)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(30)}; letter-spacing: -0.05em; `, regular18: css` font-size: ${pxToRem(18)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(27)}; letter-spacing: -0.05em; `, regular16: css` font-size: ${pxToRem(16)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(24)}; letter-spacing: ${pxToRem(-0.64)}; `, regular14: css` font-size: ${pxToRem(14)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(21)}; letter-spacing: -0.05em; `, regular9: css` font-size: ${pxToRem(9)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(15)}; letter-spacing: -0.02em; `, regular8: css` font-size: ${pxToRem(8)}; font-style: normal; - font-weight: 400; + font-weight: 300; line-height: ${pxToRem(12)}; letter-spacing: -0.02em; `,