feat: footer 추가

src/components/Footer/Footer.tsx

@@ -0,0 +1,76 @@
+import Link from 'next/link';
+import { css } from '@emotion/react';
+
+import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/footer';
+import { colors } from '~/styles/colors';
+
+export function Footer() {
+  return (
+    <footer css={footerCss}>
+      <div css={footerInfoWrapper}>
+        <ul css={rowCss}>
+          {FIRST_ROW_FOOTER_INFOS.map(footer => (
+            <li key={footer.name}>
+              <Link css={linkCss} href={footer.href}>
+                {footer.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <ul css={[rowCss, rowGapCss]}>
+          {SECOND_ROW_FOOTER_INFOS.map(footer => (
+            <li key={footer.name}>
+              <Link css={linkCss} href={footer.href}>
+                {footer.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <p css={copyrightCss}>© 2023 DEPROMEET. ALL RIGHTS RESERVED.</p>
+      </div>
+    </footer>
+  );
+}
+
+const footerCss = css`
+  background-color: ${colors.black800};
+  padding: 0 20px;
+  width: 100vw;
+`;
+
+const footerInfoWrapper = css`
+  max-width: 1240px;
+  display: flex;
+  flex-direction: column;
+  height: 218px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const rowCss = css`
+  display: flex;
+  gap: 40px;
+`;
+
+const rowGapCss = css`
+  margin-top: 16px;
+`;
+
+const linkCss = css`
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 25.2px; /* 140% */
+  letter-spacing: -0.18px;
+  color: ${colors.gray100};
+`;
+
+const copyrightCss = css`
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 25.2px; /* 140% */
+  letter-spacing: -0.18px;
+  color: ${colors.gray200};
+  margin-top: 40px;
+`;

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

src/constant/depromeet.ts

@@ -1,8 +1,9 @@
-export const DEPROMEET_EMAIL = 'depromeet@gmail.com';
+export const DEPROMEET_EMAIL = 'mailto:depromeet@gmail.com';
 export const DEPROMEET_MEDIUM = 'https://depromeet.medium.com/';
 export const DEPROMEET_FACEBOOK = 'https://www.facebook.com/depromeet/';
 export const DEPROMEET_INSTAGRAM = 'https://www.instagram.com/depromeet/';
 export const DEPROMEET_GITHUB = 'https://github.com/depromeet/';
 export const DEPROMEET_BEHANCE = 'https://www.behance.net/Depromeet';
 
-export const KAKAO_PLUS_FRIEND = 'http://pf.kakao.com/_xoxmcxed';
+export const DEPROMEET_KAKAO_PLUS_FRIEND = 'http://pf.kakao.com/_xoxmcxed';
+export const DEPROMEET_LINKEDIN = 'https://www.linkedin.com/company/depromeet/';

src/constant/footer.ts

@@ -0,0 +1,22 @@
+import {
+  DEPROMEET_BEHANCE,
+  DEPROMEET_EMAIL,
+  DEPROMEET_GITHUB,
+  DEPROMEET_INSTAGRAM,
+  DEPROMEET_KAKAO_PLUS_FRIEND,
+  DEPROMEET_LINKEDIN,
+  DEPROMEET_MEDIUM,
+} from '~/constant/depromeet';
+
+export const FIRST_ROW_FOOTER_INFOS = [
+  { name: 'Instagram', href: DEPROMEET_INSTAGRAM },
+  { name: 'Behance', href: DEPROMEET_BEHANCE },
+  { name: 'Github', href: DEPROMEET_GITHUB },
+  { name: 'Medium', href: DEPROMEET_MEDIUM },
+  { name: 'LinkedIn', href: DEPROMEET_LINKEDIN },
+];
+
+export const SECOND_ROW_FOOTER_INFOS = [
+  { name: 'Kakao channel @depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
+  { name: 'E-mail depromeet@gmail', href: DEPROMEET_EMAIL },
+];

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { domMax, LazyMotion } from 'framer-motion';
 
+import { Footer } from '~/components/Footer';
 import { GNB } from '~/components/GNB';
 import { BASE_URL } from '~/constant/common';
 import { useRecordPageView } from '~/hooks/useRecordPageView';
@@ -28,6 +29,7 @@ export default function App({ Component, pageProps }: AppProps & InitialProps) {
       <GlobalStyle />
       <GNB />
       <Component {...pageProps} />
+      <Footer />
     </LazyMotion>
   );
 }