From dba06349f071730f3e8689b18a9a563c322d55a6 Mon Sep 17 00:00:00 2001
From: aaminha <dks4857@gmail.com>
Date: Mon, 29 Apr 2024 17:22:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20SideNavigation=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/.gitkeep                      |   0
 src/assets/icons/arrowRight.svg          |   3 +
 src/assets/icons/close.svg               |   3 +
 src/components/common/SideNavigation.tsx | 123 +++++++++++++++++++++++
 src/constants/navigation.ts              |   5 +
 src/styles/global/GlobalStyle.ts         |   2 +-
 6 files changed, 135 insertions(+), 1 deletion(-)
 delete mode 100644 src/assets/.gitkeep
 create mode 100644 src/assets/icons/arrowRight.svg
 create mode 100644 src/assets/icons/close.svg
 create mode 100644 src/components/common/SideNavigation.tsx
 create mode 100644 src/constants/navigation.ts

diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/assets/icons/arrowRight.svg b/src/assets/icons/arrowRight.svg
new file mode 100644
index 0000000..6df401b
--- /dev/null
+++ b/src/assets/icons/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.1161 11.8839L7.70711 5.47487C7.31658 5.08435 7.31658 4.45118 7.70711 4.06066L8.06066 3.70711C8.45118 3.31658 9.08435 3.31658 9.47487 3.70711L16.9445 11.1768C17.3351 11.5673 17.3351 12.2005 16.9445 12.591L9.47487 20.0607C9.08435 20.4512 8.45118 20.4512 8.06066 20.0607L7.70711 19.7071C7.31658 19.3166 7.31658 18.6834 7.70711 18.2929L14.1161 11.8839Z" fill="#333333"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 0000000..c43942b
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.79289 17.2784C4.40237 17.669 4.40237 18.3021 4.79289 18.6926L5.3092 19.209C5.69973 19.5995 6.33289 19.5995 6.72341 19.209L12.0009 13.9315L17.2785 19.2091C17.669 19.5996 18.3022 19.5996 18.6927 19.2091L19.209 18.6928C19.5995 18.3023 19.5995 17.6691 19.209 17.2786L13.9314 12.001L19.209 6.72341C19.5995 6.33289 19.5995 5.69973 19.209 5.3092L18.6926 4.79289C18.3021 4.40237 17.669 4.40237 17.2784 4.79289L12.0009 10.0705L6.72346 4.79306C6.33294 4.40254 5.69977 4.40254 5.30925 4.79306L4.79294 5.30937C4.40241 5.69989 4.40241 6.33306 4.79294 6.72358L10.0703 12.001L4.79289 17.2784Z" fill="#333333"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/common/SideNavigation.tsx b/src/components/common/SideNavigation.tsx
new file mode 100644
index 0000000..5d54cdc
--- /dev/null
+++ b/src/components/common/SideNavigation.tsx
@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { ReactComponent as ArrowIcon } from '@/assets/icons/arrowRight.svg';
+import { ReactComponent as CloseIcon } from '@/assets/icons/close.svg';
+import { PlainButton } from '@/components/common/PlainButton';
+import { NAVIGATION_MENU } from '@/constants/navigation';
+
+interface SideNavigationProps {
+  isLoggedIn: boolean;
+  setOpen: (show: boolean) => void;
+}
+
+export const SideNavigation = ({ isLoggedIn, setOpen }: SideNavigationProps) => {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, []);
+
+  return (
+    <StyledContainer>
+      <StyledContent>
+        <StyledMenuButtonList>
+          <button className="close-button" onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </button>
+          {NAVIGATION_MENU.map((item) => (
+            <Link to={item.path} className="menu-button" key={item.menu}>
+              <span>{item.menu}</span>
+              <ArrowIcon />
+            </Link>
+          ))}
+        </StyledMenuButtonList>
+        <StyledUserButtonList>
+          {/* TODO: 각 페이지 path로 이동하도록 click 핸들러 추가 */}
+          {isLoggedIn ? (
+            <>
+              <PlainButton variant="primary" height="48px">
+                마이페이지
+              </PlainButton>
+              <PlainButton variant="gray" height="48px">
+                로그아웃
+              </PlainButton>
+            </>
+          ) : (
+            <PlainButton variant="gray" height="48px">
+              로그인
+            </PlainButton>
+          )}
+        </StyledUserButtonList>
+      </StyledContent>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  width: 100%;
+  height: 100vh;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  background: ${({ theme }) => theme.color.bgModal};
+`;
+
+const StyledContent = styled.nav`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  width: 320px;
+  height: 100%;
+
+  background: ${({ theme }) => theme.color.white};
+`;
+
+const StyledMenuButtonList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  .close-button {
+    margin: 16px 20px 16px auto;
+  }
+
+  .menu-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 12px 16px 12px 32px;
+    background: ${({ theme }) => theme.color.white};
+
+    span {
+      ${({ theme }) => theme.font.mobile.title1};
+      color: ${({ theme }) => theme.color.gray800};
+    }
+
+    svg {
+      margin: 12px;
+    }
+
+    &:hover {
+      background: ${({ theme }) => theme.color.gray100};
+    }
+  }
+`;
+
+const StyledUserButtonList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  padding: 20px 32px;
+`;
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
new file mode 100644
index 0000000..9e1684c
--- /dev/null
+++ b/src/constants/navigation.ts
@@ -0,0 +1,5 @@
+export const NAVIGATION_MENU = [
+  //TODO: path 수정하기
+  { menu: '진단하기', path: '/' },
+  { menu: '경험하기', path: '/' },
+];
diff --git a/src/styles/global/GlobalStyle.ts b/src/styles/global/GlobalStyle.ts
index 7c1f03b..10aa111 100644
--- a/src/styles/global/GlobalStyle.ts
+++ b/src/styles/global/GlobalStyle.ts
@@ -56,7 +56,7 @@ a{
   text-decoration: none;
   color: inherit;
 }
-image {
+svg, image {
 	display: block;
 }
 `;