[2단계 - 웹 기반 로또 게임] 안톨리니 미션 제출합니다.

README.md

@@ -30,4 +30,59 @@
 - [x] 보너스 로또번호
     - [x] 1 ~ 45 이내가 아닌 입력 예외
     - [x] 당첨 로또번호와 겹치는 입력 예외
-
+
+---
+
+# 로또 웹으로 구현하기
+
+## 기능 요구 사항
+
+- [x] 레이아웃
+  - [x] 네비게이션 바
+  - [x] 메인 컨텐츠 영역
+    - [x] 구입할 금액 입력 폼
+    - [x] 구입한 로또 번호
+    - [x] 당첨번호 + 보너스 번호 입력 폼
+  - [x] 푸터
+  - [x] 당첨번호 + 보너스 번호 입력 폼이 로또를 구매헀을때 렌더링
+  - [x] 모달
+    - [x] 당첨 통계
+    - [x] 다시 시작하기 버튼
+
+  - [x] 동작
+    - [x] 입력
+      - [x] 입력 에러 메시지 노드 추가
+      - [x] 입력 성공 이펙트 추가
+    - [x] 로또 구입 금액 전달 처리
+      - [x] 로또 구입 검증
+    - [x] 당첨 번호, 보너스 번호 전달 처리
+      - [x] 당첨 번호 검증
+      - [x] 보너스 번호 검증
+      - [x] 우승 로또 생성
+      - [] 당첨 통계 계산
+    - [x] 재시작
+
+## 리팩토링 사항
+
+- components
+  - [x] 구매한 로또 목록 컴포넌트
+  - [x] 구매한 로또 갯수 컴포넌트
+  - [x] 당첨 결과 테이블 컴포넌트
+  - [x] 수익률 메시지 컴포넌트
+  - [x] 재시작 버튼 컴포넌트
+
+- view
+  - [x] 구매한 로또 콘텐츠 렌더링
+  - [x] 결과 테이블, 수익률, 재시작 -> 모달 렌더링
+  - [x] 에러 메시지 렌더링
+  - [x] hidden 유틸
+  - [x] 모달 close/open
+  - [x] 재시작
+
+- controller
+  - [x] 로또 구매 금액 입력 처리
+  - [x] 당첨번호, 보너스 번호 입력 처리
+  - [x] 재시작
+
+- index.js
+  - [x] 즉시실행함수 정리

__tests__/ComponentTest.js

@@ -0,0 +1,45 @@
+import Component from '../src/step2/Component.js';
+
+
+describe('컴포넌트 테스트', () => {
+  test('에러메시지 컴포넌트', () => {
+    const errorMessageComponent = Component.errorMessage('잘못된 입력입니다!');
+
+    expect(errorMessageComponent).toEqual('<p class="text-body error-message">잘못된 입력입니다!</p>');
+  });
+
+  test('lottos 배열로 로또 리스트 컴포넌트 반한', () => {
+    const lottoListComponent = Component.lottoList([[1, 2, 3, 4, 5, 6], [10, 11, 12, 13, 14, 15]]);
+    const expected = '<ul id="purchase-lotto-list">'
+    + '<li><span>🎟️</span>1, 2, 3, 4, 5, 6</li>'
+    + '<li><span>🎟️</span>10, 11, 12, 13, 14, 15</li>'
+    + '</ul>'
+
+    expect(lottoListComponent).toEqual(expected);
+  });
+
+  test('로또 매치 결과 테이블 컴포넌트', () => {
+    const summary = [
+      { label: '3개 일치', prize: '500', result: 3 },
+      { label: '4개 일치', prize: '1,000', result: 100 },
+    ]
+
+    const lottoMatchResultComponent = Component.lottoMatchResultTable(summary);
+    const expected = '<table id="lotto-match-result">'
+    + '<thead><th>일치 갯수</th><th>당첨금</th><th>당첨 갯수</th></thead>'
+    + '<tbody><tr><td>3개 일치</td><td>500</td><td>3</td></tr>'
+    + '<tr><td>4개 일치</td><td>1,000</td><td>100</td></tr>'
+    + '</tbody></table>'
+    expect(lottoMatchResultComponent).toEqual(expected);
+  });
+
+  test('로또 수익률 컴포넌트', () => {
+    const rateOfReturnComponent = Component.rateOfReturnMessage('12345.0');
+    expect(rateOfReturnComponent).toEqual('<p id="lotto-rate-of-return">당신의 총 수익률은 12345.0%입니다.</p>');
+  });
+
+  test('재시작 버튼 컴포넌트', () => {
+    const restartButton = Component.restartButton();
+    expect(restartButton).toEqual('<button type="button" id="restart-button">다시 시작하기</button>');
+  });
+});

__tests__/ConverterTest.js

