diff --git a/package.json b/package.json index da13ddd..6a58b9e 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 8dfb6ef..5b3abf6 100644 --- a/src/App.js +++ b/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 { - - ); diff --git a/src/action/enrolmentAction.js b/src/action/enrolmentAction.js new file mode 100644 index 0000000..6407993 --- /dev/null +++ b/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 + } + }; +} \ No newline at end of file diff --git a/src/action/recipeAction.js b/src/action/recipeAction.js new file mode 100644 index 0000000..a4cd849 --- /dev/null +++ b/src/action/recipeAction.js @@ -0,0 +1,137 @@ +export const actions = { + ALL: { + REQUEST: "VIEW_ALL", + SUCCESS: "ALL_READ_SUCCESS", + FAILED: "ALL_READ_FAILED" + }, + BYID: { + REQUEST: "VIEW_BY_ID", + SUCCESS: "BY_ID_READ_SUCCESS", + FAILED: "BY_ID_READ_FAILED" + }, + TAGBYLATEST: { + REQUEST: "VIEW_BY_TAG_LATEST", + SUCCESS: "BY_TAG_LATEST_READ_SUCCESS", + FAILED: "BY_TAG_LATEST_READ_FAILED" + }, + TAGBYVIEW: { + REQUEST: "VIEW_BY_TAG_VIEW", + SUCCESS: "BY_TAG_VIEW_READ_SUCCESS", + FAILED: "BY_TAG_VIEW_READ_FAILED" + }, + STUFFBYLATEST: { + REQUEST: "VIEW_BY_STUFF_LATEST", + SUCCESS: "BY_STUFF_LATEST_READ_SUCCESS", + FAILED: "BY_STUFF_LATEST_READ_FAILED" + }, + STUFFBYVIEW: { + REQUEST: "VIEW_BY_STUFF_VIEW", + SUCCESS: "BY_STUFF_VIEWREAD_SUCCESS", + FAILED: "BY_STUFF_VIEW_READ_FAILED" + } +}; + +export function recipeAllRequest() { + return { + type: actions.ALL.REQUEST + }; +} + +export function recipeAllSuccess(result) { + return { + type: actions.ALL.SUCCESS, + payload: { + result + } + }; +} + +export function recipeIDRequest(id) { + return { + type: actions.BYID.REQUEST, + payload: { + id + } + }; +} + +export function recipeIDSuccess(result) { + return { + type: actions.BYID.SUCCESS, + payload: { + result + } + }; +} + +export function recipeTagLatestRequest(tag) { + return { + type: actions.TAGBYLATEST.REQUEST, + payload: { + tag + } + }; +} + +export function recipeTagLatestSuccess(result) { + return { + type: actions.TAGBYLATEST.SUCCESS, + payload: { + result + } + }; +} + +export function recipeTagViewRequest(tag) { + return { + type: actions.TAGBYVIEW.REQUEST, + payload: { + tag + } + }; +} + +export function recipeTagViewSuccess(result) { + return { + type: actions.TAGBYVIEW.SUCCESS, + payload: { + result + } + }; +} + +export function recipeStuffLatestRequest(ingredient) { + return { + type: actions.STUFFBYLATEST.REQUEST, + payload: { + ingredient + } + }; +} + +export function recipeStuffLatestSuccess(result) { + return { + type: actions.STUFFBYLATEST.SUCCESS, + payload: { + result + } + }; +} + +export function recipeStuffViewRequest(ingredient) { + return { + type: actions.STUFFBYVIEW.REQUEST, + payload: { + ingredient + } + }; +} + +export function recipeStuffViewSuccess(result) { + return { + type: actions.STUFFBYVIEW.SUCCESS, + payload: { + result + } + }; +} \ No newline at end of file diff --git a/src/api/enrolmentAPI.js b/src/api/enrolmentAPI.js new file mode 100644 index 0000000..09609e0 --- /dev/null +++ b/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; +} diff --git a/src/api/recipeAPI.js b/src/api/recipeAPI.js new file mode 100644 index 0000000..9614b7b --- /dev/null +++ b/src/api/recipeAPI.js @@ -0,0 +1,53 @@ +import * as webRequestUtil from "./rootAPI"; + +export async function getRecipe() { + const url = "recipe"; + const res = await webRequestUtil.get({ url }); + return res.data; +} + +export async function getRecipeByID({id}) { + const url = "recipe/details"; + const body = { + id + }; + + const res = await webRequestUtil.get({ url, body }); + return res.data; +} + +export async function getTagByLatest({tag}) { + const url = "recipe/tag/new"; + const body = { + tag + }; + const res = await webRequestUtil.get({ url, body }); + return res.data; +} + +export async function getTagByView({tag}) { + const url = "recipe/tag/view"; + const body = { + tag + }; + const res = await webRequestUtil.get({ url, body }); + return res.data; +} + +export async function getStuffByLatest({ingredient}) { + const url = "recipe/ingredient/new"; + const body = { + ingredient + }; + const res = await webRequestUtil.get({ url, body }); + return res.data; +} + +export async function getStuffByView({ingredient}) { + const url = "recipe/ingredient/view"; + const body = { + ingredient + }; + const res = await webRequestUtil.get({ url, body }); + return res.data; +} \ No newline at end of file diff --git a/src/api/rootAPI.js b/src/api/rootAPI.js index 93247be..fb89a16 100644 --- a/src/api/rootAPI.js +++ b/src/api/rootAPI.js @@ -1,6 +1,6 @@ import axios from "axios"; -const SERVER_END_POINT = ""; //SERVER URL +const SERVER_END_POINT = "http://18.191.88.64:9000/"; //SERVER URL const basicRequest = (type, { url, headers, body }) => { const config = { method: type, @@ -10,9 +10,11 @@ const basicRequest = (type, { url, headers, body }) => { "Content-Type": "application/json", ...headers }, - data: body }; + if (type === "GET") config.params = body; + else config.data = body; + return axios(config) .then(res => { return res; diff --git a/src/api/userAPI.js b/src/api/userAPI.js index 157b48d..47fa172 100644 --- a/src/api/userAPI.js +++ b/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 }) { diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx index 2e9a243..a6fa6c0 100644 --- a/src/containers/Enrolment/Enrolment.jsx +++ b/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); }; diff --git a/src/containers/Enrolment/Function/Enrolment.scss b/src/containers/Enrolment/Function/Enrolment.scss index 9bc7acd..a6fdcbd 100644 --- a/src/containers/Enrolment/Function/Enrolment.scss +++ b/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%; diff --git a/src/containers/HTML_TEST/HTML_TEST.jsx b/src/containers/HTML_TEST/HTML_TEST.jsx deleted file mode 100644 index f0f9c96..0000000 --- a/src/containers/HTML_TEST/HTML_TEST.jsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, { Component } from "react"; -import classNames from "classnames/bind"; -import styles from "./HTML_TEST.scss"; -import { connect } from "react-redux"; -import { Div, CommonStep } from "../../components"; - -const cx = classNames.bind(styles); - -const mapStateToProps = state => { - return state; -}; - -const mapDispatchToProps = {}; - -class Header extends Component { - state = { - bShowSearch: false - }; - - onChangeSearchStatus = event => { - this.setState({ bShowSearch: !this.state.bShowSearch }); - }; - - common_form = (title, detail) => { - return [ - - ]; - }; - - render() { - const { bShowSearch } = this.state; - - return ( - //
-
-
-
- 칵테일 이름 - -
- 등록한 사람 닉네임 - -
- - 85 - - 24 -
-
-
- -
-
- - - -
- -
-
- 정보 - 재료 - 사진 - 댓글 -
- -
- 레시피 이름 - 레시피 이름 - - 한줄 설명 - 한줄 설명 - - 도수 -
    -
  • -
  • -
  • -
  • -
  • -
