Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2단계 - 웹 기반 로또 게임] 윤생(이윤성) 미션 제출합니다. #207

Merged
merged 56 commits into from
Feb 27, 2023
Merged
Show file tree
Hide file tree
Changes from 51 commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
7b152f5
chore: todo 주석 변경
2yunseong Feb 20, 2023
269cb6c
test: 사용자가 입력 위주로 테스트 케이스 작성
2yunseong Feb 20, 2023
0e3a3c6
test: 유효한 로또 숫자인지 판단하는 로직 테스트
2yunseong Feb 20, 2023
3b584d7
fix: static 메서드 호출방법 변경
2yunseong Feb 20, 2023
2258db4
test: 로또 번호 중복, 길이 유효성 테스트 추가
2yunseong Feb 20, 2023
2a569d0
test: LottoRank 테스트 추가
2yunseong Feb 20, 2023
8bb63d6
test: 금액에 따른 로또 수량을 계산 하는 로직 테스트 추가
2yunseong Feb 20, 2023
d879324
feat: 기본 레이아웃 마크업
2yunseong Feb 20, 2023
2a36af9
feat: 모달창 삭제 버튼 이벤트 핸들링
2yunseong Feb 20, 2023
5314e99
refactor: 웹에서 재사용 가능한 로직 분리
2yunseong Feb 20, 2023
890c7ad
feat: 구매한 로또 출력하는 기능 구현
2yunseong Feb 21, 2023
1160561
feat: 결과 버튼 이벤트 핸들링
2yunseong Feb 21, 2023
9f6784a
feat: 재시작 버튼 이벤트 핸들링
2yunseong Feb 21, 2023
b033d49
refactor: 분리가 가능한 DOM 조작 로직 분리
2yunseong Feb 21, 2023
93b2700
fix: html 구조 및 클래스명 수정
2yunseong Feb 21, 2023
6b4f4cb
chore: trivial
2yunseong Feb 21, 2023
9edb2f8
refactor: Lotto 유효성 검증 로직 validation으로 이동
2yunseong Feb 21, 2023
7a34223
test: 로직 이전에 따른 테스트 이전
2yunseong Feb 21, 2023
655c598
refactor: 에러 상수 static에서 일반 상수로 변경
2yunseong Feb 21, 2023
fc1749f
feat: 구입 금액 유효성 검사
2yunseong Feb 21, 2023
d68b2d4
feat: 당첨 번호, 보너스 번호 에러 핸들링
2yunseong Feb 21, 2023
5947151
fix: 잘못 렌더링 하던 에러 해결
2yunseong Feb 21, 2023
0625dc1
feat: css 디자인 반영
2yunseong Feb 21, 2023
976c8c6
feat: css 클래스 명 추가
2yunseong Feb 21, 2023
8ed30f1
fix: css 깨지는 레이아웃 수정
2yunseong Feb 21, 2023
6e4bf93
refactor: 매직넘버 상수화
2yunseong Feb 22, 2023
4ab2c3f
refactor: static 변수 상수화
2yunseong Feb 22, 2023
7f43051
refactor: 중복/불용어 제거
2yunseong Feb 22, 2023
f64bcf4
refactor: 메서드로 분리할 수 있는 로직은 분리
2yunseong Feb 22, 2023
ba5d8f7
refactor: 메서드 네이밍 변경
2yunseong Feb 22, 2023
eaf60aa
chore: 티켓 이모지 변경
2yunseong Feb 22, 2023
2b8c94a
refactor: 메서드 분리 후 모듈화
2yunseong Feb 22, 2023
37afdc1
refactor: css 단축 속성 사용
2yunseong Feb 22, 2023
0e8b8f0
feat: webController 추가
2yunseong Feb 22, 2023
509a79a
refactor: 메세지 출력 로직 분리
2yunseong Feb 22, 2023
024d4b5
refactor: 메서드 외부로 추출
2yunseong Feb 22, 2023
890e490
refactor: 사용하지 않는 변수 제거
2yunseong Feb 22, 2023
0cfb233
fix: 에러 수정
2yunseong Feb 22, 2023
2a53008
test: 테스트 가독성 개선
2yunseong Feb 24, 2023
d5eb3ac
refactor: 구식 메서드 appendChild 변경
2yunseong Feb 24, 2023
04d83c1
refactor: 문자열 리터럴 상수 사용
2yunseong Feb 24, 2023
d73d92a
refactor: 과도한 추상화 메서드 로직 인라인
2yunseong Feb 24, 2023
d672ddd
refactor: 의미에 맞게 이름 변경
2yunseong Feb 24, 2023
f305047
refactor: 네이밍 수정
2yunseong Feb 24, 2023
d2f3db2
refactor: 범용적인 로직 디렉토리 경로 수정
2yunseong Feb 24, 2023
b139d5d
refactor: input type 변경 및 필요한 속성 부여
2yunseong Feb 24, 2023
c1c9af1
refactor: for 문 forEach 로 대체
2yunseong Feb 24, 2023
eb6e0fa
refactor: N회 렌더링 이슈 해결
2yunseong Feb 24, 2023
f504837
feat: 사용자 이벤트 추가
2yunseong Feb 24, 2023
b9d8bab
refactor: 네이밍 변경
2yunseong Feb 24, 2023
79cae3b
chore: html indent 수정
2yunseong Feb 24, 2023
fcf6243
chore: 불필요한 주석 삭제
2yunseong Feb 24, 2023
c8a2781
chore: 콘솔 관련 파일 삭제
2yunseong Feb 26, 2023
267686b
refactor: 필요없는 조기 리턴 삭제
2yunseong Feb 27, 2023
836f7a2
refactor: classList 전용 메서드 사용
2yunseong Feb 27, 2023
bf9ad43
refactor: 중복으로 선택하는 요소 제거
2yunseong Feb 27, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion __tests__/Lotto.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('Lotto 클래스 입니다.', () => {
[7, 6, 5, 3, 2, 1],
[1, 2, 3, 5, 6, 7],
],
])('로또 배열을 정렬한다.', (numbers, expected) => {
])('생성할 때 인자로 받은 로또 배열을 정렬한다.', (numbers, expected) => {
const lotto = new Lotto(numbers);
expect(lotto.getNumbers()).toEqual(expected);
});
Expand Down
15 changes: 15 additions & 0 deletions __tests__/LottoMachine.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import LottoMachine from '../src/domain/LottoMachine';

