-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[2단계 - 행운의 로또미션] 하루(김하루) 미션 제출합니다. (#58)
* refactor: NDigitBall -> Ball 로 컴포넌트 수정 * style: 구문이 짧은 객체 직렬화해서 표현 * fix: CSS 스타일 적용되지 않는 문제 해결 * feat: Title 컴포넌트 추가 * chore: eslint config 변경 cspell config 추가 * fix: <p> 태그 하위에 <div> 태그 위치해서 발생하는 에러해결 * feat: <Animation /> 함수 컴포넌트로 변경 * feat: <Ball /> 함수 컴포넌트로 변경 * feat: <Button /> 함수 컴포넌트로 변경 * feat: <LottoBall /> 함수 컴포넌트로 변경 * feat: <Record /> 함수 컴포넌트로 변경 * feat: <Title /> 함수 컴포넌트로 변경 * feat: <ToggleButton /> 함수 컴포넌트로 변경 * feat: <Xbutton /> 함수 컴포넌트로 변경 * fix: 구매금액 10억 입력 시 앱이 정지하는 문제 해결 * feat: <App /> 함수 컴포넌트로 변경 * feat: <PurchaseForm /> 함수 컴포넌트로 변경 * feat: <UserLotto /> 함수 컴포넌트로 변경 * feat: <WinningNumbers /> 함수 컴포넌트로 변경 * feat: <UserResult /> 함수 컴포넌트로 변경 * feat: Dimmed 영역 클릭 시 모달 닫기 기능 추가 * refactor: proptypes 지정 * docs: 구현 기능 목록 업데이트 * chore: import 문 추가 * refactor: padStart 메서드 적용 * refactor: 남아있는 클래스 컴포넌트 함수 컴포넌트로 변경 * refactor: 구체적인 PropTypes 지정 * refactor: 불필요한 Type Casting 제거 * refactor: 공통 컴포넌트 props로 className, ...rest 추가 * feat: ToggleButton 컴포넌트 Controlled로 작성 * refactor: 공통 Modal 컴포넌트 분리 * refactor: 공통 Table 컴포넌트 분리 * refactor: Button 컴포넌트 attributes 추가 * refactor: input, button 요소의 disabled 속성 선언적으로 관리 * refactor: useToggleButton 커스텀 훅 추가 * fix: propTypes 콘솔 에러 수정, default parameter 지정 * refactor: useLoading 커스텀훅 추가 * refactor: useModal 커스텀훅 추가 * fix: 함수컴포넌트에서 createRef -> useRef 로 변경 * refactor: Title 컴포넌트 PropTypes 상세화 * refactor: UserResultTable.js를 index.js로 통합 변경 * refactor: import 문 수정, ref변수명 변경
- Loading branch information
Showing
42 changed files
with
1,104 additions
and
659 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "version": "0.1", | ||
| "language": "en", | ||
| "words": [ | ||
| "theads", | ||
| "noninteractive", | ||
| "labelledby", | ||
| "describedby", | ||
| "semistandard", | ||
| "noopener", | ||
| "noreferrer", | ||
| "Viewports", | ||
| "Parens", | ||
| "Strapi", | ||
| "classname", | ||
| "browserslist" | ||
| ], | ||
| "flagWords": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,71 @@ | ||
| /* eslint-disable react/sort-comp */ | ||
| import { Component } from 'react'; | ||
| import PurchaseForm from '../containers/PurchaseForm'; | ||
| import UserLotto from '../containers/UserLotto'; | ||
| import WinningNumbers from '../containers/WinningNumbers'; | ||
| import UserResult from '../containers/UserResult'; | ||
| import { createLotto } from './service'; | ||
| import React, { useState } from 'react'; | ||
| import { PurchaseForm } from '../containers/PurchaseForm'; | ||
| import { UserLotto } from '../containers/UserLotto'; | ||
| import { WinningNumbers } from '../containers/WinningNumbers'; | ||
| import { UserResult } from '../containers/UserResult'; | ||
| import { Title } from '../shared'; | ||
| import { useModal } from '../../hooks'; | ||
| import './style.css'; | ||
|
|
||
| const initialState = { | ||
| lottoBundle: [], | ||
| winningNumber: {}, | ||
| shouldReset: false, | ||
| isShowingUserResult: false, | ||
| }; | ||
| export default class App extends Component { | ||
| constructor() { | ||
| super(); | ||
|
|
||
| this.state = { ...initialState }; | ||
| this.onPurchaseLotto = this.onPurchaseLotto.bind(this); | ||
| this.setWinningNumber = this.setWinningNumber.bind(this); | ||
| this.onShowUserResult = this.onShowUserResult.bind(this); | ||
| this.onCloseUserResult = this.onCloseUserResult.bind(this); | ||
| this.onReset = this.onReset.bind(this); | ||
| this.didReset = this.didReset.bind(this); | ||
| } | ||
| export const App = () => { | ||
| const [lottoBundle, setLottoBundle] = useState(initialState.lottoBundle); | ||
| const isPurchased = lottoBundle.length > 0; | ||
| const [winningNumber, setWinningNumber] = useState(initialState.winningNumber); | ||
| const [shouldReset, setShouldReset] = useState(initialState.shouldReset); | ||
| const { | ||
| isOpen: isUserResultOpen, | ||
| open: showUserResult, | ||
| close: hideUserResult, | ||
| ...restUseModal | ||
| } = useModal(); | ||
|
|
||
| onPurchaseLotto({ numOfLotto }) { | ||
| this.setState({ lottoBundle: [...Array(numOfLotto)].map(() => createLotto()) }); | ||
| } | ||
| const onReset = () => { | ||
| setLottoBundle(initialState.lottoBundle); | ||
| setWinningNumber(initialState.winningNumber); | ||
| hideUserResult(); | ||
| setShouldReset(true); | ||
| }; | ||
|
|
||
| setWinningNumber({ winningNumber }) { | ||
| this.setState({ winningNumber }); | ||
| } | ||
| const finishReset = () => { | ||
| setShouldReset(false); | ||
| }; | ||
|
|
||
| onShowUserResult() { | ||
| this.setState({ isShowingUserResult: true }); | ||
| } | ||
|
|
||
| onCloseUserResult() { | ||
| this.setState({ isShowingUserResult: false }); | ||
| } | ||
|
|
||
| onReset() { | ||
| this.setState({ ...initialState, shouldReset: true }); | ||
| } | ||
|
|
||
| didReset() { | ||
| this.setState({ shouldReset: false }); | ||
| } | ||
|
|
||
| render() { | ||
| const { lottoBundle, winningNumber, isShowingUserResult, shouldReset } = this.state; | ||
| const isPurchased = Boolean(lottoBundle.length); | ||
|
|
||
| return ( | ||
| <> | ||
| <main className="App__main"> | ||
| <h1 className="App__title">행운의 로또</h1> | ||
| <PurchaseForm | ||
| lottoBundle={lottoBundle} | ||
| onPurchaseLotto={this.onPurchaseLotto} | ||
| shouldReset={shouldReset} | ||
| didReset={this.didReset} | ||
| /> | ||
| {isPurchased && ( | ||
| <> | ||
| <UserLotto lottoBundle={this.state.lottoBundle} /> | ||
| <WinningNumbers | ||
| setWinningNumber={this.setWinningNumber} | ||
| onShowUserResult={this.onShowUserResult} | ||
| /> | ||
| </> | ||
| )} | ||
| </main> | ||
| {isShowingUserResult && ( | ||
| <UserResult | ||
| lottoBundle={lottoBundle} | ||
| winningNumber={winningNumber} | ||
| onCloseUserResult={this.onCloseUserResult} | ||
| onReset={this.onReset} | ||
| /> | ||
| return ( | ||
| <> | ||
| <main className="App__main"> | ||
| <Title as="h1" size="medium"> | ||
| 행운의 로또 | ||
| </Title> | ||
| <PurchaseForm | ||
| setLottoBundle={setLottoBundle} | ||
| shouldReset={shouldReset} | ||
| finishReset={finishReset} | ||
| /> | ||
| {isPurchased && ( | ||
| <> | ||
| <UserLotto lottoBundle={lottoBundle} /> | ||
| <WinningNumbers | ||
| winningNumber={winningNumber} | ||
| setWinningNumber={setWinningNumber} | ||
| onShowUserResult={showUserResult} | ||
| /> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
| </main> | ||
| {isUserResultOpen && ( | ||
| <UserResult | ||
| restUseModal={{ hideUserResult, ...restUseModal }} | ||
| lottoBundle={lottoBundle} | ||
| winningNumber={winningNumber} | ||
| onReset={onReset} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.