antd제거

package.json

@@ -14,7 +14,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "antd": "^4.15.0",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "date-fns": "^2.15.0",
@@ -25,6 +24,7 @@
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.2",
     "react-markdown": "^4.3.1",
+    "react-material-ui-carousel": "^2.2.7",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-script": "^2.0.5",
@@ -71,7 +71,6 @@
     "@types/react-redux": "^7.1.15",
     "@types/react-router-dom": "^5.1.7",
     "@types/reactstrap": "^8.7.2",
-    "cra-bundle-analyzer": "^0.1.0",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "cra-bundle-analyzer": "^0.1.0"
   }
 }

src/App.js

@@ -1,19 +1,7 @@
 import React, { Suspense, lazy } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-// import {
-//   Root,
-//   ProjectList,
-//   Profile,
-//   ProjectDetail,
-//   ProjectCreate,
-//   ProjectUpdate,
-//   PeopleList,
-//   LoginPage,
-//   RegisterPage,
-// } from "./pages";
 import { AlertModal } from "./components";
 import { useLoginAuth } from "./hook/auth/useLogin";
-import "antd/dist/antd.css";
 
 const Root = lazy(() => import("./pages/rootTs"));
 const ProjectList = lazy(() => import("./pages/project/projectListTs"));

src/components/Dropdown/dropdown.jsx

@@ -1,65 +1,100 @@
-import React, { useState, useEffect } from "react";
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from "reactstrap";
+import React, {useState, useEffect} from "react";
+import Button from "@material-ui/core/Button";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
 
 const role = ["DEVELOPER", "DESIGNER", "PLANNER", "ETC"];
 
 const DropdownRole = (props) => {
-  const { dropdownCaret, dropdownHeader, action, pick } = props;
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { dropdownCaret, action, pick } = props;
+  const [dropdownOpen, setDropdownOpen] = useState(null);
   const [caret, setCaret] = useState(dropdownCaret);
+    const handleClick = (event) => {
+        setDropdownOpen(event.currentTarget);
+    };
+    const handleClose = () => {
+        setDropdownOpen(null);
+    };
+    const handleClickItem = (menu) => {
+        action(menu);
+        setDropdownOpen(null);
+    }
   useEffect(() => {
     if (pick !== "") setCaret(pick);
   }, [pick]);
-  const toggle = () => setDropdownOpen((prevState) => !prevState);
   return (
-    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
-      <DropdownToggle caret style={props.style}>
+    <div>
+      <Button
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
         {caret}
-      </DropdownToggle>
-      <DropdownMenu style={props.style}>
-        <DropdownItem onClick={(e) => action("DEVELOPER")}>
+      </Button>
+      <Menu
+        id="simple-menu"
+        anchorEl={dropdownOpen}
+        keepMounted
+        open={dropdownOpen}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={(e) => handleClickItem("DEVELOPER")}>
           DEVELOPER
-        </DropdownItem>
-        <DropdownItem onClick={(e) => action("DESIGNER")}>
+        </MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("DESIGNER")}>
           DESIGNER
-        </DropdownItem>
-        <DropdownItem onClick={(e) => action("PLANNER")}>PLANNER</DropdownItem>
-        <DropdownItem onClick={(e) => action("ETC")}>ETC</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
+        </MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("PLANNER")}>PLANNER</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("ETC")}>ETC</MenuItem>
+      </Menu>
+    </div>
   );
 };
 
 const DropdownField = (props) => {
-  const { dropdownCaret, dropdownHeader, action, pick } = props;
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { dropdownCaret, action, pick } = props;
+  const [dropdownOpen, setDropdownOpen] = useState(null);
   const [caret, setCaret] = useState(dropdownCaret);
+  const handleClick = (event) => {
+    setDropdownOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setDropdownOpen(null);
+  };
+  const handleClickItem = (menu) => {
+    action(menu);
+    setDropdownOpen(null);
+  };
   useEffect(() => {
     if (pick !== "") setCaret(pick);
   }, [pick]);
-  const toggle = () => setDropdownOpen((prevState) => !prevState);
   return (
-    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
-      <DropdownToggle style={props.style} caret>
+    <div>
+      <Button
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
         {caret}
-      </DropdownToggle>
-      <DropdownMenu style={props.style}>
-        <DropdownItem onClick={(e) => action("APP")}>APP</DropdownItem>
-        <DropdownItem onClick={(e) => action("WEB")}>WEB</DropdownItem>
-        <DropdownItem onClick={(e) => action("AI")}>AI</DropdownItem>
-        <DropdownItem onClick={(e) => action("HW")}>HW</DropdownItem>
-        <DropdownItem onClick={(e) => action("BLOCKCHAIN")}>
+      </Button>
+      <Menu
+        id="simple-menu"
+        anchorEl={dropdownOpen}
+        keepMounted
+        open={dropdownOpen}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={(e) => handleClickItem("APP")}>APP</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("WEB")}>WEB</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("AI")}>AI</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("HW")}>HW</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("BLOCKCHAIN")}>
           BLOCKCHAIN
-        </DropdownItem>
-        <DropdownItem onClick={(e) => action("SYSTEM")}>SYSTEM</DropdownItem>
-        <DropdownItem onClick={(e) => action("ETC")}>ETC</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
+        </MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("SYSTEM")}>SYSTEM</MenuItem>
+        <MenuItem onClick={(e) => handleClickItem("ETC")}>ETC</MenuItem>
+      </Menu>
+    </div>
   );
 };
 export { DropdownRole, DropdownField };

src/components/Image/inputImage.jsx

@@ -1,20 +1,6 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { useEffect, useRef, useCallback } from "react";
+import React from "react";
 import { useDropzone } from "react-dropzone";
 
-const params = {
-  pagination: {
-    el: ".swiper-pagination",
-    type: "bullets",
-    clickable: true,
-  },
-  observer: true,
-  spaceBetween: 30,
-  lazy: {
-    loadPrevNext: true,
-  },
-};
-
 function ImgInput({ img, saveImg }) {
   const { getRootProps, getInputProps } = useDropzone({
     accept: [".png", ".jpeg", ".jpg"],

src/components/Input/Input.jsx

@@ -1,11 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import InputBase from "@material-ui/core/InputBase";
 import {
   fade,
-  ThemeProvider,
   withStyles,
-  makeStyles,
-  createMuiTheme,
 } from "@material-ui/core/styles";
 
 const BootstrapInputUI = withStyles((theme) => ({

src/components/Layout.js

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import { Link, useHistory } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { useLogoutAuth } from "../hook/auth/useLogin";
 import { setToken } from "../reducers/login";
-
 import {
   Collapse,
   Navbar,
@@ -12,7 +10,6 @@ import {
   Nav,
   NavItem,
   NavLink,
-  NavbarText,
   Button,
 } from "reactstrap";
 import "./Layout.css";