- - 태그 - #태그명 #태그명 #태그명 -
- -
-
-
- - 재료이름 - 용량ml - 30% -
- -
- - 재료이름 - 용량ml - 30% -
- -
- - 재료이름 - 용량ml - 30% -
-
-
- -
-
- - - - - - -
-
- -
-
-
- 닉네임 - 댓글내용 - 00:00 -
- -
- 닉네임 - 댓글내용 - 00:00 -
- -
- 닉네임 - 댓글내용 - 00:00 -
-
- -
- 댓글 ui here -
-
- -
-
- -
-
- ); - } -} - -export default connect( - mapStateToProps, - mapDispatchToProps -)(Header); diff --git a/src/containers/HTML_TEST/HTML_TEST.scss b/src/containers/HTML_TEST/HTML_TEST.scss deleted file mode 100644 index 09e6514..0000000 --- a/src/containers/HTML_TEST/HTML_TEST.scss +++ /dev/null @@ -1,326 +0,0 @@ -// .detail-container { -// position: absolute; -// width: 100%; -// height: 100%; -// top: 0; -// left: 0; - -// .detail-content { -// position: absolute; -// width: 1520px; -// height: 868px; -// left: 50%; -// top: 50%; -// transform: translate(-50%,-50%); -// border: 1px solid #707070; -// border-radius: 20px; - -// .detail-content-header { -// position: relative; -// width: 100%; -// height: 100px; -// border-bottom: 1px solid #707070; -// box-sizing: border-box; - -// >span { -// display: inline-block; -// position: relative; -// top: 50%; -// transform: translateY(-50%); -// margin-left: 43px; -// font-family: NanumGothicOTF; -// font-size: 40px; -// font-weight: bold; -// font-style: normal; -// font-stretch: normal; -// line-height: 1.1; -// letter-spacing: normal; -// color: #707070; -// } - -// .detail-content-header-info { -// display: inline-block; -// position: relative; -// top: 50%; -// transform: translateY(-50%); -// left: 70%; -// font-family: NanumGothicOTF; -// font-size: 15px; -// font-weight: normal; -// font-style: normal; -// font-stretch: normal; -// letter-spacing: normal; -// color: #707070; -// } - -// } - -// .detail-content-main { -// position: relative; -// width: 100%; -// height: 768px; - -// .detail-content-main-view { -// float: left; -// position: relative; -// width: 1040px; -// height: 100%; - -// .detail-content-main-view-cup { -// position: absolute; -// width: 478px; -// height: 690px; -// border: 1px solid #707070; -// box-sizing: border-box; -// left: 50%; -// top: 50%; -// transform: translate(-50%,-50%); -// } - -// .detail-content-main-view-image { -// position: absolute; -// width: 960px; -// height: 710px; -// border: 1px solid #707070; -// box-sizing: border-box; -// left: 50%; -// top: 50%; -// transform: translate(-50%,-50%); -// } -// } - -// .detail-content-main-side { -// float: right; -// width: 480px; -// height: 100%; -// border-left: 1px solid #707070; -// box-sizing: border-box; - -// .detail-content-main-side-toolbar { -// width: 100%; -// height: 60px; -// border-bottom: 1px solid #707070; -// box-sizing: border-box; - -// >span::before { -// content: ''; -// display: inline-block; -// vertical-align: middle; -// height: 100%; -// } - -// >span { -// display: inline-block; -// width: 25%; -// height: 100%; -// font-family: NanumGothicOTF; -// font-size: 20px; -// font-weight: bold; -// font-style: normal; -// font-stretch: normal; -// line-height: 1.1; -// letter-spacing: normal; -// text-align: center; -// color: #707070; - -// text { -// display: inline; -// border-right: 1px solid #707070; -// padding: 0 39px; -// } -// } -// } - -// .detail-content-main-side-info { -// width: 438px; -// height: 662px; -// padding: 46px 0 0 41px; - -// .side-info { -// display: block; -// margin-top: 50px; -// font-family: NanumGothicOTF; -// font-size: 15px; -// font-weight: bold; -// font-style: normal; -// font-stretch: normal; -// line-height: 1.13; -// letter-spacing: normal; -// color: #707070; -// } - -// .side-info:nth-child(1) { -// margin-top: 0; -// } - -// .side-info:nth-child(7) { -// margin-top: 42px; -// } - -// .content { -// font-weight: normal; -// margin-top: 21px; -// } - -// .side-info-alcohol { -// list-style: none; -// padding: 0; -// margin: 0; - -// li { -// display: block; -// float: left; -// width: 92px; -// height: 92px; -// border: 1px solid #707070; -// box-sizing: border-box; -// border-radius: 10px; -// } -// } - -// .side-info-alcohol::after { -// display: block; -// content: ''; -// clear: both; -// } - -// } - -// } -// } - -// .detail-content-main-side-stuff { -// width: 480px; -// height: 662px; - -// .detail-content-main-side-stuff-container { -// position: absolute; -// bottom: 0; - -// .detail-content-main-side-stuff-item { -// width: 430px; -// margin: 0 25px; -// padding: 22px 0 26px; -// border-top: 1px solid #707070; - -// span::before { -// content: ''; -// display: inline-block; -// vertical-align: middle; -// height: 100%; -// } - -// span { -// font-family: NanumGothicOTF; -// font-size: 20px; -// font-weight: normal; -// font-style: normal; -// font-stretch: normal; -// line-height: 1.1; -// letter-spacing: normal; -// color: #707070; -// } - -// .stuff-color { -// display: inline-block; -// width: 35px; -// height: 35px; -// border: 1px solid #707070; -// border-radius: 5px; -// box-sizing: border-box; -// margin-left: 22px; -// } - -// .stuff-name { -// font-size: 20px; -// margin-left: 23px; -// } - -// .stuff-volume { -// font-size: 15px; -// margin-left: 71px; -// } - -// .stuff-ratio { -// font-size: 20px; -// margin-left: 83px; -// } -// } -// } - -// } - -// .detail-content-main-side-photo { -// padding: 45px; - -// .photo-item { -// display: inline-block; -// width: 120px; -// height: 120px; -// margin: 0 10px 10px 0; -// border: 1px solid #707070; -// box-sizing: border-box; -// } - -// .photo-item:nth-child(3n) { -// margin-right: 0; -// } -// } - -// .detail-content-main-side-comment-container { -// height: 634px; - -// .detail-content-main-side-comment-item { -// width: 430px; -// margin: 0 25px; -// padding: 22px 0 26px; -// border-bottom: 1px solid #707070; - -// span::before { -// content: ''; -// display: inline-block; -// vertical-align: middle; -// height: 100%; -// } - -// span { -// font-family: NanumGothicOTF; -// font-weight: normal; -// font-style: normal; -// font-stretch: normal; -// line-height: 1.1; -// letter-spacing: normal; -// color: #707070; -// } - -// .comment-name { -// font-size: 15px; -// margin-left: 16px; -// } - -// .comment-content { -// font-size: 15px; -// margin-left: 20px; -// } - -// .comment-time { -// font-size: 10px; -// margin-left: 20px; -// } -// } -// } - -// .detail-content-main-side-comment-input { -// height: 74px; -// border-top: 1px solid #707070; -// box-sizing: border-box; -// } - -// .detail-content-main::after { -// display: block; -// content: ''; -// clear: both; -// } - -// } -// } \ No newline at end of file diff --git a/src/containers/ViewRecipe/Function/SideInfo.jsx b/src/containers/ViewRecipe/Function/SideInfo.jsx index f3fdad9..c7e2c0e 100644 --- a/src/containers/ViewRecipe/Function/SideInfo.jsx +++ b/src/containers/ViewRecipe/Function/SideInfo.jsx @@ -4,22 +4,20 @@ import styles from "./ViewRecipe.scss"; const cx = classNames.bind(styles); -const RecipeCup = ({recipe, descripe, tags}) => { +const RecipeCup = (props) => { return (
레시피 이름 - {recipe} + {props.recipe} 한줄 설명 - {descripe} + {props.descripe} 도수 -
    -
  • -
