[FEAT] #16 - Add AddTable component

client/src/components/AddTable/index.jsx

@@ -0,0 +1,82 @@
+import React, { useContext, useState, useEffect, useRef } from "react";
+import cx from "classnames";
+import "./style.scss";
+import ColumnElement from "./ColumnElement";
+
+export default function AddTable() {
+  const [tableName, setTableName] = useState("");
+  const [columns, setColumns] = useState([]);
+  const nextId = useRef(1);
+
+  let isNullColumnName = true;
+
+  const removeColumn = remove => {
+    setColumns(columns.filter(column => column.id !== remove));
+  };
+
+  const handleSubmitColumn = () => {
+    columns.forEach(column => {
+      if (column.columnName.length === 0) {
+        isNullColumnName = true;
+        return;
+      }
+      if (column.columnName.length !== 0) isNullColumnName = false;
+    });
+    if (tableName.length >= 1 && !isNullColumnName)
+      console.log({ tableName, ...columns });
+  };
+
+  const initialState = {
+    columnName: "",
+    dataType: "",
+    constraint: false,
+    default: "",
+    PK: false,
+    FK: false,
+  };
+
+  return (
+    <div className="addContainer">
+      <div className="tableInputBox">
+        <span className="tableLabel">테이블 이름: </span>
+        <input
+          className="input tableInput"
+          type="text"
+          placeholder="테이블 명 입력."
+          value={tableName}
+          onChange={e => {
+            setTableName(e.target.value);
+          }}
+        />
+        <button
+          className="addBox"
+          type="button"
+          onClick={() => {
+            setColumns([...columns, { id: nextId.current, ...initialState }]);
+            nextId.current += 1;
+          }}>
+          <div className="addCircle" />
+          <span className="addText">컬럼 추가</span>
+        </button>
+      </div>
+
+      <ul>
+        {columns.map(column => (
+          <ColumnElement
+            key={column.id + column}
+            element={column}
+            remove={removeColumn}
+          />
+        ))}
+      </ul>
+
+      <button
+        className="addBox table"
+        type="button"
+        onClick={handleSubmitColumn}>
+        <div className="addCircle table" />
+        <span className="addText">테이블 추가</span>
+      </button>
+    </div>
+  );
+}

client/src/components/AddTable/style.scss

@@ -0,0 +1,75 @@
+@import "../../style/color.scss";
+.addContainer {
+  display: flex;
+  flex-direction: column;
+  min-width: 840px;
+  height: fit-content;
+  background-color: $white;
+  box-shadow: $box-shadow;
+  border-radius: 10px;
+  margin: 200px auto;
+  padding: 20px;
+  font-weight: bold;
+  .addBox {
+    display: flex;
+    flex-direction: row;
+    background-color: $white;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    margin: 0 0 0 auto;
+    padding: 0;
+    .addCircle {
+      width: 20px;
+      height: 20px;
+      background-color: $adding;
+      border-radius: 50%;
+      margin: auto 5px auto 0;
+    }
+    .table {
+      background-color: $create;
+    }
+    .addText {
+      margin: auto 0;
+      font-weight: bold;
+      font-size: 17px;
+    }
+  }
+  .table {
+    margin-top: 15px;
+  }
+  .tableInputBox {
+    display: flex;
+    flex-direction: row;
+    .tableLabel {
+      margin: auto 0;
+    }
+  }
+  .select,
+  .input {
+    display: inline;
+    border: 2px solid $black;
+    border-radius: 4px;
+    margin: auto 0;
+    color: $black;
+    font-size: 15px;
+    font-weight: bold;
+    &:focus {
+      outline: none;
+    }
+    &::placeholder {
+      color: $black;
+      font-size: 13px;
+    }
+    &::-ms-input-placeholder {
+      color: $black;
+      font-size: 13px;
+    }
+  }
+  .input {
+    max-width: 80px;
+  }
+  .tableInput {
+    margin-left: 11px;
+  }
+}