@@ -0,0 +1,15 @@
+import Converter from '../src/step2/Converter.js';
+
+describe('데이터 전환 테스트', () => {
+  test('matchResultSummary 데이터 label의 일치를 제거', () => {
+    const summary = [
+      { label: '3개 일치', prize: 1000, result: 3 },
+      { label: '5개 일치, 보너스 볼 일치', prize: 2000, result: 5 },
+    ]
+    const expected = [
+      { label: '3개 ', prize: 1000, result: 3 },
+      { label: '5개 , 보너스 볼 ', prize: 2000, result: 5 },
+    ]
+    expect(Converter.matchResultSummary(summary)).toEqual(expected);
+  });
+});

__tests__/ValidatorTest.js

@@ -0,0 +1,61 @@
+import Validator from '../src/step1/Validator.js';
+
+describe('구입금액 검증 테스트', () => {
+  test('1000원 단위가 아닐때 예외 발생', () => {
+    expect(() => Validator.validatePurchaseAmount('1234')).toThrow('1000원 단위만 입력 가능합니다.');
+  });
+
+  test('정수가 아닐때 예외 발생', () => {
+    expect(() => Validator.validatePurchaseAmount('aaaa')).toThrow('숫자만 입력해 주세요.');
+  });
+});
+
+describe('당첨 번호 검증 테스트', () => {
+  test.each([
+    ['1'],
+    [''],
+    ['1', '2', '3', '4', '5', '6', '7'],
+  ])('당첨 번호가 6개가 아닐때 예외 발생', (value) => {
+    expect(() => Validator.validateLottoNumber(value)).toThrow('당첨 로또 번호는 숫자 6개여야 합니다.');
+  });
+
+  test('중복되는 당첨 번호가 존재할때 예외 발생', () => {
+    expect(
+      () => Validator.validateLottoNumber(['1', '2', '3', '4', '5', '1'])
+    ).toThrow('중복되는 당첨 번호는 사용할 수 없습니다.');
+  });
+
+  test('정수가 아닌 당첨 번호가 존재할때 예외 발생', () => {
+    expect(
+      () => Validator.validateLottoNumber(['1', '2', 'z', 'd', '!', '\\'])
+    ).toThrow('당첨 번호는 숫자만 입력 가능합니다.');
+  });
+
+  test.each([
+    [['1', '2', '3', '4', '5', '46'], ['0', '1', '2', '3', '4', '5']]
+  ])('당첨 번호가 6개가 아닐때 예외 발생', (value) => {
+    expect(() => Validator.validateLottoNumber(value)).toThrow('당첨 번호는 1 ~ 45 이내 숫자만 입력 가능합니다.');
+  });
+});
+
+describe('보너스 번호 검증 테스트', () => {
+  test('정수가 아닐때 예외 발생', () => {
+    expect(
+      () => Validator.validateBonusNumber(['1', '2', '3', '4', '5', '6'], 'z')
+    ).toThrow('보너스 번호는 숫자만 입력 가능합니다.');
+  });
+
+  test.each([
+    ['0'], ['46']
+  ])('1 ~ 45 이내 숫자가 아닐때 예외 발생', (value) => {
+    expect(() => Validator.validateBonusNumber(
+      ['1', '2', '3', '4', '5', '6'], value)
+    ).toThrow('보너스 번호는 1 ~ 45 이내 숫자만 입력 가능합니다.');
+  });
+
+  test('당첨 번호와 동일한 숫자일때 예외 발생', () => {
+    expect(() => Validator.validateBonusNumber(
+      ['1', '2', '3', '4', '5', '6'], '6'
+    )).toThrow('보너스 번호는 당첨번호와 중복될 수 없습니다.');
+  });
+});

index.html

@@ -5,12 +5,75 @@
     <title>🎱 행운의 로또</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./src//step2//css//base.css">
+    <link rel="stylesheet" href="./src/step2/css/responsive.css">
   </head>
 
   <body>
