[FEAT] #16 - Add Navigation component's addTable button

CBNU-AACP · Dec 4, 2021 · 9938228 · 9938228
1 parent b978446
commit 9938228
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/client/src/components/Navigation/index.jsx b/client/src/components/Navigation/index.jsx
@@ -1,15 +1,32 @@
 import React, { useContext, useState, useEffect, useRef } from "react";
 import cx from "classnames";
 import "./style.scss";
-import TableMocks from "../../__mocks/TableMocks";
+import { AiOutlineDatabase } from "react-icons/ai";
+import { useDispatch, useSelector } from "react-redux";
+import { add } from "../../store/tableSlice";
 
 export default function Natigation() {
+  const dispatch = useDispatch();
+  const tables = useSelector(state => state.table.tables);
+
+  console.log(tables);
   return (
     <nav className="navigation">
+      <button
+        type="button"
+        className="addTable"
+        onClick={() => {
+          dispatch(add(true));
+        }}>
+        <AiOutlineDatabase />
+        <p className="addText">테이블 추가</p>
+      </button>
       <p className="naviTitle">테이블 목록</p>
       <ul className="sideMenu">
-        {TableMocks.map(table => (
-          <li className="tableTitle">{table.title}</li>
+        {tables.map(table => (
+          <li key={table.id + table.title} className="tableTitle">
+            {table.title}
+          </li>
         ))}
       </ul>
     </nav>

diff --git a/client/src/components/Navigation/style.scss b/client/src/components/Navigation/style.scss
@@ -3,20 +3,33 @@
   display: block;
   left: 0;
   width: 200px;
-  min-height: calc(100vh - 101px);
-  height: fit-content;
+  min-height: calc(100vh - 152px);
   z-index: 5;
   background-color: $white;
   border-right: 1px solid $gray400;
   word-break: break-all;
+  .addTable {
+    display: flex;
+    flex-direction: row;
+    margin: 30px auto -10px 20px;
+    background-color: $white;
+    border: none;
+    outline: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: 26px;
+    font-weight: bold;
+    &:hover {
+      color: $create;
+    }
+  }
   .naviTitle {
     margin: 30px auto -10px 20px;
     font-size: 25px;
     font-weight: bold;
   }
   .sideMenu {
     height: fit-content;
-    height: 100%;
     display: flex;
     flex-direction: column;
     margin-bottom: 30px;