yapp-project#15 레시피 등록

See: Github issue yapp-project#15 --------------------------------------- ### 작업내용 * 작업 내용 전체적으로 통합 * 컨플릭트 해결 * 포크된 내용을 커밋 하는 것에 대한 방법을 좀 찾아봐야 할듯 Merge branch 'release-1.0' # Conflicts: # package-lock.json # src/App.js # src/containers/MainView/MainView.jsx # src/containers/index.js
Sung-jin · Mar 26, 2019 · 606717f · 606717f
2 parents f86a4bd + 96a0733
commit 606717f
Show file tree

Hide file tree

Showing 41 changed files with 2,383 additions and 88 deletions.
diff --git a/.github/ISSUE_TEMPLATE/issue_template.md b/.github/ISSUE_TEMPLATE/issue_template.md
@@ -1,3 +1,11 @@
+---
+name: issue_template report
+about: Create a issue
+title: ''
+assignees: ''
+
+---
+
 ### 개요
 
 * 개요 1
@@ -14,4 +22,4 @@
 
 * [ ] 기능 1
 * [ ] 기능 2
-* [ ] 기능 3
+* [ ] 기능 3
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.8",
+    "react-select": "^2.4.2",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.0.2",
@@ -30,5 +31,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "css-loader": "^2.1.1"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,6 @@
     <title>DrinkMe</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Route, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
