yapp-project#15 레시피 등록

See: Github issue yapp-project#15
---------------------------------------
### 작업파일
* 등록 관련 파일들
	* action, api, saga, reducer, container 아래 등록 관련 파일들
* 레시피 보기 관련 파일들
* HTML_TEST
---------------------------------------
### 작업내용
* 레시피 등록 api 연동
* api 이슈 해결 이후 레시피 보기에 맞게 컨버팅
* 테스트용 컴포넌트 삭제

package.json

@@ -9,6 +9,7 @@
         "react": "^16.8.4",
         "react-color": "^2.17.0",
         "react-dom": "^16.8.4",
+        "react-dropzone": "^10.1.4",
         "react-redux": "^6.0.1",
         "react-router-dom": "^4.3.1",
         "react-scripts": "2.1.8",

src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Route, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
-import { MainView, Header, LoginPopup, HTML_TEST, Enrolment, ViewRecipe } from "./containers";
+import { MainView, Header, LoginPopup, Enrolment, ViewRecipe } from "./containers";
 
 const mapStateToProps = state => {
   return {};
@@ -18,8 +18,6 @@ class App extends Component {
           <Route exact path="/popup" component={LoginPopup} />
           <Route exact path="/enrolment" component={Enrolment} />
           <Route exact path="/viewRecipe" component={ViewRecipe} />
-
-          <Route exact path="/test" component={HTML_TEST} />
         </Switch>
       </div>
     );

src/action/enrolmentAction.js

@@ -0,0 +1,25 @@
+export const actions = {
+  ENROLMENT: {
+    REQUEST: "ENROLMENT_REQUEST",
+    SUCCESS: "ENROLMENT_SUCCESS",
+    FAILED: "ENROLMENT_FAILED"
+  }
+};
+
+export function enrolmentRequest(data) {
+  return {
+    type: actions.ENROLMENT.REQUEST,
+    payload: {
+      data
+    }
+  };
+}
+
+export function enrolmentSuccess(result) {
+  return {
+    type: actions.ENROLMENT.SUCCESS,
+    payload: {
+      result
+    }
+  };
+}

src/action/recipeAction.js

@@ -46,11 +46,11 @@ export function recipeAllSuccess(result) {
   };
 }
 
