Connected react router

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)`

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) => (

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 => <Input simple {...props} />
 
@@ -37,7 +37,8 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
     <Form onSubmit={handleSubmit}>
       <Block>
         <FieldWithLabel label="결제 내용" name="forWhat" type="text" component={SimpleInput} required />
-        <FieldWithLabel label="결제자" name="fromWho" component={Select}>
+        <FieldWithLabel label="결제자" name="fromWho" component={Select} required>
+          <option selected value="">-- 멤버 목록 --</option>
           {members.map(
             ({ membername }) => (
               <option key={membername} value={membername}>
@@ -70,9 +71,13 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
         )}
       </Block>
       <Block direction="row">
-        <Button type="button" light horizontal>
-          <Link to={`/room/${room.url}/`}>취소</Link>
-        </Button>
+        <LinkButton
+          type="button" 
+          to={`/room/${room.url}/`}
+          light horizontal
+        >
+            취소
+        </LinkButton>
         <Button type="submit" horizontal>확인</Button>
       </Block>
     </Form>

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 (
     <div>
-      <Header />
+      <Header />      
       <Block transparent>
+        <CopyToClipboard text={window.location.href} onCopy={() => {}}>
+          <Button>링크 복사</Button>
+        </CopyToClipboard>
         <Graph graph={graph} events={events} />
         <SettingButton to={`/room/${room.url}/setting/`} />
       </Block>
@@ -59,6 +63,7 @@ const RoomPage = props => {
         (<PaymentList />) :
         (members && <MemberList />)
       }
+
     </div>
   )
 }

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)