+
{props.name}
{props.volume}
{props.ratio}
diff --git a/src/containers/ViewRecipe/Function/ViewRecipe.scss b/src/containers/ViewRecipe/Function/ViewRecipe.scss
index b6f8722..c37dd14 100644
--- a/src/containers/ViewRecipe/Function/ViewRecipe.scss
+++ b/src/containers/ViewRecipe/Function/ViewRecipe.scss
@@ -89,29 +89,21 @@
margin-top: 0;
}
- .side-info-alcohol {
- list-style: none;
- padding: 0;
- margin: 0;
-
- li {
- display: block;
- float: left;
- width: 92px;
- height: 92px;
- margin-top: 20px;
- border: 1px solid #ffffff;
- box-sizing: border-box;
- border-radius: 10px;
- }
-
- }
-
.content {
font-weight: normal;
margin-top: 21px;
}
+ .alcohol {
+ display: block;
+ width: 92px;
+ height: 92px;
+ margin-top: 20px;
+ border: 1px solid #ffffff;
+ box-sizing: border-box;
+ border-radius: 10px;
+ }
+
.tags {
color: #97d9eb;
}
@@ -129,6 +121,10 @@
width: 100%;
height: calc(100% - 60px);
+ div {
+ height: auto;
+ }
+
.detail-content-main-side-stuff-container {
position: absolute;
width: 100%;
@@ -158,9 +154,6 @@
.stuff-color {
display: inline-block;
width: 8%;
- border: 1px solid #707070;
- border-radius: 5px;
- box-sizing: border-box;
margin-left: 5%;
}
@@ -212,6 +205,10 @@
.detail-content-main-side-comment {
height: calc(100% - 60px);
+ div {
+ height: auto;
+ }
+
.detail-content-main-side-comment-container {
height: calc(100% - 74px);
diff --git a/src/containers/ViewRecipe/ViewRecipe.jsx b/src/containers/ViewRecipe/ViewRecipe.jsx
index 3ae1801..4681f32 100644
--- a/src/containers/ViewRecipe/ViewRecipe.jsx
+++ b/src/containers/ViewRecipe/ViewRecipe.jsx
@@ -16,47 +16,62 @@ const cx = classNames.bind(styles);
const mapStateToProps = state => {
return {
+ recipe_info: state.recipeReducer.recipe_info,
stuffs: state.recipeReducer.stuffs,
photos: state.recipeReducer.photos,
- comments: state.recipeReducer.comments,
- cocktail_info: state.recipeReducer.cocktail_info
+ comments: state.recipeReducer.comments
};
};
const mapDispatchToProps = { recipeIDRequest };
class ViewRecipe extends Component {
- recipe_info = {name: "레시피 이름", descripe: "이 레시피에 대한 설명", tags: "#태그 #태그 #태그"};
-
state = {
+ recipe_info: {
+ cocktail: "",
+ description: "",
+ nick: "",
+ like: 0,
+ comment: 0,
+ view: 0,
+ tags: []
+ },
+ stuffs: [],
+ photos: [],
+ comments: [],
main:
,
side:
-
,
- // stuffs: [
- // {name:"재료 이름123", volume: "용량ml", ratio: "30%"},
- // {name:"재료 이름2", volume: "용량ml", ratio: "30%"},
- // {name:"재료 이름3", volume: "용량ml", ratio: "30%"}
- // ],
- // photos: [
- // "사진 1", "사진 2", "사진 3", "사진 4", "사진 5", "사진 6", "사진 7", "사진 8"
- // ],
- // comments: [
- // {nick: "닉네임 A", comments: "댓글내용 1", time: "00:00"},
- // {nick: "닉네임 B", comments: "댓글내용 2", time: "11:11"},
- // {nick: "닉네임 C", comments: "댓글내용 3", time: "22:22"},
- // {nick: "닉네임 D", comments: "댓글내용 4", time: "12:44"}
- // ],
- // cocktail_info: {cocktail: "칵테일 이름", nick: "등록한 사람 닉네임", like :"85", comment :"35"}
+
};
componentDidMount() {
this.props.recipeIDRequest("5c9b94e7e1723e5834f0eede");
- console.log(this.props);
- console.log(this.state);
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.stuff === undefined && prevProps.photos === undefined && prevProps.comments === undefined && prevProps.recipe_info === undefined) {
+ this.setState({
+ recipe_info: this.props.recipe_info,
+ stuffs: this.props.stuffs,
+ photos: this.props.photos,
+ comments: this.props.comments,
+ side:
+
+ }, () => {
+ document.getElementById('cocktail').innerHTML = this.props.recipe_info.cocktail;
+ document.getElementById('description').innerHTML = this.props.recipe_info.description;
+ // document.getElementById('alcohol').innerHTML = '...';
+ document.getElementById('tag').innerHTML = this.props.recipe_info.tags.join(' ');
+ });
+ }
}
onChangeFocusing = event => {
@@ -70,9 +85,9 @@ class ViewRecipe extends Component {
main:
,
side:
} );
@@ -134,10 +149,10 @@ class ViewRecipe extends Component {
diff --git a/src/reducer/enrolmentReducer.js b/src/reducer/enrolmentReducer.js
new file mode 100644
index 0000000..d1f38e8
--- /dev/null
+++ b/src/reducer/enrolmentReducer.js
@@ -0,0 +1,22 @@
+import { actions } from "../action/enrolmentAction";
+const initialState = {
+ state: "fail"
+};
+
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+ case actions.ENROLMENT.SUCCESS: {
+ const { result } = action.payload;
+
+ return {
+ ...state,
+ result,
+ state: "success"
+ };
+ }
+ default:
+ return state;
+ }
+};
+
+export default reducer;
diff --git a/src/reducer/recipeReducer.js b/src/reducer/recipeReducer.js
index f435bd2..25a0ca2 100644
--- a/src/reducer/recipeReducer.js
+++ b/src/reducer/recipeReducer.js
@@ -13,37 +13,35 @@ const reducer = (state = initialState, action) => {
}
case actions.BYID.SUCCESS: {
const { result } = action.payload;
- console.log(result);
- // const stuffs = result[0].ingredient;
- // // const photos = result[0].
- // const photos = ["테스트 1", "테스트 2", "테스트 3", "테스트 4"];
- // // const comments = result[0].
- // const comments = [
- // {nick: "닉네임 A", comments: "댓글내용 1", time: "00:00"},
- // {nick: "닉네임 B", comments: "댓글내용 2", time: "11:11"},
- // {nick: "닉네임 C", comments: "댓글내용 3", time: "22:22"},
- // {nick: "닉네임 D", comments: "댓글내용 4", time: "12:44"}
- // ];
- // const cocktail_info = {
- // cocktail: result[0].name,
- // nick: result[0].owner,
- // like: result[0].scrap,
- // comment: 0,
- // view: result[0].view
- // };
+ const stuffs = result[0].ingredient;
+ // const photos = result[0].
+ const photos = ["테스트 1", "테스트 2", "테스트 3", "테스트 4"];
+ // const comments = result[0].
+ const comments = [
+ {nick: "닉네임 A", comments: "댓글내용 1", time: "00:00"},
+ {nick: "닉네임 B", comments: "댓글내용 2", time: "11:11"},
+ {nick: "닉네임 C", comments: "댓글내용 3", time: "22:22"},
+ {nick: "닉네임 D", comments: "댓글내용 4", time: "12:44"}
+ ];
+ const recipe_info = {
+ cocktail: result[0].name,
+ description: result[0].description,
+ nick: result[0].owner,
+ like: result[0].scrap,
+ comment: 0,
+ view: result[0].view,
+ tags: result[0].tag
+ };
- // return {
- // ...state,
- // state: "success",
- // stuffs: stuffs,
- // photos: photos,
- // comments: comments,
- // cocktail_info: cocktail_info
- // };
return {
- ...state
- }
+ ...state,
+ state: "success",
+ stuffs: stuffs,
+ photos: photos,
+ comments: comments,
+ recipe_info: recipe_info
+ };
}
case actions.TAGBYLATEST.SUCCESS: {
const { result } = action.payload;
diff --git a/src/reducer/rootReducer.js b/src/reducer/rootReducer.js
index b000924..d27175c 100644
--- a/src/reducer/rootReducer.js
+++ b/src/reducer/rootReducer.js
@@ -5,6 +5,7 @@
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import searchReducer from "./searchReducer";
-import recipeReducer from "./recipeReducer"
+import recipeReducer from "./recipeReducer";
+import enrolmentReducer from "./enrolmentReducer";
-export default combineReducers({ userReducer, searchReducer, recipeReducer });
+export default combineReducers({ userReducer, searchReducer, recipeReducer, enrolmentReducer });
diff --git a/src/saga/enrolmentSaga.js b/src/saga/enrolmentSaga.js
new file mode 100644
index 0000000..78c11d2
--- /dev/null
+++ b/src/saga/enrolmentSaga.js
@@ -0,0 +1,23 @@
+import { all, call, put, takeLatest } from "redux-saga/effects";
+import {
+ actions,
+ enrolmentSuccess
+
+} from "../action/enrolmentAction";
+import {
+ enrolmentRecipe
+ } from "../api/enrolmentAPI";
+
+function* enrolmentRecipeRequest (action) {
+ try {
+ const { data } = action.payload;
+ const result = yield call(enrolmentRecipe, {data});
+ yield put(enrolmentSuccess(result));
+ } catch (error) {}
+}
+
+export default function* saga() {
+ yield all([
+ takeLatest(actions.ENROLMENT.REQUEST, enrolmentRecipeRequest)
+ ]);
+}
diff --git a/src/saga/recipeSaga.js b/src/saga/recipeSaga.js
index 569a937..d9f51e6 100644
--- a/src/saga/recipeSaga.js
+++ b/src/saga/recipeSaga.js
@@ -25,12 +25,10 @@ function* requestAll () {
}
function* requestRecipeByID(action) {
- const { _id } = action.payload;
+ const { id } = action.payload;
try {
- const result = yield call(getRecipeByID, {_id});
+ const result = yield call(getRecipeByID, {id});
yield put(recipeIDSuccess(result));
- // const result = yield call(getRecipe);
- // yield put(recipeAllSuccess(result));
} catch (error) {}
}
diff --git a/src/saga/rootSaga.js b/src/saga/rootSaga.js
index 87edfd4..2cd281b 100644
--- a/src/saga/rootSaga.js
+++ b/src/saga/rootSaga.js
@@ -6,8 +6,9 @@ import { all } from "redux-saga/effects";
import userSaga from "./userSaga";
import searchSaga from "./searchSaga";
-import recipeSaga from "./recipeSaga"
+import recipeSaga from "./recipeSaga";
+import enrolmentSaga from "./enrolmentSaga";
export default function* rootSaga() {
- yield all([userSaga(), searchSaga(), recipeSaga()]);
+ yield all([userSaga(), searchSaga(), recipeSaga(), enrolmentSaga()]);
}