From 2c6641ead68ff582485f5313e6ddc83cf4a4111f Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 29 May 2019 00:11:12 +0900 Subject: [PATCH] =?UTF-8?q?###=20=EB=B3=91=ED=95=A9=20=ED=9B=84=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 자세히 보기에서 댓글 달 시 로그인 한 사람 이름으로 달리도록 수정 * 재료 item 컴포넌트에서 edit min=0되도록 수정(음수 입력 방지) * 레시피 등록에서 userID state추가 * 최초 로드 시 정보가져와서 있으면 state에 등록하고 없을 경우 이전페이지로 돌아가게함 * state의 (enrolmentData : {stuff : {volume -> ml}}) 단어 변경(server와 레시피 스키마와 통일) * 최초 레시피 등록하기 입장 시 레시피 제목에 값 입력 후 삭제 시 에러 예외처리(targetinput을 못찾아서 error) * 해쉬태그 분리하는 부분 Logic 변경(정규식 사용) : 보낼 때 #제거하고 보냄 * onwer에 유저 추가 --- src/containers/Enrolment/Enrolment.jsx | 487 ++++++++++-------- .../Enrolment/Function/StuffItem.jsx | 71 +-- src/containers/ViewRecipe/ViewRecipe.jsx | 6 +- 3 files changed, 325 insertions(+), 239 deletions(-) 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: }); - this.setState({middle: }); - this.setState({step: }); - this.setState({done: }); - - }; + this.setState({ + left: , + middle: , + step: ( + + ), + done: + }); + } 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: }); - this.setState({middle: }); - this.setState({ step: }); + this.setState({ left: }); + this.setState({ middle: }); + this.setState({ + step: ( + + ) + }); break; case "STEP 2": stepTarget[1].classList.add(this.selectStep); - this.setState({left: }); - this.setState({ middle: }); - this.setState({ step: }); + this.setState({ left: }); + this.setState({ middle: }); + this.setState({ + step: ( + + ) + }); break; case "STEP 3": stepTarget[2].classList.add(this.selectStep); - this.setState({left: }); - this.setState({ middle: ""}); - this.setState({ - step: + this.setState({ left: }); + this.setState({ middle: "" }); + this.setState({ + step: }); 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: }); + this.setState({ + step: ( + + ) + }); }; 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: }); + enrolmentData.stuff.push({ + color: "#4d191a", + name: "", + ml: "", + ratio: 0 + }); + + this.setState({ enrolmentData }); + this.setState({ stuffID: lastIndexID++ }); + + this.setState({ + step: ( + + ) + }); }; 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 (
-
- + -
{done} -
); } 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 (
-
-
- props.onSelectColor(e)} style={styles}> - - props.onSaveStuffName(e, props.idx)} - /> - - props.onSaveStuffVolume(e, props.idx)} - /> - - ml - - {`${props.stuff.ratio} %`} -
- - +
+
+ props.onSelectColor(e)} + style={styles} + /> + + props.onSaveStuffName(e, props.idx)} + /> + + props.onSaveStuffVolume(e, props.idx)} + min={0} + /> + + ml + + {`${ + props.stuff.ratio + } %`}
+ + +
); }; -export default EnrolmentStuffItem; \ No newline at end of file +export default EnrolmentStuffItem; diff --git a/src/containers/ViewRecipe/ViewRecipe.jsx b/src/containers/ViewRecipe/ViewRecipe.jsx index c77ad3c..d4efaf7 100644 --- a/src/containers/ViewRecipe/ViewRecipe.jsx +++ b/src/containers/ViewRecipe/ViewRecipe.jsx @@ -313,14 +313,12 @@ class ViewRecipe extends Component { ? `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}` : `0${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`; let thisComment = { - nick: this.state.recipe_info.nick, + 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({