From ee1eb969b324fb65f942c2a68343abab68d7370d Mon Sep 17 00:00:00 2001
From: myeongheonhong <ruddyh7076@gmail.com>
Date: Fri, 2 Feb 2024 12:14:44 +0900
Subject: [PATCH] =?UTF-8?q?[=20feat=20]=20=ED=91=B8=ED=84=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Layout/EmptyLayout.tsx  |   2 +-
 components/Layout/HeaderLayout.tsx |   2 +-
 components/Layout/index.tsx        |   8 ++-
 components/footer.tsx              | 101 +++++++++++++++++++++++++++++
 4 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 components/footer.tsx

diff --git a/components/Layout/EmptyLayout.tsx b/components/Layout/EmptyLayout.tsx
index c1d11a63..562bc0d1 100644
--- a/components/Layout/EmptyLayout.tsx
+++ b/components/Layout/EmptyLayout.tsx
@@ -8,7 +8,7 @@ export default function EmptyLayout(props: PropsWithChildren) {
 
 const Container = styled.main`
   width: 37.5rem;
-  height: 100%;
+  height: 100svh;
 
   padding: 2.2rem 2.2rem 0 2.2rem;
 `;
diff --git a/components/Layout/HeaderLayout.tsx b/components/Layout/HeaderLayout.tsx
index 54e840d6..981aee73 100644
--- a/components/Layout/HeaderLayout.tsx
+++ b/components/Layout/HeaderLayout.tsx
@@ -17,7 +17,7 @@ export default function HeaderLayout(props: PropsWithChildren) {
 
 const Container = styled.main<{ width: string }>`
   width: ${(props) => props.width};
-  height: 100%;
+  height: 100svh;
 
   padding: 0 2.2rem;
 `;
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 7c5523b3..9781f907 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import EmptyLayout from './EmptyLayout';
 import HeaderLayout from './HeaderLayout';
+import Footer from '../footer';
 
 const layouts = {
   header: HeaderLayout,
@@ -16,5 +17,10 @@ export default function Layout(props: PropsWithChildren<LayoutProps>) {
 
   const LayoutContainer = layouts[layoutKey];
 
-  return <LayoutContainer>{children}</LayoutContainer>;
+  return (
+    <>
+      <LayoutContainer>{children}</LayoutContainer>
+      <Footer />
+    </>
+  );
 }
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 00000000..a6b2cb3b
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,101 @@
+import { LogoImg } from '@/public/assets/images';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import Image from 'next/image';
+
+export default function Footer() {
+  const handleTermsOfUse = () => {
+    window.open('https://mercurial-fuschia-8f2.notion.site/7e827f42eecb46f382ac46cf183245d3');
+  };
+
+  const handlePrivacyPolicy = () => {
+    window.open('https://mercurial-fuschia-8f2.notion.site/ddaf226cf36e40bfa04fd8bc72d159aa');
+  };
+
+  const handleMarketingAgreement = () => {
+    window.open('https://mercurial-fuschia-8f2.notion.site/52b42acdad7e470ca3c3b6343bc1f24a');
+  };
+
+  return (
+    <Styled.FooterContainer>
+      <Styled.FooterWrapper>
+        <Styled.ContentWrapper>
+          상호명: 조물주보다생일선물주
+          <br />
+          사업자등록번호: 246-05-02593
+          <br />
+          통신판매업신고: 2023-경기양주-1379
+          <br />
+          사업장주소지: 경기도 양주시 고덕로 159, 207-403
+          <br />
+          대표자명: 이승원
+        </Styled.ContentWrapper>
+        <Styled.HorizontalLine />
+
+        <Styled.LinkWrapper>
+          <Styled.Link onClick={handleTermsOfUse}>이용약관</Styled.Link>
+          <Styled.Link onClick={handlePrivacyPolicy}>개인정보처리방침</Styled.Link>
+          <Styled.Link onClick={handleMarketingAgreement}>광고마케팅정보수신동의</Styled.Link>
+        </Styled.LinkWrapper>
+      </Styled.FooterWrapper>
+    </Styled.FooterContainer>
+  );
+}
+
+const Styled = {
+  FooterContainer: styled.footer`
+    display: flex;
+    justify-content: center;
+
+    width: 100%;
+    background-color: ${theme.colors.main_blue};
+    padding: 2.5rem 2.2rem;
+
+    ${theme.fonts.body12_2};
+  `,
+
+  FooterWrapper: styled.div`
+    display: flex;
+    flex-direction: column;
+  `,
+
+  Logo: styled.h1`
+    color: ${theme.colors.white};
+    color: ${theme.fonts.headline24_130};
+  `,
+
+  HorizontalLine: styled.hr`
+    display: block;
+
+    width: 100%;
+    height: 0.1rem;
+
+    margin: 1rem 0;
+
+    background: ${theme.colors.pastel_blue};
+    border: none;
+    opacity: 0.5;
+  `,
+
+  ContentWrapper: styled.div`
+    line-height: 2.2rem;
+    color: ${theme.colors.white};
+    opacity: 0.6;
+    margin: 1.5rem 0 0 0;
+    opacity: 0.5;
+  `,
+
+  LinkWrapper: styled.ul`
+    display: flex;
+    gap: 0.5rem;
+  `,
+
+  Link: styled.li`
+    line-height: 2.2rem;
+    color: ${theme.colors.white};
+    opacity: 0.7;
+    padding: 0;
+
+    cursor: pointer;
+  `,
+};