diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg
new file mode 100644
index 0000000..dd09869
--- /dev/null
+++ b/src/assets/icons/menu.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
new file mode 100644
index 0000000..b0614aa
--- /dev/null
+++ b/src/assets/icons/user.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/mainLogo.svg b/src/assets/mainLogo.svg
new file mode 100644
index 0000000..91f6437
--- /dev/null
+++ b/src/assets/mainLogo.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/components/common/TopNavigation.tsx b/src/components/common/TopNavigation.tsx
new file mode 100644
index 0000000..df1a729
--- /dev/null
+++ b/src/components/common/TopNavigation.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { ReactComponent as MenuIcon } from '@/assets/icons/menu.svg';
+import { ReactComponent as UserIcon } from '@/assets/icons/user.svg';
+import { ReactComponent as MainLogo } from '@/assets/mainLogo.svg';
+import { SideNavigation } from '@/components/common/SideNavigation';
+import { SmallButton } from '@/components/common/SmallButton';
+import { NAVIGATION_MENU } from '@/constants/navigation';
+
+export const TopNavigation = () => {
+ const [loggedIn, setLoggedIn] = useState(false); // 로그인 여부를 확인하기 위한 임시 코드
+ const [showSideNav, setShowSideNav] = useState(false);
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+ {NAVIGATION_MENU.map((item) => (
+ {
+ navigate(item.path);
+ }}
+ >
+ {item.menu}
+
+ ))}
+
+ {loggedIn ? (
+
+
+
+ ) : (
+ {
+ // TODO: 로그인 페이지로 이동하도록 수정
+ setLoggedIn((prev) => !prev);
+ }}
+ >
+ 로그인
+
+ )}
+
+ {
+ //TODO: 마이페이지로 이동하도록 수정
+ setShowSideNav((prev) => !prev);
+ }}
+ >
+
+
+ {showSideNav && }
+
+
+ );
+};
+
+const StyledContainer = styled.header`
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+
+ border-bottom: 1px solid ${({ theme }) => theme.color.primary100};
+ background: rgba(255, 255, 255, 0.6);
+ backdrop-filter: blur(5px);
+
+ @media ${({ theme }) => theme.device.mobile} {
+ background: ${({ theme }) => theme.color.white};
+ }
+`;
+
+const StyledInnerContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ max-width: 1280px;
+ padding: 20px 42px;
+ margin: 0 auto;
+
+ @media ${({ theme }) => theme.device.mobile} {
+ padding: 16px 8px 16px 24px;
+ }
+`;
+
+const StyledMenuContainer = styled.div`
+ display: flex;
+ gap: 16px;
+ align-items: center;
+
+ @media ${({ theme }) => theme.device.mobile} {
+ display: none;
+ }
+`;
+
+const StyledNavigationMenu = styled.div`
+ display: flex;
+`;
+
+const StyledMenuButton = styled.button`
+ display: none;
+ padding: 0px 12px;
+
+ @media ${({ theme }) => theme.device.mobile} {
+ display: block;
+ }
+`;
+
+const StyledUserButton = styled.button`
+ padding: 8px;
+
+ border-radius: 8px;
+ background: ${({ theme }) => theme.color.primary50};
+
+ path {
+ fill: ${({ theme }) => theme.color.primary500};
+ }
+`;
diff --git a/src/router.tsx b/src/router.tsx
index 1e36b4c..04cf2a6 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,6 +1,6 @@
import { Route, Routes } from 'react-router-dom';
-import { HomePage } from './pages/HomePage';
+import { HomePage } from '@/pages/HomePage';
export const Router = () => {
return (