diff --git a/frontend/src/components/atoms/Button/index.js b/frontend/src/components/atoms/Button/index.js index 2b52c9f..e49129e 100644 --- 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 index 3947532..a720ea5 100644 --- a/frontend/src/components/organisms/PaymentForm/index.js +++ b/frontend/src/components/organisms/PaymentForm/index.js @@ -18,7 +18,10 @@ 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 }) => ( {membername}} lower={ @@ -26,20 +29,24 @@ const Credit = ({ member: {membername}, index, ...props }) => ( 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 (
- + {members.map( ({ membername }) => ( - - + + @@ -67,7 +74,7 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
{members.map( (member, index) => ( - + ) )}
diff --git a/frontend/src/components/pages/UserPage/index.js b/frontend/src/components/pages/UserPage/index.js index 53cc95b..ec48d00 100644 --- 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}) => (

{username}

- - - + + 유저 정보 +
새로운 방을 원한다면? diff --git a/frontend/src/containers/PaymentForm.js b/frontend/src/containers/PaymentForm.js index 265e698..e7b0e6d 100644 --- 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 (