Merge pull request #67 from codeit9-temporary/feature/Footer

Feat:Footer UI 구현

Author: venise5224

components/Layout/Footer.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import SocialLinks from "../SocialLinks";
+
+const Footer = () => {
+  return (
+    <footer className="bg-black200 pt-8 sm:px-8 pb-[108px] md:px-[104px] lg:px-[104px]">
+      <nav className="relative flex justify-between">
+        <p className="text-gray700 sm:absolute sm:top-[60px] leading-[18.4px]">
+          ©codeit - 2023
+        </p>
+
+        <ul className="flex gap-[30px] text-gray800 leading-[18.4px]">
+          <li>
+            <Link href={"/"}>Privacy Policy</Link>
+          </li>
+          <li>
+            <Link href={"/"}>FAQ</Link>
+          </li>
+        </ul>
+
+        <SocialLinks />
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;

components/SocialLinks.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import Facebook from "@/public/icons/Facebook.svg";
+import twitter from "@/public/icons/twitter.svg";
+import youtube from "@/public/icons/youtube.svg";
+import instagram from "@/public/icons/instagram.svg";
+
+const SocialLinks = () => {
+  return (
+    <ul className="flex gap-3">
+      <li>
+        <Link href={"https://www.facebook.com/codeit.kr/"} target="_blank">
+          <Image src={Facebook} width={20} height={20} alt="facebook" />
+        </Link>
+      </li>
+      <li>
+        <Link href={"https://x.com/"} target="_blank">
+          <Image src={twitter} width={20} height={20} alt="twitter" />
+        </Link>
+      </li>
+      <li>
+        <Link
+          href={"https://www.youtube.com/channel/UCCM79CPm2WbBYTRaiNEExbg"}
+          target="_blank"
+        >
+          <Image src={youtube} width={20} height={20} alt="youtube" />
+        </Link>
+      </li>
+      <li>
+        <Link href={"https://www.instagram.com/codeit_kr/"} target="_blank">
+          <Image src={instagram} width={20} height={20} alt="instagram" />
+        </Link>
+      </li>
+    </ul>
+  );
+};
+
+export default SocialLinks;

pages/_app.tsx

@@ -1,3 +1,4 @@
+import Footer from "@/components/Layout/Footer";
 import Header from "@/components/Layout/Header";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
@@ -8,9 +9,12 @@ export default function App({ Component, pageProps }: AppProps) {
   const hidePaths = ["/login", "/signup"];
 
   return (
-    <>
+    <div className="min-h-screen flex flex-col">
       {!hidePaths.includes(router.pathname) && <Header />}
-      <Component {...pageProps} />
-    </>
+      <div className="flex-grow">
+        <Component {...pageProps} />
+      </div>
+      {!hidePaths.includes(router.pathname) && <Footer />}
+    </div>
   );
 }

public/icons/instagram.svg

@@ -21,6 +21,8 @@ const config: Config = {
         gray400: "#9fa6b2",
         gray500: "#3e3e43",
         gray600: "#6b6b6b",
+        gray700: "#676767",
+        gray800: "#CFCFCF",
         purple100: "#6d6afe",
       },
       screens: {