[Add] Multer image save

client/package.json

@@ -5,20 +5,21 @@
   "dependencies": {
     "antd": "^3.24.1",
     "axios": "^0.19.2",
+    "core-js": "^3.6.4",
     "formik": "^1.5.8",
     "moment": "^2.24.0",
     "react": "^16.8.6",
+    "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.8.6",
+    "react-dropzone": "^14.2.2",
     "react-icons": "^3.7.0",
     "react-redux": "^7.1.0-rc.1",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.4.1",
     "redux": "^4.0.0",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0",
-    "yup": "^0.27.0",
-    "core-js": "^3.6.4",
-    "react-app-polyfill": "^1.0.6"
+    "yup": "^0.27.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/components/App.js

@@ -1,26 +1,32 @@
-import React, { Suspense } from 'react';
+import React, { Suspense } from "react";
 import { Route, Switch } from "react-router-dom";
 import Auth from "../hoc/auth";
 // pages for this product
 import LandingPage from "./views/LandingPage/LandingPage.js";
 import LoginPage from "./views/LoginPage/LoginPage.js";
 import RegisterPage from "./views/RegisterPage/RegisterPage.js";
 import NavBar from "./views/NavBar/NavBar";
-import Footer from "./views/Footer/Footer"
+import Footer from "./views/Footer/Footer";
+import UploadProductPage from "./views/UploadProductPage/UploadProductPage";
 
 //null   Anyone Can go inside
 //true   only logged in user can go inside
 //false  logged in user can't go inside
 
 function App() {
   return (
-    <Suspense fallback={(<div>Loading...</div>)}>
+    <Suspense fallback={<div>Loading...</div>}>
       <NavBar />
-      <div style={{ paddingTop: '69px', minHeight: 'calc(100vh - 80px)' }}>
+      <div style={{ paddingTop: "69px", minHeight: "calc(100vh - 80px)" }}>
         <Switch>
           <Route exact path="/" component={Auth(LandingPage, null)} />
           <Route exact path="/login" component={Auth(LoginPage, false)} />
           <Route exact path="/register" component={Auth(RegisterPage, false)} />
+          <Route
+            exact
+            path="/product/upload"
+            component={Auth(UploadProductPage, true)}
+          />
         </Switch>
       </div>
       <Footer />

client/src/components/Utils/FileUpload.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import Dropzone from "react-dropzone";
+import { Icon } from "antd";
+import axios from "axios";
+
+function FileUpload() {
+  const [images, setImages] = useState([]);
+
+  const dropHandler = (files) => {
+    let formData = new FormData();
+    const config = {
+      header: { "content-type": "multipart/fomr-data" },
+    };
+    formData.append("file", files[0]);
+
+    axios.post("/api/product/image", formData, config).then((response) => {
+      if (response.data.success) {
+        console.log(response.data);
+        setImages([...images, response.data.filePath]);
+      } else {
+        alert("파일을 저장하는데 실패했습니다.");
+      }
+    });
+  };
+  console.log(images);
+  return (
+    <div style={{ display: "flex", justifyConent: "space-between" }}>
+      {" "}
+      <Dropzone onDrop={dropHandler}>
+        {({ getRootProps, getInputProps }) => (
+          <div
+            style={{
+              width: 300,
+              height: 240,
+              border: "1px solid lightgray",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            {...getRootProps()}
+          >
+            <input {...getInputProps()} />
+            <Icon type="plus" style={{ fontSize: "3rem", cursor: "pointer" }} />
+          </div>
+        )}
+      </Dropzone>
+      <div
+        style={{
+          display: "flex",
+          width: "350px",
+          height: "240px",
+          overflowX: "scroll",
+        }}
+      >
+        {images.map((image, index) => (
+          <div key={index}>
+            <img
+              style={{ minWidth: "300px", width: "300px", height: "240px" }}
+              src={`http://localhost:5000/${image}`}
+            ></img>{" "}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FileUpload;

client/src/components/views/NavBar/Sections/RightMenu.js

@@ -1,20 +1,20 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
-import { Menu } from 'antd';
-import axios from 'axios';
-import { USER_SERVER } from '../../../Config';
-import { withRouter } from 'react-router-dom';
+import React from "react";
+import { Menu } from "antd";
+import axios from "axios";
+import { USER_SERVER } from "../../../Config";
+import { withRouter } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 function RightMenu(props) {
-  const user = useSelector(state => state.user)
+  const user = useSelector((state) => state.user);
 
   const logoutHandler = () => {
-    axios.get(`${USER_SERVER}/logout`).then(response => {
+    axios.get(`${USER_SERVER}/logout`).then((response) => {
       if (response.status === 200) {
         props.history.push("/login");
       } else {
-        alert('Log Out Failed')
+        alert("Log Out Failed");
       }
     });
   };
@@ -29,17 +29,19 @@ function RightMenu(props) {
           <a href="/register">Signup</a>
         </Menu.Item>
       </Menu>
-    )
+    );
   } else {
     return (
       <Menu mode={props.mode}>
+        <Menu.Item key="upload">
+          <a href="/product/upload">Upload</a>
+        </Menu.Item>
         <Menu.Item key="logout">
           <a onClick={logoutHandler}>Logout</a>
         </Menu.Item>
       </Menu>
-    )
+    );
   }
 }
 
 export default withRouter(RightMenu);
-

client/src/components/views/UploadProductPage/UploadProductPage.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { Typography, Button, Form, Input } from "antd";
+import FileUpload from "../../Utils/FileUpload";
+
+const { TextArea } = Input;
+
+const Continents = [
+  { key: 1, value: "Africa" },
+  { key: 2, value: "Europe" },
+  { key: 3, value: "Asia" },
+  { key: 4, value: "North America" },
+  { key: 5, value: "South America" },
+  { key: 6, value: "Australia" },
+  { key: 7, value: "North America" },
+];
+
+function UploadProductPage() {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState(0);
+  const [Continent, setContinent] = useState(1);
+
+  const [images, setImages] = useState([]);
+
+  const titleChangeHandelr = (e) => {
+    setTitle(e.target.value);
+  };
+  const descriptionChangeHandler = (e) => {
+    setDescription(e.target.value);
+  };
+  const priceChangeHandler = (e) => {
+    setPrice(e.target.value);
+  };
+
+  const continentChangeHandler = (e) => {
+    setContinent(e.target.value);
+  };
+
+  return (
+    <div style={{ maxWidth: "700px", margin: "2rem auto" }}>
+      <div style={{ textAlign: "center", marginBottom: "2rem" }}>
+        <h2 level={2}>여행 상품 업로드</h2>
+      </div>
+      <Form>
+        <FileUpload />
+        <br />
+        <br />
+        <label>이름</label>
+        <Input onChange={titleChangeHandelr} value={title} />
+        <br />
+        <br />
+        <label>설명</label>
+        <TextArea onChange={descriptionChangeHandler} value={description} />
+        <br />
+        <br />
+        <label>가격($)</label>
+        <Input type="number" onChange={priceChangeHandler} value={price} />
+        <br />
+        <br />
+        <select onChange={continentChangeHandler} value={Continent}>
+          {Continents.map((item) => (
+            <option key={item.key} value={item.key}>
+              {item.value}
+            </option>
+          ))}
+        </select>
+        <br />
+        <br />
+        <Button>확인</Button>
+      </Form>
+    </div>
+  );
+}
+
+export default UploadProductPage;