diff --git a/client/src/App.js b/client/src/App.js
index 63bf9e5..31bf74f 100644
--- a/client/src/App.js
+++ b/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() {
)} */}
} />
- } />
+ } />
+ } />
);
diff --git a/client/src/__mocks/TableMocks.js b/client/src/__mocks/TableMocks.js
new file mode 100644
index 0000000..7f03c72
--- /dev/null
+++ b/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;
diff --git a/client/src/components/DbCardList/DbCard/index.jsx b/client/src/components/DbCardList/DbCard/index.jsx
index f3490e9..27fc751 100644
--- a/client/src/components/DbCardList/DbCard/index.jsx
+++ b/client/src/components/DbCardList/DbCard/index.jsx
@@ -1,7 +1,8 @@
/* 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 }) {
@@ -9,6 +10,8 @@ export default function DataBase({ isNew, database, id, remove, add }) {
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 (
@@ -66,7 +73,12 @@ export default function DataBase({ isNew, database, id, remove, add }) {
>
) : (
-
{dbName}
+
handleClick(dbName)}
+ aria-hidden="true">
+ {dbName}
+
)}
);
diff --git a/client/src/components/DbCardList/index.jsx b/client/src/components/DbCardList/index.jsx
index 298b71b..9b3e89a 100644
--- a/client/src/components/DbCardList/index.jsx
+++ b/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() {
diff --git a/client/src/components/LoginForm/index.jsx b/client/src/components/LoginForm/index.jsx
index 6e0556f..6db9826 100644
--- a/client/src/components/LoginForm/index.jsx
+++ b/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() {