[FEAT] #16 - Add navigate to table page

client/src/App.js

@@ -1,6 +1,7 @@
-import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "./pages/Login";
-import DataBases from "./pages/AllDataBases";
+import AllDataBases from "./pages/AllDataBases";
+import InsideDataBase from "./pages/InsideDataBase";
 
 function App() {
   const isAuthorized = localStorage.getItem("isAuthorized");
@@ -14,7 +15,8 @@ function App() {
       )} */}
       <Routes>
         <Route path="/login" element={<Login />} />
-        <Route path="/" element={<DataBases />} />
+        <Route exact path="/" element={<AllDataBases />} />
+        <Route path="/:dbName" element={<InsideDataBase />} />
       </Routes>
     </BrowserRouter>
   );

client/src/__mocks/TableMocks.js

@@ -0,0 +1,29 @@
+const tables = [
+  {
+    id: 1,
+    title: "user",
+    name: "name",
+  },
+  {
+    id: 2,
+    title: "course",
+  },
+  {
+    id: 3,
+    title: "courseDate",
+  },
+  {
+    id: 4,
+    title: "member",
+  },
+  {
+    id: 5,
+    title: "memberList",
+  },
+  {
+    id: 6,
+    title: "admin",
+  },
+];
+
+export default tables;

client/src/components/DbCardList/DbCard/index.jsx

@@ -1,14 +1,17 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import cx from "classnames";
-import http from "../../../common/http";
+import http from "../../../common/axios";
 import "./style.scss";
 
 export default function DataBase({ isNew, database, id, remove, add }) {
   const [dbName, setDbName] = useState("");
   const [msgState, setMsgState] = useState("");
   const [isAddClick, setIsAddClick] = useState(false);
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (isNew && !isAddClick) {
       setMsgState("입력 중");
@@ -27,6 +30,10 @@ export default function DataBase({ isNew, database, id, remove, add }) {
     setDbName(value);
   };
 
+  const handleClick = dbName => {
+    if (!isAddClick) navigate(`/${dbName}`);
+  };
+
   return (
     <div className="cardBox">
       <div className="btnBox">
@@ -66,7 +73,12 @@ export default function DataBase({ isNew, database, id, remove, add }) {
           </div>
         </>
       ) : (
-        <span className="cardText">{dbName}</span>
+        <span
+          className="cardText"
+          onClick={() => handleClick(dbName)}
+          aria-hidden="true">
+          {dbName}
+        </span>
       )}
     </div>
   );

client/src/components/DbCardList/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import cx from "classnames";
 import DataBasesMocks from "../../__mocks/DataBasesMocks";
 import DataBase from "./DbCard";
-import http from "../../common/http";
+import http from "../../common/axios";
 import "./style.scss";
 
 export default function DataBases() {

client/src/components/LoginForm/index.jsx

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
 import { IoPersonOutline } from "react-icons/io5";
 import cx from "classnames";
-import http from "../../common/http";
+import http from "../../common/axios";
 import "./style.scss";
 
 export default function LoginForm() {