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() {