From 6dcebf68db12aa4c4eb5ade38ddfd6faa0fdb4f0 Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Sun, 17 Mar 2019 22:52:00 +0900 Subject: [PATCH 1/7] =?UTF-8?q?#2=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/=ED=9A=8C?= =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20See:=20Github=20issue=20?= =?UTF-8?q?#2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - componetst 생성(Div, Edit, Popup) - Button 수정 : 정적으로 생성되도록 수정 - containers에 LoginPopup추가 --- package-lock.json | 231 +++++++++++++++++----- package.json | 5 +- public/index.html | 1 - src/App.js | 3 +- src/components/Button/Button.jsx | 25 +-- src/components/Div/Div.jsx | 15 ++ src/components/Div/Div.scss | 3 + src/components/Edit/Edit.jsx | 18 ++ src/components/Edit/Edit.scss | 6 + src/components/Popup/Popup.jsx | 28 +++ src/components/Popup/Popup.scss | 20 ++ src/components/index.js | 5 +- src/containers/LoginPopup/LoginPopup.jsx | 118 +++++++++++ src/containers/LoginPopup/LoginPopup.scss | 18 ++ src/containers/MainView/MainView.jsx | 25 ++- src/containers/MainView/MainView.scss | 8 +- src/containers/index.js | 3 +- 17 files changed, 460 insertions(+), 72 deletions(-) create mode 100644 src/components/Div/Div.jsx create mode 100644 src/components/Div/Div.scss create mode 100644 src/components/Edit/Edit.jsx create mode 100644 src/components/Edit/Edit.scss create mode 100644 src/components/Popup/Popup.jsx create mode 100644 src/components/Popup/Popup.scss create mode 100644 src/containers/LoginPopup/LoginPopup.jsx create mode 100644 src/containers/LoginPopup/LoginPopup.scss diff --git a/package-lock.json b/package-lock.json index 718d9f5..f6791a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3481,6 +3481,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3978,22 +3983,30 @@ } }, "css-loader": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", - "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.1.tgz", + "integrity": "sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w==", + "dev": true, "requires": { - "babel-code-frame": "^6.26.0", - "css-selector-tokenizer": "^0.7.0", - "icss-utils": "^2.1.0", - "loader-utils": "^1.0.2", - "lodash.camelcase": "^4.3.0", - "postcss": "^6.0.23", - "postcss-modules-extract-imports": "^1.2.0", - "postcss-modules-local-by-default": "^1.2.0", - "postcss-modules-scope": "^1.1.0", - "postcss-modules-values": "^1.3.0", + "camelcase": "^5.2.0", + "icss-utils": "^4.1.0", + "loader-utils": "^1.2.3", + "normalize-path": "^3.0.0", + "postcss": "^7.0.14", + "postcss-modules-extract-imports": "^2.0.0", + "postcss-modules-local-by-default": "^2.0.6", + "postcss-modules-scope": "^2.1.0", + "postcss-modules-values": "^2.0.0", "postcss-value-parser": "^3.3.0", - "source-list-map": "^2.0.0" + "schema-utils": "^1.0.0" + }, + "dependencies": { + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + } } }, "css-prefers-color-scheme": { @@ -4055,6 +4068,11 @@ "regexpu-core": "^1.0.0" }, "dependencies": { + "cssesc": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", + "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=" + }, "jsesc": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", @@ -4115,9 +4133,10 @@ "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==" }, "cssesc": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", - "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true }, "cssnano": { "version": "4.1.10", @@ -7664,11 +7683,12 @@ "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=" }, "icss-utils": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz", - "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.0.tgz", + "integrity": "sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ==", + "dev": true, "requires": { - "postcss": "^6.0.1" + "postcss": "^7.0.14" } }, "identity-obj-proxy": { @@ -10393,19 +10413,30 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "version": "7.0.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", + "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", + "dev": true, "requires": { - "chalk": "^2.4.1", + "chalk": "^2.4.2", "source-map": "^0.6.1", - "supports-color": "^5.4.0" + "supports-color": "^6.1.0" }, "dependencies": { "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } } } }, @@ -11697,38 +11728,69 @@ } }, "postcss-modules-extract-imports": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz", - "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", + "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==", + "dev": true, "requires": { - "postcss": "^6.0.1" + "postcss": "^7.0.5" } }, "postcss-modules-local-by-default": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz", - "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz", + "integrity": "sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA==", + "dev": true, "requires": { - "css-selector-tokenizer": "^0.7.0", - "postcss": "^6.0.1" + "postcss": "^7.0.6", + "postcss-selector-parser": "^6.0.0", + "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", + "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } } }, "postcss-modules-scope": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz", - "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz", + "integrity": "sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==", + "dev": true, "requires": { - "css-selector-tokenizer": "^0.7.0", - "postcss": "^6.0.1" + "postcss": "^7.0.6", + "postcss-selector-parser": "^6.0.0" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", + "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } } }, "postcss-modules-values": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz", - "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz", + "integrity": "sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==", + "dev": true, "requires": { "icss-replace-symbols": "^1.1.0", - "postcss": "^6.0.1" + "postcss": "^7.0.6" } }, "postcss-nesting": { @@ -13179,6 +13241,85 @@ "webpack-dev-server": "3.1.14", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "3.6.3" + }, + "dependencies": { + "css-loader": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", + "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==", + "requires": { + "babel-code-frame": "^6.26.0", + "css-selector-tokenizer": "^0.7.0", + "icss-utils": "^2.1.0", + "loader-utils": "^1.0.2", + "lodash.camelcase": "^4.3.0", + "postcss": "^6.0.23", + "postcss-modules-extract-imports": "^1.2.0", + "postcss-modules-local-by-default": "^1.2.0", + "postcss-modules-scope": "^1.1.0", + "postcss-modules-values": "^1.3.0", + "postcss-value-parser": "^3.3.0", + "source-list-map": "^2.0.0" + } + }, + "icss-utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz", + "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=", + "requires": { + "postcss": "^6.0.1" + } + }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "postcss-modules-extract-imports": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz", + "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==", + "requires": { + "postcss": "^6.0.1" + } + }, + "postcss-modules-local-by-default": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz", + "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=", + "requires": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" + } + }, + "postcss-modules-scope": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz", + "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=", + "requires": { + "css-selector-tokenizer": "^0.7.0", + "postcss": "^6.0.1" + } + }, + "postcss-modules-values": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz", + "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=", + "requires": { + "icss-replace-symbols": "^1.1.0", + "postcss": "^6.0.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } } }, "read-pkg": { diff --git a/package.json b/package.json index 72feefc..dfbccd5 100644 --- a/package.json +++ b/package.json @@ -30,5 +30,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 index 40ecf65..4fc83d1 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,6 @@ DrinkMe -
diff --git a/src/App.js b/src/App.js index 1a424cd..e40f1c4 100644 --- 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 } from "./containers"; +import { MainView, LoginPopup } from "./containers"; const mapStateToProps = state => { return {}; @@ -14,6 +14,7 @@ class App extends Component {
+
); diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 08f7332..6ff9c56 100644 --- 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.defaultProps = defaultProps; -Button.propTypes = propTypes; +const Button = ({ className, value, onClick }) => { + return ( + + ); +}; export default Button; diff --git a/src/components/Div/Div.jsx b/src/components/Div/Div.jsx new file mode 100644 index 0000000..c9b384f --- /dev/null +++ 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 ( +
+ {content} +
+ ); +}; + +export default Div; diff --git a/src/components/Div/Div.scss b/src/components/Div/Div.scss new file mode 100644 index 0000000..a723abf --- /dev/null +++ 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 new file mode 100644 index 0000000..801eca0 --- /dev/null +++ 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 ( + + ); +}; + +export default Edit; diff --git a/src/components/Edit/Edit.scss b/src/components/Edit/Edit.scss new file mode 100644 index 0000000..bd2b6d9 --- /dev/null +++ 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 new file mode 100644 index 0000000..e255784 --- /dev/null +++ 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 ( +
+
+
+ ); +}; + +export default Popup; diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss new file mode 100644 index 0000000..9c26028 --- /dev/null +++ b/src/components/Popup/Popup.scss @@ -0,0 +1,20 @@ +.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); + .innercontainer { + position: absolute; + left: 25%; + right: 25%; + top: 25%; + bottom: 25%; + margin: auto; + background: white; + } +} diff --git a/src/components/index.js b/src/components/index.js index cd8b4e6..26a5d5e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,6 @@ import Button from "./Button/Button"; +import Div from "./Div/Div"; +import Edit from "./Edit/Edit"; +import Popup from "./Popup/Popup"; -export { Button }; +export { Button, Div, Edit, Popup }; diff --git a/src/containers/LoginPopup/LoginPopup.jsx b/src/containers/LoginPopup/LoginPopup.jsx new file mode 100644 index 0000000..3b14f4a --- /dev/null +++ b/src/containers/LoginPopup/LoginPopup.jsx @@ -0,0 +1,118 @@ +import React, { Component } from "react"; +import classNames from "classnames/bind"; +import styles from "./LoginPopup.scss"; +import { connect } from "react-redux"; +import { Button, Div, Edit, Popup } from "../../components"; + +const cx = classNames.bind(styles); + +const mapStateToProps = state => { + return state; +}; + +const mapDispatchToProps = {}; + +/** + * @author AnGwangHo + * @description 로그인/회원가입 페이지 + * @param id 팝업 시 block되는 부분의 ID(팝업 닫기 위해 설정) + * @param onClick block되는 부분 onClick 함수 + */ +class LoginPopup extends Component { + state = { + bShowLogin: true, //로그인 폼 보여주는지 여부 + bShowRegister: false //회원가입 폼 보여주는 지 여부 + }; + + /** + * Event + * 로그인, 회원가입 + */ + onShowRegister = event => { + this.setState({ bShowLogin: false, bShowRegister: true }); + }; + + onShowLogin = event => { + this.setState({ bShowLogin: true, bShowRegister: false }); + }; + + /** + * Layout + * 로그인, 회원가입 + * key : List 사용 시 유니크한 값 설정 필요 + */ + login_form = () => { + return [ + , + , +
); } diff --git a/src/containers/MainView/MainView.scss b/src/containers/MainView/MainView.scss index dfe1a2c..4632fb7 100644 --- a/src/containers/MainView/MainView.scss +++ b/src/containers/MainView/MainView.scss @@ -1,6 +1,8 @@ $bg-color: red; .body { - width: 200px; - height: 150px; - color: $bg-color; + margin: 0; + padding: 0; + position: relative; + width: 100%; + height: 100%; } diff --git a/src/containers/index.js b/src/containers/index.js index d9a2afd..24c03d5 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,3 +1,4 @@ import MainView from "./MainView/MainView"; +import LoginPopup from "./LoginPopup/LoginPopup"; -export { MainView }; +export { MainView, LoginPopup }; From ebc2128b42e375e0f5e751dd755b0aaeece6b88b Mon Sep 17 00:00:00 2001 From: AnGwangHo Date: Thu, 21 Mar 2019 21:55:37 +0900 Subject: [PATCH 2/7] =?UTF-8?q?#6=20=EA=B2=80=EC=83=89=20=EB=B2=A0?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EC=84=A0=ED=83=9D=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=9C=20select=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B0=9C=EB=B0=9C=20See:=20Github=20issue=20#6=20-------------?= =?UTF-8?q?--------------------------=20###=20=EC=9E=91=EC=97=85=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20*=20components/index.js=20*=20components/Combo/Comb?= =?UTF-8?q?o.jsx,Combo.scss=20---------------------------------------=20##?= =?UTF-8?q?#=20=EC=9E=91=EC=97=85=EB=82=B4=EC=9A=A9=20*=20react-select?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=BD=A4=EB=B3=B4=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20*=20=EC=9D=B8=EC=9E=90=EB=A1=9C=20item?= =?UTF-8?q?=EC=9D=84=20=EB=B0=B0=EC=97=B4=EB=A1=9C=20=EB=84=98=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 192 +++++++++++++++++++++++++ package.json | 1 + src/components/Combo/Combo.jsx | 19 +++ src/components/Combo/Combo.scss | 4 + src/components/index.js | 3 +- yarn.lock | 239 +++++++++++++++++++++++++++++++- 6 files changed, 450 insertions(+), 8 deletions(-) create mode 100644 src/components/Combo/Combo.jsx create mode 100644 src/components/Combo/Combo.scss diff --git a/package-lock.json b/package-lock.json index f6791a0..f380408 100644 --- a/package-lock.json +++ b/package-lock.json @@ -854,6 +854,62 @@ "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==" }, + "@emotion/babel-utils": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz", + "integrity": "sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==", + "requires": { + "@emotion/hash": "^0.6.6", + "@emotion/memoize": "^0.6.6", + "@emotion/serialize": "^0.9.1", + "convert-source-map": "^1.5.1", + "find-root": "^1.1.0", + "source-map": "^0.7.2" + }, + "dependencies": { + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" + } + } + }, + "@emotion/hash": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", + "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" + }, + "@emotion/memoize": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", + "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==" + }, + "@emotion/serialize": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz", + "integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==", + "requires": { + "@emotion/hash": "^0.6.6", + "@emotion/memoize": "^0.6.6", + "@emotion/unitless": "^0.6.7", + "@emotion/utils": "^0.8.2" + } + }, + "@emotion/stylis": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz", + "integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==" + }, + "@emotion/unitless": { + "version": "0.6.7", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz", + "integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==" + }, + "@emotion/utils": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz", + "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==" + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -2045,6 +2101,25 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "9.2.11", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz", + "integrity": "sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/babel-utils": "^0.6.4", + "@emotion/hash": "^0.6.2", + "@emotion/memoize": "^0.6.1", + "@emotion/stylis": "^0.7.0", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "find-root": "^1.1.0", + "mkdirp": "^0.5.1", + "source-map": "^0.5.7", + "touch": "^2.0.1" + } + }, "babel-plugin-istanbul": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz", @@ -2075,6 +2150,11 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz", "integrity": "sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ==" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -3821,6 +3901,20 @@ "elliptic": "^6.0.0" } }, + "create-emotion": { + "version": "9.2.12", + "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.12.tgz", + "integrity": "sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==", + "requires": { + "@emotion/hash": "^0.6.2", + "@emotion/memoize": "^0.6.1", + "@emotion/stylis": "^0.7.0", + "@emotion/unitless": "^0.6.2", + "csstype": "^2.5.2", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10" + } + }, "create-hash": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", @@ -4316,6 +4410,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz", + "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg==" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -4672,6 +4771,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -4793,6 +4900,15 @@ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, + "emotion": { + "version": "9.2.12", + "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.12.tgz", + "integrity": "sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==", + "requires": { + "babel-plugin-emotion": "^9.2.11", + "create-emotion": "^9.2.12" + } + }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -5900,6 +6016,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", @@ -9306,6 +9427,11 @@ "mimic-fn": "^1.0.0" } }, + "memoize-one": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.0.tgz", + "integrity": "sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -13119,11 +13245,24 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz", "integrity": "sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==" }, + "react-input-autosize": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz", + "integrity": "sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-is": { "version": "16.8.4", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-redux": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz", @@ -13322,6 +13461,31 @@ } } }, + "react-select": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.2.tgz", + "integrity": "sha512-5xFOQ6JJktkY5NTaHrc6x9mKwIjhNIiBkGic1j71uyY+ulFpRFra6f4WKLd9fuCylk4WjLpO5zDhdF4CAcwFzA==", + "requires": { + "classnames": "^2.2.5", + "emotion": "^9.1.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "raf": "^3.4.0", + "react-input-autosize": "^2.2.1", + "react-transition-group": "^2.2.1" + } + }, + "react-transition-group": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.6.1.tgz", + "integrity": "sha512-9DHwCy0aOYEe35frlEN68N9ut/THDQBLnVoQuKTvzF4/s3tk7lqkefCqxK2Nv96fOh6JXk6tQtliygk6tl3bQA==", + "requires": { + "dom-helpers": "^3.3.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -15325,6 +15489,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -15591,6 +15765,24 @@ "hoek": "4.x.x" } }, + "touch": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz", + "integrity": "sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==", + "requires": { + "nopt": "~1.0.10" + }, + "dependencies": { + "nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=", + "requires": { + "abbrev": "1" + } + } + } + }, "tough-cookie": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", diff --git a/package.json b/package.json index dfbccd5..ae411b1 100644 --- 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", diff --git a/src/components/Combo/Combo.jsx b/src/components/Combo/Combo.jsx new file mode 100644 index 0000000..de31805 --- /dev/null +++ b/src/components/Combo/Combo.jsx @@ -0,0 +1,19 @@ +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 }) => { + return ( + ); }; diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss index 9c26028..b2b718f 100644 --- a/src/components/Popup/Popup.scss +++ b/src/components/Popup/Popup.scss @@ -8,6 +8,7 @@ bottom: 0; margin: auto; background-color: rgba(0, 0, 0, 0.5); + z-index: 1; .innercontainer { position: absolute; left: 25%; diff --git a/src/components/SearchResultItem/SearchResultItem.jsx b/src/components/SearchResultItem/SearchResultItem.jsx new file mode 100644 index 0000000..b00d7fb --- /dev/null +++ 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 ( +
+ 사진 +
+
{name}
+
+
{name}
+
+
+
123
+
+
+
+
+ ); +}; + +export default SearchResultItem; diff --git a/src/components/SearchResultItem/SearchResultItem.scss b/src/components/SearchResultItem/SearchResultItem.scss new file mode 100644 index 0000000..482ee23 --- /dev/null +++ b/src/components/SearchResultItem/SearchResultItem.scss @@ -0,0 +1,80 @@ +/*mouseover했을때 나오게*/ +.item_img { + width: inherit; + height: inherit; +} + +.information_rect { + visibility: hidden; + position: absolute; + background-color: lightgray; + + width: 100%; + top: 275px; + left: 50%; + transform: translate(-50%, -50%); + font-size: 15px; + cursor: Default; + + .cocktailName { + font-weight: bold; + font-size: 20px; + width: 300px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + cursor: pointer; + } + + .bottom { + display: flex; + justify-content: space-between; + + .userName { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .right { + display: flex; + .like { + width: 25px; + height: 25px; + background-image: url("../../images/baseline-favorite_border-24px.svg"); + background-repeat: no-repeat; + } + .number { + height: 100%; + text-align: center; + vertical-align: middle; + line-height: 25px; + } + } + } +} +/*사진 밑에 붙는*/ +// .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/components/index.js b/src/components/index.js index 81e7652..764b0e2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,5 +3,6 @@ import Div from "./Div/Div"; import Edit from "./Edit/Edit"; import Popup from "./Popup/Popup"; import Combo from "./Combo/Combo"; +import SearchResultItem from "./SearchResultItem/SearchResultItem"; -export { Button, Div, Edit, Popup, Combo }; +export { Button, Div, Edit, Popup, Combo, SearchResultItem }; diff --git a/src/containers/MainView/MainView.jsx b/src/containers/MainView/MainView.jsx index ef03a2a..1616696 100644 --- a/src/containers/MainView/MainView.jsx +++ b/src/containers/MainView/MainView.jsx @@ -48,11 +48,10 @@ class MainView extends Component { render() { return ( -
-
메인페이지입니다.
+
+ 메인페이지입니다.
- +
도수