Merge pull request #23 from yapp-project/drinkme#19

Drinkme#19
yapp-project · Apr 24, 2019 · 29a0eb1 · 29a0eb1
2 parents efb92a0 + 40d3563
commit 29a0eb1
Show file tree

Hide file tree

Showing 30 changed files with 810 additions and 535 deletions.
diff --git a/src/action/searchAction.js b/src/action/searchAction.js
@@ -0,0 +1,33 @@
+export const actions = {
+  COMMUNICATION: {
+    REQUEST: "COMMUNICATION_REQUEST",
+    ING: "COMMUNICATION_ING",
+    END: "COMMUNICATION_END",
+    ERROR: "COMMUNICATION_ERROR"
+  },
+  SEARCH: {
+    REQUEST: "SEARCH_REQUEST",
+    SUCCESS: "SEARCH_SUCCESS",
+    FAILED: "SEARCH_FAILED",
+    TAG: "SEARCH_TAG",
+    MATERIAL: "SEARCH_MATERIAL"
+  }
+};
+
+export function searchRequest(data) {
+  return {
+    type: actions.SEARCH.REQUEST,
+    payload: {
+      data
+    }
+  };
+}
+
+export function searchSuccess(data) {
+  return {
+    type: actions.SEARCH.SUCCESS,
+    payload: {
+      data
+    }
+  };
+}
diff --git a/src/action/userAction.js b/src/action/userAction.js
@@ -1,8 +1,15 @@
 export const actions = {
+  COMMUNICATION: {
+    REQUEST: "COMMUNICATION_REQUEST",
+    ING: "COMMUNICATION_ING",
+    END: "COMMUNICATION_END",
+    ERROR: "COMMUNICATION_ERROR"
+  },
   LOGIN: {
     REQUEST: "LOGIN_REQUEST",
     SUCCESS: "LOGIN_SUCCESS",
-    FAILED: "LOGIN_FAILED"
+    FAILED: "LOGIN_FAILED",
+    LOGOUT: "LOGIN_LOGOUT"
   },
   IDCHECK: {
     REQUEST: "IDCHECK_REQUEST",
@@ -53,6 +60,14 @@ export function registerSuccess(result) {
     }
   };
 }
+export function registerFailed(result) {
+  return {
+    type: actions.REGISTER.FAILED,
+    payload: {
+      result
+    }
+  };
+}
 
 export function checkIDRequest(userid) {
   return {
@@ -62,11 +77,25 @@ export function checkIDRequest(userid) {
     }
   };
 }
