From eafdc75d49c143f099b00d66a077aedd20ca1d4b Mon Sep 17 00:00:00 2001 From: Gin Song Date: Sat, 24 Aug 2024 05:54:57 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20#3=20basic=20router?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 42 +++++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 51 ++++++++++++++++++++++++++---------- src/index.css | 4 --- src/layouts/Root.tsx | 11 ++++++++ src/pages/CreatePlaylist.tsx | 5 ++++ src/pages/EditProfile.tsx | 5 ++++ src/pages/Fallow.tsx | 5 ++++ src/pages/Login.tsx | 5 ++++ src/pages/Main.tsx | 5 ++++ src/pages/Page404.tsx | 5 ++++ src/pages/Playlist.tsx | 5 ++++ src/pages/Profile.tsx | 5 ++++ src/pages/Search.tsx | 5 ++++ 14 files changed, 136 insertions(+), 18 deletions(-) create mode 100644 src/layouts/Root.tsx create mode 100644 src/pages/CreatePlaylist.tsx create mode 100644 src/pages/EditProfile.tsx create mode 100644 src/pages/Fallow.tsx create mode 100644 src/pages/Login.tsx create mode 100644 src/pages/Main.tsx create mode 100644 src/pages/Page404.tsx create mode 100644 src/pages/Playlist.tsx create mode 100644 src/pages/Profile.tsx create mode 100644 src/pages/Search.tsx diff --git a/package-lock.json b/package-lock.json index d2824f40..10474621 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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": { @@ -1325,6 +1326,15 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.21.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz", @@ -5457,6 +5467,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", diff --git a/package.json b/package.json index 89d9f3de..90e357d8 100644 --- 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 index ee364ce6..64629cdc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,40 @@ -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 ( - <> -

Don't be late!!

