From 6dbca8afa8ae1d4ecafa3507ab407c7d0ea64133 Mon Sep 17 00:00:00 2001
From: Hyeok Min Kwon <khmzxc@naver.com>
Date: Sun, 7 Apr 2024 19:42:30 +0900
Subject: [PATCH] Add footer (WIP), edit body style

---
 src/components/Footer/index.tsx | 48 +++++++++++++++++++++++++++++++++
 src/components/Nav/index.tsx    |  2 +-
 src/routes.tsx                  |  2 ++
 src/style.scss                  |  4 ++-
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Footer/index.tsx

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..280465b
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+
+const Footer = () => {
+  return (
+    <Container>
+      <Sponsors></Sponsors>
+      <About></About>
+      <Fixed></Fixed>
+    </Container>
+  );
+};
+
+export default Footer;
+
+const Container = styled.div`
+  width: 100%;
+
+  position: absolute;
+  bottom: 0;
+`;
+
+const Sponsors = styled.div`
+  //////////////////////////
+  background-color: deeppink;
+  //////////////////////////
+`;
+
+const About = styled.div`
+  width: 100%;
+  height: 12rem;
+
+  //////////////////////////
+  background-color: gray;
+  //////////////////////////
+`;
+
+const Fixed = styled.div`
+  position: fixed;
+  bottom: 0;
+
+  width: 100%;
+  height: 2.5rem;
+
+  //////////////////////////
+  background-color: skyblue;
+  //////////////////////////
+`;
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
index d134051..1fce4ab 100644
--- a/src/components/Nav/index.tsx
+++ b/src/components/Nav/index.tsx
@@ -81,7 +81,7 @@ const Container = styled.div`
   align-items: center;
 
   /////////////////////////
-  border: 1px solid black;
+  background-color: bisque;
   /////////////////////////
 `;
 
diff --git a/src/routes.tsx b/src/routes.tsx
index bdaf516..c3a0614 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,3 +1,4 @@
+import Footer from "components/Footer";
 import Nav from "components/Nav";
 import Home from "pages/Home";
 import SponsorList from "pages/Sponsor";
@@ -14,6 +15,7 @@ const Router = () => {
         <Route path="/404" />
         <Route path="*" element={<Navigate replace to={"/404"} />} />
       </Routes>
+      <Footer />
     </BrowserRouter>
   );
 };
diff --git a/src/style.scss b/src/style.scss
index 2fb2f9c..c9daaad 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,5 +1,7 @@
 body {
-	margin: 0 16px;
+	margin: 0;
 
 	min-height: 100vh;
+
+	position: relative;
 }
\ No newline at end of file