Feature/#11 (#47)

* ✨ feat: 라우팅 구현

* 📝docs: PR 템플릿 작성

* ✨ feat: dynamic routing 구현

Co-authored-by: YuHyun <[email protected]>

.github/PULL_REQUEST_TEMPLATE/kr.md

@@ -0,0 +1,9 @@
+# 개요
+
+# 작업 내용
+
+# 관련 이슈
+
+# 사진
+
+<!-- closes #이슈번호 작성해야 칸반보드에서 이슈와 PR이 함께 Done으로 넘어갑니다-->

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"

src/App.tsx

@@ -1,5 +1,8 @@
-function App() {
-  return <></>;
-}
+import React from "react";
+import AppRouter from "./routes/Router";
+
+const App: React.FC = () => {
+  return <AppRouter />;
+};
 
 export default App;

src/pages/404.tsx

@@ -0,0 +1,4 @@
+const NotFound: React.FC = () => {
+  return <div>404 NOT FOUND</div>;
+};
+export default NotFound;

src/pages/create.tsx

@@ -0,0 +1,4 @@
+const Create: React.FC = () => {
+  return <div>Create</div>;
+};
+export default Create;

src/pages/detail.tsx

@@ -0,0 +1,9 @@
+import { useParams } from "react-router";
+
+const Detail: React.FC = () => {
+  const { id } = useParams<Record<string, string>>();
+
+  console.log(id);
+  return <div>{id}Detail</div>;
+};
+export default Detail;

src/pages/edit.tsx

@@ -0,0 +1,9 @@
+import { useParams } from "react-router";
+const Edit: React.FC = () => {
+  const { id } = useParams<Record<string, string>>();
+
+  console.log(id);
+
+  return <div>{id}Edit</div>;
+};
+export default Edit;

src/pages/home.tsx

@@ -0,0 +1,4 @@
+const Home: React.FC = () => {
+  return <div>Home</div>;
+};
+export default Home;

src/pages/profile.tsx

@@ -0,0 +1,9 @@
+import { useParams } from "react-router";
+
+const Profile: React.FC = () => {
+  const { id } = useParams<Record<string, string>>();
+
+  console.log(id);
+  return <div>Profile</div>;
+};
+export default Profile;

src/pages/result.tsx

@@ -0,0 +1,4 @@
+const Result: React.FC = () => {
+  return <div>Result</div>;
+};
+export default Result;

src/pages/signIn.tsx

@@ -0,0 +1,4 @@
+const SignIn: React.FC = () => {
+  return <div>SignIn</div>;
+};
+export default SignIn;

src/pages/signUp.tsx

@@ -0,0 +1,4 @@
+const SignUp: React.FC = () => {
+  return <div>SignUp</div>;
+};
+export default SignUp;

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 (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<Home />} />
+        <Route path="/signIn" element={<SignIn />} />
+        <Route path="/signUp" element={<SignUp />} />
+        <Route path="/create" element={<Create />} />
+        <Route path="/detail/:id" element={<Detail />} />
+        <Route path="/profile/:id" element={<Profile />} />
+        <Route path="/edit/:id" element={<Edit />} />
+        <Route path="/result/:id" element={<Result />} />
+
+        <Route path="/*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+export default AppRouter;

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "typeRoots" : ["./@types", "./node_modules/@types"],
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,