woowacourse · Tanney-102 · Mar 12, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,7 +2,8 @@
   "env": {
     "es6": true,
     "node": true,
-    "jest": true
+    "jest": true,
+    "browser": true
   },
   "parserOptions": {
     "ecmaVersion": "latest",
@@ -74,6 +75,7 @@
           "caseInsensitive": true
         }
       }
-    ]
+    ],
+    "func-names": "off"
   }
 }
diff --git a/README.md b/README.md
@@ -2,37 +2,90 @@
 <h2 align="middle">level1 - 행운의 로또</h2>
 <p align="middle">자바스크립트로 구현 하는 로또 어플리케이션</p>
 
-### 실행
-
-```bash
- npm run start-step1
-```
+## STEP1
 
-### 테스트
+### 실행 및 테스트
 
 ```bash
-npm run test
+ npm run start-step1 //실행
+ npm run test //테스트
 ```
 
 ### 실행 화면
 
-<img src="./lotto-step1.png" alt="실행화면" width="450">
+<img src="./lotto-step1.png" alt="실행화면" width="450"/>
 
 ### 테스트 실행 화면
 
 <img src="./lotto-step1-test.png" alt="테스트 실행화면" width="300">
 
-### 도메인 로직
+### 파일 구조
+
+```
+📦src
+┣ 📂constant : 상수 관리
+┃ ┣ 📜Messages.js : 입력, 입력힌트, 출력, 에러 메세지 관리
+┃ ┗ 📜Options.js : 로또 가격, 로또 범위 최소, 최대 숫자, 상금, 게임 결과 등 관리
+┣ 📂controller
+┃ ┗ 📜LottoController.js : 로또 게임 진행
+┣ 📂domain
+┃ ┣ 📜Lotto.js
+┃ ┗ 📜LottoMachine.js
+┣ 📂util
+┃ ┣ 📂random
+┃ ┃ ┗ 📜Random.js
+┃ ┣ 📂readLine
+┃ ┃ ┗ 📜readLineAsync.js
+┃ ┗ 📂validation
+┃ ┃ ┣ 📜LottoNumbersValidator.js
+┃ ┃ ┣ 📜PurchaseAmountValidator.js
+┃ ┃ ┗ 📜Validation.js
+┣ 📂view
+┃ ┣ 📜InputView.js
+┃ ┗ 📜OutputView.js
+┣ 📜App.js
+┣ 📜step1-index.js
+┗ 📜step2-index.js
+
+📦**tests** ┣ 📜.gitkeep ┣ 📜Lotto.test.js ┣ 📜LottoMachine.test.js ┗ 📜Random.test.js
+
+```
+
+</br>
+
+## STEP2
+
+### 배포 링크
+
+[로또 페이지](https://00kang.github.io/javascript-lotto/)
+
+### 실행
+
+```bash
+npm run start-step2
+```
+
+### 실행 화면
+
+<img src="./lotto-step2-1.png" alt="실행화면" width="250"/>
+<img src="./lotto-step2-2.png" alt="실행화면" width="250"/>
+<img src="./lotto-step2-3.png" alt="실행화면" width="250"/>
+<img src="./lotto-step2-4.png" alt="실행화면" width="250"/>
 
 ### 파일 구조
 
 ```
 📦src
- ┣ 📂constant : 상수 관리
- ┃ ┣ 📜Messages.js : 입력, 입력힌트, 출력, 에러 메세지 관리
- ┃ ┗ 📜Options.js : 로또 가격, 로또 범위 최소, 최대 숫자, 상금, 게임 결과 등 관리
+ ┣ 📂constant
+ ┃ ┣ 📜Messages.js
+ ┃ ┗ 📜Options.js
  ┣ 📂controller
- ┃ ┗ 📜LottoController.js : 로또 게임 진행
+ ┃ ┣ 📜LottoController.js
+ ┃ ┗ 📜step2-LottoController.js
+ ┣ 📂css
+ ┃ ┣ 📜reset.css
+ ┃ ┣ 📜style.css
+ ┃ ┗ 📜theme.css
  ┣ 📂domain
  ┃ ┣ 📜Lotto.js
  ┃ ┗ 📜LottoMachine.js
@@ -42,20 +95,15 @@ npm run test
  ┃ ┣ 📂readLine
  ┃ ┃ ┗ 📜readLineAsync.js
  ┃ ┗ 📂validation
+ ┃ ┃ ┣ 📜BonusNumberValidator.js
  ┃ ┃ ┣ 📜LottoNumbersValidator.js
  ┃ ┃ ┣ 📜PurchaseAmountValidator.js
+ ┃ ┃ ┣ 📜RestartValidator.js
  ┃ ┃ ┗ 📜Validation.js
  ┣ 📂view
  ┃ ┣ 📜InputView.js
  ┃ ┗ 📜OutputView.js
  ┣ 📜App.js
  ┣ 📜step1-index.js
  ┗ 📜step2-index.js
-
-📦__tests__
- ┣ 📜.gitkeep
- ┣ 📜Lotto.test.js
- ┣ 📜LottoMachine.test.js
- ┗ 📜Random.test.js
-
 ```
diff --git a/index.html b/index.html
@@ -1,16 +1,109 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <title>🎱 행운의 로또</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <script type="module" src="./src/step2-index.js"></script>
   </head>
 
   <body>
-    <div id="app">
-      <h1>🎱 행운의 로또</h1>
+    <header>
+      <p class="title">🎱 행운의 로또</p>
+    </header>
+
+    <main>
+      <section>
+        <div id="mainTitleSection" class="section-div title">🎱 내 번호 당첨 확인 🎱</div>
+
+        <form id="purchaseInputSection" class="section-div body">
+          <label class="body" for="purchaseInputField">구입할 금액을 입력해주세요. </label>
+          <div>
+            <input id="purchaseInputField" class="placeholder" placeholder="금액" />
+            <button id="purchaseSubmitButton" class="caption" type="submit">구입</button>
+          </div>
+          <div id="purchaseError" class="error-message"></div>
+        </form>
+
+        <div id="lottoSection" class="section-div body" style="display: none">
+          <p id="lottoMainTitle" class="body"></p>
+          <div id="lottoBox"></div>
+        </div>
+
+        <form id="winningAndBonusSection" class="section-div body" style="display: none">
+          <p id="winningAndBonusTitle" class="body">
+            지난 주 당첨번호 6개와 보너스 번호 1개를 입력해주세요.
+          </p>
+          <div id="winningAndBonusInputSection">
+            <div class="winningAndBonusContainer">
+              <p class="body">당첨 번호</p>
+              <div id="winningInputContainer">
+                <input class="inputRectangle" />
+                <input class="inputRectangle" />
+                <input class="inputRectangle" />
+                <input class="inputRectangle" />
+                <input class="inputRectangle" />
+                <input class="inputRectangle" />
+              </div>
+            </div>
+            <div id="bonusInputContainer" class="winningAndBonusContainer">
+              <p class="body">보너스 번호</p>
+              <input class="inputRectangle" />
+            </div>
+          </div>
+          <div id="winningAndBonusError" class="error-message"></div>
+          <button id="winningAndBonusSubmitButton" class="caption" type="submit">
+            결과 확인하기
+          </button>
+        </form>
+      </section>
+    </main>
+
+    <!-- footer -->
+    <footer>
+      <p class="caption">Copyright 2023. woowacourse</p>
+    </footer>
+
+    <!-- modal -->
+    <div id="modalContainer" style="display: none">
+      <div id="modalWrapper">
+        <button id="modalCloseButton" class="title">X</button>
+        <p id="modalTitle" class="title">🏆 당첨 통계 🏆</p>
+        <table id="resultTable">
+          <tr>
+            <td class="subtitle">일치 갯수</td>
+            <td class="subtitle">당첨금</td>
+            <td class="subtitle">당첨 갯수</td>
+          </tr>
+          <tr>
+            <td class="body">3개</td>
+            <td class="body">5,000</td>
+            <td class="body"></td>
+          </tr>
+          <tr>
+            <td class="body">4개</td>
+            <td class="body">50,000</td>
+            <td class="body"></td>
+          </tr>
+          <tr>
+            <td class="body">5개</td>
+            <td class="body">1,500,000</td>
+            <td class="body"></td>
+          </tr>
+          <tr>
+            <td class="body">5개+보너스볼</td>
+            <td class="body">30,000,000</td>
+            <td class="body"></td>
+          </tr>
+          <tr>
+            <td class="body">6개</td>
+            <td class="body">2,000,000,000</td>
+            <td class="body"></td>
+          </tr>
+        </table>
+        <p id="profitResult" class="subtitle"></p>
+        <button id="resetButton" class="caption">다시 시작하기</button>
+      </div>
     </div>
-    <script type="module" src="./src/js/index.js"></script>
   </body>
 </html>
diff --git a/lotto-step2-1.png b/lotto-step2-1.png
diff --git a/lotto-step2-2.png b/lotto-step2-2.png
diff --git a/lotto-step2-3.png b/lotto-step2-3.png
diff --git a/lotto-step2-4.png b/lotto-step2-4.png
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "test": "jest --watch --no-cache",
     "build-step1": "webpack --config step1.config.js",
     "start-step1": "npm run build-step1 && node dist/step1-bundle.js",
+    "build-step2": "webpack --mode production --config step2.config.js",
     "start-step2": "webpack serve --open --config step2.config.js"
   },
   "devDependencies": {

diff --git a/src/constant/Messages.js b/src/constant/Messages.js
@@ -7,6 +7,7 @@ export const VARIABLE_ALIAS = {
 
 export const ERROR_MESSAGES = {
   prefix: '[ERROR] ',
+  isNotNumber: (name) => `${name}(은)는 숫자만 가능합니다.`,
   isNotInteger: (name) => `${name}(은)는 정수 값이어야 합니다.`,
   isNotAtLeast: (name, threshold) => `${name}(은)는 ${threshold} 이상이어야 합니다.`,
   hasNotLength: (name, length) => `${name}의 길이는 ${length}이어야 합니다.`,