level1 - 행운의 로또
자바스크립트로 구현 하는 로또 어플리케이션
🔥 Projects!
🧶데모 사이트
🎯 step1 구입 기능
- 로또 구입 금액을 입력하면, 금액에 해당하는 로또를 발급해야 한다.
- 로또 1장의 가격은 1,000원이다.
- 소비자는 자동 구매를 할 수 있어야 한다.
- 복권 번호는 번호보기 토글 버튼을 클릭하면, 볼 수 있어야 한다.
🎯🎯 step2 당첨 결과 기능
- 결과 확인하기 버튼을 누르면 당첨 통계, 수익률을 모달로 확인할 수 있다.
- 로또 당첨 금액은 고정되어 있는 것으로 가정한다.
- 다시 시작하기 버튼을 누르면 초기화 되서 다시 구매를 시작할 수 있다.
🎯🎯🎯 step3 수동 구매
- 소비자는 수동 구매(스스로 구매 번호를 입력)를 할 수 있어야 한다.
- 수동 구매를 위한 input UI는 스스로 구현한다.
- 수동 구매 후 남는 금액이 있다면 자동으로 구매할 수 있어야 한다.
- 위 기능들이 정상적으로 동작하는지 Cypress를 이용해 테스트한다.
💾 기능 목록
step1
- 로또 구입 금액을 인풋으로 받는다.
- 단위 금액 placeholder 표시 (단위 금액은 1000원으로 한다.)
- 단위 금액으로 나누어지지 않을 경우 에러 핸들링
- 금액을 단위 금액으로 나눈 만큼 로또를 발급한다.
- 로또 번호는 1 ~ 45
- 하나의 로또 안에서 각각의 번호는 중복되면 안된다.
- 발급된 로또는 화면에 렌더링한다.
- 토글 버튼을 눌렀을 때 로또 섹션의 레이아웃이 바뀌고 번호가 보인다.
- css를 이용해 레이아웃과 디스플레이를 수정한다.
step2
- 당첨번호와 보너스 번호를 인풋으로 받는다.
- 당첨번호와 보너스 번호는 중복되서는 안된다.
- 당첨번호와 보너스 번호는 1 ~ 45
- 결과 확인하기 버튼을 눌렀을 때의 다음과 같은 기능을 수행한다.
- 당첨번호와 보너스 번호의 유효성을 검사한다.
- 구입한 로또 번호와 일치하는 당첨번호의 개수를 확인한다.
- 당첨금액을 합산하여 수익률을 계산한다.
- 당첨 통계, 수익률을 확인할 수 있는 모달을 띄운다.
- 다시 시작하기 버튼을 클릭한 경우 초기화 한다.
step3
- 자동/수동 구매를 토글로 구분한다.
- 자동 구매 시 구입 장수를 입력받는다.
- 수동 구매 시 로또 번호를 입력받는다.
- 남은 금액으로 구매할 수 있는 만큼만 구매 가능하다.
- 로또 구매 시 남은 잔액을 알려준다.
- 로또 번호 표시 시 구입한 로또의 발급 방법(자동/수동)을 출력한다.
- 결과 확인버튼을 누를 때 남은 잔액이 있을 시 confirm 창을 띄워 자동 구매를 진행한다.
테스트 케이스
- 구입 금액은 단위 금액의 양의 배수 값을 갖는다.
- 몫은 양의 정수값, 나머지는 0인 값을 받는다.
- 자동, 수동 토글 버튼이 정상적으로 동작하는지 확인한다.
- 수동 구매 시 로또 번호를 입력받는다.
- 중복된 숫자를 입력받지 않는다.
- 1 ~ 45의 숫자를 입력 받는다.
- 공백이 있으면 안된다.
- 로또 구매 시 남은 잔액이 정상적으로 뜨는지 확인한다.
- 구매 개수만큼 로또 이미지를 렌더링한다.
- 토글 버튼을 클릭했을 때, 모든 복권의 종류와 번호를 렌더링한다.
- 적절한 당첨 번호를 입력 받는다.
- 중복된 숫자를 입력받지 않는다.
- 1 ~ 45의 숫자를 입력 받는다.
- 공백이 있으면 안된다.
- 결과 확인버튼을 누를 때 남은 잔액이 있을 시 confirm 창을 띄워 자동 구매를 진행한다.
- 결과 확인하기 버튼을 누르면 모달을 확인할 수 있다.
- 당첨 통계가 정확한지 확인한다.
- 다시 시작하기 버튼을 누르면 초기화 된다.