✨ Feat: Footer 컴포넌트 구현

src/components/layout/footer/footer.tsx

@@ -0,0 +1,45 @@
+import { Container } from '@/components/layout';
+import { Icon } from '@/components/ui';
+import Link from 'next/link';
+
+const Footer = () => {
+  return (
+    <footer>
+      <Container className='max-w-full bg-gray-100'>
+        <div className='mx-auto flex flex-wrap justify-between gap-10 px-5 py-8 desktop:w-[964px]'>
+          <div className='order-3 flex-grow text-caption font-normal text-gray-500 tablet:order-1 tablet:flex-grow-0 tablet:text-body-m'>
+            ©codeit - 2023
+          </div>
+          <div className='order-1 flex gap-[30px] font-normal text-gray-500'>
+            <Link href={'/'} className='text-body-s hover:text-gray-300 tablet:text-body-m'>
+              Privacy Policy
+            </Link>
+            <Link href={'/'} className='text-body-s hover:text-gray-300 tablet:text-body-m'>
+              FAQ
+            </Link>
+          </div>
+
+          <ul className='order-2 flex gap-[10px]'>
+            <li className='hover:-translate-y-1'>
+              <Link href='https://mail.google.com/' target='_blank'>
+                <Icon iconName='envelope' ariaLabel='메일' className='bg-gray-400' />
+              </Link>
+            </li>
+            <li className='hover:-translate-y-1'>
+              <Link href='https://www.facebook.com/' target='_blank'>
+                <Icon iconName='facebook' ariaLabel='페이스북' className='bg-gray-400' />
+              </Link>
+            </li>
+            <li className='hover:-translate-y-1'>
+              <Link href='https://www.instagram.com/' target='_blank'>
+                <Icon iconName='instagram' ariaLabel='인스타그램' className='bg-gray-400' />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/layout/frame/frame.tsx

@@ -7,9 +7,9 @@ const Frame = ({ title, content }: FrameProps) => {
   return (
     <>
       <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
-        <h1 className='text-xl font-bold tablet:text-[28px]'>{title}</h1>
+        <h1 className='text-heading-s font-bold tablet:text-heading-l'>{title}</h1>
         <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
-          <h2 className='text-sm font-normal tablet:text-base'>{content}</h2>
+          <h2 className='text-body-s font-normal tablet:text-body-l'>{content}</h2>
           {/*  버튼 컴포넌트 넣을 자리 */}
         </div>
       </section>

src/pages/_app.tsx

@@ -1,4 +1,6 @@
 import { Header, Wrapper } from '@/components/layout';
+import Footer from '@/components/layout/footer/footer';
+
 import ToastProvider from '@/context/toastContext/toastContext';
 import '@/styles/fonts.css';
 import '@/styles/globals.css';
@@ -18,6 +20,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
       <Wrapper>
         <Header />
         <main className='grow'>{page}</main>
+        <Footer />
       </Wrapper>
     ));