diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx index a756036..ac7a52c 100644 --- a/src/containers/Enrolment/Enrolment.jsx +++ b/src/containers/Enrolment/Enrolment.jsx @@ -11,6 +11,7 @@ import Step3 from "./Function/Step3"; import Done from "./Function/Done"; import { enrolmentRequest } from "../../action/enrolmentAction"; import axios from "axios"; +import { ChromePicker } from 'react-color'; const cx = classNames.bind(styles); @@ -23,6 +24,8 @@ const mapStateToProps = state => { const mapDispatchToProps = { enrolmentRequest }; +let colorTarget = ""; + class Enrolment extends Component { constructor (props){ super(props); @@ -61,13 +64,14 @@ class Enrolment extends Component { doneClose; contents; inputTarget; + colorClose; componentDidMount() { document.addEventListener('DOMContentLoaded', () => { this.selectCup = document.querySelector(".cup-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.selectStep = document.querySelector(".step-1").classList[1]; @@ -293,6 +297,16 @@ class Enrolment extends Component { }; 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 containerHeight = parseInt(containerStyle.height); + let maxHeight = parseInt(maxHegihtStyle.height); + + if (containerHeight + 62 >= maxHeight) { + document.querySelector("#stuff-container").style.position = 'relative'; + } + let enrolmentData = {...this.state.enrolmentData}; let lastIndexID = this.state.stuffID; @@ -314,35 +328,59 @@ class Enrolment extends Component { }; 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 containerHeight = parseInt(containerStyle.height); + let maxHeight = parseInt(maxHegihtStyle.height); + + if (containerHeight - 62 <= maxHeight) { + document.querySelector("#stuff-container").style.position = 'absolute'; + } + let enrolmentData = {...this.state.enrolmentData}; let clickIndex = event.target.parentNode.parentNode.parentNode.getAttribute("stuff"); - enrolmentData.stuff.splice(clickIndex, 1); + enrolmentData.stuff[clickIndex] = {}; this.setState(enrolmentData); - event.target.parentNode.parentNode.parentNode.remove(); + event.target.parentNode.parentNode.remove(); } onSelectColor = event => { - if (event.target.getAttribute("stuff")) { - let colorNumber = event.target.getAttribute("stuff"); - this.setState({color_idx: colorNumber}); + let colorContainer = document.querySelector("#color-picker"); - document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose); - } else { - let colorNumber = this.state.color_idx; - let enrolmentData = {...this.state.enrolmentData}; - let rgb = document.querySelector(`#item-color_${colorNumber}`).style.backgroundColor.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(','); + colorTarget = event.target.id; + colorContainer.classList.remove(this.colorClose); + // console.log(document.querySelector("#color-picker").classList.contains(this.colorClose)); - document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose); - enrolmentData.stuff[colorNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1); - - this.setState(enrolmentData); - } + // if (event.target.getAttribute("stuff")) { + // let colorNumber = event.target.getAttribute("stuff"); + // this.setState({color_idx: colorNumber}); + + // document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose); + // } else { + + // } }; + onSelectColorClose = () => { + 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(','); + + + 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); + + this.setState(enrolmentData); + } + onSaveImages = images => { this.setState({images: images}); } @@ -356,45 +394,39 @@ class Enrolment extends Component { else cup = 4; // let tag = this.state.enrolmentData.info.tags; + + console.log(this.state); //태그 배열 형태로 나누는거 처리해야 됨 //재료 포멧은 정해야 될듯 + // let data = { + // name: this.state.enrolmentData.info.name, + // glass: cup, + // percent: 50, + // description: this.state.enrolmentData.info.describe, + // tag: [], + // ingredient: this.state.stuff, + // owner: 'fonnie' + // } + 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": "martini", + "glass" : 4, + "percent" : 50, + "description" : "This is so delicious", + "tag" : ["sweet", "romantic", "johnmat"], + "ingredient" : [{ + "name" : "water", + "color" : "blue", + "ml" : 20 }, { - name : "hongcho", - color : "red", - ml : 10 + "name" : "hongcho", + "color" : "red", + "ml" : 10 }], - owner: '이미지 추가까지 테스트!' + "owner" : "maga40" } - // { - // "name": "martini", - // "glass" : 4, - // "percent" : 50, - // "description" : "This is so delicious", - // "tag" : ["sweet", "romantic", "johnmat"], - // "ingredient" : [{ - // "name" : "water", - // "color" : "blue", - // "ml" : 20 - // }, { - // "name" : "hongcho", - // "color" : "red", - // "ml" : 10 - // }], - // "owner" : "maga40" - // } - // data.tag.push(tag); this.props.enrolmentRequest(data); @@ -423,12 +455,24 @@ class Enrolment extends Component { }); } + handleChange = color => { + let target = document.querySelector(`#${colorTarget}`); + target.style.backgroundColor = color.hex; + } + render() { const { left, middle, step, done } = this.state; return (
+
+ + +
+
div { + width: auto; + height: auto; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } + + .picker-background { + display: block; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: transparent; + z-index: -1; + } + } + .content { height: calc(100% - 303px); padding: 74px 110px; diff --git a/src/containers/Enrolment/Function/Enrolment.scss b/src/containers/Enrolment/Function/Enrolment.scss index 41d7af9..ee38a7f 100644 --- a/src/containers/Enrolment/Function/Enrolment.scss +++ b/src/containers/Enrolment/Function/Enrolment.scss @@ -324,6 +324,7 @@ line-height: 1.1; letter-spacing: normal; opacity: 0.2; + margin-bottom: 30px; } .stuff-area { @@ -334,14 +335,13 @@ // overflow: scroll; position: relative; width: 100%; - height: calc(100% - 80px); + height: calc(100% - 110px); overflow: auto; .stuff-add { display: block; width: 100%; height:auto; - margin-top: 30px; cursor: pointer; } @@ -357,10 +357,8 @@ .stuff-container { position: absolute; - height: auto; + width: 100%; bottom: 0; - - .stuff-item { position: relative; @@ -372,7 +370,7 @@ position: relative; .stuff-item-input { - width: 100%; + width: 93%; position: relative; float: left; border: 1px solid #ff365d; @@ -395,28 +393,6 @@ // background-color: #4d191a; box-sizing: border-box; } - - .color-picker { - position: absolute; - top: 10%; - left: -180px; - z-index: 2; - background-color: #fff; - padding: 5px 5px 10px 5px; - border-radius: 2px; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.8); - - .picker-background { - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: transparent; - z-index: -1; - } - } .stuff-item-input-stuff { width: 40%; @@ -471,17 +447,19 @@ font-size: 20px; text-align: right; } - - .stuff-item-delete { - display: block; - position: absolute; - width: 3%; - padding-bottom: 3%; - top: 5%; - right: 1%; - border: 1px solid #707070; - box-sizing: border-box; - } + } + + .stuff-delete { + display: block; + width: 5%; + height: 35px; + float:left; + background-image: url(../../../static/images/trash.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + transform: translate3d(0,0,0); } } diff --git a/src/containers/Enrolment/Function/Step2.jsx b/src/containers/Enrolment/Function/Step2.jsx index ae1a96f..cb865f4 100644 --- a/src/containers/Enrolment/Function/Step2.jsx +++ b/src/containers/Enrolment/Function/Step2.jsx @@ -17,27 +17,22 @@ const EnrolmentStep2 = (props) => { />
+
-
- -
-
- { - props.stuff.map((input, index) => { - return - }) - } -
-
+ { + props.stuff.map((input, index) => { + return + }) + }
diff --git a/src/containers/Enrolment/Function/StuffItem.jsx b/src/containers/Enrolment/Function/StuffItem.jsx index 7abc681..badc32e 100644 --- a/src/containers/Enrolment/Function/StuffItem.jsx +++ b/src/containers/Enrolment/Function/StuffItem.jsx @@ -2,16 +2,9 @@ import React from "react"; import classNames from "classnames/bind"; import styles from "./Enrolment.scss"; import { Edit } from "../../../components"; -import { SliderPicker } from 'react-color'; const cx = classNames.bind(styles); -const handleChangeComplete = (color, idx) => { - let colorTarget = document.querySelector(`#item-color_${idx}`); - - colorTarget.style.backgroundColor = color.hex; -}; - const EnrolmentStuffItem = (props) => { let styles = { backgroundColor: props.stuff.color @@ -22,14 +15,6 @@ const EnrolmentStuffItem = (props) => {
- -
- handleChangeComplete(e, props.idx) } - /> - -
{ ml {`${props.stuff.ratio} %`} - -
+ +
); diff --git a/src/containers/ViewRecipe/Function/Header.jsx b/src/containers/ViewRecipe/Function/Header.jsx index 84714ed..5ad5792 100644 --- a/src/containers/ViewRecipe/Function/Header.jsx +++ b/src/containers/ViewRecipe/Function/Header.jsx @@ -1,6 +1,14 @@ import React from "react"; import classNames from "classnames/bind"; import styles from "./ViewRecipe.scss"; +import heartImage from "../../../static/images/heart.svg"; +import commentImage from "../../../static/images/comment_top.svg"; + +const toolbarStyleCommon = { + width: '17px', + backgroundRepeat: 'no-repeat', + marginRight: '7px' +} const cx = classNames.bind(styles); @@ -13,9 +21,13 @@ const RecipeHeader = (props) => { {props.nick}
- + {props.like} - + {props.comment}
diff --git a/src/containers/ViewRecipe/Function/SideInfo.jsx b/src/containers/ViewRecipe/Function/SideInfo.jsx index c7e2c0e..f50ff3f 100644 --- a/src/containers/ViewRecipe/Function/SideInfo.jsx +++ b/src/containers/ViewRecipe/Function/SideInfo.jsx @@ -2,6 +2,14 @@ import React from "react"; import classNames from "classnames/bind"; import styles from "./ViewRecipe.scss"; +const alcoholContent = [ + ["0˚ ~ 5˚", "술이야?", "음료수야?"], + ["5˚ ~ 15˚", "기분좋게", "알딸딸~"], + ["15˚ ~ 25˚", "마셔라", "쭉쭉쭉~"], + ["25˚ ~ 40˚", "너 죽고", "나 죽자!"], + ["40˚ ~", "진정한", "술고래!"] +] + const cx = classNames.bind(styles); const RecipeCup = (props) => { @@ -14,7 +22,13 @@ const RecipeCup = (props) => { {props.descripe} 도수 - + + { + alcoholContent[props.alcohol].map((input, index) => { + return {input} + }) + } + 태그 {props.tags.join(' ')} diff --git a/src/containers/ViewRecipe/Function/SidePhoto.jsx b/src/containers/ViewRecipe/Function/SidePhoto.jsx index d8c134c..8043c99 100644 --- a/src/containers/ViewRecipe/Function/SidePhoto.jsx +++ b/src/containers/ViewRecipe/Function/SidePhoto.jsx @@ -10,7 +10,12 @@ const RecipePhoto = (props) => {
{ props.photos.map((input, index) => { - return {input} + let style = { + backgroundImage: `url(${input})`, + backgroundSize: 'contain', + cursor: 'pointer' + } + return props.changePhoto(event)}> }) }
diff --git a/src/containers/ViewRecipe/Function/SideStuff.jsx b/src/containers/ViewRecipe/Function/SideStuff.jsx index 1fad92e..edd301e 100644 --- a/src/containers/ViewRecipe/Function/SideStuff.jsx +++ b/src/containers/ViewRecipe/Function/SideStuff.jsx @@ -6,6 +6,16 @@ import StuffItem from "./StuffItem"; const cx = classNames.bind(styles); const RecipeStuff = (props) => { + let totalVolume = 0; + props.stuffs.forEach(val => { + totalVolume += val.ml; + }); + + for(let i = 0; i < props.stuffs.length; i++) { + props.stuffs[i].ratio = Math.floor(props.stuffs[i].ml / totalVolume * 100) + ' %'; + props.stuffs[i].ml = props.stuffs[i].ml + ' ml'; + } + return (
@@ -15,7 +25,7 @@ const RecipeStuff = (props) => { key={`stuffItem${index}`} color={input.color} name={input.name} - volume={input.volume} + volume={input.ml} ratio={input.ratio} /> }) diff --git a/src/containers/ViewRecipe/Function/StuffItem.jsx b/src/containers/ViewRecipe/Function/StuffItem.jsx index 505aa67..d6cf8ec 100644 --- a/src/containers/ViewRecipe/Function/StuffItem.jsx +++ b/src/containers/ViewRecipe/Function/StuffItem.jsx @@ -10,6 +10,8 @@ const EnrolmentStuffItem = (props) => { backgroundColor: props.color }; + console.log(props); + return (
diff --git a/src/containers/ViewRecipe/Function/ViewCup.jsx b/src/containers/ViewRecipe/Function/ViewCup.jsx index 1e00d47..f4bd6bb 100644 --- a/src/containers/ViewRecipe/Function/ViewCup.jsx +++ b/src/containers/ViewRecipe/Function/ViewCup.jsx @@ -2,11 +2,26 @@ import React from "react"; import classNames from "classnames/bind"; import styles from "./ViewRecipe.scss"; +import glass1 from "../../../static/images/glass1_full.png"; +import glass2 from "../../../static/images/glass2_full.png"; +import glass3 from "../../../static/images/glass3_full.png"; +import glass4 from "../../../static/images/glass4_full.png"; +import glass5 from "../../../static/images/glass5_full.png"; + +const glasses = [glass1, glass2, glass3, glass4, glass5]; + const cx = classNames.bind(styles); const RecipeCup = (props) => { + const styles = { + backgroundImage: `url(${glasses[props.glass]})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'contain', + backgroundPosition: 'center' + } + return ( - + ); }; diff --git a/src/containers/ViewRecipe/Function/ViewImage.jsx b/src/containers/ViewRecipe/Function/ViewImage.jsx index a1e4e36..2a1d5b9 100644 --- a/src/containers/ViewRecipe/Function/ViewImage.jsx +++ b/src/containers/ViewRecipe/Function/ViewImage.jsx @@ -4,9 +4,16 @@ import styles from "./ViewRecipe.scss"; const cx = classNames.bind(styles); -const RecipeImage = () => { +const RecipeImage = (props) => { + const style = { + backgroundImage: `url(${props.image})`, + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center' + } + return ( - + ); }; diff --git a/src/containers/ViewRecipe/Function/ViewRecipe.scss b/src/containers/ViewRecipe/Function/ViewRecipe.scss index c37dd14..f9baa09 100644 --- a/src/containers/ViewRecipe/Function/ViewRecipe.scss +++ b/src/containers/ViewRecipe/Function/ViewRecipe.scss @@ -52,10 +52,9 @@ .detail-content-main-view-cup { position: absolute; - width: 50%; + display: block; + width: 100%; height: 90%; - border: 1px solid #707070; - box-sizing: border-box; left: 50%; top: 50%; transform: translate(-50%,-50%); @@ -66,8 +65,6 @@ display: block; width: 70%; padding-bottom: 70%; - border: 1px solid #707070; - box-sizing: border-box; left: 50%; top: 50%; transform: translate(-50%,-50%); @@ -99,9 +96,21 @@ width: 92px; height: 92px; margin-top: 20px; + padding: 14px; border: 1px solid #ffffff; box-sizing: border-box; border-radius: 10px; + + span { + display: block; + font-size: 12px; + color: #fff; + } + + span:first-child { + font-size: 10px; + margin-bottom: 15%; + } } .tags { diff --git a/src/containers/ViewRecipe/ViewRecipe.jsx b/src/containers/ViewRecipe/ViewRecipe.jsx index b95b907..dbe93c7 100644 --- a/src/containers/ViewRecipe/ViewRecipe.jsx +++ b/src/containers/ViewRecipe/ViewRecipe.jsx @@ -10,7 +10,38 @@ 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" +import { recipeIDRequest } from "../../action/recipeAction"; + +import infoImage from "../../static/images/info.svg"; +import stuffImage from "../../static/images/stuff.svg"; +import photoImage from "../../static/images/photo.svg"; +import commentImage from "../../static/images/comment.svg"; + +import infoImageP from "../../static/images/info_p.svg"; +import stuffImageP from "../../static/images/stuff_p.svg"; +import photoImageP from "../../static/images/photo_p.svg"; +import commentImageP from "../../static/images/comment_p.svg"; + +import closeIcon from "../../static/images/close.svg"; +import modifyIcon from "../../static/images/modify.svg"; +import deleteIcon from "../../static/images/delete.svg"; +import heartIcon from "../../static/images/heart-button.svg"; + +import arrowLeft from "../../static/images/arrow-left.svg"; +import arrowRight from "../../static/images/arrow-right.svg"; + +const toolbarStyleCommon = { + backgroundRepeat: 'no-repeat', + backgroundSize: '21px', + opacity: '0.4', + backgroundPosition: 'center' +} + +const viewImageStyle = { + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'contain' +} const cx = classNames.bind(styles); @@ -34,14 +65,20 @@ class ViewRecipe extends Component { like: 0, comment: 0, view: 0, - tags: [] + tags: [], + alcohol: 0, + glass: 0 }, stuffs: [], photos: [], comments: [], - main: , + main: + , side: , 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(' '); }); } @@ -79,39 +123,73 @@ class ViewRecipe extends Component { let stuff = document.querySelector("#stuff"); let photo = document.querySelector("#photo"); let comment = document.querySelector("#comment"); + + info.style.backgroundImage = `url(${infoImage})`; + info.style.opacity = 0.4; + + stuff.style.backgroundImage = `url(${stuffImage})`; + stuff.style.opacity = 0.4; + + photo.style.backgroundImage = `url(${photoImage})`; + photo.style.opacity = 0.4; + + comment.style.backgroundImage = `url(${commentImage})`; + comment.style.opacity = 0.4; if (info === event.target || info === event.target.parentNode) { this.setState( { - main: , + main: + , side: } ); + info.style.backgroundImage = `url(${infoImageP})`; + info.style.opacity = 1; + } else if (stuff === event.target || stuff === event.target.parentNode) { this.setState( { - main: , + main: + , side: } ); + stuff.style.backgroundImage = `url(${stuffImageP})`; + stuff.style.opacity = 1; + } else if (photo === event.target || photo === event.target.parentNode) { this.setState( { - main: , + main: , side: } ); + photo.style.backgroundImage = `url(${photoImageP})`; + photo.style.opacity = 1; + } else if (comment === event.target || comment === event.target.parentNode) { this.setState( { - main: , + main: + , side: } ); + comment.style.backgroundImage = `url(${commentImageP})`; + comment.style.opacity = 1; + } } @@ -126,7 +207,7 @@ class ViewRecipe extends Component { let comment = document.querySelector("#commentText").value; if (comment !== '' && comment !== undefined && comment !== null) { let now = new Date(); - let time = now.getHours > 9 ? `${now.getHours()}:${now.getMinutes()}` : `0${now.getHours()}:${now.getMinutes()}`; + let time = now.getHours > 9 ? `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}` : `0${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`; let comments = this.state.comments; comments.push({nick: "사용자", comments: comment, time: time}); @@ -138,15 +219,29 @@ class ViewRecipe extends Component { onAddComment={this.onAddComment} /> } ); + + document.querySelector("#commentText").value = ""; } }; + onChangePhoto = event => { + this.setState( { + main: + } ); + } + viewRecipe_form = () => { return [
- - + +
- 정보 - 재료 - 사진 - 댓글 + + + +
{this.state.side} @@ -179,10 +282,18 @@ class ViewRecipe extends Component {
- - - - + + + +
diff --git a/src/containers/ViewRecipe/ViewRecipe.scss b/src/containers/ViewRecipe/ViewRecipe.scss index c635445..605659b 100644 --- a/src/containers/ViewRecipe/ViewRecipe.scss +++ b/src/containers/ViewRecipe/ViewRecipe.scss @@ -23,22 +23,20 @@ .detail-content-arrow { display: block; position: absolute; - width: 1.5%; + width: 5%; height: 6%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; - - border: 1px solid #000; } .left { - left: -4%; + left: -6%; } .right { - right: -4%; + right: -6%; } .detail-content-main { @@ -66,13 +64,6 @@ text-align: center; background-color: rgba(8, 15, 36, 0.4); - >span::before { - content: ''; - display: inline-block; - vertical-align: middle; - height: 100%; - } - >span { display: inline-block; width: 15%; @@ -81,6 +72,11 @@ text-align: center; cursor: pointer; } + + >span#comment { + background-image: url("/src/static/images/comment-w.svg"); + background-color: #fff; + } } @@ -100,6 +96,7 @@ width: 10%; height: 100%; right: 0; + z-index: -1; .side-button-area { position: absolute; @@ -114,8 +111,6 @@ width: 100%; padding-bottom: 100%; margin-bottom: 20%; - border: 1px solid #080f24; - border-radius: 100%; cursor: pointer; } diff --git a/src/reducer/recipeReducer.js b/src/reducer/recipeReducer.js index 17f9f1d..04df7bf 100644 --- a/src/reducer/recipeReducer.js +++ b/src/reducer/recipeReducer.js @@ -19,9 +19,7 @@ const reducer = (state = initialState, action) => { const { result } = action.payload; const stuffs = result[0].ingredient; - // const photos = result[0]. - const photos = ["테스트 1", "테스트 2", "테스트 3", "테스트 4"]; - // const comments = result[0]. + const photos = result[0].image; const comments = [ {nick: "닉네임 A", comments: "댓글내용 1", time: "00:00"}, {nick: "닉네임 B", comments: "댓글내용 2", time: "11:11"}, @@ -35,7 +33,9 @@ const reducer = (state = initialState, action) => { like: result[0].scrap, comment: 0, view: result[0].view, - tags: result[0].tag + tags: result[0].tag, + alcohol: result[0].numIngredient, + glass: result[0].glass }; return { @@ -44,7 +44,7 @@ const reducer = (state = initialState, action) => { stuffs: stuffs, photos: photos, comments: comments, - recipe_info: recipe_info + recipe_info: recipe_info, }; } case actions.TAGBYLATEST.SUCCESS: { diff --git a/src/static/images/arrow-left.svg b/src/static/images/arrow-left.svg new file mode 100644 index 0000000..fe439b6 --- /dev/null +++ b/src/static/images/arrow-left.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/arrow-right.svg b/src/static/images/arrow-right.svg new file mode 100644 index 0000000..06eb8f0 --- /dev/null +++ b/src/static/images/arrow-right.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/close.svg b/src/static/images/close.svg new file mode 100644 index 0000000..6c4e29a --- /dev/null +++ b/src/static/images/close.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/static/images/comment.svg b/src/static/images/comment.svg new file mode 100644 index 0000000..66246e8 --- /dev/null +++ b/src/static/images/comment.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/comment_p.svg b/src/static/images/comment_p.svg new file mode 100644 index 0000000..a2446e5 --- /dev/null +++ b/src/static/images/comment_p.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/comment_top.svg b/src/static/images/comment_top.svg new file mode 100644 index 0000000..59bc5f2 --- /dev/null +++ b/src/static/images/comment_top.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/delete.svg b/src/static/images/delete.svg new file mode 100644 index 0000000..440e1b4 --- /dev/null +++ b/src/static/images/delete.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/static/images/glass1_empty.png b/src/static/images/glass1_empty.png new file mode 100644 index 0000000..87d2a75 Binary files /dev/null and b/src/static/images/glass1_empty.png differ diff --git a/src/static/images/glass1_full.png b/src/static/images/glass1_full.png new file mode 100644 index 0000000..83ff9da Binary files /dev/null and b/src/static/images/glass1_full.png differ diff --git a/src/static/images/glass2_empty.png b/src/static/images/glass2_empty.png new file mode 100644 index 0000000..b4f0a9f Binary files /dev/null and b/src/static/images/glass2_empty.png differ diff --git a/src/static/images/glass2_full.png b/src/static/images/glass2_full.png new file mode 100644 index 0000000..3238104 Binary files /dev/null and b/src/static/images/glass2_full.png differ diff --git a/src/static/images/glass3_empty.png b/src/static/images/glass3_empty.png new file mode 100644 index 0000000..5dac2f6 Binary files /dev/null and b/src/static/images/glass3_empty.png differ diff --git a/src/static/images/glass3_full.png b/src/static/images/glass3_full.png new file mode 100644 index 0000000..93afbcd Binary files /dev/null and b/src/static/images/glass3_full.png differ diff --git a/src/static/images/glass4_empty.png b/src/static/images/glass4_empty.png new file mode 100644 index 0000000..8d2ae0c Binary files /dev/null and b/src/static/images/glass4_empty.png differ diff --git a/src/static/images/glass4_full.png b/src/static/images/glass4_full.png new file mode 100644 index 0000000..e2e7624 Binary files /dev/null and b/src/static/images/glass4_full.png differ diff --git a/src/static/images/glass5_empty.png b/src/static/images/glass5_empty.png new file mode 100644 index 0000000..23a1bf5 Binary files /dev/null and b/src/static/images/glass5_empty.png differ diff --git a/src/static/images/glass5_full.png b/src/static/images/glass5_full.png new file mode 100644 index 0000000..63be98a Binary files /dev/null and b/src/static/images/glass5_full.png differ diff --git a/src/static/images/heart-button.svg b/src/static/images/heart-button.svg new file mode 100644 index 0000000..82f3ef0 --- /dev/null +++ b/src/static/images/heart-button.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/static/images/heart.svg b/src/static/images/heart.svg new file mode 100644 index 0000000..217dab6 --- /dev/null +++ b/src/static/images/heart.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/static/images/info.svg b/src/static/images/info.svg new file mode 100644 index 0000000..d1258ee --- /dev/null +++ b/src/static/images/info.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/static/images/info_p.svg b/src/static/images/info_p.svg new file mode 100644 index 0000000..b603429 --- /dev/null +++ b/src/static/images/info_p.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/static/images/modify.svg b/src/static/images/modify.svg new file mode 100644 index 0000000..702d712 --- /dev/null +++ b/src/static/images/modify.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + diff --git a/src/static/images/photo.svg b/src/static/images/photo.svg new file mode 100644 index 0000000..7c2e276 --- /dev/null +++ b/src/static/images/photo.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/src/static/images/photo_p.svg b/src/static/images/photo_p.svg new file mode 100644 index 0000000..b6f8e9a --- /dev/null +++ b/src/static/images/photo_p.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/src/static/images/stuff.svg b/src/static/images/stuff.svg new file mode 100644 index 0000000..bf758d1 --- /dev/null +++ b/src/static/images/stuff.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/src/static/images/stuff_p.svg b/src/static/images/stuff_p.svg new file mode 100644 index 0000000..8fede5e --- /dev/null +++ b/src/static/images/stuff_p.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/static/images/trash.svg b/src/static/images/trash.svg new file mode 100644 index 0000000..f21e845 --- /dev/null +++ b/src/static/images/trash.svg @@ -0,0 +1,8 @@ + + + + + +