[Feat] about페이지 (후원사 제외)

src/components/AboutInfo/AboutInfo.tsx

@@ -0,0 +1,125 @@
+import Image from 'next/image';
+import { css, Theme } from '@emotion/react';
+
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+import { pxToRem } from '~/styles/typo';
+
+export function AboutInfo() {
+  return (
+    <div css={[commonLayoutCss, layoutCss]}>
+      <div>
+        <h2 css={headerCss}>{'IT 사이드 프로젝트의 시작\n디프만의 열정적인 여정에 합류하세요'}</h2>
+      </div>
+      <ul css={aboutBodyCss}>
+        {ABOUT_INFO.map(({ image, title, label, description, reverse }) => (
+          <div key={title} css={aboutItemCss}>
+            {reverse ? (
+              <>
+                <div css={aboutInfoCss}>
+                  <h3 css={aboutTitleCss}>{title}</h3>
+                  <p css={aboutDescriptionCss}>{description}</p>
+                </div>
+                <div css={imageCss}>
+                  <Image src={image} alt={label} fill quality={100} />
+                </div>
+              </>
+            ) : (
+              <>
+                <div css={imageCss}>
+                  <Image src={image} alt={label} fill quality={100} />
+                </div>
+                <div css={aboutInfoCss}>
+                  <h3 css={aboutTitleCss}>{title}</h3>
+                  <p css={aboutDescriptionCss}>{description}</p>
+                </div>
+              </>
+            )}
+          </div>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const layoutCss = css`
+  margin-top: 200px;
+  white-space: pre-line;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  ${mediaQuery('pc')} {
+    margin-top: 200px;
+  }
+
+  ${mediaQuery('mobile')} {
+    margin-top: 200px;
+  }
+`;
+
+const headerCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.subTitle1};
+  font-size: ${pxToRem(40)};
+  color: ${theme.colors.white};
+`;
+
+const aboutBodyCss = css`
+  margin-top: 200px;
+`;
+
+const aboutItemCss = css`
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const aboutInfoCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+const imageCss = css`
+  position: relative;
+  width: 400px;
+  height: 400px;
+  object-fit: cover;
+  object-position: center;
+  ${mediaQuery('mobile')} {
+    width: 270px;
+    height: 270px;
+  }
+`;
+
+const aboutTitleCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.subTitle1};
+  color: ${theme.colors.white};
+`;
+
+const aboutDescriptionCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.subTitle2};
+  color: ${theme.colors.gray100};
+`;
+
+const PASSPORT_IMAGE = `/images/about/passport.png`;
+const AIRPLANE_IMAGE = `/images/about/airplane.png`;
+
+const ABOUT_INFO = [
+  {
+    label: 'passport',
+    image: PASSPORT_IMAGE,
+    title: '디자이너, 개발자의\n 커리어 패스 여정',
+    description:
+      '14기는 매주 토요일, 총 16주간 진행되며 \n다양한 오프라인 세션과 네트워킹이 준비되어 있습니다',
+    reverse: false,
+  },
+  {
+    label: 'airplane',
+    image: AIRPLANE_IMAGE,
+    title: '서비스 론칭 후\n유저에게 도착하는 순간까지',
+    description:
+      'UT, 론칭데이 등 실제 서비스를 구현하고\n타켓 유저에게 도달하는 전 과정을 경험합니다',
+    reverse: true,
+  },
+];

src/components/AboutInfo/index.tsx

@@ -0,0 +1 @@
+export { AboutInfo } from './AboutInfo';

src/components/Contact/Contact.tsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import { css, Theme } from '@emotion/react';
+
+import { SectionTitle } from '~/components/SectionTitle';
+import { CONTACT_INFO } from '~/constant/contactInfo';
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function Contact() {
+  return (
+    <div css={[commonLayoutCss, layoutCss]}>
+      <SectionTitle label="Contact" title="디프만에 대해 궁금한게 있으신가요?" />
+      <ul css={infoListCss}>
+        {CONTACT_INFO.map(footer => (
+          <li key={footer.name}>
+            <Link css={InfoCss} href={footer.href} target="_blank">
+              <span css={infoNameCss}>{footer.name}</span>
+              <span>{footer.detail}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const layoutCss = css``;
+
+const infoListCss = css`
+  display: flex;
+  gap: 20px;
+`;
+
+const InfoCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+  background-color: ${theme.colors.black400};
+  color: ${theme.colors.gray20};
+  width: 470px;
+  height: 172px;
+  padding: 48px 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  ${mediaQuery('tablet')} {
+    width: 344px;
+  }
+
+  ${mediaQuery('mobile')} {
+    width: 160px;
+    height: 96px;
+    padding: 16px 8px;
+  }
+`;
+
+const infoNameCss = (theme: Theme) => css`
+  ${theme.typos.decimal.subTitle1};
+  color: ${theme.colors.blue300};
+`;

src/components/Contact/index.tsx

@@ -0,0 +1 @@
+export { Contact } from './Contact';

src/components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { css, Theme } from '@emotion/react';
 
-import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/footer';
+import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/contactInfo';
 import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
 
@@ -12,7 +12,7 @@ export function Footer() {
         <ul css={rowCss}>
           {FIRST_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
-              <Link css={[linkCss, strongLinkCss]} href={footer.href}>
+              <Link css={[linkCss, strongLinkCss]} href={footer.href} target="_blank">
                 {footer.name}
               </Link>
             </li>
@@ -21,7 +21,7 @@ export function Footer() {
         <ul css={[secondRowCss]}>
           {SECOND_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
-              <Link css={linkCss} href={footer.href}>
+              <Link css={linkCss} href={footer.href} target="_blank">
                 <span>{footer.name}</span>
                 <span>{footer.detail}</span>
               </Link>

src/components/OfflineSession/OfflineSession.tsx

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+
+import { OfflineThumbnail } from '~/components/OfflineSession/OfflineThumbnail';
+import { SectionTitle } from '~/components/SectionTitle';
+import { OFFLINE_SESSIONS } from '~/constant/offline';
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function OfflineSession() {
+  return (
+    <div css={[commonLayoutCss, layoutCss]}>
+      <SectionTitle label="Offline Activity" title="오프라인 세션" />
+      <ul css={sessionContainerCss}>
+        {OFFLINE_SESSIONS.map(session => (
+          <OfflineThumbnail key={session.title} {...session} showInfoDefault backgroundShow />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const layoutCss = css``;
+
+const sessionContainerCss = css`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 12px;
+  ${mediaQuery('tablet')} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${mediaQuery('mobile')} {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`;