Add normalization on PaymentForm

jtjun · Jun 19, 2019 · b565d05 · b565d05
1 parent 270e944
commit b565d05
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 deletions.
diff --git a/frontend/src/components/atoms/Button/index.js b/frontend/src/components/atoms/Button/index.js
@@ -13,17 +13,25 @@ const Button = styled.button`
   font-size: 1em;
   margin: ${({ horizontal }) => horizontal ? "0 0.5em" : "0.5em auto 0"};
   padding: 4px 15px;
-  width: 100%;
+  width: ${({ width }) => width};
   max-width: 224px;
   z-index: 1;
 
   :disabled {
     background-color: lightgrey;
     color: grey;
-    cursor: none;
+    cursor: default;
   }
 `
 
+Button.defaultProps = {
+  width: '100%',
+}
+
+Button.propTypes = {
+  width: PropTypes.string.isRequired,
+}
+
 const LightButton = styled(Button)`
   background: white;
   color: black;

diff --git a/frontend/src/components/organisms/PaymentForm/index.js b/frontend/src/components/organisms/PaymentForm/index.js
@@ -18,28 +18,35 @@ const TinyInput = styled(SimpleInput)`
   margin: 0;
 `
 
-const Credit = ({ member: {membername}, index, ...props }) => (
+const natural = value => value && Math.max(Math.round(value), 0)
+const lessThan = x => (value => value && Math.min(natural(value), x))
+
+const Credit = ({ total, member: {membername}, index, ...props }) => (
   <TwoLineBlock
     upper={<Label>{membername}</Label>}
     lower={
       <Field
         name={`credits[${index}].amount`}
         type="number"
         parse={value => value && Number(value)}
+        normalize={lessThan(total)}
         component={TinyInput}
       />
     }
   />
 )
 
-const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total, nBbang, ...rest }) => {
-  const { disabled } = rest
+const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total, ...rest }) => {
+  const {
+    disabled,
+    set1OverN, setRandom,  // setter callback
+  } = rest
   return (
     <Form onSubmit={handleSubmit}>
       <Block>
         <FieldWithLabel label="결제 내용" name="forWhat" type="text" component={SimpleInput} required />
         <FieldWithLabel label="결제자" name="fromWho" component={Select} required>
-          <option selected value="">-- 멤버 목록 --</option>
+          <option value="">-- 멤버 목록 --</option>
           {members.map(
             ({ membername }) => (
               <option key={membername} value={membername}>
@@ -52,22 +59,22 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
           label="결제 금액"
           name="total"
           type="number"
-          parse={value => value && Number(value)}
+          normalize={natural}
           required
           component={SimpleInput}
         />
       </Block>
       <Block direction="row">
-        <Button type="button" onClick={() => nBbang(total, members)} light horizontal>N빵</Button>
-        <Button type="button" light horizontal>랜덤</Button>
+        <Button type="button" onClick={() => set1OverN(total, members)} light horizontal>N빵</Button>
+        <Button type="button" onClick={() => setRandom(total, members)} light horizontal>랜덤</Button>
         <Button type="button" light horizontal>각자</Button>
       </Block>
       <Block>
         남은 돈 ({amountLeft})
         <hr />
         {members.map(
           (member, index) => (
-            <Credit key={index} index={index} member={member} />
+            <Credit key={index} index={index} member={member} total={total} />
           )
         )}
       </Block>

diff --git a/frontend/src/components/pages/UserPage/index.js b/frontend/src/components/pages/UserPage/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 
-import { Block, Button, Header, List, ListItem } from 'components'
+import { Block, Button, Header, List, LinkButton, ListItem } from 'components'
 
 /**
  * Presentational Components의 경우 redux 로직을 배제한다 (cf. pages/MainPage/index.js)
@@ -13,9 +13,9 @@ const UserPage = ({username, roomList, onClickUserInfo, onClickSignOut}) => (
     <Header />
     <Block transparent>
       <h1>{username}</h1>
-      <Link to="/user/setting/">
-        <button onClick={onClickUserInfo}>유저 정보</button>
-      </Link>
+      <LinkButton to="/user/setting/" onClick={onClickUserInfo} width="auto">
+        유저 정보
+      </LinkButton>
     </Block>
     <Block>
       새로운 방을 원한다면?

diff --git a/frontend/src/containers/PaymentForm.js b/frontend/src/containers/PaymentForm.js
@@ -45,13 +45,22 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  nBbang(total, members) {
-    const amount = total / members.length
+  set1OverN(total, members) {
+    const amount = Math.floor(total / members.length)
     members.forEach(
       (m, index) => 
       dispatch(change(FORM_NAME, `credits[${index}].amount`, amount))
     )
-  }
+  },
+  setRandom(total, members) {
+    const rand = members.map(() => Math.random())
+    const sum = rand.reduce((a, b) => (a + b), 0)
+
+    rand.map(x => Math.floor(total * x / sum)).forEach(
+      (r, index) =>
+      dispatch(change(FORM_NAME, `credits[${index}].amount`, r))
+    )
+  },
 })
 
 const PaymentFormContainer = ({payment, ...props}) => {
@@ -68,8 +77,6 @@ const PaymentFormContainer = ({payment, ...props}) => {
     }
   )
 
-  console.log(initialValues)
-
   return (
     <PaymentReduxForm
       disabled={!!payment}