const { useState, useReducer } = React


const ACTION_TYPER = {
  deposit: "deposit",
  withdraw: "withdraw"
}


const reducer = (state, action) => {
  switch(action.type) {
    case ACTION_TYPER.deposit:
      return state + action.payload;
    case ACTION_TYPER.withdrae:
      return state - action.payload;
    default:
      return state
  }
  
  return state + action.payload
}

function App() {
  const [number, setNumber] = useState(0)
  const [money, dispatch] = useReducer(reducer, 0)
  
  return (
    <div>
      <h2>곽튜브 은행에 오신것을 환영합니다.</h2>
      <p>잔고 : {money}원</p>
      <input type="number" value={number} onChange={(e) => setNumber(parseInt(e.target.value))} step="1000"/>
      <button onClick={() => {dispatch({type: ACTION_TYPER.deposit, payload: number })}}>예금</button>
      <button onClick={() => {dispatch({type: ACTION_TYPER.withdrae, payload: number })}}>출금</button>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))