- - ) -} +import CreatePlaylist from './pages/CreatePlaylist' +import EditProfile from './pages/EditProfile' +import Fallow from './pages/Fallow' +import Login from './pages/Login' +import Main from './pages/Main' +import Page404 from './pages/Page404' +import Playlist from './pages/Playlist' +import Profile from './pages/Profile' +import Search from './pages/Search' + +const router = createBrowserRouter([ + { + path: '/', + errorElement: , + children: [ + { path: '/login', element: }, + { path: '/main', element:
}, + { path: '/search', element: }, + { + path: '/playlist', + element: , + children: [ + { + path: '/createplaylist', + element: , + }, + ], + }, + { path: '/profile', element: }, + { path: '/fallow', element: }, + { path: '/edit-profile', element: }, + ], + }, +]) + +const App = () => export default App diff --git a/src/index.css b/src/index.css index 643b2f8d..6119ad9a 100644 --- 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/layouts/Root.tsx b/src/layouts/Root.tsx new file mode 100644 index 00000000..1973cd8e --- /dev/null +++ b/src/layouts/Root.tsx @@ -0,0 +1,11 @@ +import { Outlet } from 'react-router-dom' + +const RootLayout = () => ( + <> +
+ +
+ +) + +export default RootLayout diff --git a/src/pages/CreatePlaylist.tsx b/src/pages/CreatePlaylist.tsx new file mode 100644 index 00000000..01befa41 --- /dev/null +++ b/src/pages/CreatePlaylist.tsx @@ -0,0 +1,5 @@ +const CreatePlaylist = () => { + return
CreatePlaylist
+} + +export default CreatePlaylist diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx new file mode 100644 index 00000000..166b87a3 --- /dev/null +++ b/src/pages/EditProfile.tsx @@ -0,0 +1,5 @@ +const EditProfile = () => { + return
EditProfile
+} + +export default EditProfile diff --git a/src/pages/Fallow.tsx b/src/pages/Fallow.tsx new file mode 100644 index 00000000..1c680078 --- /dev/null +++ b/src/pages/Fallow.tsx @@ -0,0 +1,5 @@ +const Fallow = () => { + return
Fallow
+} + +export default Fallow diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 00000000..67b92fc0 --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,5 @@ +const Login = () => { + return
Login
+} + +export default Login diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx new file mode 100644 index 00000000..e2cdb8e6 --- /dev/null +++ b/src/pages/Main.tsx @@ -0,0 +1,5 @@ +const Main = () => { + return
Main
+} + +export default Main diff --git a/src/pages/Page404.tsx b/src/pages/Page404.tsx new file mode 100644 index 00000000..66f103ee --- /dev/null +++ b/src/pages/Page404.tsx @@ -0,0 +1,5 @@ +const Page404 = () => { + return
404
+} + +export default Page404 diff --git a/src/pages/Playlist.tsx b/src/pages/Playlist.tsx new file mode 100644 index 00000000..14316c06 --- /dev/null +++ b/src/pages/Playlist.tsx @@ -0,0 +1,5 @@ +const Playlist = () => { + return
Playlist
+} + +export default Playlist diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx new file mode 100644 index 00000000..feedd39a --- /dev/null +++ b/src/pages/Profile.tsx @@ -0,0 +1,5 @@ +const Profile = () => { + return
Profile
+} + +export default Profile diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx new file mode 100644 index 00000000..53d479f0 --- /dev/null +++ b/src/pages/Search.tsx @@ -0,0 +1,5 @@ +const Search = () => { + return
Search
+} + +export default Search From 111e836dbc2fcf4ab984eff0711fa5ae07e20318 Mon Sep 17 00:00:00 2001 From: Gin Song Date: Sat, 24 Aug 2024 09:12:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20#3=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=84=B0=20=EC=B4=88=EA=B8=B0=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- src/App.tsx | 21 +++++++++------------ src/layouts/Root.tsx | 11 ----------- src/pages/Fallow.tsx | 5 ----- src/pages/Follow.tsx | 5 +++++ src/pages/Home.tsx | 14 ++++++++++++++ src/pages/Main.tsx | 5 ----- src/pages/Page404.tsx | 8 +++++++- 8 files changed, 37 insertions(+), 36 deletions(-) delete mode 100644 src/layouts/Root.tsx delete mode 100644 src/pages/Fallow.tsx create mode 100644 src/pages/Follow.tsx create mode 100644 src/pages/Home.tsx delete mode 100644 src/pages/Main.tsx diff --git a/index.html b/index.html index e4b78eae..58ad6c74 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - Vite + React + TS + My Idoru
diff --git a/src/App.tsx b/src/App.tsx index 64629cdc..c6343f93 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,9 +2,9 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom' import CreatePlaylist from './pages/CreatePlaylist' import EditProfile from './pages/EditProfile' -import Fallow from './pages/Fallow' +import Follow from './pages/Follow' import Login from './pages/Login' -import Main from './pages/Main' +import Home from './pages/Home' import Page404 from './pages/Page404' import Playlist from './pages/Playlist' import Profile from './pages/Profile' @@ -13,24 +13,21 @@ import Search from './pages/Search' const router = createBrowserRouter([ { path: '/', + element: , errorElement: , children: [ { path: '/login', element: }, - { path: '/main', element:
}, { path: '/search', element: }, + { path: '/playlist', element: }, + { path: '/createplaylist', element: }, { - path: '/playlist', - element: , + path: '/profile', + element: , children: [ - { - path: '/createplaylist', - element: , - }, + { path: 'editprofile', element: }, + { path: 'follow', element: }, ], }, - { path: '/profile', element: }, - { path: '/fallow', element: }, - { path: '/edit-profile', element: }, ], }, ]) diff --git a/src/layouts/Root.tsx b/src/layouts/Root.tsx deleted file mode 100644 index 1973cd8e..00000000 --- a/src/layouts/Root.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Outlet } from 'react-router-dom' - -const RootLayout = () => ( - <> -
- -
- -) - -export default RootLayout diff --git a/src/pages/Fallow.tsx b/src/pages/Fallow.tsx deleted file mode 100644 index 1c680078..00000000 --- a/src/pages/Fallow.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const Fallow = () => { - return
Fallow
-} - -export default Fallow diff --git a/src/pages/Follow.tsx b/src/pages/Follow.tsx new file mode 100644 index 00000000..4109c96c --- /dev/null +++ b/src/pages/Follow.tsx @@ -0,0 +1,5 @@ +const Follow = () => { + return
Follow
+} + +export default Follow diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 00000000..94411126 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,14 @@ +import { Outlet } from 'react-router-dom' + +const Home = () => { + return ( +
+

Home

+

+ +

+
+ ) +} + +export default Home diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx deleted file mode 100644 index e2cdb8e6..00000000 --- a/src/pages/Main.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const Main = () => { - return
Main
-} - -export default Main diff --git a/src/pages/Page404.tsx b/src/pages/Page404.tsx index 66f103ee..bccd2729 100644 --- a/src/pages/Page404.tsx +++ b/src/pages/Page404.tsx @@ -1,5 +1,11 @@ const Page404 = () => { - return
404
+ return ( +
+

404

+
+ ) } export default Page404 From adde1a7d8a8ee1f71540f018417a87fae1951b29 Mon Sep 17 00:00:00 2001 From: Gin Song Date: Sat, 24 Aug 2024 09:45:45 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8=20#3=20Styled=20Container?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 12 +++++++++--- src/pages/Home.tsx | 4 +--- src/pages/Page404.tsx | 18 +++++++++++------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 20d36136..ebfb7628 100644 --- 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/src/pages/Home.tsx b/src/pages/Home.tsx index 94411126..46bd24e8 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -4,9 +4,7 @@ const Home = () => { return (

Home

-

- -

+
) } diff --git a/src/pages/Page404.tsx b/src/pages/Page404.tsx index bccd2729..9400b865 100644 --- a/src/pages/Page404.tsx +++ b/src/pages/Page404.tsx @@ -1,11 +1,15 @@ +import styled from '@emotion/styled' + const Page404 = () => { - return ( -
-

404

-
- ) + return 404 } export default Page404 + +const StyledContainer = styled.div` + font-size: 3rem; + display: flex; + justify-content: center; + align-items: center; + width: 100vw; +`