-import { MainView, Header, SideBar } from "./containers";
+import { MainView, Header, SideBar, LoginPopup, HTML_TEST, Enrolment } from "./containers";
 
 const mapStateToProps = state => {
   return {};
@@ -16,6 +16,10 @@ class App extends Component {
           <Route exact path="/" component={MainView} />
           <Route exact path="/header" component={Header} />
           <Route exact path="/sidebar" component={SideBar} />
+          <Route exact path="/popup" component={LoginPopup} />
+          <Route exact path="/enrolment" component={Enrolment} />
+
+          <Route exact path="/test" component={HTML_TEST} />
         </Switch>
       </div>
     );

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -1,23 +1,14 @@
-import React, { Component } from "react";
+import React from "react";
 import classNames from "classnames/bind";
 import styles from "./Button.scss";
 const cx = classNames.bind(styles);
 
-const defaultProps = {};
-const propTypes = {};
-
-class Button extends Component {
-  render() {
-    const { value, className, onClick } = this.props;
-    return (
-      <button className={cx(styles.button, className)} onClick={onClick}>
-        {value}
-      </button>
-    );
-  }
-}
-
-Button.defaultProps = defaultProps;
-Button.propTypes = propTypes;
+const Button = ({ className, value, onClick }) => {
+  return (
+    <button className={cx(className, { button: !className })} onClick={onClick}>
+      {value}
+    </button>
+  );
+};
 
 export default Button;
diff --git a/src/components/Combo/Combo.jsx b/src/components/Combo/Combo.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Select from "react-select"; //select libery사용
+import classNames from "classnames/bind";
+import styles from "./Combo.scss";
+
+const cx = classNames.bind(styles);
+
+const Combo = ({ className, options, handleChange, defaultValue, styles }) => {
+  return (
+    <Select
+      className={cx(className, { default: !className })}
+      options={options}
+      onChange={handleChange}
+      defaultValue={defaultValue}
+      styles={styles}
+    />
+  );
+};
+
+export default Combo;
diff --git a/src/components/Combo/Combo.scss b/src/components/Combo/Combo.scss
@@ -0,0 +1,4 @@
+.default {
+  width: 100px;
+  height: 50px;
+}
diff --git a/src/components/CommonStep/CommonStep.jsx b/src/components/CommonStep/CommonStep.jsx
@@ -0,0 +1,111 @@
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./CommonStep.scss";
+import { Edit } from "../../components";
+
+const cx = classNames.bind(styles);
+
+const Div = ({ title, detail }) => {
+  return (
+    <div className={cx("common-container")}>
+      <div className={cx("common-container-header")}>
+        <span className={cx("step-1")}>
+          <span className={cx("step")}>STEP1</span>
+        </span>
+
+        <span className={cx("step-2")}>
+          <span className={cx("step")}>STEP2</span>
+        </span>
+
+        <span className={cx("step-3")}>
+          <span className={cx("step")}>STEP3</span>
+        </span>
+
+        <span className={cx("save")}>저장하기</span>
+      </div>
+
+      <div className={cx("common-container-body")}>
+        <div className={cx("common-content")}>
+          <div className={cx("common-content-left")}>
+            <span className={cx("common-container-title")}>{title}</span>
+
+            <span className={cx("common-container-detail")}>
+              <span className={cx("common-container-contour")}></span>
+              {detail}
+            </span>
+          </div>
+        </div>
+
+        <div className={cx("common-content-middle")}>
+          <span className={cx("common-container-cup")}></span>
+        </div>
+
+        <div className={cx("common-container-step1 show")}>
+          <div className={cx("step1-container")}>
+            <span className={cx("title")}>CHOOSE CUP</span>
+
+            <div className={cx("cup-select-container")}>
+              <span className={cx("cup-item1")}></span>
+              <span className={cx("cup-item2")}></span>
+              <span className={cx("cup-item3")}></span>
+              <span className={cx("cup-item4")}></span>
+              <span className={cx("cup-item5")}></span>
+            </div>
+
+            <span className={cx("information")}>INFORMATION</span>
+
+            <div className={cx("descripe")}>
+              <span>레시피 이름</span>
+
+              <Edit
+                className={cx("recipe-name")}
+                placeholder="레시피 이름"
+              />
+            </div>
+
+            <div className={cx("descripe")}>
+              <span>한줄 설명</span>
+
+              <Edit
+                className={cx("recipe-descripe")}
+                placeholder="레시피 이름"
+              />
+            </div>
+
+            <div className={cx("descripe")}>
+              <span>도수</span>
+
+              <ul className={cx("alcohol")}>
+                <li className={cx("alcohol-item1")}></li>
+                <li className={cx("alcohol-item2")}></li>
+                <li className={cx("alcohol-item3")}></li>
+                <li className={cx("alcohol-item4")}></li>
+                <li className={cx("alcohol-item5")}></li>
+              </ul>
+            </div>
+
+            <div className={cx("descripe")}>
+              <span>태그</span>
+
+              <Edit
+                className={cx("recipe-tag")}
+                placeholder="#태그명"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className={cx("common-container-step2 close")}>
+          hello
+        </div>
+
+        <div className={cx("common-container-step3 close")}>
+          hello
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Div;
+
diff --git a/src/components/CommonStep/CommonStep.scss b/src/components/CommonStep/CommonStep.scss
@@ -0,0 +1,3 @@
+.div {
+  background: blue;
+}
diff --git a/src/components/Div/Div.jsx b/src/components/Div/Div.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./Div.scss";
+
+const cx = classNames.bind(styles);
+
+const Div = ({ className, content, onClick }) => {
+  return (
+    <div className={cx(className)} onClick={onClick}>
+      {content}
+    </div>
+  );
+};
+
+export default Div;
diff --git a/src/components/Div/Div.scss b/src/components/Div/Div.scss
@@ -0,0 +1,3 @@
+.div {
+  background: blue;
+}
diff --git a/src/components/Edit/Edit.jsx b/src/components/Edit/Edit.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./Edit.scss";
+
+const cx = classNames.bind(styles);
+
+const Edit = ({ className, value, type = "text", placeholder }) => {
+  return (
+    <input
+      className={cx(className)}
+      value={value}
+      type={type}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export default Edit;
diff --git a/src/components/Edit/Edit.scss b/src/components/Edit/Edit.scss
@@ -0,0 +1,6 @@
+$bg-color: green;
+.edit {
+  width: 130px;
+  height: 20px;
+  color: $bg-color;
+}
diff --git a/src/components/Popup/Popup.jsx b/src/components/Popup/Popup.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./Popup.scss";
+import Div from "../Div/Div";
+
+const cx = classNames.bind(styles);
+
+/**
+ * @author AnGwangHo
+ * @description 팝업 Div
+ * @param id Block되는 Div ID
+ * @param className Popup창 style(default : innercontainer)
+ * @param content Popup창에 표시할 Tags
+ * @param onClick Block된 Div의 Onclick 함수
+ */
+const Popup = ({ id, className = "innercontainer", content, onClick }) => {
+  return (
+    <div id={id} className={styles.popup} onClick={onClick}>
+      <Div
+        id={id + "_innercontainer"}
+        className={cx(className)}
+        content={content}
+      />
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
@@ -0,0 +1,21 @@
+.popup {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  .innercontainer {
+    position: absolute;
+    left: 25%;
+    right: 25%;
+    top: 25%;
+    bottom: 25%;
+    margin: auto;
+    background: white;
+  }
+}
diff --git a/src/components/SearchResultItem/SearchResultItem.jsx b/src/components/SearchResultItem/SearchResultItem.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./SearchResultItem.scss";
+
+const cx = classNames.bind(styles);
+
+/**
+ * @author AnGwangHo
+ * @description 한개의 칵테일 검색결과를 보여준다
+ * @param props object형태의 칵테일 정보 {no, Image, name}
+ */
+const SearchResultItem = ({ className, props }) => {
+  const { no, Image, name } = props;
+
+  return (
+    <div className={cx(className, { image_container: !className })}>
+      <img className={cx("item_img")} src={Image} alt="사진" />
+      <div className={cx("information_rect")}>
+        <div className={cx("cocktailName")}>{name}</div>
+        <div className={cx("bottom")}>
+          <div className={cx("userName")}>{name}</div>
+          <div className={cx("right")}>
+            <div className={cx("like")} />
+            <div className={cx("number")}>123</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchResultItem;