feat: 푸터 퍼블리싱

apps/jurumarble/src/app/page.tsx

@@ -16,6 +16,7 @@ const DynamicSearchInputWrapper = dynamic(
 );
 
 const DynamicBanner = dynamic(() => import('./main/components/Banner'));
+const DynamicFooter = dynamic(() => import('components/Footer/Footer'));
 
 const cx = getClassNames(styles);
 
@@ -35,6 +36,7 @@ function MainPage() {
         {/* @ts-expect-error Server Component */}
         <HydratedDrinkVoteContainer />
       </section>
+      <DynamicFooter />
       <BottomBar />
     </>
   );

apps/jurumarble/src/components/Footer/Footer.tsx

@@ -0,0 +1,50 @@
+import { getClassNames } from 'lib/styles/getClassNames';
+import Link from 'next/link';
+import { SvgLogo } from 'src/assets/icons/components';
+
+import styles from './styles.module.css';
+
+const cx = getClassNames(styles);
+
+const LINK_LIST = [
+  {
+    label: '주루마블 소개',
+    href: '/about',
+  },
+  {
+    label: '이용약관',
+    href: '/agreement',
+  },
+  {
+    label: '개인정보처리방침',
+    href: '/',
+  },
+  {
+    label: '신고가이드',
+    href: '/how-to-report',
+  },
+];
+
+function Footer() {
+  return (
+    <footer className={cx('footer')}>
+      <div className={cx('link-list')}>
+        {LINK_LIST.map(({ label, href }) => (
+          <Link
+            key={label}
+            href={href}
+            className={cx('caption_chip', 'black-03')}
+          >
+            {label}
+          </Link>
+        ))}
+      </div>
+      <SvgLogo width={76} height={14} className={cx('mt-16')} />
+      <span className={cx('mt-24', 'caption_chip', 'black-04')}>
+        @ 2023 주루마블. All rights reserved.
+      </span>
+    </footer>
+  );
+}
+
+export default Footer;

apps/jurumarble/src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer';

apps/jurumarble/src/components/Footer/styles.module.css

@@ -0,0 +1,29 @@
+.footer {
+  width: 100%;
+  height: 142px;
+  margin-bottom: 60px;
+  background-color: var(--line_02);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.link-list {
+  margin-top: 32px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.mt-24 {
+  margin-top: 24px;
+}
+
+.black-03 {
+  color: var(--black_03);
+}
+
+.black-04 {
+  color: var(--black_04);
+}