diff --git a/frontend/src/components/atoms/Button/index.js b/frontend/src/components/atoms/Button/index.js index 280fcd6..456933c 100644 --- a/frontend/src/components/atoms/Button/index.js +++ b/frontend/src/components/atoms/Button/index.js @@ -15,6 +15,7 @@ const Button = styled.button` padding: 4px 15px; width: 100%; max-width: 224px; + z-index: 1; ` const LightButton = styled(Button)` diff --git a/frontend/src/components/atoms/Header/index.js b/frontend/src/components/atoms/Header/index.js index 1c6ddca..6dd83d8 100644 --- a/frontend/src/components/atoms/Header/index.js +++ b/frontend/src/components/atoms/Header/index.js @@ -10,6 +10,7 @@ const Wrapper = styled.div` position: fixed; top: 0; width: 100%; + z-index: 2; ` const Header = (props) => ( diff --git a/frontend/src/components/organisms/PaymentForm/index.js b/frontend/src/components/organisms/PaymentForm/index.js index 2e54a8a..8d43ce8 100644 --- a/frontend/src/components/organisms/PaymentForm/index.js +++ b/frontend/src/components/organisms/PaymentForm/index.js @@ -4,7 +4,7 @@ import styled from 'styled-components' import { Link, } from 'react-router-dom' import { Form, Field, } from 'redux-form' -import { Block, Button, FieldWithLabel, Input, Select, TwoLineBlock, } from 'components' +import { Block, Button, FieldWithLabel, Input, LinkButton, Select, TwoLineBlock, } from 'components' const SimpleInput = props => @@ -37,7 +37,8 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
- + + {members.map( ({ membername }) => ( - + + 취소 +
diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js index 1762e0a..ffd7a02 100644 --- a/frontend/src/components/pages/RoomPage/index.js +++ b/frontend/src/components/pages/RoomPage/index.js @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' +import { CopyToClipboard } from 'react-copy-to-clipboard' import { Block, Button, Graph, List, LinkButton, ListItem, Header } from 'components' import { MemberList, PaymentList } from 'containers' @@ -47,8 +48,11 @@ const RoomPage = props => { return (
-
+
+ {}}> + + @@ -59,6 +63,7 @@ const RoomPage = props => { () : (members && ) } +
) } diff --git a/frontend/src/containers/PaymentForm.js b/frontend/src/containers/PaymentForm.js index 4475d23..9c7dde4 100644 --- a/frontend/src/containers/PaymentForm.js +++ b/frontend/src/containers/PaymentForm.js @@ -1,6 +1,7 @@ import React from 'react' import { connect } from 'react-redux' -import { reduxForm, formValueSelector, change } from 'redux-form' +import { toastr } from 'react-redux-toastr' +import { reduxForm, formValueSelector, change, SubmissionError } from 'redux-form' import { PaymentForm } from 'components' import { paymentCreateRequest } from 'store/actions' @@ -11,6 +12,18 @@ const PaymentReduxForm = reduxForm({ form: FORM_NAME, onSubmit(values, dispatch) { const { room, ...payment } = values + const validationError = message => { + toastr.light( + "결제 추가 오류", message, + { icon: 'error', status: 'error' } + ) + throw new SubmissionError({ _error: message}) + } + + if (payment.total !== payment.credits.map(c => c.amount).reduce((a,b)=>(a+b),0)) { + validationError("남은 돈이 0이 아닙니다!") + } + dispatch(paymentCreateRequest(room, payment)) } })(PaymentForm)