From 859e31147a555aba802437e8355b3cd9b040aef3 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Mon, 20 May 2019 22:56:22 +0900 Subject: [PATCH 01/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20userAPI.js=20*=20Sea?= =?UTF-8?q?rchResult.jsx/scss=20*=20userReducer.js=20*=20userSaga.js=20---?= =?UTF-8?q?------------------------------------=20###=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20*=20=EB=A0=88=EC=8B=9C=ED=94=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20block=20popup=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=EC=B2=98=EB=A6=AC=20*=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EC=8B=9C=20API=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84(user?= =?UTF-8?q?=EC=97=90=20=EA=B5=AC=ED=98=84->=20=EC=B6=94=ED=9B=84=20state.l?= =?UTF-8?q?ist=EB=A7=8C=20=EC=82=AD=EC=A0=9C=ED=95=98=EC=97=AC=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84=20=ED=86=B5=EC=8B=A0=20=EC=B5=9C=EC=86=8C=ED=99=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/userAPI.js | 9 +++ src/containers/SearchResult/SearchResult.jsx | 68 +++++++++++++++++-- src/containers/SearchResult/SearchResult.scss | 64 +++++++++++++++++ src/reducer/userReducer.js | 42 +++++++++++- src/saga/userSaga.js | 8 ++- 5 files changed, 181 insertions(+), 10 deletions(-) diff --git a/src/api/userAPI.js b/src/api/userAPI.js index 39ccb3e..7f37e1e 100644 --- a/src/api/userAPI.js +++ b/src/api/userAPI.js @@ -69,3 +69,12 @@ export async function setUserDelete(userid, password) { const res = await webRequestUtil.post({ url, body }); return res.data; } + +export async function deleteCocktail(id) { + const url = "del/"; + const body = { + id + }; + const res = await webRequestUtil.get({ url, body }); + return res.data; +} diff --git a/src/containers/SearchResult/SearchResult.jsx b/src/containers/SearchResult/SearchResult.jsx index 5cc6800..f3dda56 100644 --- a/src/containers/SearchResult/SearchResult.jsx +++ b/src/containers/SearchResult/SearchResult.jsx @@ -2,18 +2,20 @@ import React, { Component } from "react"; import classNames from "classnames/bind"; import styles from "./SearchResult.scss"; import { connect } from "react-redux"; -import { SearchResultItem } from "../../components"; +import { SearchResultItem, Button } from "../../components"; import { GridLayout } from "@egjs/react-infinitegrid"; import { withRouter } from "react-router-dom"; +import { dataRequest } from "../../action/userAction.js"; + const cx = classNames.bind(styles); const mapStateToProps = state => { return state; }; -const mapDispatchToProps = {}; +const mapDispatchToProps = { dataRequest }; /** * @author AnGwangHo @@ -28,14 +30,13 @@ class SearchResult extends Component { page: 0, pages: 0, searchList: [], //[{page:number,list:[]}, ...] - _index: { page: 0, index: 0 } + bShowDelete: false }; componentDidMount() { - const { searchresult } = this.props.searchReducer; this.setState({ - page: searchresult.page, - pages: searchresult.pages, + page: this.props.page, + pages: this.props.pages, showModify: this.props.modify }); } @@ -91,6 +92,20 @@ class SearchResult extends Component { }); return; } + + if (nowProps.userReducer) { + if ( + prevState.bShowDelete && + !this.state.bShowDelete && + !this.state.showModify + ) { + if (nowProps.userReducer.mymenu.bRecipeDelete) { + console.log("삭제 성공"); + } else { + console.log("삭제 실패"); + } + } + } } onPopupModifyClick = event => { @@ -101,6 +116,20 @@ class SearchResult extends Component { this.props.history.push(`/viewRecipe`); }; + onDeleteCocktailClick = event => { + this.setState({ bShowDelete: true }); + }; + + onNotifyPopupCancelClick = event => { + this.setState({ bShowDelete: false }); + }; + + cocktailDeleteAPI = event => { + //칵테일 삭제 API 호출 + this.props.dataRequest(2, this.state.index); + this.setState({ showModify: false, bShowDelete: false }); + }; + showModifyPopup = () => { return (
@@ -110,7 +139,29 @@ class SearchResult extends Component {
-
삭제하기
+
+ 삭제하기 +
+
+ + ); + }; + + showNotifyPopup = () => { + return ( +
+
정말로 삭제 하겠습니까?
+
+
); @@ -255,6 +306,9 @@ class SearchResult extends Component { return (
+ {this.state.bShowDelete && ( +
{this.showNotifyPopup()}
+ )} { recipes: result } }; + } else if (type === 2) { + return { + ...state, + mymenu: { + ...state.mymenu, + bRecipeDelete: result + } + }; + } + return { + ...state + }; + } + case actions.COMMUNICATION.ERROR: { + const { type, result } = action.payload; + if (type === 0) { + return { + ...state, + mymenu: { + ...state.mymenu, + scrap: [] + } + }; + } else if (type === 1) { + return { + ...state, + mymenu: { + ...state.mymenu, + recipes: [] + } + }; + } else if (type === 2) { + return { + ...state, + mymenu: { + ...state.mymenu, + bRecipeDelete: result + } + }; } return { ...state diff --git a/src/saga/userSaga.js b/src/saga/userSaga.js index 1602f38..e26a8a5 100644 --- a/src/saga/userSaga.js +++ b/src/saga/userSaga.js @@ -20,7 +20,8 @@ import { getMyScrap, getMyRecipes, setUserEdit, - setUserDelete + setUserDelete, + deleteCocktail } from "../api/userAPI"; const dumy_data = [ @@ -371,10 +372,13 @@ function* getUserData(action) { } else if (type === 1) { // result = yield call(getMyRecipes, id); result = [dumy_data[0], dumy_data[1]]; + } else if (type === 2) { + // result = yield call(deleteCocktail, id); + result = true; } yield put(dataEnd(type, result)); } catch (error) { - yield put(dataError(false)); + yield put(dataError(type, false)); } } From 855d19cbbd12d8bc956ece8ee46772ff3f9fdf76 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Mon, 20 May 2019 23:56:13 +0900 Subject: [PATCH 02/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20SearchResultItem.jsx?= =?UTF-8?q?/scss=20*=20SearchResult.jsx=20--------------------------------?= =?UTF-8?q?-------=20###=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=9E=A9=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchResultItem/SearchResultItem.jsx | 2 +- .../SearchResultItem/SearchResultItem.scss | 2 +- src/containers/SearchResult/SearchResult.jsx | 36 ++++++++++++++++++- 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/components/SearchResultItem/SearchResultItem.jsx b/src/components/SearchResultItem/SearchResultItem.jsx index 0a62176..180c84b 100644 --- a/src/components/SearchResultItem/SearchResultItem.jsx +++ b/src/components/SearchResultItem/SearchResultItem.jsx @@ -47,7 +47,7 @@ const SearchResultItem = ({
{owner}
-
+
{scrap}
diff --git a/src/components/SearchResultItem/SearchResultItem.scss b/src/components/SearchResultItem/SearchResultItem.scss index c2442aa..f7a6b43 100644 --- a/src/components/SearchResultItem/SearchResultItem.scss +++ b/src/components/SearchResultItem/SearchResultItem.scss @@ -60,7 +60,6 @@ letter-spacing: normal; text-align: left; color: #ffffff; - cursor: pointer; } .bottom { @@ -100,6 +99,7 @@ background-position: center; background-size: inherit; margin-right: 10.2px; + cursor: pointer; } .number { height: 100%; diff --git a/src/containers/SearchResult/SearchResult.jsx b/src/containers/SearchResult/SearchResult.jsx index f3dda56..bb088ef 100644 --- a/src/containers/SearchResult/SearchResult.jsx +++ b/src/containers/SearchResult/SearchResult.jsx @@ -23,7 +23,6 @@ const mapDispatchToProps = { dataRequest }; */ class SearchResult extends Component { state = { - list: [], showModify: false, modifyXY: { x: 0, y: 0 }, index: "", @@ -179,6 +178,40 @@ class SearchResult extends Component { }); }; + onLikeClick = event => { + event.preventDefault(); + event.stopPropagation(); + const id = event.target.id; + const { searchList, page } = this.state; + + //서버 통신 + + //state.list에 반영 + this.setState({ + searchList: searchList.map(item => + item.page === page + ? { + ...item, + list: item.list.map(cocktail => + cocktail.props.props._id === id + ? { + ...cocktail, + props: { + ...cocktail.props, + props: { + ...cocktail.props.props, + scrap: cocktail.props.props.scrap + 1 + } + } + } + : cocktail + ) + } + : item + ) + }); + }; + loadItems(groupKey, list) { const items = []; const start = this.start || 0; @@ -203,6 +236,7 @@ class SearchResult extends Component { modify={modify} modifyClick={this.onModifyClick} informationClick={this.onCocktailClick} + likeClick={this.onLikeClick} /> ); } From 4eea5f150ec6c46cdf568d030d39b108be2d8010 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 21:37:09 +0900 Subject: [PATCH 03/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20SearchPopup.jsx=20--?= =?UTF-8?q?-------------------------------------=20###=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EA=B2=80=EC=83=89=20placehol?= =?UTF-8?q?der=20=EC=84=A4=EB=AA=85=20=EC=9E=90=EC=84=B8=ED=95=98=EA=B2=8C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/SearchPopup/SearchPopup.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/SearchPopup/SearchPopup.jsx b/src/containers/SearchPopup/SearchPopup.jsx index 1df57c9..0e175a6 100644 --- a/src/containers/SearchPopup/SearchPopup.jsx +++ b/src/containers/SearchPopup/SearchPopup.jsx @@ -191,7 +191,7 @@ class SearchPopup extends Component { />, , From 4cad926e42f31ab448fb14b57bcc0cdfbfba9a62 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 21:53:44 +0900 Subject: [PATCH 04/16] =?UTF-8?q?###=20#32=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EA=B3=A0=EB=8F=84?= =?UTF-8?q?=ED=99=94=20See:=20Github=20issue=20#32=20---------------------?= =?UTF-8?q?------------------=20###=20=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20*=20Header.jsx=20---------------------------------------=20#?= =?UTF-8?q?##=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=95=84=EC=9B=83=20=EC=8B=9C=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EA=B0=95=EC=A0=9C?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index a1c5394..57e4408 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -218,6 +218,10 @@ class Header extends Component { if (this.props.bLoginResult && this.state.bShowUser) { this.setState({ bShowUser: false, popupID: "login" }); this.props.logout(); + + const { history } = this.props; + if (history && history.location.pathname !== "/") + this.props.history.push("/"); } }; From 28891a1249f9207bb1b8f6bfd1ae0b624ae24d3b Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 22:17:34 +0900 Subject: [PATCH 05/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20Header.jsx/scss=20--?= =?UTF-8?q?-------------------------------------=20###=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EA=B2=80=EC=83=89=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20background-c?= =?UTF-8?q?olor=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 48 +++++++++++---------- src/containers/Header/Header.scss | 72 +++++++++++++++++-------------- 2 files changed, 65 insertions(+), 55 deletions(-) diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index 57e4408..9760e2d 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -304,30 +304,32 @@ class Header extends Component { )} {bShowSearch && searchresult.cocktails.length > 0 ? (
-
- +
+
+ +
+
-
) : null} diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss index 915f27b..38c2f51 100644 --- a/src/containers/Header/Header.scss +++ b/src/containers/Header/Header.scss @@ -145,50 +145,58 @@ width: 100%; height: 100%; position: absolute; - grid-column: 2 / span 1; grid-row: 3 / span 1; background-color: #0f1835; display: grid; - grid-template-rows: 47px auto; + grid-template-columns: 201.5px auto 201px; - .filter_rect { - grid-row: 1 / span 1; - background-color: transparent; - height: auto; - display: flex; - justify-content: flex-end; + .searchresult_container { + width: 100%; + height: 100%; + position: absolute; + grid-column: 2 / span 1; + display: grid; + grid-template-rows: 47px auto; - .filter { + .filter_rect { + grid-row: 1 / span 1; background-color: transparent; - width: 123px; - min-width: 123px; height: auto; - line-height: 1.8; + display: flex; + justify-content: flex-end; + + .filter { + background-color: transparent; + width: 123px; + min-width: 123px; + height: auto; + line-height: 1.8; + } } - } - .searchresultrect { - position: absolute; - background-color: transparent; - width: 100%; - height: 100%; - grid-row: 2 / span 1; - } + .searchresult { + position: absolute; + background-color: transparent; + width: 100%; + height: 100%; + grid-row: 2 / span 1; + } - &._over { - grid-row: 2 / span 2; - } + &._over { + grid-row: 2 / span 2; + } - // div { - // -ms-overflow-style: none; // IE에서 스크롤바 감춤 - // &::-webkit-scrollbar { - // display: none !important; // 윈도우 크롬 등 - // } - // } + // div { + // -ms-overflow-style: none; // IE에서 스크롤바 감춤 + // &::-webkit-scrollbar { + // display: none !important; // 윈도우 크롬 등 + // } + // } - @media (max-width: 470px) { - & { - grid-column: 1 / span 3; + @media (max-width: 470px) { + & { + grid-column: 1 / span 3; + } } } } From dc48dc3fc3e444ed2d9cbc7d049aee003ce261c5 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 22:23:03 +0900 Subject: [PATCH 06/16] =?UTF-8?q?###=20#32=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EA=B3=A0=EB=8F=84?= =?UTF-8?q?=ED=99=94=20See:=20Github=20issue=20#32=20---------------------?= =?UTF-8?q?------------------=20###=20=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20*=20LoginPopup.jsx=20---------------------------------------?= =?UTF-8?q?=20###=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=8B=9C=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20Edit=EC=97=90=EC=84=9C=20Enter=EB=A1=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/LoginPopup/LoginPopup.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/containers/LoginPopup/LoginPopup.jsx b/src/containers/LoginPopup/LoginPopup.jsx index 4643b12..4b60cdd 100644 --- a/src/containers/LoginPopup/LoginPopup.jsx +++ b/src/containers/LoginPopup/LoginPopup.jsx @@ -99,9 +99,11 @@ class LoginPopup extends Component { if (!this.state.ID) { alert("ID를 입력해주세요"); document.getElementById("id").focus(); + return false; } else if (!this.state.passwd) { alert("passwd를 입력해주세요"); document.getElementById("pwd").focus(); + return false; } this.setState({ loading: true }); this.props.loginRequest(this.state.ID, this.state.passwd); @@ -163,11 +165,15 @@ class LoginPopup extends Component { onChangePwdInput = event => { const _pwd = event.target.value; this.setState({ passwd: _pwd }); + + if (this.state.bShowLogin && event.keyCode === 13) { + this.onLoginClick(event); + } }; onChangeReCheckInput = event => { const _value = event.target.value; const _pwd = this.state.passwd; - if (_pwd.length >= 8 && _value.length >= 8 && _pwd === _value) { + if (_pwd && _pwd.length >= 8 && _value.length >= 8 && _pwd === _value) { this.setState({ recheck: true }); } else { if (this.state.recheck) { From bfa286407b1e44b9c30699de898b5b6caa4fcb0a Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 23:06:56 +0900 Subject: [PATCH 07/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20Header.jsx/scss=20*?= =?UTF-8?q?=20gray=5Fsearch.svg=20=EC=B6=94=EA=B0=80=20-------------------?= =?UTF-8?q?--------------------=20###=20=EC=9E=91=EC=97=85=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20*=20=EA=B2=80=EC=83=89=20=ED=8C=9D=EC=97=85=20?= =?UTF-8?q?=EC=B0=BD=20=EC=82=AC=EB=9D=BC=EC=A1=8C=EC=9D=84=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=ED=97=A4=EB=8D=94=EC=97=90=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=EB=8B=A8=EC=96=B4=20=ED=91=9C=EA=B8=B0=20*=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=EC=97=90=20=ED=91=9C=EA=B8=B0=EB=90=9C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EB=88=84=EB=A5=BC=20=EC=8B=9C=20=EB=8B=A4=EC=8B=9C?= =?UTF-8?q?=20=EA=B2=80=EC=B1=85=20=ED=8C=9D=EC=97=85=20=EC=B0=BD=20open?= =?UTF-8?q?=ED=95=98=EB=A9=B0=20=ED=97=A4=EB=8D=94=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AC=EB=9D=BC=EC=A7=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 52 +++++++++++++------ src/containers/Header/Header.scss | 85 ++++++++++++++++++++++--------- src/static/images/gray_search.svg | 10 ++++ 3 files changed, 108 insertions(+), 39 deletions(-) create mode 100644 src/static/images/gray_search.svg diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index 9760e2d..e9ff2df 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -151,7 +151,16 @@ class Header extends Component { } onChangeSearchStatus = event => { - this.setState({ bShowSearch: !this.state.bShowSearch, bHideSearch: false }); + if (this.state.bHideSearch && this.state.bShowSearch) { + this.setState({ + bHideSearch: false + }); + } else if (!this.state.bHideSearch) { + this.setState({ + bShowSearch: !this.state.bShowSearch, + bHideSearch: false + }); + } }; handleChangeFilter = selectedOption => { @@ -279,10 +288,21 @@ class Header extends Component {
-
+
- +
) : null} diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss index 38c2f51..e134d34 100644 --- a/src/containers/Header/Header.scss +++ b/src/containers/Header/Header.scss @@ -41,22 +41,62 @@ .right_container { float: right; display: flex; + justify-items: center; + align-items: center; - .search { - width: 26px; - height: 26px; - border-width: 0; - padding: 0; - border-radius: 30px; - border-color: transparent; - margin: 26px 0 0 0; - background-image: url("../../static/images/Search.svg"); - background-color: transparent; - background-repeat: no-repeat; - background-size: inherit; - background-position: center; - outline: none; - cursor: pointer; + .search_rect { + width: auto; + height: 40px; + &._over { + border-radius: 20px; + border: solid 2px #ff365d; + background-color: transparent; + opacity: 0.5; + } + + .search_container { + height: 100%; + display: flex; + align-items: center; + justify-items: center; + &._over { + justify-content: space-between; + margin-left: 21px; + margin-right: 15px; + } + + .text_rect { + margin-right: 45px; + height: auto; + font-family: NotoSansCJKkr; + font-size: 20px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 0.55; + letter-spacing: normal; + text-align: left; + color: #ffffff; + } + .search { + width: 26px; + height: 26px; + border-width: 0; + padding: 0; + border-radius: 30px; + border-color: transparent; + background-image: url("../../static/images/Search.svg"); + &._over { + background-image: url("../../static/images/gray_search.svg"); + } + background-color: transparent; + background-repeat: no-repeat; + background-size: inherit; + background-position: center; + outline: none; + cursor: pointer; + } + } } .login { @@ -65,7 +105,7 @@ background: transparent; border: solid 2px #ff365d; border-radius: 20px; - margin: 20.1px 30px 0 30px; + margin: 0 30px 0 30px; outline: none; color: #ff365d; font-size: 20px; @@ -77,7 +117,6 @@ height: 39.7px; border-color: transparent; margin-left: 20px; - margin-top: 20.1px; margin-right: 20.3px; background-color: transparent; background-image: url("../../static/images/user_button.png"); @@ -90,7 +129,7 @@ width: 40px; height: 40px; border-color: transparent; - margin: 20.1px 31px 0 0; + margin: 0 31px 0 0; background-image: url("../../static/images/white_button.svg"); background-color: transparent; background-repeat: no-repeat; @@ -104,7 +143,7 @@ position: absolute; width: 166px; height: 186px; - margin-top: 70px; + margin-top: 120px; margin-right: 90px; right: 0; background-color: #18184e; @@ -182,10 +221,6 @@ grid-row: 2 / span 1; } - &._over { - grid-row: 2 / span 2; - } - // div { // -ms-overflow-style: none; // IE에서 스크롤바 감춤 // &::-webkit-scrollbar { @@ -199,5 +234,9 @@ } } } + + &._over { + grid-row: 2 / span 2; + } } } diff --git a/src/static/images/gray_search.svg b/src/static/images/gray_search.svg new file mode 100644 index 0000000..9bd7b8d --- /dev/null +++ b/src/static/images/gray_search.svg @@ -0,0 +1,10 @@ + + + + + + + + From a79548313717f9a55ee4577c1303e59bce91c5d6 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Wed, 22 May 2019 23:47:35 +0900 Subject: [PATCH 08/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20MainView.jsx=20-----?= =?UTF-8?q?----------------------------------=20###=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20*=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0,=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=ED=81=B4=EB=A6=AD=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EC=98=AC=20=EC=8B=9C=20=EB=A1=9C=EB=94=A9=20=EC=95=88=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=A9=B0=20=EB=9E=9C=EB=8D=A4=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/MainView/MainView.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/containers/MainView/MainView.jsx b/src/containers/MainView/MainView.jsx index dfb2dac..e6b5011 100644 --- a/src/containers/MainView/MainView.jsx +++ b/src/containers/MainView/MainView.jsx @@ -41,6 +41,11 @@ class MainView extends Component { const _recommend = this.props.recommend; if (!_recommend.tags.length) { this.props.recommendRequest(); + } else { + //뒤로가기 해서 들어온 경우 로딩을 끈다. + if (_recommend.result.length) { + this.setState({ loading: false, selectTag: _recommend.tags[0].tag }); + } } } From c00c2623cef2c92953f56bdcb2bb46fce3c1077f Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Thu, 23 May 2019 13:13:26 +0900 Subject: [PATCH 09/16] =?UTF-8?q?###=20#38=20=EA=B2=80=EC=83=89/=EA=B2=80?= =?UTF-8?q?=EC=83=89=EA=B2=B0=EA=B3=BC=20=EA=B8=B0=EB=8A=A5=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=B6=94=EA=B0=80=20See:=20Github=20is?= =?UTF-8?q?sue=20#38=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20MyMenu.scss=20*=20Se?= =?UTF-8?q?archResult.jsx/scss=20---------------------------------------?= =?UTF-8?q?=20###=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20MyMenu=20IE?= =?UTF-8?q?=EA=B3=84=EC=97=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=8B=9C=20=EC=97=90=EB=A7=8C=20?= =?UTF-8?q?=EB=82=98=ED=83=80=EB=82=98=EB=8A=94=20css=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?(=ED=81=AC=EB=A1=AC=EA=B3=84=EC=97=B4=EC=9D=80=20=EB=AA=BB?= =?UTF-8?q?=EC=B0=BE=EC=9D=8C)=20*=20=EA=B2=80=EC=83=89=EA=B2=B0=EA=B3=BC?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=8B=9C=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/MyMenu/MyMenu.scss | 7 +++++++ src/containers/SearchResult/SearchResult.jsx | 18 ++++++++++++++++-- src/containers/SearchResult/SearchResult.scss | 7 +++++++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/containers/MyMenu/MyMenu.scss b/src/containers/MyMenu/MyMenu.scss index 74e8c04..af0b05b 100644 --- a/src/containers/MyMenu/MyMenu.scss +++ b/src/containers/MyMenu/MyMenu.scss @@ -129,5 +129,12 @@ body { width: 100%; height: 100%; grid-row: 2 / span 1; + + // div { + // -ms-overflow-style: -ms-autohiding-scrollbar; // IE에서 스크롤바 감춤 + // &::-webkit-scrollbar { + // display: none !important; // 윈도우 크롬 등 + // } + // } } } diff --git a/src/containers/SearchResult/SearchResult.jsx b/src/containers/SearchResult/SearchResult.jsx index bb088ef..8c0227e 100644 --- a/src/containers/SearchResult/SearchResult.jsx +++ b/src/containers/SearchResult/SearchResult.jsx @@ -8,6 +8,7 @@ import { GridLayout } from "@egjs/react-infinitegrid"; import { withRouter } from "react-router-dom"; import { dataRequest } from "../../action/userAction.js"; +import { CircleSpinner } from "react-spinners-kit"; const cx = classNames.bind(styles); @@ -29,7 +30,8 @@ class SearchResult extends Component { page: 0, pages: 0, searchList: [], //[{page:number,list:[]}, ...] - bShowDelete: false + bShowDelete: false, + bLoding: false }; componentDidMount() { @@ -83,6 +85,7 @@ class SearchResult extends Component { const items = this.loadItems(parseFloat(this.groupKey) + 1, list); this.setState({ + bLoding: false, page: this.props.page, searchList: this.state.searchList.concat({ page: this.props.page, @@ -328,8 +331,10 @@ class SearchResult extends Component { window.event.target.scrollHeight <= scrollPos + window.event.target.clientHeight ) { - if (this.props.pages > this.props.page) + if (this.props.pages > this.props.page) { + this.setState({ bLoding: true }); this.props.handleNotifyScroll({ next: this.props.page + 1 }); + } } } }; @@ -357,6 +362,15 @@ class SearchResult extends Component { list.map(item => { return item.list; })} + {this.state.bLoding && ( +
+ +
+ )} {this.state.showModify && this.showModifyPopup()}
diff --git a/src/containers/SearchResult/SearchResult.scss b/src/containers/SearchResult/SearchResult.scss index f030e06..d1b002d 100644 --- a/src/containers/SearchResult/SearchResult.scss +++ b/src/containers/SearchResult/SearchResult.scss @@ -122,3 +122,10 @@ } } } +.loding_rect { + position: relative; + width: 100%; + height: auto; + display: flex; + justify-content: center; +} From d4aa431b720e4afcae8ce0a1af3f930c51b13af6 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Thu, 23 May 2019 21:35:42 +0900 Subject: [PATCH 10/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20SearchResultItem.jsx?= =?UTF-8?q?/scss=20*=20ErrorImage.svg=20----------------------------------?= =?UTF-8?q?-----=20###=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20?= =?UTF-8?q?=EA=B5=AC=EA=B8=80=20=EB=A9=94=ED=85=8C=EB=A6=AC=EC=96=BC=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20*=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=AF=B8=20=EC=A1=B4=EC=9E=AC=20=EC=8B=9C=20Error=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=B0=8F=20css=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SearchResultItem/SearchResultItem.jsx | 3 ++- src/components/SearchResultItem/SearchResultItem.scss | 7 +++++++ src/static/images/ErrorImage.svg | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/static/images/ErrorImage.svg diff --git a/src/components/SearchResultItem/SearchResultItem.jsx b/src/components/SearchResultItem/SearchResultItem.jsx index 180c84b..55bb3d7 100644 --- a/src/components/SearchResultItem/SearchResultItem.jsx +++ b/src/components/SearchResultItem/SearchResultItem.jsx @@ -1,7 +1,7 @@ import React from "react"; import classNames from "classnames/bind"; import styles from "./SearchResultItem.scss"; -import xbox from "../../static/images/a1.jpeg"; +import xbox from "../../static/images/ErrorImage.svg"; const cx = classNames.bind(styles); @@ -26,6 +26,7 @@ const SearchResultItem = ({ onError={e => { e.target.onerror = null; e.target.src = xbox; + e.target.className = cx("item_img", "_xbox"); }} src={image} alt="사진" diff --git a/src/components/SearchResultItem/SearchResultItem.scss b/src/components/SearchResultItem/SearchResultItem.scss index f7a6b43..aabd657 100644 --- a/src/components/SearchResultItem/SearchResultItem.scss +++ b/src/components/SearchResultItem/SearchResultItem.scss @@ -2,6 +2,13 @@ .item_img { width: inherit; height: inherit; + + &._xbox { + min-width: 360px; + min-height: 420px; + background-color: gray; + opacity: 0.5; + } } .modify_rect { diff --git a/src/static/images/ErrorImage.svg b/src/static/images/ErrorImage.svg new file mode 100644 index 0000000..8cdf5b0 --- /dev/null +++ b/src/static/images/ErrorImage.svg @@ -0,0 +1 @@ + \ No newline at end of file From 55c8ac996317c7ba1a193e2b403e14b25fc48e43 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Thu, 23 May 2019 23:04:10 +0900 Subject: [PATCH 11/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20Header.jsx/scss=20*?= =?UTF-8?q?=20SearhPopup.jsx=20*=20SearchResultOff.svg=20-----------------?= =?UTF-8?q?----------------------=20###=20=EC=9E=91=EC=97=85=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20*=20=EA=B5=AC=EA=B8=80=20=EB=A9=94=ED=85=8C?= =?UTF-8?q?=EB=A6=AC=EC=96=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20*=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B2=B0=EA=B3=BC=20=EB=AF=B8=20=EC=A1=B4=EC=9E=AC?= =?UTF-8?q?=20=EC=8B=9C=20layout=20=EC=B6=94=EA=B0=80=20*=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EC=B0=BD=20=EB=8B=AB=EC=9D=84=20=EB=95=8C=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=A1=B0=EA=B1=B4=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EB=8B=A8=EC=96=B4=20=EC=A1=B4=EC=9E=AC=EB=A1=9C=20=ED=8C=90?= =?UTF-8?q?=EB=8B=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 31 +++++++++++++++++----- src/containers/Header/Header.scss | 26 ++++++++++++++++++ src/containers/SearchPopup/SearchPopup.jsx | 6 +---- src/static/images/SearchResultOff.svg | 1 + 4 files changed, 52 insertions(+), 12 deletions(-) create mode 100644 src/static/images/SearchResultOff.svg diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index e9ff2df..7b39a35 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -88,7 +88,8 @@ class Header extends Component { bHideSearch: false, popupID: "login", userID: "", - password: "" + password: "", + bSearchAction: false }; componentDidMount() { @@ -120,8 +121,10 @@ class Header extends Component { } } - if (!bShowSearch && searchReducer.searchresult.cocktails.length) { + if (!bShowSearch && searchReducer.searchword) { searchReducer.searchresult.cocktails = []; + searchReducer.searchword = ""; + return; } //filter 변경에 의한 searchAPI 호출 @@ -137,7 +140,7 @@ class Header extends Component { prevProps.searchReducer.searchword !== searchReducer.searchword || prevProps.searchReducer.type !== searchReducer.type ) { - this.setState({ selectedOption: filter[0] }); + this.setState({ selectedOption: filter[0], bSearchAction: true }); return; } @@ -158,7 +161,8 @@ class Header extends Component { } else if (!this.state.bHideSearch) { this.setState({ bShowSearch: !this.state.bShowSearch, - bHideSearch: false + bHideSearch: false, + bSearchAction: false }); } }; @@ -273,7 +277,8 @@ class Header extends Component { bShowLogin, bShowUser, selectedOption, - bHideSearch + bHideSearch, + bSearchAction } = this.state; const { searchresult } = this.props.searchReducer; @@ -282,7 +287,7 @@ class Header extends Component { className={cx( "container", bShowSearch ? "_over" : "", - searchresult.cocktails.length ? "_result" : "" + bSearchAction ? "_result" : "" )} >
@@ -351,7 +356,19 @@ class Header extends Component { />
- ) : null} + ) : ( + bShowSearch && + bSearchAction && ( +
+
+
+
+
검색 결과가 없습니다!
+
+
+
+ ) + )} {bShowLogin ? ( \ No newline at end of file From 8e722395f4b353b7a8b5dfad58e6a310fbde0367 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Fri, 24 May 2019 00:29:18 +0900 Subject: [PATCH 12/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20Header.jsx/scss=20*?= =?UTF-8?q?=20SearhPopup.jsx=20*=20SearchResult.jsx=20--------------------?= =?UTF-8?q?-------------------=20###=20=EC=9E=91=EC=97=85=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20*=20=EA=B2=80=EC=83=89=20=EC=8B=9C=EC=9E=91=20?= =?UTF-8?q?=EC=8B=9C=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4=ED=94=BC=EB=84=88=20?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A4=8C=20*=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD/=20=EB=8B=A8=EC=96=B4=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EA=B2=80=EC=83=89=20=EC=8B=9C=20=EB=A1=9C?= =?UTF-8?q?=EB=94=A9=20=EC=8A=A4=ED=94=BC=EB=84=88=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?*=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=EB=8B=A8=EC=96=B4=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EC=8B=9C=20page=EA=B0=80=201=EC=9D=B4=20?= =?UTF-8?q?=EC=95=84=EB=8B=8C=EA=B2=BD=EC=9A=B0=20=EA=B2=B0=EA=B3=BC?= =?UTF-8?q?=EC=B0=BD=20=EB=8B=A4=EC=8B=9C=20=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 127 ++++++++++++------- src/containers/Header/Header.scss | 11 ++ src/containers/SearchPopup/SearchPopup.jsx | 10 +- src/containers/SearchResult/SearchResult.jsx | 8 ++ 4 files changed, 109 insertions(+), 47 deletions(-) diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index 7b39a35..205bcb8 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -12,6 +12,9 @@ import SearchResult from "../SearchResult/SearchResult"; import { loginRequest, logout } from "../../action/userAction"; import { searchRequest } from "../../action/searchAction"; import { withRouter } from "react-router-dom"; + +import { CircleSpinner } from "react-spinners-kit"; + const cx = classNames.bind(styles); const mapStateToProps = state => { @@ -89,11 +92,12 @@ class Header extends Component { popupID: "login", userID: "", password: "", - bSearchAction: false + bSearchAction: false, + isScroll: false }; componentDidMount() { - const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴\ + const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴 //자동 로그인 기능 if (auth) { this.setState({ userID: auth.userid, password: auth.password }); @@ -106,7 +110,8 @@ class Header extends Component { bShowLogin, bShowSearch, selectedOption, - bsearchRequest + bsearchRequest, + bSearchAction } = this.state; const { searchReducer } = this.props; if (this.props.bLoginResult && bShowLogin) { @@ -132,7 +137,9 @@ class Header extends Component { const word = searchReducer.searchword; const filter = selectedOption.value; const type = searchReducer.type; + this.setState({ bsearchRequest: true }); this.props.searchRequest({ word, filter, type }); + return; } // 결과창 떠있는 상태에서 검색 종류 or 단어 변경하여 검색 시 필터콤보 초기값으로 변경 @@ -140,8 +147,15 @@ class Header extends Component { prevProps.searchReducer.searchword !== searchReducer.searchword || prevProps.searchReducer.type !== searchReducer.type ) { - this.setState({ selectedOption: filter[0], bSearchAction: true }); - return; + if (bSearchAction && bsearchRequest) { + this.setState({ + selectedOption: filter[0], + bsearchRequest: false, + isScroll: false + }); + } else { + this.setState({ selectedOption: filter[0], isScroll: false }); + } } if ( @@ -149,7 +163,7 @@ class Header extends Component { prevProps.searchReducer.searchresult.cocktails !== searchReducer.searchresult.cocktails ) { - this.setState({ bsearchRequest: false }); + this.setState({ bsearchRequest: false, isScroll: false }); } } @@ -186,7 +200,7 @@ class Header extends Component { const filter = selectedOption.value; const type = searchReducer.type; - this.setState({ bsearchRequest: true }); + this.setState({ bsearchRequest: true, isScroll: true }); this.props.searchRequest({ word, filter, type, index: nextPage }); } }; @@ -271,6 +285,11 @@ class Header extends Component { } }; + //검색 유/무 알려고 만든 것(SearchPopup에 넘김) + onSearchAction = (action = false) => { + this.setState({ bSearchAction: action, bsearchRequest: action }); + }; + render() { const { bShowSearch, @@ -278,7 +297,9 @@ class Header extends Component { bShowUser, selectedOption, bHideSearch, - bSearchAction + bSearchAction, + bsearchRequest, + isScroll } = this.state; const { searchresult } = this.props.searchReducer; @@ -325,51 +346,67 @@ class Header extends Component { {bShowSearch && ( )} - {bShowSearch && searchresult.cocktails.length > 0 ? ( + {bShowSearch && bSearchAction && (
-
-
- 0 ? ( +
+
+ +
+ {!isScroll && bsearchRequest && ( +
+ +
+ )} +
- -
-
- ) : ( - bShowSearch && - bSearchAction && ( -
+ ) : (
-
-
-
검색 결과가 없습니다!
-
+ {bsearchRequest ? ( +
+ +
+ ) : ( +
+
+
검색 결과가 없습니다!
+
+ )}
-
- ) + )} +
)} - {bShowLogin ? ( nowProps.page) { + this.setState({ searchList: [], page: 0, pages: 0 }); + return; + } + } + //scroll 시 page 갱신 및 list update if (prevProps.page !== this.props.page) { const list = this.props.searchList; From 2fcd0ef97c1e4209cb2a5a33beff04867fac614d Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Fri, 24 May 2019 11:35:04 +0900 Subject: [PATCH 13/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20Header.jsx=20*=20Mai?= =?UTF-8?q?nView.jsx=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EB=A9=94=EC=9D=B8,?= =?UTF-8?q?=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20=EC=8A=A4=ED=94=BC=EB=84=88=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/Header/Header.jsx | 4 ++-- src/containers/MainView/MainView.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx index 205bcb8..15239e5 100644 --- a/src/containers/Header/Header.jsx +++ b/src/containers/Header/Header.jsx @@ -369,7 +369,7 @@ class Header extends Component { {!isScroll && bsearchRequest && (
@@ -392,7 +392,7 @@ class Header extends Component { {bsearchRequest ? (
diff --git a/src/containers/MainView/MainView.jsx b/src/containers/MainView/MainView.jsx index e6b5011..04fc8bc 100644 --- a/src/containers/MainView/MainView.jsx +++ b/src/containers/MainView/MainView.jsx @@ -213,7 +213,7 @@ class MainView extends Component {
From 5e31f7860579a94122f76557b2c774bc3f8e7267 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Sat, 25 May 2019 20:46:37 +0900 Subject: [PATCH 14/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20MainView.jsx=20*=20S?= =?UTF-8?q?earchResult.jsx=20*=20ViewRecipe.jsx=20*=20SearchResultItem.jsx?= =?UTF-8?q?=20---------------------------------------=20###=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EC=B9=B5=ED=85=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=9E=90=EC=84=B8=ED=9E=88=20=EB=B3=B4=EA=B8=B0=20=EC=8B=9C?= =?UTF-8?q?=20=EB=82=B4=EC=9A=A9=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 1 + .../SearchResultItem/SearchResultItem.jsx | 2 +- src/containers/MainView/MainView.jsx | 2 +- src/containers/SearchResult/SearchResult.jsx | 2 +- src/containers/ViewRecipe/ViewRecipe.jsx | 196 +++++++++--------- 5 files changed, 107 insertions(+), 96 deletions(-) diff --git a/src/App.js b/src/App.js index 8df143e..c0df635 100644 --- a/src/App.js +++ b/src/App.js @@ -32,6 +32,7 @@ class App extends Component {
+ diff --git a/src/components/SearchResultItem/SearchResultItem.jsx b/src/components/SearchResultItem/SearchResultItem.jsx index 55bb3d7..99ed284 100644 --- a/src/components/SearchResultItem/SearchResultItem.jsx +++ b/src/components/SearchResultItem/SearchResultItem.jsx @@ -42,7 +42,7 @@ const SearchResultItem = ({
)} -
+
{name}
diff --git a/src/containers/MainView/MainView.jsx b/src/containers/MainView/MainView.jsx index 04fc8bc..19438e0 100644 --- a/src/containers/MainView/MainView.jsx +++ b/src/containers/MainView/MainView.jsx @@ -94,7 +94,7 @@ class MainView extends Component { }; onCocktailClick = event => { - this.props.history.push(`/viewRecipe`); + this.props.history.push(`/viewRecipe/${event.target.id}`); }; onLikeClick = event => { diff --git a/src/containers/SearchResult/SearchResult.jsx b/src/containers/SearchResult/SearchResult.jsx index 16914cc..cff6f1b 100644 --- a/src/containers/SearchResult/SearchResult.jsx +++ b/src/containers/SearchResult/SearchResult.jsx @@ -123,7 +123,7 @@ class SearchResult extends Component { }; onCocktailClick = event => { - this.props.history.push(`/viewRecipe`); + this.props.history.push(`/viewRecipe/${event.target.id}`); }; onDeleteCocktailClick = event => { diff --git a/src/containers/ViewRecipe/ViewRecipe.jsx b/src/containers/ViewRecipe/ViewRecipe.jsx index 4681f32..caadce9 100644 --- a/src/containers/ViewRecipe/ViewRecipe.jsx +++ b/src/containers/ViewRecipe/ViewRecipe.jsx @@ -10,7 +10,7 @@ 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"; const cx = classNames.bind(styles); @@ -39,38 +39,49 @@ class ViewRecipe extends Component { stuffs: [], photos: [], comments: [], - main: , - side: - + main: , + side: }; componentDidMount() { - this.props.recipeIDRequest("5c9b94e7e1723e5834f0eede"); + const { id } = this.props.match.params; + this.props.recipeIDRequest(id); } - 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(' '); - }); + 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(" "); + } + ); } } @@ -81,63 +92,59 @@ class ViewRecipe extends Component { let comment = document.querySelector("#comment"); if (info === event.target || info === event.target.parentNode) { - this.setState( { - main: , - side: - - } ); - + this.setState({ + main: , + side: ( + + ) + }); } else if (stuff === event.target || stuff === event.target.parentNode) { - this.setState( { - main: , - side: - - } ); - + this.setState({ + main: , + side: + }); } else if (photo === event.target || photo === event.target.parentNode) { - this.setState( { - main: , - side: - - } ); - - } else if (comment === event.target || comment === event.target.parentNode) { - this.setState( { - main: , - side: - - } ); - + this.setState({ + main: , + side: + }); + } else if ( + comment === event.target || + comment === event.target.parentNode + ) { + this.setState({ + main: , + side: ( + + ) + }); } - } + }; onAddComment = () => { let comment = document.querySelector("#commentText").value; - if (comment !== '' && comment !== undefined && comment !== null) { + 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()}` + : `0${now.getHours()}:${now.getMinutes()}`; let comments = this.state.comments; - comments.push({nick: "사용자", comments: comment, time: time}); - - this.setState({comments: comments}); - this.setState( { - side: - - } ); + comments.push({ nick: "사용자", comments: comment, time: time }); + + this.setState({ comments: comments }); + this.setState({ + side: ( + + ) + }); } }; @@ -145,8 +152,8 @@ class ViewRecipe extends Component { return [
- - + +
- - {this.state.main} - + {this.state.main}
- 정보 - 재료 - 사진 - 댓글 + + 정보 + + + 재료 + + + 사진 + + + 댓글 +
{this.state.side} -
-
- - - - + + + +
@@ -196,7 +207,6 @@ class ViewRecipe extends Component { className={cx("recipe-view-detail")} content={this.viewRecipe_form()} /> - ); } } From 9db3bb09f679c80f7b0ba09a1ce578294145081d Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Sat, 25 May 2019 21:36:42 +0900 Subject: [PATCH 15/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20MainView.scss=20*=20?= =?UTF-8?q?SearchResultItem.scss=20---------------------------------------?= =?UTF-8?q?=20###=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20=EC=B9=B5?= =?UTF-8?q?=ED=85=8C=EC=9D=BC=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9E=91=EC=97=85(=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchResultItem/SearchResultItem.scss | 1 - src/containers/MainView/MainView.scss | 18 ++++++------------ 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/SearchResultItem/SearchResultItem.scss b/src/components/SearchResultItem/SearchResultItem.scss index aabd657..bd93c94 100644 --- a/src/components/SearchResultItem/SearchResultItem.scss +++ b/src/components/SearchResultItem/SearchResultItem.scss @@ -5,7 +5,6 @@ &._xbox { min-width: 360px; - min-height: 420px; background-color: gray; opacity: 0.5; } diff --git a/src/containers/MainView/MainView.scss b/src/containers/MainView/MainView.scss index d56ac6f..0d9bce2 100644 --- a/src/containers/MainView/MainView.scss +++ b/src/containers/MainView/MainView.scss @@ -27,14 +27,10 @@ body { background-color: $main-color; display: grid; grid-template-columns: repeat(4, 1fr); - // grid-template-rows: 80px 215px 115px auto; grid-template-rows: 215px 115px auto; - - // //헤더 Style - // .header { - // height: auto; - // grid-column: 1 / span 5; - // } + position: absolute; + width: 100%; + height: 100%; //중간 text Style .explanation_rect { @@ -42,7 +38,6 @@ body { display: grid; grid-template-columns: 20.5% 755px auto; grid-template-rows: 92.8px 57px 66px; - // padding-top: 92.8px; .left { grid-column: 1 / span 1; @@ -214,13 +209,12 @@ body { } //cocktail 결과 Layout style .image_rect { + position: absolute; + grid-row: 3 / span 1; grid-column: 1 / span 5; - // padding-left: 20.5%; - // max-width: 1518px; - width: auto; + width: 100%; height: 100%; background-color: $main-color; - display: flex; .innercontainer { From af1859233a23e62557e7951c85cfda80f92c97ad Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Sat, 25 May 2019 22:17:19 +0900 Subject: [PATCH 16/16] =?UTF-8?q?###=20#35=20=EB=A9=94=EC=9D=B8/=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=A0=EB=8F=84=ED=99=94=20See:=20Github=20issue?= =?UTF-8?q?=20#35=20---------------------------------------=20###=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=8C=8C=EC=9D=BC=20*=20App.js/scss=20------?= =?UTF-8?q?---------------------------------=20###=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20*=20url=EC=97=90=20=EB=94=B0=EB=A5=B8=20bo?= =?UTF-8?q?dy=20div=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 31 ++++++++++++++----------------- src/App.scss | 4 ++++ 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index c0df635..f1bc47c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,7 @@ import React, { Component } from "react"; import { Route, Switch, withRouter } from "react-router-dom"; import { connect } from "react-redux"; -import { - MainView, - Header, - LoginPopup, - Enrolment, - ViewRecipe, - MyMenu -} from "./containers"; +import { MainView, Header, Enrolment, ViewRecipe, MyMenu } from "./containers"; import classNames from "classnames/bind"; import styles from "./App.scss"; const cx = classNames.bind(styles); @@ -20,8 +13,10 @@ const mapDispatchToProps = dispatch => ({}); class App extends Component { render() { + const bEnrolment = + this.props.location.pathname.indexOf("enrolment") > 0 ? true : false; return ( -
+
@@ -29,14 +24,16 @@ class App extends Component {
-
- - - - - - -
+ {!bEnrolment && ( +
+ + + + + + +
+ )}
); } diff --git a/src/App.scss b/src/App.scss index e6cb884..de8aeca 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,9 +2,13 @@ position: absolute; display: grid; grid-template-rows: 80px auto; + &.one { + grid-template-rows: auto; + } height: 100%; width: 100%; .top { + position: absolute; grid-row: 1 / span 1; height: 100%; width: 100%;