-export function recipeIDRequest(_id) {
+export function recipeIDRequest(id) {
   return {
     type: actions.BYID.REQUEST,
     payload: {
-      _id
+      id
     }
   };
 }

src/api/enrolmentAPI.js

@@ -0,0 +1,12 @@
+import * as webRequestUtil from "./rootAPI";
+
+export async function enrolmentRecipe({ data }) {
+  const url = "recipe";
+
+  console.log(data);
+  const body = {
+    data
+  };
+  const res = await webRequestUtil.post({ url, body });
+  return res.data;
+}

src/api/recipeAPI.js

@@ -6,10 +6,10 @@ export async function getRecipe() {
   return res.data;
 }
 
-export async function getRecipeByID({_id}) {
+export async function getRecipeByID({id}) {
   const url = "recipe/details";
   const body = {
-    _id
+    id
   };
 
   const res = await webRequestUtil.get({ url, body });

src/api/rootAPI.js

@@ -12,12 +12,11 @@ const basicRequest = (type, { url, headers, body }) => {
     },
   };
 
-  if (type === "GET") config.params += body.body;
-  else config.body = body;
+  if (type === "GET") config.params = body;
+  else config.data = body;
 
   return axios(config)
     .then(res => {
-      console.log(res);
       return res;
     })
     .catch(err => {

src/api/userAPI.js

@@ -8,6 +8,7 @@ export async function setJoin({ userid, password }) {
     password
   };
   const res = await webRequestUtil.post({ url, body });
+  console.log(res);
   return res.data;
 }
 export async function setLogin({ userid, password }) {

src/containers/Enrolment/Enrolment.jsx

@@ -9,14 +9,18 @@ import Step1 from "./Function/Step1";
 import Step2 from "./Function/Step2";
 import Step3 from "./Function/Step3";
 import Done from "./Function/Done";
+import { enrolmentRequest } from "../../action/enrolmentAction"
 
 const cx = classNames.bind(styles);
 
 const mapStateToProps = state => {
-  return state;
+  return {
+    state: state.enrolmentReducer.state,
+    result: state.enrolmentReducer.result
+  };
 };
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { enrolmentRequest };
 
 class Enrolment extends Component {
   constructor (props){
@@ -90,12 +94,6 @@ class Enrolment extends Component {
 
   };
 
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-  }
-
   onChangeStepStatus = event => {
     let stepTarget = document.querySelectorAll(".step-1, .step-2, .step-3");
     let clickText = event.target.innerText.trim();
@@ -167,27 +165,27 @@ class Enrolment extends Component {
     switch (cupText) {
       case "하이볼":
         cupTarget[0].classList.add(this.selectCup);
-        enrolmentData.info.cup = "하이볼"
+        enrolmentData.info.cup = "하이볼";
         this.setState({ enrolmentData });
         break;
       case "리큐르":
         cupTarget[1].classList.add(this.selectCup);
-        enrolmentData.info.cup = "리큐르"
+        enrolmentData.info.cup = "리큐르";
         this.setState({ enrolmentData });
         break;
       case "허리케인":
         cupTarget[2].classList.add(this.selectCup);
-        enrolmentData.info.cup = "허리케인"
+        enrolmentData.info.cup = "허리케인";
         this.setState({ enrolmentData });
         break;
       case "마가렛":
         cupTarget[3].classList.add(this.selectCup);
-        enrolmentData.info.cup = "마가렛"
+        enrolmentData.info.cup = "마가렛";
         this.setState({ enrolmentData });
         break;
       case "마티니":
         cupTarget[4].classList.add(this.selectCup);
-        enrolmentData.info.cup = "마티니"
+        enrolmentData.info.cup = "마티니";
         this.setState({ enrolmentData });
         break;
       default:
@@ -335,6 +333,38 @@ class Enrolment extends Component {
 
   onSaveRecipe = () => {
     let doneView = document.querySelector("#done-container");
+    let cup = this.state.enrolmentData.info.name;
+    if (cup === '하이볼') cup = 0;
+    else if (cup === '리큐르') cup = 1;
+    else if (cup === '허리케인') cup = 2;
+    else if (cup === '마가렛') cup = 3;
+    else cup = 4;
+
+    // let tag = this.state.enrolmentData.info.tags;
+
+    //태그 배열 형태로 나누는거 처리해야 됨
+    //재료 포멧은 정해야 될듯
+    let data = {
+      name: this.state.enrolmentData.info.name,
+      glass: cup,
+      percent: 50,
+      description: this.state.enrolmentData.info.describe,
+      tag: [],
+      ingredient: [{
+        "name" : "water",
+        "color" : "blue",
+        "ml" : 20
+        }, {
+        "name" : "hongcho",
+        "color" : "red",
+        "ml" : 10
+        }],
+      owner: '사용자'
+    }
+
+    // data.tag.push(tag);
+
+    this.props.enrolmentRequest(data);
 
     doneView.classList.toggle(this.doneClose);
   };

src/containers/Enrolment/Function/Enrolment.scss

@@ -106,6 +106,10 @@
     float: left;
     margin-left: 30px;
 
+    div {
+        height: auto;
+    }
+
     .title {
         font-size: 20px;
         font-weight: 500;
@@ -282,6 +286,10 @@
     float: left;
     margin-left: 30px;
 
+    div {
+        height: auto;
+    }
+
     .shake {
         width: 100%;
         height: 80px;
@@ -468,6 +476,10 @@
     box-sizing: border-box;
     padding-right: 6.6667%;
 
+    div {
+        height: auto;
+    }
+
     .step3-container {
         width: 100%;
         height: 100%;