Merge pull request #8 from Dev-FE-1/feat/router-#3

Feat/router #3 라우터 초기설정
Dev-FE-1 · Aug 24, 2024 · 666fffb · 666fffb
2 parents 047e7cd + adde1a7
commit 666fffb
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 23 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,21 +10,27 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:@typescript-eslint/recommended',
   ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 12,
+    ecmaVersion: 'latest',
     sourceType: 'module',
   },
   parser: '@typescript-eslint/parser',
   plugins: ['react', 'prettier', '@typescript-eslint', 'jsx-a11y', '@emotion'],
   rules: {
-    'prettier/prettier': 'error',
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'react/react-in-jsx-scope': 'off',
     'react/prop-types': 'off',
     'no-console': 'warn',
     'no-unused-vars': 'warn',
-    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
   },
 }
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>My Idoru</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@tanstack/react-query": "^5.51.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,37 @@
-import { css } from '@emotion/react'
-import './App.css'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-function App() {
-  const papagraphStyles = css`
-    font-weight: bold;
-    font-size: 64px;
-    text-decoration: underline;
-  `
-  return (
-    <>
-      <p css={papagraphStyles}>Don't be late!!</p>
-    </>
-  )
-}
+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 Page404 from './pages/Page404'
+import Playlist from './pages/Playlist'
+import Profile from './pages/Profile'
+import Search from './pages/Search'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Home />,
+    errorElement: <Page404 />,
+    children: [
+      { path: '/login', element: <Login /> },
+      { path: '/search', element: <Search /> },
+      { path: '/playlist', element: <Playlist /> },
+      { path: '/createplaylist', element: <CreatePlaylist /> },
+      {
+        path: '/profile',
+        element: <Profile />,
+        children: [
+          { path: 'editprofile', element: <EditProfile /> },
+          { path: 'follow', element: <Follow /> },
+        ],
+      },
+    ],
+  },
+])
+
+const App = () => <RouterProvider router={router} />
 
 export default App
diff --git a/src/index.css b/src/index.css
@@ -13,10 +13,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-test {
-  font-size: 0;
-}
-
 a {
   font-weight: 500;
   color: #646cff;

diff --git a/src/pages/CreatePlaylist.tsx b/src/pages/CreatePlaylist.tsx
@@ -0,0 +1,5 @@
+const CreatePlaylist = () => {
+  return <div>CreatePlaylist</div>
+}
+
+export default CreatePlaylist
diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
@@ -0,0 +1,5 @@
+const EditProfile = () => {
+  return <div>EditProfile</div>
+}
+
+export default EditProfile
diff --git a/src/pages/Follow.tsx b/src/pages/Follow.tsx
@@ -0,0 +1,5 @@
+const Follow = () => {
+  return <div>Follow</div>
+}
+
+export default Follow
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom'
+
+const Home = () => {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Outlet />
+    </div>
+  )
+}
+
+export default Home
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -0,0 +1,5 @@
+const Login = () => {
+  return <div>Login</div>
+}
+
+export default Login
diff --git a/src/pages/Page404.tsx b/src/pages/Page404.tsx
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled'
+
+const Page404 = () => {
+  return <StyledContainer>404</StyledContainer>
+}
+
+export default Page404
+
+const StyledContainer = styled.div`
+  font-size: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+`
diff --git a/src/pages/Playlist.tsx b/src/pages/Playlist.tsx
@@ -0,0 +1,5 @@
+const Playlist = () => {
+  return <div>Playlist</div>
+}
+
+export default Playlist
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -0,0 +1,5 @@
+const Profile = () => {
+  return <div>Profile</div>
+}
+
+export default Profile
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -0,0 +1,5 @@
+const Search = () => {
+  return <div>Search</div>
+}
+
+export default Search