From d50b8b6ef5770d17104f6ddee9889b633ee3f7fb Mon Sep 17 00:00:00 2001 From: Hyevvy <72402747+Hyevvy@users.noreply.github.com> Date: Wed, 8 Jun 2022 02:16:29 +0900 Subject: [PATCH] Feature/#11 (#47) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :sparkles: feat: 라우팅 구현 * 📝docs: PR 템플릿 작성 * :sparkles: feat: dynamic routing 구현 Co-authored-by: YuHyun --- .github/PULL_REQUEST_TEMPLATE/kr.md | 9 ++++ package-lock.json | 76 ++++++++++++++++++++++++++++- package.json | 2 + src/App.tsx | 9 ++-- src/pages/404.tsx | 4 ++ src/pages/create.tsx | 4 ++ src/pages/detail.tsx | 9 ++++ src/pages/edit.tsx | 9 ++++ src/pages/home.tsx | 4 ++ src/pages/profile.tsx | 9 ++++ src/pages/result.tsx | 4 ++ src/pages/signIn.tsx | 4 ++ src/pages/signUp.tsx | 4 ++ src/routes/Router.tsx | 30 ++++++++++++ tsconfig.json | 1 + 15 files changed, 173 insertions(+), 5 deletions(-) create mode 100644 .github/PULL_REQUEST_TEMPLATE/kr.md create mode 100644 src/pages/404.tsx create mode 100644 src/pages/create.tsx create mode 100644 src/pages/detail.tsx create mode 100644 src/pages/edit.tsx create mode 100644 src/pages/home.tsx create mode 100644 src/pages/profile.tsx create mode 100644 src/pages/result.tsx create mode 100644 src/pages/signIn.tsx create mode 100644 src/pages/signUp.tsx create mode 100644 src/routes/Router.tsx diff --git a/.github/PULL_REQUEST_TEMPLATE/kr.md b/.github/PULL_REQUEST_TEMPLATE/kr.md new file mode 100644 index 0000000..a0eb46d --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/kr.md @@ -0,0 +1,9 @@ +# 개요 + +# 작업 내용 + +# 관련 이슈 + +# 사진 + + diff --git a/package-lock.json b/package-lock.json index d17a6f7..0e3e506 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "my-app", + "name": "2javatayo", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "my-app", + "name": "2javatayo", "version": "0.1.0", "dependencies": { "@craco/craco": "^6.4.3", @@ -19,9 +19,11 @@ "@types/node": "^16.11.38", "@types/react": "^18.0.12", "@types/react-dom": "^18.0.5", + "@types/react-router-dom": "^5.3.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-router": "^6.3.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "typescript": "^4.7.3", "web-vitals": "^2.1.4" @@ -11103,6 +11105,11 @@ "@types/unist": "*" } }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -11275,6 +11282,25 @@ "@types/react": "*" } }, + "node_modules/@types/react-router": { + "version": "5.1.18", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz", + "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@types/react-syntax-highlighter": { "version": "11.0.5", "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz", @@ -26128,6 +26154,19 @@ "react": ">=16.8" } }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -39659,6 +39698,11 @@ "@types/unist": "*" } }, + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -39831,6 +39875,25 @@ "@types/react": "*" } }, + "@types/react-router": { + "version": "5.1.18", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz", + "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==", + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-syntax-highlighter": { "version": "11.0.5", "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz", @@ -50919,6 +50982,15 @@ "history": "^5.2.0" } }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 6e78499..920605e 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,11 @@ "@types/node": "^16.11.38", "@types/react": "^18.0.12", "@types/react-dom": "^18.0.5", + "@types/react-router-dom": "^5.3.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-router": "^6.3.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "typescript": "^4.7.3", "web-vitals": "^2.1.4" diff --git a/src/App.tsx b/src/App.tsx index b4f6543..3125fb6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ -function App() { - return <>; -} +import React from "react"; +import AppRouter from "./routes/Router"; + +const App: React.FC = () => { + return ; +}; export default App; diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 0000000..6ab4f29 --- /dev/null +++ b/src/pages/404.tsx @@ -0,0 +1,4 @@ +const NotFound: React.FC = () => { + return
404 NOT FOUND
; +}; +export default NotFound; diff --git a/src/pages/create.tsx b/src/pages/create.tsx new file mode 100644 index 0000000..eca78ec --- /dev/null +++ b/src/pages/create.tsx @@ -0,0 +1,4 @@ +const Create: React.FC = () => { + return
Create
; +}; +export default Create; diff --git a/src/pages/detail.tsx b/src/pages/detail.tsx new file mode 100644 index 0000000..b95e117 --- /dev/null +++ b/src/pages/detail.tsx @@ -0,0 +1,9 @@ +import { useParams } from "react-router"; + +const Detail: React.FC = () => { + const { id } = useParams>(); + + console.log(id); + return
{id}Detail
; +}; +export default Detail; diff --git a/src/pages/edit.tsx b/src/pages/edit.tsx new file mode 100644 index 0000000..7a7dd2a --- /dev/null +++ b/src/pages/edit.tsx @@ -0,0 +1,9 @@ +import { useParams } from "react-router"; +const Edit: React.FC = () => { + const { id } = useParams>(); + + console.log(id); + + return
{id}Edit
; +}; +export default Edit; diff --git a/src/pages/home.tsx b/src/pages/home.tsx new file mode 100644 index 0000000..bb239ad --- /dev/null +++ b/src/pages/home.tsx @@ -0,0 +1,4 @@ +const Home: React.FC = () => { + return
Home
; +}; +export default Home; diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx new file mode 100644 index 0000000..1963d5d --- /dev/null +++ b/src/pages/profile.tsx @@ -0,0 +1,9 @@ +import { useParams } from "react-router"; + +const Profile: React.FC = () => { + const { id } = useParams>(); + + console.log(id); + return
Profile
; +}; +export default Profile; diff --git a/src/pages/result.tsx b/src/pages/result.tsx new file mode 100644 index 0000000..195ebb5 --- /dev/null +++ b/src/pages/result.tsx @@ -0,0 +1,4 @@ +const Result: React.FC = () => { + return
Result
; +}; +export default Result; diff --git a/src/pages/signIn.tsx b/src/pages/signIn.tsx new file mode 100644 index 0000000..a7d8f03 --- /dev/null +++ b/src/pages/signIn.tsx @@ -0,0 +1,4 @@ +const SignIn: React.FC = () => { + return
SignIn
; +}; +export default SignIn; diff --git a/src/pages/signUp.tsx b/src/pages/signUp.tsx new file mode 100644 index 0000000..a0a676b --- /dev/null +++ b/src/pages/signUp.tsx @@ -0,0 +1,4 @@ +const SignUp: React.FC = () => { + return
SignUp
; +}; +export default SignUp; diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx new file mode 100644 index 0000000..013b8f7 --- /dev/null +++ b/src/routes/Router.tsx @@ -0,0 +1,30 @@ +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import NotFound from "../pages/404"; +import Create from "../pages/create"; +import Detail from "../pages/detail"; +import Edit from "../pages/edit"; +import Home from "../pages/home"; +import Profile from "../pages/profile"; +import Result from "../pages/result"; +import SignIn from "../pages/signIn"; +import SignUp from "../pages/signUp"; + +const AppRouter: React.FC = () => { + return ( + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + + + ); +}; +export default AppRouter; diff --git a/tsconfig.json b/tsconfig.json index 191fe4f..3f39252 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "target": "es5", + "typeRoots" : ["./@types", "./node_modules/@types"], "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true,