diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx
index 48e955a..91c1a3b 100644
--- a/src/containers/Enrolment/Enrolment.jsx
+++ b/src/containers/Enrolment/Enrolment.jsx
@@ -11,19 +11,19 @@ import Step3 from "./Function/Step3";
 import Done from "./Function/Done";
 import { enrolmentRequest } from "../../action/enrolmentAction";
 import axios from "axios";
-import { ChromePicker } from 'react-color';
+import { ChromePicker } from "react-color";
 
-import cup_empty1 from '../../static/images/glass1_empty_enrolment.png';
-import cup_empty2 from '../../static/images/glass2_empty_enrolment.png';
-import cup_empty3 from '../../static/images/glass3_empty_enrolment.png';
-import cup_empty4 from '../../static/images/glass4_empty_enrolment.png';
-import cup_empty5 from '../../static/images/glass5_empty_enrolment.png';
+import cup_empty1 from "../../static/images/glass1_empty_enrolment.png";
+import cup_empty2 from "../../static/images/glass2_empty_enrolment.png";
+import cup_empty3 from "../../static/images/glass3_empty_enrolment.png";
+import cup_empty4 from "../../static/images/glass4_empty_enrolment.png";
+import cup_empty5 from "../../static/images/glass5_empty_enrolment.png";
 
-import cup_full1 from '../../static/images/glass1_full_enrolment.png';
-import cup_full2 from '../../static/images/glass2_full_enrolment.png';
-import cup_full3 from '../../static/images/glass3_full_enrolment.png';
-import cup_full4 from '../../static/images/glass4_full_enrolment.png';
-import cup_full5 from '../../static/images/glass5_full_enrolment.png';
+import cup_full1 from "../../static/images/glass1_full_enrolment.png";
+import cup_full2 from "../../static/images/glass2_full_enrolment.png";
+import cup_full3 from "../../static/images/glass3_full_enrolment.png";
+import cup_full4 from "../../static/images/glass4_full_enrolment.png";
+import cup_full5 from "../../static/images/glass5_full_enrolment.png";
 
 const cx = classNames.bind(styles);
 