-    <div id="app">
-      <h1>🎱 행운의 로또</h1>
-    </div>
+    <header id="header">
+      <nav>
+        <h1 class="text-title">🎱 행운의 로또</h1>
+      </nav>
+    </header>
+    <main id="app">
+      <div id="content-container">
+        <div id="content">
+          <h2 id="content-title" class="text-title">🎱 내 번호 당첨 확인 🎱</h2>
+          <div id="purchase-amount-content">
+            <form id="purchase-amount-form">
+              <div id="purchase-amount-input-container">
+                <label for="purchase-amount" class="text-body">구입할 금액을 입력해주세요.</label>
+                <div class="row-line-between">
+                  <input id="purchase-amount" class="font-placeholder" placeholder="금액" required>
+                  <button type="submit">구입</button>
+                </div>
+                <div id="purchase-amount-error-message-container"></div>
+              </div>
+            </form>
+          </div>
+          <div id="purchase-lotto-content" class="hidden">
+          </div>
+          <div id="winning-lotto-content" class="hidden">
+            <p class="text-body">지난 주 당첨번호 6개와 보너스 번호 1개를 입력해주세요.</p>
+            <form id="winning-lotto-form">
+              <div id="winning-lotto-inputs-container">
+                <div id="winning-lotto-inputs">
+                  <fieldset id="winning-lotto-numbers">
+                  <legend class="text-body">당첨 번호</legend>
+                  <input type="number" min="1" max="45" required>
+                  <input type="number" min="1" max="45" required>
+                  <input type="number" min="1" max="45" required>
+                  <input type="number" min="1" max="45" required>
+                  <input type="number" min="1" max="45" required>
+                  <input type="number" min="1" max="45" required>
+                  </fieldset>
+                  <div id="winning-lotto-bonus-number-container">
+                    <label for="winning-lotto-bonus-number" class="text-body">보너스 번호</label>
+                    <input id="winning-lotto-bonus-number" type="number" min="1" max="45" required>
+                  </div>
+                </div>
+              </div>
+              <div id="winning-lotto-error-message-container"></div>
+              <button type="submit">결과 확인하기</button>
+            </form>
+          </div>
+        </div>
+        <dialog id="lotto-match-result-dialog" >
+          <form method="dialog">
+            <button class="dialog-closer" type="submit" aria-label="당첨 통계 닫기">&times;</button>
+          </form>
+          <h3 class="lotto-subtitle">🏆 당첨 통계 🏆</h3>
+          <div id="lotto-match-result-content" class="text-body">
+          </div>
+        </dialog>
+      </div>
+    </main>
+    <footer>
+      <p>Copyright 2023. woowacourse</p>
+    </footer>
     <script type="module" src="./src/step2-index.js"></script>
   </body>
 </html>

package.json

@@ -10,7 +10,7 @@
     "start-step2": "vite",
     "deploy": "vite build --base=/javascript-lotto/ --minify=false && npx gh-pages -d dist"
   },
-  "homepage": "https://{username}.github.io/javascript-lotto",
+  "homepage": "https://antoliny0919.github.io/javascript-lotto",
   "devDependencies": {
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",

src/step1/App.js

@@ -1,4 +1,4 @@
-import { read } from './Utils.js';
+import { read } from './Readline.js';
 import Input from './Input.js';
 import { LottoMachine } from './LottoMachine.js';
 import { Output } from './Output.js';

src/step1/Input.js

@@ -1,4 +1,4 @@
-import { readLine } from './Utils.js';
+import { readLine } from './Readline.js';
 import Validator from './Validator.js';
 
 const Input = {

src/step1/LottoMachine.js

@@ -51,6 +51,7 @@ export class LottoMachine {
   }
 
   calculateMatchResult(winningNumber, bonusNumber) {
+    this.#matchResult = new Map(LOTTO_CONFIG.map(({ rank }) => [rank, 0]));
     this.#lottos.forEach((lotto) => {
       const lottoNumbers = lotto.getLottoNumber()
       const matchCount = new Set([...lottoNumbers]).intersection(new Set([...winningNumber])).size;

src/step1/Readline.js

@@ -0,0 +1,14 @@
+import readline from 'readline';
+
+export const read = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+export function readLine(query) {
+  return new Promise((resolve) => {
+    read.question(query, (answer) => {
+      resolve(answer);
+    });
+  });
+}

src/step1/Utils.js

@@ -1,5 +1,3 @@
-import readline from 'readline';
-
 /**
  * 
  * 두 수를 포함하는 두 수 사이의 정수 난수 배열 반환.
@@ -26,18 +24,6 @@ export function pickNumberInRange(min, max, range) {
   return [...numbers];
 }
 
-export const read = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-export function readLine(query) {
-  return new Promise((resolve) => {
-    read.question(query, (answer) => {
-      resolve(answer);
-    });
-  });
-}
 
 export async function reReadUntilSuccess(read) {
   while (true) {

src/step2-index.js

@@ -2,3 +2,27 @@
  * step 2의 시작점이 되는 파일입니다.
  * 노드 환경에서 사용하는 readline 등을 불러올 경우 정상적으로 빌드할 수 없습니다.
  */
+import Controller from './step2/Controller.js';
+
+const purchaseAmountForm = document.getElementById('purchase-amount-form');
+purchaseAmountForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const purchaseAmountInput = document.getElementById('purchase-amount');
+  const purchaseAmount = purchaseAmountInput.value;
+  Controller.submitPurchaseAmount(purchaseAmount);
+});
+
+const winningLottoForm = document.getElementById('winning-lotto-form');
+winningLottoForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const winningLottoNumbersNode = document.getElementById('winning-lotto-numbers');
+  const bonusNumber = document.getElementById('winning-lotto-bonus-number').value;
+  const winningLottoNumber = [...winningLottoNumbersNode.elements].map((input) => input.value);
+  Controller.submitWinningNumbers(winningLottoNumber, bonusNumber);
+});
+
+const matchResultContentNode = document.getElementById('lotto-match-result-content');
+matchResultContentNode.addEventListener('click', (e) => {
+  if (!e.target.matches('#restart-button')) return;
+  Controller.restart();
+});