+
@@ -42,17 +51,21 @@ const containerCss = ({ color }: { color: string }) => css`
}
`;
-const bgImageCss = (props: ImageSize) => css`
+const bgImageCss = () => css`
top: 20px;
+ width: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
img {
- width: ${props.width}px;
- height: ${props.height}px;
- vertical-align: bottom;
+ object-fit: cover;
- @media screen and (max-width: ${MAX_WIDTH}px) {
+ ${mediaQuery('mobile')} {
width: 100%;
height: auto;
+ object-fit: contain;
}
}
diff --git a/src/components/Journey/Journey.tsx b/src/components/Journey/Journey.tsx
index 0fc6195f..f5e8d6ad 100644
--- a/src/components/Journey/Journey.tsx
+++ b/src/components/Journey/Journey.tsx
@@ -24,14 +24,23 @@ export function Journey() {
}
function DepromeetInformation() {
+ // NOTE: 빌드 에러 수정을 위해 임시 주석처리
return (
- {QUANTIFIED_INFO.map(({ label, text }, idx) => (
-
- {text}
-
{label}
-
- ))}
+ {QUANTIFIED_INFO.map(
+ (
+ {
+ label,
+ // text
+ },
+ idx
+ ) => (
+
+ {/* {text} */}
+
{label}
+
+ )
+ )}
);
}
diff --git a/src/components/Supports/SupportThumbnail.tsx b/src/components/Supports/SupportThumbnail.tsx
index c9dc8eaf..21b0077d 100644
--- a/src/components/Supports/SupportThumbnail.tsx
+++ b/src/components/Supports/SupportThumbnail.tsx
@@ -68,7 +68,7 @@ const articleCss = css`
padding: 24px;
width: 100%;
overflow: hidden;
- background-color: black;
+ background-color: ${colors.gray[900]};
&:hover {
cursor: pointer;
diff --git a/src/constant/aboutInfo.ts b/src/constant/aboutInfo.ts
index 58ed3054..0fed3c75 100644
--- a/src/constant/aboutInfo.ts
+++ b/src/constant/aboutInfo.ts
@@ -21,8 +21,8 @@ export const ABOUT_INFO = [
];
export const QUANTIFIED_INFO = [
- { label: '탄생한지', text: '8YEARS' },
- { label: '10-14기 런칭 성공률', text: '100%' },
- { label: '5-14기 런칭 서비스', text: '50+' },
- { label: '누적 멤버 수', text: '900+' },
+ { label: '디프만이 탄생한지', number: 8, unit: '년' },
+ { label: '10-15기 런칭 성공률', number: 100, unit: '%' },
+ { label: '런칭 서비스', number: 60, unit: '개' },
+ { label: '누적 멤버수', number: 1009, unit: '명' },
];
diff --git a/src/constant/contactInfo.ts b/src/constant/contactInfo.ts
index c9d2e999..ef162e91 100644
--- a/src/constant/contactInfo.ts
+++ b/src/constant/contactInfo.ts
@@ -22,6 +22,6 @@ export const SECOND_ROW_FOOTER_INFOS = [
];
export const CONTACT_INFO = [
- { name: 'Kakao channel', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
- { name: 'E-mail', detail: 'depromeet@gmail.com', href: DEPROMEET_EMAIL },
+ { name: '카카오톡 문의', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
+ { name: '이메일 문의', detail: 'depromeet@gmail.com', href: DEPROMEET_EMAIL },
];
diff --git a/src/constant/supports.ts b/src/constant/supports.ts
index 5f1e9498..3f1ae148 100644
--- a/src/constant/supports.ts
+++ b/src/constant/supports.ts
@@ -6,6 +6,7 @@ export type Support = {
link: string;
};
+/* TODO: 16기 후원사 image export */
export const SUPPORTS: Support[] = [
{
title: '팀스파르타',
diff --git a/src/features/About/components/Result.tsx b/src/features/About/components/Result.tsx
new file mode 100644
index 00000000..38c2f48b
--- /dev/null
+++ b/src/features/About/components/Result.tsx
@@ -0,0 +1,78 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { theme } from '~/styles/theme';
+
+import { ResultCardList } from './ResultCardList';
+
+// TODO: 공통 컴포넌트 분리 / 반응형 작업
+export const Result = () => {
+ const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+ return (
+
+
+
+ 디프만은 디자이너와 개발자가
+ {isMobileSize &&
}
+ 기획, 릴리즈, 이후 개선까지
+
+
+ 모든 과정을 경험하는
+ {isMobileSize &&
}
+
+
+
+
+
+ 성장추구형
+ 커뮤니티입니다.
+
+
+
+
+
+ );
+};
+
+const layoutCss = () => css`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 84px;
+ color: black;
+`;
+
+const title = {
+ wrapper: css`
+ h1 {
+ ${theme.typosV2.pretendard.semibold24};
+ line-height: 150%;
+ text-align: center;
+ height: fit-content;
+ }
+ `,
+};
+
+const emphasis = {
+ leftText: css`
+ margin-right: 13px;
+ `,
+ rightText: css`
+ margin-left: 14px;
+ `,
+ text: css`
+ position: relative;
+ `,
+ imageWrapper: css`
+ position: absolute;
+ left: -11px;
+ top: -3px;
+ `,
+};
diff --git a/src/features/About/components/ResultCardList.tsx b/src/features/About/components/ResultCardList.tsx
new file mode 100644
index 00000000..bb4898f1
--- /dev/null
+++ b/src/features/About/components/ResultCardList.tsx
@@ -0,0 +1,82 @@
+import { css } from '@emotion/react';
+
+import { QUANTIFIED_INFO } from '~/constant/aboutInfo';
+import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+export const ResultCardList = () => {
+ return (
+
+ {QUANTIFIED_INFO.map(({ label, number, unit }, idx) => (
+
+
{label}
+
+ {number}
+ {unit}
+
+
+ ))}
+
+ );
+};
+
+const containerCss = css`
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ width: 1040px;
+ height: 240px;
+
+ ${mediaQuery('mobile')} {
+ grid-template-columns: repeat(2, 1fr);
+ width: 100%;
+ height: auto;
+ padding: 0 24px;
+ }
+`;
+
+const cardCss = css`
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ justify-content: center;
+ align-items: center;
+ aspect-ratio: 1/1;
+ background-color: ${colors.grey[100]};
+ border-radius: 20px;
+
+ ${mediaQuery('mobile')} {
+ gap: 18px;
+ }
+`;
+
+const textCss = {
+ wrapper: css`
+ display: flex;
+ align-items: center;
+ `,
+ label: css`
+ color: ${colors.grey[600]};
+ ${theme.typosV2.pretendard.semibold20};
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.semibold15};
+ line-height: 150%;
+ }
+ `,
+ number: css`
+ ${theme.typosV2.pretendard.bold62};
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.bold32};
+ }
+ `,
+ unit: css`
+ ${theme.typosV2.pretendard.semibold48};
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.semibold24};
+ }
+ `,
+};
diff --git a/src/features/About/sections/AboutActivitiesSection.tsx b/src/features/About/sections/AboutActivitiesSection.tsx
new file mode 100644
index 00000000..c02b35c8
--- /dev/null
+++ b/src/features/About/sections/AboutActivitiesSection.tsx
@@ -0,0 +1,90 @@
+import { css } from '@emotion/react';
+
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+export const AboutActivitiesSection = () => {
+ const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+
+ return (
+
+
+
오프라인 세션
+
+ 정규 오프라인 세션을 통해
+ {isMobileSize &&
}
+ 성공적인 프로젝트 런칭에 더 가까워 집니다
+
+
+ {/* NOTE: OfflineSwipeList 개발 예정 */}
+ {/*
+ {OFFLINE_SESSIONS.map(session => (
+
+ ))}
+
*/}
+
+
+
오프라인 세션
+
+ 디프만에는 정기 세션 외에도
+ {isMobileSize &&
}
+ 친목 및 성장할 수 있는 다양한 활동들이 있습니다
+
+
+ {/* NOTE: OfflineSwipeList 개발 예정 */}
+ {/*
+ {OFFLINE_SESSIONS.map(session => (
+
+ ))}
+
*/}
+
+
+ );
+};
+
+const containerCss = css`
+ display: flex;
+ flex-direction: column;
+ background-color: ${theme.colors.white};
+ padding-bottom: 40px;
+`;
+
+const wrapperCss = css`
+ padding: 80px 0 82px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const introCss = {
+ headline: css`
+ ${theme.typosV2.pretendard.bold32}
+ line-height: 150%;
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.bold28}
+ line-height: 150%;
+ }
+ `,
+ description: css`
+ ${theme.typosV2.pretendard.medium18}
+ line-height: 150%;
+ margin-top: 18px;
+ text-align: center;
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.semibold18}
+ }
+ `,
+};
+
+// const activitiesContainerCss = css`
+// display: grid;
+// width: 100%;
+// max-width: 960px;
+// grid-template-columns: repeat(3, 1fr);
+// row-gap: 20px;
+// column-gap: 12px;
+// margin-top: 72px;
+// `;
diff --git a/src/features/About/sections/AboutContactSection.tsx b/src/features/About/sections/AboutContactSection.tsx
new file mode 100644
index 00000000..121db15d
--- /dev/null
+++ b/src/features/About/sections/AboutContactSection.tsx
@@ -0,0 +1,81 @@
+import Link from 'next/link';
+import { css, Theme } from '@emotion/react';
+
+import { CONTACT_INFO } from '~/constant/contactInfo';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+export const AboutContactSection = () => {
+ return (
+
+
궁금한 점이 있으신가요?
+
+
+ {CONTACT_INFO.map(footer => (
+ -
+
+ {footer.name}
+ {footer.detail}
+
+
+ ))}
+
+
+ );
+};
+
+const layoutCss = css`
+ padding: 120px 0;
+ background-color: ${theme.colors.grey[100]};
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 36px;
+`;
+
+const titleCss = (theme: Theme) => css`
+ ${theme.typosV2.pretendard.bold32}
+ margin-bottom: 12px;
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.bold28}
+ line-height: 150%;
+ }
+`;
+
+const infoListCss = css`
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ width: 100%;
+ max-width: 960px;
+ margin-top: 36px;
+
+ ${mediaQuery('mobile')} {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 16px;
+ padding: 0 20px;
+ }
+`;
+
+const infoCss = {
+ wrapper: css`
+ ${theme.typosV2.pretendard.medium18};
+ background-color: ${theme.colors.white};
+ color: black;
+ width: 100%;
+ height: 172px;
+ padding: 48px 36px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 20px;
+ border-radius: 12px;
+ `,
+ name: css`
+ ${theme.typosV2.pretendard.bold20};
+ color: black;
+ `,
+};
diff --git a/src/features/About/sections/AboutIntroSection.tsx b/src/features/About/sections/AboutIntroSection.tsx
new file mode 100644
index 00000000..bc68fa42
--- /dev/null
+++ b/src/features/About/sections/AboutIntroSection.tsx
@@ -0,0 +1,27 @@
+import { Intro } from '~/components/Intro';
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+
+export const AboutIntroSection = () => {
+ const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+ return (
+ <>
+ {isMobileSize ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/src/features/About/sections/AboutResultSection.tsx b/src/features/About/sections/AboutResultSection.tsx
new file mode 100644
index 00000000..81c35f59
--- /dev/null
+++ b/src/features/About/sections/AboutResultSection.tsx
@@ -0,0 +1,49 @@
+import { css, SerializedStyles, Theme } from '@emotion/react';
+
+import { NarrowArrowIcon } from '~/components/Icons';
+import { LinkWrapper } from '~/components/Main/LinkWrapper';
+
+import { Result } from '../components/Result';
+
+interface AbountResultSection {
+ hasLinkButton?: boolean;
+ style?: SerializedStyles;
+}
+
+export const AboutResultSection = ({ hasLinkButton, style }: AbountResultSection) => {
+ return (
+
+
+
+ {/* NOTE: 개발 예정 */}
+ {hasLinkButton && (
+
+ 디프만 소개 보기
+
+
+
+
+ )}
+
+ );
+};
+
+const layoutCss = (theme: Theme) => css`
+ padding: 120px 0 134px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 80px;
+ align-items: center;
+ background-color: ${theme.colors.white};
+`;
+
+const arrowImgContainerCss = css`
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 400px;
+ background-color: white;
+`;
diff --git a/src/features/About/sections/AboutSupportsSection.tsx b/src/features/About/sections/AboutSupportsSection.tsx
new file mode 100644
index 00000000..588350bb
--- /dev/null
+++ b/src/features/About/sections/AboutSupportsSection.tsx
@@ -0,0 +1,111 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { SupportThumbnail } from '~/components/Supports/SupportThumbnail';
+import { SUPPORTS } from '~/constant/supports';
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+export const AboutSupportsSection = () => {
+ const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+
+ return (
+
+
후원사
+
+ 디프만은 IT비영리단체로 후원을 통해
+ {isMobileSize &&
}더 많은 교육 기회에 도움을 받고 있습니다.
+
+
+
+ {SUPPORTS.map(support => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+const layoutCss = css`
+ padding: 120px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: ${theme.colors.black};
+`;
+
+const introCss = {
+ headline: css`
+ ${theme.typosV2.pretendard.bold32}
+ line-height: 150%;
+ color: ${theme.colors.white};
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.bold28}
+ line-height: 150%;
+ }
+ `,
+ description: css`
+ ${theme.typosV2.pretendard.semibold20}
+ line-height: 150%;
+ margin-top: 42px;
+ text-align: center;
+ color: ${theme.colors.white};
+
+ ${mediaQuery('mobile')} {
+ ${theme.typosV2.pretendard.semibold18}
+ }
+ `,
+};
+
+const supportContainerCss = css`
+ margin-top: 88px;
+ display: grid;
+ width: 100%;
+ max-width: 960px;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: 20px;
+ column-gap: 12px;
+ justify-items: center;
+ justify-content: center;
+ padding: 0 20px;
+
+ ${mediaQuery('mobile')} {
+ grid-template-columns: repeat(2, 1fr);
+ }
+`;
+
+const imageContainerCss = css`
+ position: relative;
+ width: 100%;
+ height: 208px;
+
+ ${mediaQuery('mobile')} {
+ max-width: 450px;
+ padding: 18px;
+ height: 180px;
+ }
+`;
+
+const supportButtonCss = css`
+ padding: 12px 38px;
+ margin-top: 92px;
+ border-radius: 50px;
+ color: ${colors.grey['00']};
+ background-color: ${colors.grey[500]};
+ ${theme.typosV2.pretendard.semibold20}
+
+ ${mediaQuery('mobile')} {
+ padding: 16px 28px;
+ margin-top: 62px;
+ border-radius: 50px;
+ ${theme.typosV2.pretendard.bold16}
+ }
+`;
diff --git a/src/features/About/sections/index.ts b/src/features/About/sections/index.ts
new file mode 100644
index 00000000..c3702617
--- /dev/null
+++ b/src/features/About/sections/index.ts
@@ -0,0 +1,4 @@
+export * from './AboutActivitiesSection';
+export * from './AboutContactSection';
+export * from './AboutResultSection';
+export * from './AboutSupportsSection';
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index b4031602..3719feae 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,24 +1,22 @@
-import AboutDepromeeet from '~/components/AboutInfo/AboutDepromeeet';
-import { Contact } from '~/components/Contact';
-import { Intro } from '~/components/Intro';
import { SEO } from '~/components/SEO';
-import { Supports } from '~/components/Supports';
+import {
+ AboutActivitiesSection,
+ AboutContactSection,
+ AboutResultSection,
+ AboutSupportsSection,
+} from '~/features/About/sections';
+import { AboutIntroSection } from '~/features/About/sections/AboutIntroSection';
export default function About() {
return (
<>
-
-
-
-
+
+
+
+
+
);
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index 631a00e8..406bce24 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -1,4 +1,5 @@
export const colors = {
+ black: '#000000',
black800: '#070814',
black400: '#1D1F2C',
gray300: '#343744',
@@ -21,4 +22,28 @@ export const colors = {
lightGray: '#F4F4F4',
gray: '#999999',
mint: '#A0EEE9',
+
+ // NOTE: 16th
+ grey: {
+ '00': '#FFFFFF',
+ '100': '#F4F4F5',
+ '300': '#999999',
+ '500': '#323232',
+ '600': '#232323',
+ '900': '#000000',
+ },
+
+ primary: {
+ pink: '#FF90FF',
+ blue: '#006AFE',
+ },
+
+ sub: {
+ sky: '#48A4FF',
+ darkMint: '#00CEBA',
+ lightPink: '#FF97FF',
+ purple: '#877BFF',
+ yellow: '#FFEC87',
+ lightMint: '#A0EEE9',
+ },
} as const;
diff --git a/src/styles/typo.ts b/src/styles/typo.ts
index e063b63d..a59d4b7f 100644
--- a/src/styles/typo.ts
+++ b/src/styles/typo.ts
@@ -148,60 +148,117 @@ export const typosV2 = {
`,
},
pretendard: {
+ bold62: css`
+ font-size: ${pxToRem(62)};
+ font-style: normal;
+ font-weight: 700;
+ line-height: ${pxToRem(74)};
+ letter-spacing: -0.04em;
+ `,
+ bold32: css`
+ font-size: ${pxToRem(32)};
+ font-style: normal;
+ font-weight: 700;
+ line-height: ${pxToRem(38)};
+ letter-spacing: -0.04em;
+ `,
+ bold28: css`
+ font-size: ${pxToRem(28)};
+ font-style: normal;
+ font-weight: 700;
+ line-height: ${pxToRem(33)};
+ letter-spacing: -0.04em;
+ `,
+ bold20: css`
+ font-size: ${pxToRem(20)};
+ font-style: normal;
+ font-weight: 700;
+ line-height: ${pxToRem(24)};
+ letter-spacing: -0.04em;
+ `,
+ bold16: css`
+ font-size: ${pxToRem(16)};
+ font-style: normal;
+ font-weight: 700;
+ line-height: ${pxToRem(19)};
+ letter-spacing: -0.04em;
+ `,
+ semibold48: css`
+ font-size: ${pxToRem(48)};
+ font-style: normal;
+ font-weight: 600;
+ line-height: ${pxToRem(57)};
+ letter-spacing: -0.04em;
+ `,
semibold32: css`
font-size: ${pxToRem(32)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(48)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
`,
semibold28: css`
font-size: ${pxToRem(28)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(40)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
`,
semibold26: css`
font-size: ${pxToRem(26)};
font-style: normal;
line-height: ${pxToRem(40)};
font-weight: 600;
+ letter-spacing: -0.04em;
`,
semibold24: css`
font-size: ${pxToRem(24)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(36)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
`,
semibold20: css`
font-size: ${pxToRem(20)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(30)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
`,
semibold18: css`
font-size: ${pxToRem(18)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(32)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
`,
semibold16: css`
font-size: ${pxToRem(16)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(24)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
+ `,
+ semibold15: css`
+ font-size: ${pxToRem(15)};
+ font-style: normal;
+ font-weight: 600;
+ line-height: ${pxToRem(18)};
+ letter-spacing: -0.04em;
`,
semibold14: css`
font-size: ${pxToRem(14)};
font-style: normal;
font-weight: 600;
line-height: ${pxToRem(21)};
- letter-spacing: -4%;
+ letter-spacing: -0.04em;
+ `,
+ medium18: css`
+ font-size: ${pxToRem(18)};
+ font-style: normal;
+ font-weight: 500;
+ line-height: ${pxToRem(21)};
+ letter-spacing: -5%;
`,
regular20: css`
font-size: ${pxToRem(20)};