Feat/layout #9 헤더, 네비바 설정

src/App.tsx

@@ -1,33 +1,38 @@
+import { PATH } from './constants/path'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import CreatePlaylist from './pages/CreatePlaylist'
-import EditProfile from './pages/EditProfile'
-import Follow from './pages/Follow'
-import Login from './pages/Login'
-import Home from './pages/Home'
+import CreatePlaylistPage from './pages/CreatePlaylistPage'
+import EditProfilePage from './pages/EditProfilePage'
+import FollowPage from './pages/FollowPage'
+import LoginPage from './pages/LoginPage'
 import Page404 from './pages/Page404'
-import Playlist from './pages/Playlist'
-import Profile from './pages/Profile'
-import Search from './pages/Search'
+import PlaylistPage from './pages/PlaylistPage'
+import ProfilePage from './pages/ProfilePage'
+import SearchPage from './pages/SearchPage'
+import RootLayout from './layout/Root'
+import ChatPage from './pages/ChatPage'
+import HomePage from './pages/HomePage'
 
 const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Home />,
+    path: PATH.HOME,
+    element: <RootLayout />,
     errorElement: <Page404 />,
     children: [
-      { path: '/login', element: <Login /> },
-      { path: '/search', element: <Search /> },
-      { path: '/playlist', element: <Playlist /> },
-      { path: '/createplaylist', element: <CreatePlaylist /> },
+      { index: true, element: <HomePage /> },
+      { path: PATH.LOGIN, element: <LoginPage /> },
+      { path: PATH.SEARCH, element: <SearchPage /> },
+      { path: PATH.PLAYLIST, element: <PlaylistPage /> },
+      { path: PATH.CREATEPLAYLIST, element: <CreatePlaylistPage /> },
       {
-        path: '/profile',
-        element: <Profile />,
+        path: PATH.PROFILE,
+        element: <ProfilePage />,
         children: [
-          { path: 'editprofile', element: <EditProfile /> },
-          { path: 'follow', element: <Follow /> },
+          { path: PATH.EDITPROFILE, element: <EditProfilePage /> },
+          { path: PATH.FOLLOW, element: <FollowPage /> },
         ],
       },
+      { path: PATH.CHAT, element: <ChatPage /> },
     ],
   },
 ])

src/components/layout/Header.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled'
+import { useNavigate } from 'react-router-dom'
+
+interface HeaderProps {
+  onBack?: () => void
+}
+
+const Header: React.FC<HeaderProps> = ({ onBack }) => {
+  const navigate = useNavigate()
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack()
+    } else {
+      navigate(-1)
+    }
+  }
+
+  return (
+    <StyledContainer>
+      <button onClick={handleBack}>BACK</button>
+    </StyledContainer>
+  )
+}
+
+export default Header
+
+const StyledContainer = styled.div`
+  border: 1px solid black;
+`

src/components/layout/Navbar.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled'
+import { NavLink } from 'react-router-dom'
+import { PATH } from '../../constants/path'
+
+const Navbar = () => {
+  const menu = [
+    { path: PATH.HOME, title: 'HOME' },
+    { path: PATH.SEARCH, title: 'SEARCH' },
+    { path: PATH.CREATEPLAYLIST, title: 'CREATE PLAYLIST' },
+    { path: PATH.CHAT, title: 'CHAT' },
+    { path: PATH.PROFILE, title: 'PROFILE' },
+  ]
+
+  return (
+    <nav>
+      <StyledMenuContainer>
+        {menu.map(({ path, title }) => (
+          <StyledMenuItem key={title}>
+            <NavLink to={path}>{title}</NavLink>
+          </StyledMenuItem>
+        ))}
+      </StyledMenuContainer>
+    </nav>
+  )
+}
+
+export default Navbar
+
+const StyledMenuContainer = styled.div`
+  display: flex;
+  margin-top: 20px;
+  border: 1px solid black;
+`
+
+const StyledMenuItem = styled.div`
+  margin: 15px;
+`

src/constants/path.ts

@@ -0,0 +1,12 @@
+export const PATH = {
+  HOME: '/',
+  SEARCH: '/search',
+  PAGE404: '*',
+  LOGIN: '/login',
+  PLAYLIST: '/playlist',
+  CREATEPLAYLIST: '/createplaylist',
+  PROFILE: '/profile',
+  EDITPROFILE: 'editprofile',
+  FOLLOW: 'follow',
+  CHAT: '/chat',
+}

src/layout/Root.tsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled'
+import { Outlet } from 'react-router-dom'
+import Navbar from '../components/layout/Navbar'
+import Header from '../components/layout/Header'
+
+const RootLayout = () => (
+  <StyledContainer>
+    <Header />
+    <Outlet />
+    <Navbar />
+  </StyledContainer>
+)
+
+const StyledContainer = styled.div`
+  min-width: 500px;
+  min-height: 700px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export default RootLayout

src/pages/ChatPage.tsx

@@ -0,0 +1,5 @@
+const ChatPage = () => {
+  return <div>Chat</div>
+}
+
+export default ChatPage

src/pages/CreatePlaylistPage.tsx

@@ -0,0 +1,5 @@
+const CreatePlaylistPage = () => {
+  return <div>CreatePlaylist</div>
+}
+
+export default CreatePlaylistPage

src/pages/EditProfilePage.tsx

@@ -0,0 +1,5 @@
+const EditProfilePage = () => {
+  return <div>EditProfile</div>
+}
+
+export default EditProfilePage

src/pages/FollowPage.tsx

@@ -0,0 +1,5 @@
+const FollowPage = () => {
+  return <div>Follow</div>
+}
+
+export default FollowPage

src/pages/HomePage.tsx

@@ -0,0 +1,5 @@
+const HomePage = () => {
+  return <div>Home</div>
+}
+
+export default HomePage

src/pages/LoginPage.tsx

@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>Login</div>
+}
+
+export default LoginPage

src/pages/PlaylistPage.tsx

@@ -0,0 +1,5 @@
+const PlaylistPage = () => {
+  return <div>Playlist</div>
+}
+
+export default PlaylistPage

src/pages/ProfilePage.tsx

@@ -0,0 +1,5 @@
+const ProfilePage = () => {
+  return <div>Profile</div>
+}
+
+export default ProfilePage

src/pages/SearchPage.tsx

@@ -0,0 +1,5 @@
+const SearchPage = () => {
+  return <div>Search</div>
+}
+
+export default SearchPage