@@ -39,26 +39,25 @@ const mapDispatchToProps = { enrolmentRequest };
 let colorTarget = "";
 
 class Enrolment extends Component {
-  constructor (props){
+  constructor(props) {
     super(props);
-  
+
     this.state = {
-      "left": "",
-      "middle": "",
-      "step": "",
-      "done": "",
-      "enrolmentData": {
-        "info": {"cup": "하이볼", "name": "", "describe": "", "alcohol": 0, "tags" :""},
-        "stuff": [
-          {"color": "#4d191a", "name": "", "volume": "", "ratio": 0}
-        ],
-        "totalVolume": 0
+      left: "",
+      middle: "",
+      step: "",
+      done: "",
+      enrolmentData: {
+        info: { cup: "하이볼", name: "", describe: "", alcohol: 0, tags: "" },
+        stuff: [{ color: "#4d191a", name: "", ml: "", ratio: 0 }],
+        totalVolume: 0
       },
-      "stuffID": 0,
-      "color_idx": "",
-      "images": []
+      stuffID: 0,
+      color_idx: "",
+      images: [],
+      userID: ""
     };
-    
+
     this.onChangeStepStatus = this.onChangeStepStatus.bind(this);
     this.onChangeCup = this.onChangeCup.bind(this);
     this.onChangeCup = this.onChangeCup.bind(this);
@@ -66,10 +65,9 @@ class Enrolment extends Component {
     this.onSaveDescribe = this.onSaveDescribe.bind(this);
     this.onSaveTags = this.onSaveTags.bind(this);
     this.onAddStuff = this.onAddStuff.bind(this);
-    this.onSaveRecipe = this.onSaveRecipe.bind(this)
-  
+    this.onSaveRecipe = this.onSaveRecipe.bind(this);
   }
-  
+
   selectStep;
   selectCup;
   selectAlcohol;
@@ -79,41 +77,66 @@ class Enrolment extends Component {
   colorClose;
 
   componentDidMount() {
-    document.addEventListener('DOMContentLoaded', () => {
+    //사용자 인증!
+    const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴
+    if (auth) {
+      this.setState({ userID: auth.userid });
+    } else {
+      alert("회원만 등록 가능합니다.");
+      this.props.history.goBack();
+      return false;
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
       this.selectCup = document.querySelector(".cup-item1").classList[1];
-      this.selectAlcohol = document.querySelector(".alcohol-item1").classList[1];
+      this.selectAlcohol = document.querySelector(
+        ".alcohol-item1"
+      ).classList[1];
       this.doneClose = document.querySelector("#done-container").classList[1];
       this.colorClose = document.querySelector("#color-picker").classList[1];
-      this.inputTarget = document.querySelectorAll("#recipe-name, #recipe-descripe, #recipe-tag");
+      this.inputTarget = document.querySelectorAll(
+        "#recipe-name, #recipe-descripe, #recipe-tag"
+      );
     });
     this.selectStep = document.querySelector(".step-1").classList[1];
-    
+
     this.contents = [
-      {"title" : "INPUT INFO", "detail" : "나만의 레시피 만들기 첫번째 단계! 레시피에 어울리는 컵을 선택하고, 정보를 입력해주세요."},
-      {"title" : "PUT INGREDIENT", "detail" : "나만의 레시피 만들기 두번째 단계! 레시피에 들어갈 재료를 순서대로 추가하고, 완료되면 ‘Shake Me!’ 버튼을 클릭해주세요."},
-      {"title" : "ADD PICUTRES", "detail" : "나만의 레시피 만들기 마지막 단계! 직접 만든 음료를 사진으로 찍어 등록하고, 썸네일 사진을 골라주세요."}
+      {
+        title: "INPUT INFO",
+        detail:
+          "나만의 레시피 만들기 첫번째 단계! 레시피에 어울리는 컵을 선택하고, 정보를 입력해주세요."
+      },
+      {
+        title: "PUT INGREDIENT",
+        detail:
+          "나만의 레시피 만들기 두번째 단계! 레시피에 들어갈 재료를 순서대로 추가하고, 완료되면 ‘Shake Me!’ 버튼을 클릭해주세요."
+      },
+      {
+        title: "ADD PICUTRES",
+        detail:
+          "나만의 레시피 만들기 마지막 단계! 직접 만든 음료를 사진으로 찍어 등록하고, 썸네일 사진을 골라주세요."
+      }
     ];
 
-    this.setState({left: <Left
-      contents={this.contents[0]}
-    />});
-    this.setState({middle: <Middle/>});
-    this.setState({step: <Step1
-      onChangeCup={this.onChangeCup}
-      onChangeAlcohol={this.onChangeAlcohol}
-      onSaveName={this.onSaveName}
-      onSaveDescribe={this.onSaveDescribe}
-      onSaveTags={this.onSaveTags}
-      info={this.state.enrolmentData.info}
-    />});
-    this.setState({done: <Done
-      onSaveRecipe={this.onSaveRecipe}  
-    />});
-
-  };
+    this.setState({
+      left: <Left contents={this.contents[0]} />,
+      middle: <Middle />,
+      step: (
+        <Step1
+          onChangeCup={this.onChangeCup}
+          onChangeAlcohol={this.onChangeAlcohol}
+          onSaveName={this.onSaveName}
+          onSaveDescribe={this.onSaveDescribe}
+          onSaveTags={this.onSaveTags}
+          info={this.state.enrolmentData.info}
+        />
+      ),
+      done: <Done onSaveRecipe={this.onSaveRecipe} />
+    });
+  }
 
   componentDidUpdate(prevProps, prevState) {
-    if(prevProps.result === undefined && this.props.state === 'success') {
+    if (prevProps.result === undefined && this.props.state === "success") {
       this.onUploadImage(this.state.images, this.props.result._id);
       // 이미지 데이터를 제외한 나머지 등록 정보가 서버에 잘 반영되면 여기 분기문으로 들어옴
       // 즉, 이제 이미지 업로드 실행!
@@ -131,53 +154,53 @@ class Enrolment extends Component {
     switch (clickText) {
       case "STEP 1":
         stepTarget[0].classList.add(this.selectStep);
-        this.setState({left: <Left
-          contents={this.contents[0]}
-        />});
-        this.setState({middle: <Middle/>});
-        this.setState({ step: <Step1
-          onChangeCup={this.onChangeCup}
-          onChangeAlcohol={this.onChangeAlcohol}
-          onSaveName={this.onSaveName}
-          onSaveDescribe={this.onSaveDescribe}
-          onSaveTags={this.onSaveTags}
-          info={this.state.enrolmentData.info}
-        /> });
+        this.setState({ left: <Left contents={this.contents[0]} /> });
+        this.setState({ middle: <Middle /> });
+        this.setState({
+          step: (
+            <Step1
+              onChangeCup={this.onChangeCup}
+              onChangeAlcohol={this.onChangeAlcohol}
+              onSaveName={this.onSaveName}
+              onSaveDescribe={this.onSaveDescribe}
+              onSaveTags={this.onSaveTags}
+              info={this.state.enrolmentData.info}
+            />
+          )
+        });
         break;
       case "STEP 2":
         stepTarget[1].classList.add(this.selectStep);
-        this.setState({left: <Left
-          contents={this.contents[1]}
-        />});
-        this.setState({ middle: <Middle/>});
-        this.setState({ step: <Step2
-          stuff={this.state.enrolmentData.stuff}
-          idx={this.state.stuffID}
-          onAddStuff={this.onAddStuff}
-          onDeleteStuff={this.onDeleteStuff}
-          onSaveStuffName={this.onSaveStuffName}
-          onSaveStuffVolume={this.onSaveStuffVolume}
-          onSelectColor={this.onSelectColor}
-          validateNumber={this.validateNumber}
-        /> });
+        this.setState({ left: <Left contents={this.contents[1]} /> });
+        this.setState({ middle: <Middle /> });
+        this.setState({
+          step: (
+            <Step2
+              stuff={this.state.enrolmentData.stuff}
+              idx={this.state.stuffID}
+              onAddStuff={this.onAddStuff}
+              onDeleteStuff={this.onDeleteStuff}
+              onSaveStuffName={this.onSaveStuffName}
+              onSaveStuffVolume={this.onSaveStuffVolume}
+              onSelectColor={this.onSelectColor}
+              validateNumber={this.validateNumber}
+            />
+          )
+        });
         break;
       case "STEP 3":
         stepTarget[2].classList.add(this.selectStep);
-        this.setState({left: <Left
-          contents={this.contents[2]}
-        />});
-        this.setState({ middle: ""});
-        this.setState({ 
-          step: <Step3
-            saveImage={this.onSaveImages}
-          /> 
+        this.setState({ left: <Left contents={this.contents[2]} /> });
+        this.setState({ middle: "" });
+        this.setState({
+          step: <Step3 saveImage={this.onSaveImages} />
         });
         break;
       default:
         break;
     }
   };
-  
+
   onChangeCup = event => {
     let cupText = event.target.innerText.trim();
     this.changeCup(cupText);
@@ -185,9 +208,11 @@ class Enrolment extends Component {
 
   changeCup = cupText => {
     let cupArea = document.querySelector("#cup-area");
-    let cupTarget = document.querySelectorAll(".cup-item1, .cup-item2, .cup-item3, .cup-item4, .cup-item5");
-    let enrolmentData = {...this.state.enrolmentData};
-    
+    let cupTarget = document.querySelectorAll(
+      ".cup-item1, .cup-item2, .cup-item3, .cup-item4, .cup-item5"
+    );
+    let enrolmentData = { ...this.state.enrolmentData };
+
     cupTarget.forEach(val => {
       val.classList.remove(this.selectCup);
     });
@@ -235,12 +260,13 @@ class Enrolment extends Component {
 
   onChangeAlcohol = event => {
     let alcoholTarget = document.querySelectorAll(".alcohol > li");
-    let cupTarget = event.target.nodeName === 'SPAN' ? event.target.parentNode : event.target;
-    let enrolmentData = {...this.state.enrolmentData};
+    let cupTarget =
+      event.target.nodeName === "SPAN" ? event.target.parentNode : event.target;
+    let enrolmentData = { ...this.state.enrolmentData };
 
     alcoholTarget.forEach(val => {
       val.classList.remove(this.selectAlcohol);
-    })
+    });
 
     if (alcoholTarget[0] === cupTarget) {
       alcoholTarget[0].classList.add(this.selectAlcohol);
@@ -261,115 +287,153 @@ class Enrolment extends Component {
   };
 
   onSaveName = event => {
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     enrolmentData.info.name = event.target.value;
-    this.setState({enrolmentData});
+    this.setState({ enrolmentData });
 
-    this.inputTarget[0].value = event.target.value;
+    if (this.inputTarget) {
+      this.inputTarget[0].value = event.target.value;
+    }
   };
 
   onSaveDescribe = event => {
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     enrolmentData.info.describe = event.target.value;
-    this.setState({enrolmentData});
+    this.setState({ enrolmentData });
   };
-  
+
   onSaveTags = event => {
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     enrolmentData.info.tags = event.target.value;
-    this.setState({enrolmentData}); 
+    this.setState({ enrolmentData });
   };
 
   onSaveStuffColor = (event, idx) => {
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     enrolmentData.stuff[idx].name = event.target.value;
-    this.setState({enrolmentData});
+    this.setState({ enrolmentData });
   };
 
   onSaveStuffName = (event, idx) => {
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     enrolmentData.stuff[idx].name = event.target.value;
-    this.setState({enrolmentData});
+    this.setState({ enrolmentData });
   };
 
   onSaveStuffVolume = (event, idx) => {
-    let enrolmentData = {...this.state.enrolmentData};
-    let beforeVolume = enrolmentData.stuff[idx].volume === "" ? 0 : parseInt(enrolmentData.stuff[idx].volume);
-    let afterVolume = parseInt(event.target.value);
+    let enrolmentData = { ...this.state.enrolmentData };
+    let beforeVolume =
+      enrolmentData.stuff[idx].ml === ""
+        ? 0
+        : parseInt(enrolmentData.stuff[idx].ml);
+    const value = event.target.value ? parseInt(event.target.value) : 0;
+    let afterVolume = value;
 
     enrolmentData.totalVolume -= beforeVolume;
     enrolmentData.totalVolume += afterVolume;
-    enrolmentData.stuff[idx].volume = event.target.value;
+    enrolmentData.stuff[idx].ml = value;
 
     enrolmentData.stuff.forEach(val => {
-      val.ratio = Math.floor(val.volume / enrolmentData.totalVolume * 100);
+      if (enrolmentData.totalVolume === 0) {
+        val.ratio = 0;
+      } else {
+        val.ratio = Math.floor((val.ml / enrolmentData.totalVolume) * 100);
+      }
     });
+    this.setState({ enrolmentData });
 
-    this.setState({enrolmentData});
-
-    this.setState({ step: <Step2
-      stuff={this.state.enrolmentData.stuff}
-      idx={this.state.stuffID}
-      onAddStuff={this.onAddStuff}
-      onDeleteStuff={this.onDeleteStuff}
-      onSaveStuffName={this.onSaveStuffName}
-      onSaveStuffVolume={this.onSaveStuffVolume}
-      onSelectColor={this.onSelectColor}
-      validateNumber={this.validateNumber}
-    /> });
+    this.setState({
+      step: (
+        <Step2
+          stuff={this.state.enrolmentData.stuff}
+          idx={this.state.stuffID}
+          onAddStuff={this.onAddStuff}
+          onDeleteStuff={this.onDeleteStuff}
+          onSaveStuffName={this.onSaveStuffName}
+          onSaveStuffVolume={this.onSaveStuffVolume}
+          onSelectColor={this.onSelectColor}
+          validateNumber={this.validateNumber}
+        />
+      )
+    });
   };
 
   onAddStuff = () => {
-    let containerStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container"), null) : document.querySelector("#stuff-container").currentStyle;
-    let maxHegihtStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container").parentElement, null) : document.querySelector("#stuff-container").parentElement.currentStyle;
+    let containerStyle = window.getComputedStyle
+      ? getComputedStyle(document.querySelector("#stuff-container"), null)
+      : document.querySelector("#stuff-container").currentStyle;
+    let maxHegihtStyle = window.getComputedStyle
+      ? getComputedStyle(
+          document.querySelector("#stuff-container").parentElement,
+          null
+        )
+      : document.querySelector("#stuff-container").parentElement.currentStyle;
 
     let containerHeight = parseInt(containerStyle.height);
     let maxHeight = parseInt(maxHegihtStyle.height);
 
     if (containerHeight + 62 >= maxHeight) {
-      document.querySelector("#stuff-container").style.position = 'relative';
+      document.querySelector("#stuff-container").style.position = "relative";
     }
 
-    let enrolmentData = {...this.state.enrolmentData};
+    let enrolmentData = { ...this.state.enrolmentData };
     let lastIndexID = this.state.stuffID;
 
-    enrolmentData.stuff.push({"color": "#4d191a", "name": "", "volume": "", "ratio": 0});
-
-    this.setState({enrolmentData});
-    this.setState({stuffID: lastIndexID++});
-
-    this.setState({ step: <Step2
-      stuff={this.state.enrolmentData.stuff}
-      idx={this.state.stuffID}
-      onAddStuff={this.onAddStuff}
-      onDeleteStuff={this.onDeleteStuff}
-      onSaveStuffName={this.onSaveStuffName}
-      onSaveStuffVolume={this.onSaveStuffVolume}
-      onSelectColor={this.onSelectColor}
-      validateNumber={this.validateNumber}
-    /> });
+    enrolmentData.stuff.push({
+      color: "#4d191a",
+      name: "",
+      ml: "",
+      ratio: 0
+    });
+
+    this.setState({ enrolmentData });
+    this.setState({ stuffID: lastIndexID++ });
+
+    this.setState({
+      step: (
+        <Step2
+          stuff={this.state.enrolmentData.stuff}
+          idx={this.state.stuffID}
+          onAddStuff={this.onAddStuff}
+          onDeleteStuff={this.onDeleteStuff}
+          onSaveStuffName={this.onSaveStuffName}
+          onSaveStuffVolume={this.onSaveStuffVolume}
+          onSelectColor={this.onSelectColor}
+          validateNumber={this.validateNumber}
+        />
+      )
+    });
   };
 
   onDeleteStuff = event => {
-    let containerStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container"), null) : document.querySelector("#stuff-container").currentStyle;
-    let maxHegihtStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container").parentElement, null) : document.querySelector("#stuff-container").parentElement.currentStyle;
+    let containerStyle = window.getComputedStyle
+      ? getComputedStyle(document.querySelector("#stuff-container"), null)
+      : document.querySelector("#stuff-container").currentStyle;
+    let maxHegihtStyle = window.getComputedStyle
+      ? getComputedStyle(
+          document.querySelector("#stuff-container").parentElement,
+          null
+        )
+      : document.querySelector("#stuff-container").parentElement.currentStyle;
 
     let containerHeight = parseInt(containerStyle.height);
     let maxHeight = parseInt(maxHegihtStyle.height);
-    
+
     if (containerHeight - 62 <= maxHeight) {
-      document.querySelector("#stuff-container").style.position = 'absolute';
+      document.querySelector("#stuff-container").style.position = "absolute";
     }
 
-    let enrolmentData = {...this.state.enrolmentData};
-    let clickIndex = event.target.parentNode.parentNode.parentNode.getAttribute("stuff");
+    let enrolmentData = { ...this.state.enrolmentData };
+    let clickIndex = event.target.parentNode.parentNode.parentNode.getAttribute(
+      "stuff"
+    );
 
     enrolmentData.stuff[clickIndex] = {};
 
     this.setState(enrolmentData);
 
     event.target.parentNode.parentNode.remove();
-  }
+  };
 
   onSelectColor = event => {
     let colorContainer = document.querySelector("#color-picker");
@@ -382,92 +446,109 @@ class Enrolment extends Component {
     let colorContainer = document.querySelector("#color-picker");
     let target = document.querySelector(`#${colorTarget}`);
     let targetNumber = target.getAttribute("stuff");
-    let enrolmentData = {...this.state.enrolmentData};
-    let rgb = target.style.backgroundColor.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
-
+    let enrolmentData = { ...this.state.enrolmentData };
+    let rgb = target.style.backgroundColor
+      .replace(/^(rgb|rgba)\(/, "")
+      .replace(/\)$/, "")
+      .replace(/\s/g, "")
+      .split(",");
 
     colorContainer.classList.add(this.colorClose);
 
-    enrolmentData.stuff[targetNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1);
-    
+    enrolmentData.stuff[targetNumber].color =
+      "#" +
+      (
+        (1 << 24) +
+        (parseInt(rgb[0]) << 16) +
+        (parseInt(rgb[1]) << 8) +
+        parseInt(rgb[2])
+      )
+        .toString(16)
+        .slice(1);
+
     this.setState(enrolmentData);
-  }
+  };
 
   onSaveImages = images => {
-    this.setState({images: images});
-  }
+    this.setState({ images: images });
+  };
 
   onSaveRecipe = () => {
     let cup = this.state.enrolmentData.info.cup;
-    if (cup === '하이볼') cup = 0;
-    else if (cup === '리큐르') cup = 1;
-    else if (cup === '허리케인') cup = 2;
-    else if (cup === '마가렛') cup = 3;
+    if (cup === "하이볼") cup = 0;
+    else if (cup === "리큐르") cup = 1;
+    else if (cup === "허리케인") cup = 2;
+    else if (cup === "마가렛") cup = 3;
     else cup = 4;
 
-    let tags = this.state.enrolmentData.info.tags.split(' ');
-
-    // const convertTags = tags.map(val => {
-    //   if (val[0] !== '#') return `#${val}`;
-    //   return val;
-    //   맨 앞에 # 붙이는 기능
-    //   혹시 몰라서 남겨둠
-    // });
+    //해쉬태그 분리
+    let tags = this.state.enrolmentData.info.tags;
+    const regexp = /\#[^#\s,;]+/g;
+    tags = tags.match(regexp);
+    if (tags) {
+      tags = tags.map(item => item.replace("#", "")).toString();
+    }
 
     let data = {
-      "name": this.state.enrolmentData.info.name,
-      "glass" : cup,
-      "percent" : this.state.enrolmentData.info.alcohol,
-      "description" : this.state.enrolmentData.info.describe,
-      "tag" : tags,
-      "ingredient" : this.state.enrolmentData.stuff,
-      "owner" : "fonnie"
-    }
+      name: this.state.enrolmentData.info.name,
+      glass: cup,
+      percent: this.state.enrolmentData.info.alcohol,
+      description: this.state.enrolmentData.info.describe,
+      tag: tags,
+      ingredient: this.state.enrolmentData.stuff,
+      owner: this.state.userID
+    };
 
     // TODO
-    // owner 를 사용자 받아와서 넣는거 해야함
     // 데이터 validation 체크 해야 함
-
     this.props.enrolmentRequest(data);
   };
 
   onUploadImage = (images, id) => {
     let formData = new FormData();
     images.forEach(image => {
-      formData.append('images', image);
-      formData.append('timestamp', (Date.now() / 1000) | 0);
+      formData.append("images", image);
+      formData.append("timestamp", (Date.now() / 1000) | 0);
     });
 
-    formData.append('id', id);
-
-    axios.post("http://ec2-18-191-88-64.us-east-2.compute.amazonaws.com:9000/recipe/upload", formData, {
-      headers: { "X-Requested-With": "XMLHttpRequest" },
-    }).then(response => {
-      const data = response.data;
-      // const fileURL = data.secure_url // You should store this URL for future references in your app
-      console.log(id);
-      console.log(data);
-    }).catch(e => {
-      console.error(e);
-    });
-  }
+    formData.append("id", id);
+
+    axios
+      .post(
+        "http://ec2-18-191-88-64.us-east-2.compute.amazonaws.com:9000/recipe/upload",
+        formData,
+        {
+          headers: { "X-Requested-With": "XMLHttpRequest" }
+        }
+      )
+      .then(response => {
+        const data = response.data;
+        // const fileURL = data.secure_url // You should store this URL for future references in your app
+        console.log(id);
+        console.log(data);
+      })
+      .catch(e => {
+        console.error(e);
+      });
+  };
 
   handleChange = color => {
     let target = document.querySelector(`#${colorTarget}`);
     target.style.backgroundColor = color.hex;
-  }
+  };
 
   render() {
     const { left, middle, step, done } = this.state;
 
     return (
       <div className={cx("enrolment-container")}>
-
         <div id={"color-picker"} className={cx("color-picker", "close")}>
-          <ChromePicker 
-            onChange={ this.handleChange }
+          <ChromePicker onChange={this.handleChange} />
+          <span
+            id={"color-picker-background"}
+            className={cx("picker-background")}
+            onClick={this.onSelectColorClose}
           />
-          <span id={"color-picker-background"} className={cx("picker-background")} onClick={ this.onSelectColorClose }></span>
         </div>
 
         <Header
@@ -479,13 +560,11 @@ class Enrolment extends Component {
           {left}
 
           {middle}
-          
-          {step}
 
+          {step}
         </div>
 
         {done}
-
       </div>
     );
   }
diff --git a/src/containers/Enrolment/Function/StuffItem.jsx b/src/containers/Enrolment/Function/StuffItem.jsx
index bb46a9d..812d65c 100644
--- a/src/containers/Enrolment/Function/StuffItem.jsx
+++ b/src/containers/Enrolment/Function/StuffItem.jsx
@@ -5,41 +5,50 @@ import { Edit } from "../../../components";
 
 const cx = classNames.bind(styles);
 
-const EnrolmentStuffItem = (props) => {
-    let styles = {
-        backgroundColor: props.stuff.color
-    }
-    
+const EnrolmentStuffItem = props => {
+  let styles = {
+    backgroundColor: props.stuff.color
+  };
+
   return (
     <div className={cx("stuff-item")} stuff={props.idx}>
-        <div className={cx("stuff-item-container")}>
-            <div className={cx("stuff-item-input")}>
-                <span id={`item-color_${props.idx}`} className={cx("stuff-item-color")} stuff={props.idx} onClick={ e => props.onSelectColor(e)} style={styles}></span>
-
-                <Edit
-                    className={cx("stuff-item-input-stuff")}
-                    placeholder="재료 이름"
-                    defaultValue={props.stuff.name}
-                    onChange={e => props.onSaveStuffName(e, props.idx)}
-                />
-
-                <Edit
-                    className={cx("stuff-item-input-volume")}
-                    placeholder="용량"
-                    type="number"
-                    defaultValue={props.stuff.volume}
-                    onChange={e => props.onSaveStuffVolume(e, props.idx)}
-                />
-
-                <span className={cx("volume-text")}> ml</span>
-
-                <span className={cx("stuff-item-ratio")}>{`${props.stuff.ratio} %`}</span>
-            </div>
-
-            <span className={cx("stuff-delete")} onClick={props.onDeleteStuff}></span>
+      <div className={cx("stuff-item-container")}>
+        <div className={cx("stuff-item-input")}>
+          <span
+            id={`item-color_${props.idx}`}
+            className={cx("stuff-item-color")}
+            stuff={props.idx}
+            onClick={e => props.onSelectColor(e)}
+            style={styles}
+          />
+
+          <Edit
+            className={cx("stuff-item-input-stuff")}
+            placeholder="재료 이름"
+            defaultValue={props.stuff.name}
+            onChange={e => props.onSaveStuffName(e, props.idx)}
+          />
+
+          <Edit
+            className={cx("stuff-item-input-volume")}
+            placeholder="용량"
+            type="number"
+            defaultValue={props.stuff.volume}
+            onChange={e => props.onSaveStuffVolume(e, props.idx)}
+            min={0}
+          />
+
+          <span className={cx("volume-text")}> ml</span>
+
+          <span className={cx("stuff-item-ratio")}>{`${
+            props.stuff.ratio
+          } %`}</span>
         </div>
+
+        <span className={cx("stuff-delete")} onClick={props.onDeleteStuff} />
+      </div>
     </div>
   );
 };
 
-export default EnrolmentStuffItem;
\ No newline at end of file
+export default EnrolmentStuffItem;
diff --git a/src/containers/MainView/MainView.jsx b/src/containers/MainView/MainView.jsx
index d5de9de..fb4a6ad 100644
--- a/src/containers/MainView/MainView.jsx
+++ b/src/containers/MainView/MainView.jsx
@@ -143,6 +143,7 @@ class MainView extends Component {
 
     //click한 칵테일의 위치를 List에서 찾는 Logic
     const index = this.findCocktailIndex(cocktailID);
+
     const next = index !== this.props.recommend.result.length - 1;
     const prev = index !== 0;
     this.setState({
@@ -262,16 +263,17 @@ class MainView extends Component {
         this.setState({
           viewRecipeInfo: {
             ...this.state.viewRecipeInfo,
-            ID: list[index + 1],
+            ID: list[index + 1]._id,
             index: index + 1,
-            next: false
+            next: false,
+            prev: true
           }
         });
       } else {
         this.setState({
           viewRecipeInfo: {
             ...this.state.viewRecipeInfo,
-            ID: list[index + 1],
+            ID: list[index + 1]._id,
             index: index + 1,
             prev: true
           }
@@ -283,16 +285,17 @@ class MainView extends Component {
         this.setState({
           viewRecipeInfo: {
             ...this.state.viewRecipeInfo,
-            ID: list[index - 1],
+            ID: list[index - 1]._id,
             index: index - 1,
-            prev: false
+            prev: false,
+            next: true
           }
         });
       } else {
         this.setState({
           viewRecipeInfo: {
             ...this.state.viewRecipeInfo,
-            ID: list[index - 1],
+            ID: list[index - 1]._id,
             index: index - 1,
             next: true
           }
diff --git a/src/containers/MyMenu/MyMenu.jsx b/src/containers/MyMenu/MyMenu.jsx
index 0df0295..1d61901 100644
--- a/src/containers/MyMenu/MyMenu.jsx
+++ b/src/containers/MyMenu/MyMenu.jsx
@@ -22,8 +22,8 @@ class MyMenu extends Component {
     tabIndex: 0, // 0-스크랩, 1-등록한 레시피,
     scrapArray: [],
     recipesArray: [],
-    page: 0,
-    pages: 0
+    page: 1,
+    pages: 1
   };
 
   componentDidMount() {
@@ -111,6 +111,7 @@ class MyMenu extends Component {
   render() {
     const { userid, tabIndex, scrapArray, recipesArray } = this.state;
     const tabArray = tabIndex ? recipesArray : scrapArray;
+
     return (
       <div className={cx("mymenu_container")}>
         <div className={cx("top_rect")}>
diff --git a/src/containers/SearchResult/SearchResult.jsx b/src/containers/SearchResult/SearchResult.jsx
index 1054b3d..769cf93 100644
--- a/src/containers/SearchResult/SearchResult.jsx
+++ b/src/containers/SearchResult/SearchResult.jsx
@@ -195,7 +195,6 @@ class SearchResult extends Component {
         ? page !== this.state.pages
         : true;
     const prev = index === 0 ? page !== 1 : true;
-
     this.setState({
       viewRecipeInfo: {
         bShow: true,
@@ -231,12 +230,10 @@ class SearchResult extends Component {
     event.preventDefault();
     event.stopPropagation();
     const { page, index } = this.state.viewRecipeInfo;
-
     if (bNext) {
       //다음
       const len = this.state.searchList[page - 1].list.length;
       if (page === this.state.pages && index === len - 2) {
-        //마지막 직전
         this.setState({
           viewRecipeInfo: {
             ...this.state.viewRecipeInfo,
@@ -260,7 +257,7 @@ class SearchResult extends Component {
             this.setState({
               viewRecipeInfo: {
                 ...this.state.viewRecipeInfo,
-                ID: this.state.searchList[page].list[0].props.props._id,
+                ID: this.state.searchList[page - 1].list[0].props.props._id,
                 page: page + 1,
                 index: 0,
                 prev: true
@@ -400,7 +397,6 @@ class SearchResult extends Component {
     const cocktailID = event.target.id;
     const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴
     const userID = auth.userid;
-    console.log("Like 클릭 ! : ", cocktailID, userID);
 
     const result = this.findCocktailIndex(cocktailID);
     const page = parseInt(result[0]);
diff --git a/src/containers/ViewRecipe/ViewRecipe.jsx b/src/containers/ViewRecipe/ViewRecipe.jsx
index 38388ea..d4efaf7 100644
--- a/src/containers/ViewRecipe/ViewRecipe.jsx
+++ b/src/containers/ViewRecipe/ViewRecipe.jsx
@@ -30,7 +30,7 @@ import heartIcon from "../../static/images/heart-button.svg";
 import arrowLeft from "../../static/images/arrow-left.svg";
 import arrowRight from "../../static/images/arrow-right.svg";
 
-import { dataRequest } from "../../action/userAction.js";
+import { setScrapRequest } from "../../action/userAction.js";
 import { withRouter } from "react-router-dom";
 
 import { addCommentRequest } from "../../action/recipeAction";
@@ -60,7 +60,11 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = { recipeIDRequest, dataRequest, addCommentRequest };
+const mapDispatchToProps = {
+  recipeIDRequest,
+  setScrapRequest,
+  addCommentRequest
+};
 
 class ViewRecipe extends Component {
   state = {
@@ -99,7 +103,6 @@ class ViewRecipe extends Component {
       this.props.recipeIDRequest(id);
       return;
     }
-
     if (
       prevProps.stuff === undefined &&
       prevProps.photos === undefined &&
@@ -174,6 +177,39 @@ class ViewRecipe extends Component {
           }
         );
       } else {
+        if (prevProps.recipe_info !== this.props.recipe_info) {
+          const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴
+          this.setState(
+            {
+              recipe_info: this.props.recipe_info,
+              stuffs: this.props.stuffs,
+              photos: this.props.photos,
+              comments: this.props.comments,
+              main: <RecipeCup glass={this.props.recipe_info.glass} />,
+              side: (
+                <RecipeInfo
+                  alcohol={this.state.recipe_info.alcohol}
+                  recipe={this.state.recipe_info.cocktail}
+                  descripe={this.state.recipe_info.description}
+                  tags={this.state.recipe_info.tags}
+                />
+              ),
+              userID: auth ? auth.userid : ""
+            },
+            () => {
+              document.getElementById(
+                "cocktail"
+              ).innerHTML = this.props.recipe_info.cocktail;
+              document.getElementById(
+                "description"
+              ).innerHTML = this.props.recipe_info.description;
+              document.getElementById(
+                "tag"
+              ).innerHTML = this.props.recipe_info.tags.join(" ");
+            }
+          );
+          return;
+        }
         const nowScrap = this.props.scrap;
         if (nowScrap.result && prevProps.scrap.status !== nowScrap.status) {
           let num = 1;
@@ -181,7 +217,10 @@ class ViewRecipe extends Component {
             num = -1;
           }
           this.setState({
-            recipe_info: { like: this.state.recipe_info.like + num }
+            recipe_info: {
+              ...this.state.recipe_info,
+              like: this.state.recipe_info.like + num
+            }
           });
         }
       }
@@ -263,17 +302,23 @@ class ViewRecipe extends Component {
 
   onAddComment = () => {
     let commentText = document.querySelector("#commentText").value;
-    if (commentText !== "" && commentText !== undefined && commentText !== null) {
+    if (
+      commentText !== "" &&
+      commentText !== undefined &&
+      commentText !== null
+    ) {
       let now = new Date();
       let time =
         now.getHours() > 9
           ? `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
           : `0${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
-      let thisComment = { nick: this.state.recipe_info.nick, comment: commentText, time: time };
+      let thisComment = {
+        nick: this.state.userID,
+        comment: commentText,
+        time: time
+      };
       let comment = this.state.comment;
-      comment.push();
-      //TODO : 형 로그인 했을 경우 그 로그인 한 사람의 닉네임 어떤식으로 활용해요?
-      //comment 안에 nick 여기에 로그인 한 사람의 닉네임이 들어가야되요
+      comment.push(thisComment);
 
       this.setState({ comment: comment });
       this.setState({
@@ -281,7 +326,7 @@ class ViewRecipe extends Component {
           <RecipeComment comment={comment} onAddComment={this.onAddComment} />
         )
       });
-      this.props.addCommentRequest({id: this.props.id, comment: thisComment});
+      this.props.addCommentRequest({ id: this.props.id, comment: thisComment });
       // 여기 이 api 호출하고 성공할 시 그때 ui 에 추가해주는건 그때 해줘야함
       // 즉, update 그 function 에서 해야함
       document.querySelector("#commentText").value = "";
@@ -316,7 +361,7 @@ class ViewRecipe extends Component {
 
   onLikeClick = event => {
     const type = 3;
-    this.props.dataRequest({
+    this.props.setScrapRequest({
       type,
       data: { cocktailID: this.props.id, userID: this.state.userID }
     });