yapp-project#26 파일(이미지) 업로드 및 데이터베이스 업로드

See: Github issue yapp-project#26
Merge 및 conflict 해결

Merge commit 'af1859233a23e62557e7951c85cfda80f92c97ad' into drinkme#26

# Conflicts:
#	src/containers/ViewRecipe/ViewRecipe.jsx

src/App.js

@@ -1,14 +1,7 @@
 import React, { Component } from "react";
 import { Route, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
-import {
-  MainView,
-  Header,
-  LoginPopup,
-  Enrolment,
-  ViewRecipe,
-  MyMenu
-} from "./containers";
+import { MainView, Header, Enrolment, ViewRecipe, MyMenu } from "./containers";
 import classNames from "classnames/bind";
 import styles from "./App.scss";
 const cx = classNames.bind(styles);
@@ -20,22 +13,27 @@ const mapDispatchToProps = dispatch => ({});
 
 class App extends Component {
   render() {
+    const bEnrolment =
+      this.props.location.pathname.indexOf("enrolment") > 0 ? true : false;
     return (
-      <div className={cx("App")}>
+      <div className={cx("App", bEnrolment ? "one" : "")}>
         <div className={cx("top")}>
           <Switch>
             <Route exact path="/enrolment/:id" component={Enrolment} />
             <Route exact path="/enrolment" component={Enrolment} />
             <Route path="/" component={Header} />
           </Switch>
         </div>
-        <div className={cx("body")}>
-          <Switch>
-            <Route exact path="/" component={MainView} />
-            <Route exact path="/viewRecipe" component={ViewRecipe} />
-            <Route exact path="/mymenu" component={MyMenu} />
-          </Switch>
-        </div>
+        {!bEnrolment && (
+          <div className={cx("body")}>
+            <Switch>
+              <Route exact path="/" component={MainView} />
+              <Route exact path="/viewRecipe/:id" component={ViewRecipe} />
+              <Route exact path="/viewRecipe" component={ViewRecipe} />
+              <Route exact path="/mymenu" component={MyMenu} />
+            </Switch>
+          </div>
+        )}
       </div>
     );
   }

src/App.scss

@@ -2,9 +2,13 @@
   position: absolute;
   display: grid;
   grid-template-rows: 80px auto;
+  &.one {
+    grid-template-rows: auto;
+  }
   height: 100%;
   width: 100%;
   .top {
+    position: absolute;
     grid-row: 1 / span 1;
     height: 100%;
     width: 100%;

src/api/userAPI.js

@@ -69,3 +69,12 @@ export async function setUserDelete(userid, password) {
   const res = await webRequestUtil.post({ url, body });
   return res.data;
 }
+
+export async function deleteCocktail(id) {
+  const url = "del/";
+  const body = {
+    id
+  };
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}

src/components/SearchResultItem/SearchResultItem.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames/bind";
 import styles from "./SearchResultItem.scss";
-import xbox from "../../static/images/a1.jpeg";
+import xbox from "../../static/images/ErrorImage.svg";
 
 const cx = classNames.bind(styles);
 
@@ -26,6 +26,7 @@ const SearchResultItem = ({
         onError={e => {
           e.target.onerror = null;
           e.target.src = xbox;
+          e.target.className = cx("item_img", "_xbox");
         }}
         src={image}
         alt="사진"
@@ -41,13 +42,13 @@ const SearchResultItem = ({
           </div>
         </div>
       )}
-      <div className={cx("information_rect")} onClick={informationClick}>
+      <div id={_id} className={cx("information_rect")} onClick={informationClick}>
         <div className={cx("inner")}>
           <div className={cx("cocktailName")}>{name}</div>
           <div className={cx("bottom")}>
             <div className={cx("userName")}>{owner}</div>
             <div className={cx("right")}>
-              <div className={cx("like")} onClick={likeClick} />
+              <div id={_id} className={cx("like")} onClick={likeClick} />
               <div className={cx("number")}>{scrap}</div>
             </div>
           </div>

src/components/SearchResultItem/SearchResultItem.scss

@@ -2,6 +2,12 @@
 .item_img {
   width: inherit;
   height: inherit;
+
+  &._xbox {
+    min-width: 360px;
+    background-color: gray;
+    opacity: 0.5;
+  }
 }
 
 .modify_rect {
@@ -60,7 +66,6 @@
       letter-spacing: normal;
       text-align: left;
       color: #ffffff;
-      cursor: pointer;
     }
 
     .bottom {
@@ -100,6 +105,7 @@
           background-position: center;
           background-size: inherit;
           margin-right: 10.2px;
+          cursor: pointer;
         }
         .number {
           height: 100%;