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 @@
+
\ 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 @@
+
\ 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 (
+
+
+
+
+ {NAVIGATION_MENU.map((item) => (
+
+ {item.menu}
+
+
+ ))}
+
+
+ {/* TODO: 각 페이지 path로 이동하도록 click 핸들러 추가 */}
+ {isLoggedIn ? (
+ <>
+
+ 마이페이지
+
+
+ 로그아웃
+
+
+ ) : (
+
+ 로그인
+
+ )}
+
+
+
+ );
+};
+
+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;
}
`;