describe('LottoMachine 클래스입니다.', () => {
const lottoMachine = new LottoMachine(1000);
test.each([
[1000, 1],
[2000, 2],
[3000, 3],
])('금액을 받으면 구매해야 할 올바른 수량 반환한다.', (money, expected) => {
expect(lottoMachine.calcLottoAmount(money)).toEqual(expected);
});
test.each([1001, 10015, 34678])('잘못된 금액을 받으면 에러를 반환한다.', (money) => {
expect(() => lottoMachine.calcLottoAmount(money)).toThrow();
});
});
42 changes: 42 additions & 0 deletions __tests__/LottoRank.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* eslint-disable max-params */
import LottoRank from '../src/domain/LottoRank';

describe('LottoRank 객체입니다.', () => {
const winRankByMatchCount = (matchCount, hasBonus, expected) => {
expect(LottoRank.getWinRank(matchCount, hasBonus)).toEqual(expected);
};

test.each([
[0, true, LottoRank.PRIZE.MISS.RANK],
[0, false, LottoRank.PRIZE.MISS.RANK],
[1, true, LottoRank.PRIZE.MISS.RANK],
[1, false, LottoRank.PRIZE.MISS.RANK],
[2, true, LottoRank.PRIZE.MISS.RANK],
[2, false, LottoRank.PRIZE.MISS.RANK],
])('로또등수가 낙첨인지 판단', winRankByMatchCount);
Comment on lines +5 to +16
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이부분을 등수별로 분리해보았습니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵넵 좋아요~~~!


test.each([
[3, true, LottoRank.PRIZE.FIFTH.RANK],
[3, false, LottoRank.PRIZE.FIFTH.RANK],
])('로또 등수가 5등인지 판단(3개 일치)', winRankByMatchCount);

test.each([
[4, true, LottoRank.PRIZE.FOURTH.RANK],
[4, false, LottoRank.PRIZE.FOURTH.RANK],
])('로또 등수가 4등인지 판단(4개 일치)', winRankByMatchCount);

test.each([[5, false, LottoRank.PRIZE.THIRD.RANK]])(
'로또 등수가 3등인지 판단(5개 일치)',
winRankByMatchCount,
);

test.each([[5, true, LottoRank.PRIZE.SECOND.RANK]])(
'로또 등수가 2등인지 판단(5개 일치 + 보너스볼 일치)',
winRankByMatchCount,
);

test.each([[6, false, LottoRank.PRIZE.FIRST.RANK]])(
'로또 등수가 1등인지 판단(6개 일치)',
winRankByMatchCount,
);
});
42 changes: 33 additions & 9 deletions __tests__/validation.test.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,42 @@
import { isPositiveInteger, isValidRestartCommand } from '../src/validation';
import {
isPositiveInteger,
isValidRestartCommand,
isValidLottoNumber,
isDuplicateNumbers,
} from '../src/validation';