+ 태그 - {tags} + {props.tags.join(' ')}
); }; diff --git a/src/containers/ViewRecipe/Function/SideStuff.jsx b/src/containers/ViewRecipe/Function/SideStuff.jsx index 1028dbd..1fad92e 100644 --- a/src/containers/ViewRecipe/Function/SideStuff.jsx +++ b/src/containers/ViewRecipe/Function/SideStuff.jsx @@ -12,7 +12,8 @@ const RecipeStuff = (props) => { { props.stuffs.map((input, index) => { return { + let style = { + backgroundColor: props.color + }; + return ( -
- +
+ {props.name} {props.volume} {props.ratio} diff --git a/src/containers/ViewRecipe/Function/ViewRecipe.scss b/src/containers/ViewRecipe/Function/ViewRecipe.scss index 77812bb..c37dd14 100644 --- a/src/containers/ViewRecipe/Function/ViewRecipe.scss +++ b/src/containers/ViewRecipe/Function/ViewRecipe.scss @@ -25,6 +25,7 @@ .detail-content-header-info-count { display: block; + height: 51px; span::before { content: ''; @@ -88,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; } @@ -128,6 +121,10 @@ width: 100%; height: calc(100% - 60px); + div { + height: auto; + } + .detail-content-main-side-stuff-container { position: absolute; width: 100%; @@ -157,9 +154,6 @@ .stuff-color { display: inline-block; width: 8%; - border: 1px solid #707070; - border-radius: 5px; - box-sizing: border-box; margin-left: 5%; } @@ -211,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 cd16f57..4681f32 100644 --- a/src/containers/ViewRecipe/ViewRecipe.jsx +++ b/src/containers/ViewRecipe/ViewRecipe.jsx @@ -10,43 +10,70 @@ import RecipeInfo from "./Function/SideInfo"; import RecipeStuff from "./Function/SideStuff"; import RecipePhoto from "./Function/SidePhoto"; import RecipeComment from "./Function/SideComment"; +import { recipeIDRequest } from "../../action/recipeAction" const cx = classNames.bind(styles); const mapStateToProps = state => { - return state; + return { + recipe_info: state.recipeReducer.recipe_info, + stuffs: state.recipeReducer.stuffs, + photos: state.recipeReducer.photos, + comments: state.recipeReducer.comments + }; }; -const mapDispatchToProps = {}; +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"); + } + + 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 => { let info = document.querySelector("#info"); let stuff = document.querySelector("#stuff"); @@ -58,9 +85,9 @@ class ViewRecipe extends Component { main: , side: } ); @@ -122,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 new file mode 100644 index 0000000..25a0ca2 --- /dev/null +++ b/src/reducer/recipeReducer.js @@ -0,0 +1,75 @@ +import { actions } from "../action/recipeAction"; +const initialState = { + state: "fail" +}; + +const reducer = (state = initialState, action) => { + switch (action.type) { + case actions.ALL.SUCCESS: { + const { result } = action.payload; + return { + bAllRecipeResult: result + }; + } + case actions.BYID.SUCCESS: { + const { result } = action.payload; + + 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, + recipe_info: recipe_info + }; + } + case actions.TAGBYLATEST.SUCCESS: { + const { result } = action.payload; + return { + bIDCheckResult: result + }; + } + case actions.TAGBYVIEW.SUCCESS: { + const { result } = action.payload; + return { + bIDCheckResult: result + }; + } + case actions.STUFFBYLATEST.SUCCESS: { + const { result } = action.payload; + return { + bIDCheckResult: result + }; + } + case actions.STUFFBYVIEW.SUCCESS: { + const { result } = action.payload; + return { + bIDCheckResult: result + }; + } + default: + return state; + } +}; + +export default reducer; diff --git a/src/reducer/rootReducer.js b/src/reducer/rootReducer.js index dd8fc65..d27175c 100644 --- a/src/reducer/rootReducer.js +++ b/src/reducer/rootReducer.js @@ -5,5 +5,7 @@ import { combineReducers } from "redux"; import userReducer from "./userReducer"; import searchReducer from "./searchReducer"; +import recipeReducer from "./recipeReducer"; +import enrolmentReducer from "./enrolmentReducer"; -export default combineReducers({ userReducer, searchReducer }); +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 new file mode 100644 index 0000000..d9f51e6 --- /dev/null +++ b/src/saga/recipeSaga.js @@ -0,0 +1,76 @@ +import { all, call, put, takeEvery } from "redux-saga/effects"; +import { + actions, + recipeAllSuccess, + recipeIDSuccess, + recipeTagLatestSuccess, + recipeTagViewSuccess, + recipeStuffLatestSuccess, + recipeStuffViewSuccess +} from "../action/recipeAction"; +import { + getRecipe, + getRecipeByID, + getTagByLatest, + getTagByView, + getStuffByLatest, + getStuffByView + } from "../api/recipeAPI"; + +function* requestAll () { + try { + const result = yield call(getRecipe); + yield put(recipeAllSuccess(result)); + } catch (error) {} +} + +function* requestRecipeByID(action) { + const { id } = action.payload; + try { + const result = yield call(getRecipeByID, {id}); + yield put(recipeIDSuccess(result)); + } catch (error) {} +} + +function* requestRecipeTagByLatest(action) { + const { tag } = action.payload; + try { + const result = yield call(getTagByLatest, tag); + yield put(recipeTagLatestSuccess(result)); + } catch (error) {} +} + +function* requestRecipeTagByView(action) { + const { tag } = action.payload; + try { + const result = yield call(getTagByView, tag); + yield put(recipeTagViewSuccess(result)); + } catch (error) {} +} + +function* requestRecipeStuffByLatest(action) { + const { ingredient } = action.payload; + try { + const result = yield call(getStuffByLatest, ingredient); + yield put(recipeStuffLatestSuccess(result)); + } catch (error) {} +} + +function* requestRecipeStuffByView(action) { + const { ingredient } = action.payload; + try { + const result = yield call(getStuffByView, ingredient); + yield put(recipeStuffViewSuccess(result)); + } catch (error) {} +} + +export default function* saga() { + yield all([ + takeEvery(actions.ALL.REQUEST, requestAll), + takeEvery(actions.BYID.REQUEST, requestRecipeByID), + takeEvery(actions.TAGBYLATEST.REQUEST, requestRecipeTagByLatest), + takeEvery(actions.TAGBYVIEW.REQUEST, requestRecipeTagByView), + takeEvery(actions.STUFFBYLATEST.REQUEST, requestRecipeStuffByLatest), + takeEvery(actions.STUFFBYVIEW.REQUEST, requestRecipeStuffByView) + ]); +} diff --git a/src/saga/rootSaga.js b/src/saga/rootSaga.js index 7ab1c1f..2cd281b 100644 --- a/src/saga/rootSaga.js +++ b/src/saga/rootSaga.js @@ -6,7 +6,9 @@ import { all } from "redux-saga/effects"; import userSaga from "./userSaga"; import searchSaga from "./searchSaga"; +import recipeSaga from "./recipeSaga"; +import enrolmentSaga from "./enrolmentSaga"; export default function* rootSaga() { - yield all([userSaga(), searchSaga()]); + yield all([userSaga(), searchSaga(), recipeSaga(), enrolmentSaga()]); } diff --git a/src/saga/userSaga.js b/src/saga/userSaga.js index 12f6ed5..00a98d0 100644 --- a/src/saga/userSaga.js +++ b/src/saga/userSaga.js @@ -10,6 +10,7 @@ import { import { setJoin, checkID, setLogin } from "../api/userAPI"; function* requestLogin(action) { + console.log('test'); try { const { userid, password } = action.payload; const result = yield call(setLogin, { userid, password }); diff --git a/src/static/images/logo.png b/src/static/images/logo.png new file mode 100755 index 0000000..9efad6d Binary files /dev/null and b/src/static/images/logo.png differ