-export function checkIDSuccess(bIDCheck) {
+export function checkIDSuccess(result) {
   return {
     type: actions.IDCHECK.SUCCESS,
     payload: {
-      IDCheck: bIDCheck
+      result
+    }
+  };
+}
+export function checkIDFailed(result) {
+  return {
+    type: actions.IDCHECK.FAILED,
+    payload: {
+      result
     }
   };
 }
+
+export function logout() {
+  return {
+    type: actions.LOGIN.LOGOUT
+  };
+}
diff --git a/src/api/searchAPI.js b/src/api/searchAPI.js
@@ -0,0 +1,17 @@
+import * as webRequestUtil from "./rootAPI";
+
+//검색 시 get방식인데 body로 data req가아닌 params 방식으로 해야함
+export async function searchCocktails(word, type) {
+  let url, body;
+  if (type === 0) {
+    url = "recipe/tag/view";
+    body = JSON.stringify({
+      tag: word
+    });
+  } else {
+    url = "recipe/ingredient/view";
+  }
+
+  const res = await webRequestUtil.get({ url, body });
+  return res.data;
+}
diff --git a/src/api/userAPI.js b/src/api/userAPI.js
@@ -22,7 +22,7 @@ export async function setLogin({ userid, password }) {
 }
 
 export async function checkID(userid) {
-  const url = "user/check/id";
+  const url = "user/join/check/id";
   const body = {
     userid
   };

diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
@@ -2,7 +2,6 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  top: 80px;
   left: 0;
   right: 0;
   bottom: 0;

diff --git a/src/components/SearchResultItem/SearchResultItem.scss b/src/components/SearchResultItem/SearchResultItem.scss
@@ -9,92 +9,86 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  left: 0;
+  top: 0;
   font-size: 15px;
-  background-color: rgba(8, 15, 36, 0.3);
   cursor: Default;
 
   .inner {
     position: absolute;
     width: 100%;
     bottom: 0px;
+    height: auto;
     color: white;
-
     .cocktailName {
-      font-family: SegoeUI;
-      font-weight: bold;
-      font-size: 25px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      cursor: pointer;
-      width: 100px;
-      height: 33px;
       margin-left: 16.7px;
-      margin-bottom: 12px;
+      margin-bottom: 11px;
+      height: 37px;
+      font-family: NotoSansCJKkr;
+      font-size: 25px;
+      font-weight: 500;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.48;
+      letter-spacing: normal;
+      text-align: left;
+      color: #ffffff;
+      cursor: pointer;
     }
 
     .bottom {
       display: flex;
       flex-direction: row;
+      align-items: center;
       justify-content: space-between;
-      top: 0px;
+      width: 100%;
+      height: auto;
       margin-bottom: 23px;
 
       .userName {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         margin-left: 16.7px;
-        font-family: SegoeUI;
+        font-family: NotoSansCJKkr;
         font-size: 15px;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.47;
+        letter-spacing: normal;
+        text-align: left;
+        color: #ffffff;
       }
 
       .right {
         display: flex;
         margin-right: 20.3px;
+        align-items: center;
         .like {
-          width: 18px;
-          height: 100%;
-          background-image: url("../../static/images/Heart.svg");
+          display: inline-block;
+          width: 25px;
+          height: 25px;
+          background-image: url("../../static/images/FullHeart.svg");
           background-repeat: no-repeat;
           background-position: center;
+          background-size: inherit;
           margin-right: 10.2px;
         }
         .number {
           height: 100%;
           text-align: center;
           vertical-align: middle;
-          line-height: 25px;
+          font-family: NotoSansCJKkr;
+          font-size: 15px;
+          line-height: 1.47;
+          letter-spacing: normal;
+          text-align: left;
+          color: #ffffff;
         }
       }
     }
   }
 }
-/*사진 밑에 붙는*/
-// .item_img {
-//   width: inherit;
-//   height: inherit;
-//   vertical-align: middle;
-// }
-// .information_rect {
-//   background-color: yellow;
-//   text-align: center;
-//   display: flex;
-//   justify-content: space-between;
-//   width: 100%;
-
-//   .name {
-//     font-size: 15px;
-//     font-weight: bold;
-//   }
-
-//   .like {
-//     width: 25px;
-//     height: 25px;
-//     background-image: url("../../images/baseline-favorite_border-24px.svg");
-//     background-repeat: no-repeat;
-//   }
-// }
diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx
@@ -4,72 +4,91 @@ import styles from "./Header.scss";
 import { connect } from "react-redux";
 import { Button } from "../../components";
 
+//layout
+import SearchPopup from "../SearchPopup/SearchPopup";
+import LoginPopup from "../LoginPopup/LoginPopup";
+
+import { loginRequest, logout } from "../../action/userAction";
+
 const cx = classNames.bind(styles);
 
 const mapStateToProps = state => {
-  return state;
+  return {
+    bLoginResult: state.userReducer.bLoginResult,
+    set_auth: state.userReducer.set_auth
+  };
 };
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = { loginRequest, logout };
+const loginPopupID = "login";
+const searchPopupID = "search";
 
 class Header extends Component {
   state = {
-    bShowSearch: false
+    bShowSearch: false,
+    bShowLogin: false
   };
 
+  componentDidMount() {
+    const auth = JSON.parse(localStorage.getItem("myData")); //localstorage에서 가져옴
+    if (auth) {
+      this.props.loginRequest(auth.userid, auth.password);
+    }
+  }
+
+  componentDidUpdate() {
+    const { bShowLogin } = this.state;
+    if (this.props.bLoginResult && bShowLogin) {
+      this.setState({ bShowLogin: false });
+    }
+  }
+
   onChangeSearchStatus = event => {
     this.setState({ bShowSearch: !this.state.bShowSearch });
   };
 
+  onShowLogin = event => {
+    const _bShowSearch = this.state.bShowLogin;
+    if (_bShowSearch) {
+      if (event.target.id === loginPopupID) {
+        this.setState({ bShowLogin: false });
+      }
+    } else {
+      if (this.props.bLoginResult) {
+        this.props.logout();
+      } else this.setState({ bShowLogin: !_bShowSearch });
+    }
+  };
+
   render() {
-    const { bShowSearch } = this.state;
+    const { bShowSearch, bShowLogin } = this.state;
 
     return (
-      <div className={cx("test")}>
-        <div className={cx("header-container")}>
-          <div className={cx("header-container-top")}>
-            <div className={cx("icon")}>this layout is icon</div>
-            <Button className={cx("login")} value="Login" onClick=""/>
-            <Button className={cx("search")} value="Search" onClick={this.onChangeSearchStatus}/>
-          </div>
-
-          <div className={cx("header-container-bottom", { show : bShowSearch, close : !bShowSearch })}>
-            <div className={cx("header-search-container")}>
-              <div className={cx("header-search-container-main")}>
-                <div className={cx("header-search-input")}>
-                  <input type="text" id="search-input" value="" placeholder="insert here"></input>
-                </div>
+      <div className={cx("header-container")}>
+        <div className={cx("header-container-top")}>
+          <div className={cx("icon")} />
+          <Button
+            className={cx("login")}
+            value={this.props.bLoginResult ? "LogOut" : "Login"}
+            onClick={this.onShowLogin}
+          />
+          <Button
+            className={cx("search")}
+            onClick={this.onChangeSearchStatus}
+          />
+        </div>
 
-                <div className={cx("header-recommendation")}>
-                  <div className={cx("header-recommendation-list")}>
-                    <ul>
-                      <li>맛있는!</li>
-                      <li>달콤한!</li>
-                      <li>안녕하세여!</li>
-                      <li>테그길이에따른칸수확인!</li>
-                      <li>테스트데이터!</li>
-                      <li>맛있는!</li>
-                      <li>달콤한!</li>
-                      <li>안녕하세여!</li>
-                      <li>테그길이에따른칸수확인!</li>
-                      <li>테스트데이터!</li>
-                      <li>맛있는!</li>
-                      <li>달콤한!</li>
-                      <li>안녕하세여!</li>
-                      <li>테그길이에따른칸수확인!</li>
-                      <li>테스트데이터!</li>
-                      <li>맛있는!</li>
-                      <li>달콤한!</li>
-                      <li>안녕하세여!</li>
-                      <li>테그길이에따른칸수확인!</li>
-                      <li>테스트데이터!</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
+        <div
+          className={cx("header-container-bottom", {
+            show: bShowSearch,
+            close: !bShowSearch
+          })}
+        >
+          <div className={cx("header-search-container")}>
+            <SearchPopup />
           </div>
         </div>
+        {bShowLogin ? <LoginPopup onClick={this.onShowLogin} /> : null}
       </div>
     );
   }