describe('유효성 검증 테스트입니다.', () => {
test.each([1.11, null, undefined, 'string', {}])(
'양의 정수가 아니면 false를 반환한다.',
(value) => {
expect(isPositiveInteger(Number(value))).toBeFalsy();
},
);
test.each([1.11, -1, 2.3, 3.1])('양의 정수가 아니면 false를 반환한다.', (value) => {
expect(isPositiveInteger(Number(value))).toBeFalsy();
});

test.each(['y', 'n'])('재시작 입력에서 y와 n를 받으면 true를 반환한다.', (input) => {
expect(isValidRestartCommand(input)).toBeTruthy();
});

test.each([1, '1'])('재시작 입력에서 y와 n인 아닌 입력을 받으면 false를 반환한다.', (input) => {
expect(isValidRestartCommand(input)).toBeFalsy();
test.each(['df', 's', 'w', 'a', 'gg'])(
'재시작 입력에서 y와 n인 아닌 입력을 받으면 false를 반환한다.',
(input) => {
expect(isValidRestartCommand(input)).toBeFalsy();
},
);

test.each([1, 2, 3, 4, 34, 44, 45])('유효한 로또 숫자이면 true를 반환한다.', (number) => {
expect(isValidLottoNumber(number)).toBeTruthy();
});

test.each([-1, 0, 46, 47])('유효한 로또 숫자가 아니면 false를 반환한다.', (number) => {
expect(isValidLottoNumber(number)).toBeFalsy();
});

test.each([
[[2, 1, 2, 3, 4, 5]],
[[1, 1, 2, 3, 4, 5, 6]],
[[5, 6, 7, 8, 44, 44]],
[[1, 44, 45, 42, 43, 44]],
[[1, 13, 8, 16, 4, 12, 15, 16]],
[[10, 11, 12, 13, 14]],
])('로또 번호가 중복되었는지와 길이(갯수)가 유효한지 검사한다.', (numbers) => {
expect(isDuplicateNumbers(numbers)).toBeTruthy();
});
});
83 changes: 78 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,89 @@
<!DOCTYPE html>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

html indent... 적용해보았습니다.

vscode에서 전체 선택해서 command + K , command + F 하면 되었어요!! 감사합니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋습니다
다음 번에는 그것보다도 더 자동적인 방법을 알아보세요 :)

<html lang="ko">

<head>
<meta charset="UTF-8" />
<title>🎱 행운의 로또</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>

<body>
<div id="app">
<h1>🎱 행운의 로또</h1>
<div class="modal">
<article class="win-result-container">
<button class="modal-close-btn">X</button>
<section class="modal-body">
<h3 class="lotto-subtitle">🏆 당첨 통계 🏆</h3>
<table class="result-table">
<thead>
<tr>
<th>일치 갯수</th>
<th>당첨금</th>
<th>당첨 갯수</th>
</tr>
</thead>
<tbody class="result-table-body">
<tr>
<td>3개</td>
<td>5,000</td>
</tr>
<tr>
<td>4개</td>
<td>50,000</td>
</tr>
<tr>
<td>5개</td>
<td>1,500,000</td>
</tr>
<tr>
<td>5개 + 보너스 볼</td>
<td>30,000,000</td>
</tr>
<tr>
<td>6개</td>
<td>2,000,000,000</td>
</tr>
</tbody>
</table>
<button class="modal-restart-btn">다시 시작하기</button>
</section>
</article>
</div>
<script type="module" src="./src/js/index.js"></script>
<header>🎱 행운의 로또</header>
<main>
<article id="app">
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

시맨틱 태그도 사용해보았습니다!
아무래도 div만 떡칠하기 보다는 눈에 들어오는게 편했습니다!

<h3 class="lotto-subtitle">🎱 내 번호 당첨 확인 🎱</h3>
<form class="payments-container">
<p class="payments-notice">구입할 금액을 입력해주세요.</p>
<input class="payments-input" type="number" placeholder="금액" step="1000" min="0">
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다양한 input 속성을 사용해보았습니다. 로또 금액에 맞게 step도 1000원으로 적용시켰고, 최소 금액은 마이너스가 되지 않도록 min = 0을 적용시켰습니다.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿굿 좋습니다!

<button class="payments-btn" type="submit">구입</button>
</form>
<form class="winning-lotto-container">
<p class="winning-lotto-notice">지난 주 당첨번호 6개와 보너스 번호 1개를 입력해주세요.</p>
<div class="winning-lotto-title-container">
<span>당첨번호</span>
<span>보너스 번호</span>
</div>
<section class="winning-numbers-input-container">
<div class="winning-numbers">
<input class="winning-number-input" type="number" min="1" max="45">
<input class="winning-number-input" type="number" min="1" max="45">
<input class="winning-number-input" type="number" min="1" max="45">
<input class="winning-number-input" type="number" min="1" max="45">
<input class="winning-number-input" type="number" min="1" max="45">
<input class="winning-number-input" type="number" min="1" max="45">
</div>
<div class="bonus-number">
<input class="bonus-number-input" type="number" min="1" max="45">
</div>
</section>
<button class="result-btn" type="submit" disabled>결과 확인하기</button>
</form>
</article>
</main>
<footer>
Copyright 2023. woowacourse
</footer>
</body>
</html>
<script type="module" src="./src/js/index.js"></script>

</html>
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"test": "jest --watch --no-cache",
"build-step1": "webpack --config step1.config.js",
"start-step1": "npm run build-step1 && node dist/step1-bundle.js",
"start-step2": "webpack serve --open --config step2.config.js"
"start-step2": "webpack serve --open --config step2.config.js",
"build-step2": "webpack --mode production --config step2.config.js"
},
"devDependencies": {
"@babel/cli": "^7.20.7",
Expand Down
Loading