feat: web 기반 UI 개발

next-step · May 26, 2024 · f9aef1c · f9aef1c
1 parent 3e04a69
commit f9aef1c
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <title>🎱 행운의 로또</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="./src/css/index.css" />
   </head>
   <body>
     <div id="app" class="p-3">
@@ -17,30 +16,35 @@ <h1 class="text-center">🎱 행운의 로또</h1>
             </label>
             <div class="d-flex">
               <input
+                id="moneyInput"
                 type="number"
                 class="w-100 mr-2 pl-2"
                 placeholder="구입 금액"
               />
-              <button type="button" class="btn btn-cyan">확인</button>
+              <button id="buyButton" type="button" class="btn btn-cyan">
+                확인
+              </button>
             </div>
           </form>
           <section class="mt-9">
             <div class="d-flex">
-              <label class="flex-auto my-0">총 5개를 구매하였습니다.</label>
+              <label id="totalCountLabel" class="flex-auto my-0"></label>
               <div class="flex-auto d-flex justify-end pr-1">
                 <label class="switch">
-                  <input type="checkbox" class="lotto-numbers-toggle-button" />
+                  <input
+                    id="numbersToggle"
+                    type="checkbox"
+                    class="lotto-numbers-toggle-button"
+                  />
                   <span class="text-base font-normal">번호보기</span>
                 </label>
               </div>
             </div>
-            <div class="d-flex flex-wrap">
-              <span class="mx-1 text-4xl">🎟️ </span>
-              <span class="mx-1 text-4xl">🎟️ </span>
-              <span class="mx-1 text-4xl">🎟️ </span>
-              <span class="mx-1 text-4xl">🎟️ </span>
-              <span class="mx-1 text-4xl">🎟️ </span>
-            </div>
+            <div
+              id="lottosDiv"
+              class="d-flex flex-wrap"
+              style="display: none"
+            ></div>
           </section>
           <form class="mt-9">
             <label class="flex-auto d-inline-block mb-3"
@@ -84,6 +88,7 @@ <h4 class="mt-0 mb-3 text-center">보너스 번호</h4>
               </div>
             </div>
             <button
+              id="resultButton"
               type="button"
               class="open-result-modal-button mt-5 btn btn-cyan w-100"
             >
@@ -115,38 +120,41 @@ <h2 class="text-center">🏆 당첨 통계 🏆</h2>
                 <tr class="text-center">
                   <td class="p-3">3개</td>
                   <td class="p-3">5,000</td>
-                  <td class="p-3">n개</td>
+                  <td class="p-3"><span id="fifthRankCount"></span>개</td>
                 </tr>
                 <tr class="text-center">
                   <td class="p-3">4개</td>
                   <td class="p-3">50,000</td>
-                  <td class="p-3">n개</td>
+                  <td class="p-3"><span id="fourthRankCount"></span>개</td>
                 </tr>
                 <tr class="text-center">
                   <td class="p-3">5개</td>
                   <td class="p-3">1,500,000</td>
-                  <td class="p-3">n개</td>
+                  <td class="p-3"><span id="thirdRankCount"></span>개</td>
                 </tr>
                 <tr class="text-center">
                   <td class="p-3">5개 + 보너스볼</td>
                   <td class="p-3">30,000,000</td>
-                  <td class="p-3">n개</td>
+                  <td class="p-3"><span id="secondRankCount"></span>개</td>
                 </tr>
                 <tr class="text-center">
                   <td class="p-3">6개</td>
                   <td class="p-3">2,000,000,000</td>
-                  <td class="p-3">n개</td>
+                  <td class="p-3"><span id="firstRankCount"></span>개</td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <p class="text-center font-bold">당신의 총 수익률은 %입니다.</p>
+          <p class="text-center font-bold">
+            당신의 총 수익률은 <span id="profitRate"></span>%입니다.
+          </p>
           <div class="d-flex justify-center mt-5">
-            <button type="button" class="btn btn-cyan">다시 시작하기</button>
+            <button id="restartButton" type="button" class="btn btn-cyan">
+              다시 시작하기
+            </button>
           </div>
         </div>
       </div>
     </div>
-    <script type="module" src="./src/js/index.js"></script>
   </body>
 </html>
diff --git a/src/js/index.js b/src/js/index.js
@@ -1,17 +1,17 @@
-const $showResultButton = document.querySelector('.open-result-modal-button')
-const $modalClose = document.querySelector('.modal-close')
-const $modal = document.querySelector('.modal')
+const $showResultButton = document.querySelector(".open-result-modal-button");
+const $modalClose = document.querySelector(".modal-close");
+const $modal = document.querySelector(".modal");
 const $lottoNumbersToggleButton = document.querySelector(
-  '.lotto-numbers-toggle-button'
-)
+  ".lotto-numbers-toggle-button"
+);
 
-const onModalShow = () => {
-  $modal.classList.add('open')
-}
+export const onModalShow = () => {
+  $modal.classList.add("open");
+};
 
 const onModalClose = () => {
-  $modal.classList.remove('open')
-}
+  $modal.classList.remove("open");
+};
 
-$showResultButton.addEventListener('click', onModalShow)
-$modalClose.addEventListener('click', onModalClose)
+// $showResultButton.addEventListener("click", onModalShow);
+$modalClose.addEventListener("click", onModalClose);
diff --git a/src/step-web-index.js b/src/step-web-index.js
@@ -2,5 +2,131 @@
  * step 3의 시작점이 되는 파일입니다.
  * 노드 환경에서 사용하는 readline 등을 불러올 경우 정상적으로 빌드할 수 없습니다.
  */
+import "./css/index.css";
+import "./js/index";
+import {
+  buyLottos,
+  calculateProfitRate,
+  getLottoRanks,
+} from "./js/domain/LottoService";
+import { LottoStats } from "./js/domain/LottoStats";
+import { LottoRank } from "./js/domain/enum/LottoRank";
+import { onModalShow } from "./js/index";
 
-console.log("Web Browser!");
+const $buyButton = document.getElementById("buyButton");
+const $moneyInput = document.getElementById("moneyInput");
+const $totalCountLabel = document.getElementById("totalCountLabel");
+const $lottosDiv = document.getElementById("lottosDiv");
+const $numbersToggle = document.getElementById("numbersToggle");
+const $winningNumberInputs = document.getElementsByClassName("winning-number");
+const $bonusNumberInput = document.getElementsByClassName("bonus-number")[0];
+const $resultButton = document.getElementById("resultButton");
+
+const $fifthRankCountSpan = document.getElementById("fifthRankCount");
+const $fourthRankCountSpan = document.getElementById("fourthRankCount");
+const $thirdRankCountSpan = document.getElementById("thirdRankCount");
+const $secondRankCountSpan = document.getElementById("secondRankCount");
+const $firstRankCountSpan = document.getElementById("firstRankCount");
+const $profitRateSpan = document.getElementById("profitRate");
+
+const $restartButton = document.getElementById("restartButton");
+
+let lottos = null;
+
+$buyButton.addEventListener("click", buyLottosEvent);
+
+$moneyInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    buyLottosEvent();
+  }
+});
+
+$numbersToggle.addEventListener("change", (event) => {
+  const display = event.currentTarget.checked ? "" : "none";
+  $lottosDiv.style.display = display;
+});
+
+$resultButton.addEventListener("click", showLottoStats);
+
+[...$winningNumberInputs].forEach((e) => {
+  e.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      showLottoStats();
+    }
+  });
+});
+
+$bonusNumberInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    showLottoStats();
+  }
+});
+
+$restartButton.addEventListener("click", () => location.reload());
+
+function buyLottosEvent() {
+  try {
+    const money = getMoney();
+    lottos = buyLottos(money);
+    setTotalCountLabel(lottos.length);
+    setLottosDiv(lottos.map((e) => e.numbers));
+    $winningNumberInputs[0].focus();
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+function showLottoStats() {
+  try {
+    const winningNumbers = getWinningNumbers();
+    const bonusNumber = getBonusNumber();
+
+    const lottoRanks = getLottoRanks(lottos, winningNumbers, bonusNumber);
+
+    const { rankCount, totalCount, totalReward } = new LottoStats(lottoRanks);
+
+    $fifthRankCountSpan.innerHTML = rankCount.get(LottoRank.FIFTH.rank) ?? 0;
+    $fourthRankCountSpan.innerHTML = rankCount.get(LottoRank.FOURTH.rank) ?? 0;
+    $thirdRankCountSpan.innerHTML = rankCount.get(LottoRank.THIRD.rank) ?? 0;
+    $secondRankCountSpan.innerHTML = rankCount.get(LottoRank.SECOND.rank) ?? 0;
+    $firstRankCountSpan.innerHTML = rankCount.get(LottoRank.FIRST.rank) ?? 0;
+
+    const profitRate = calculateProfitRate(totalCount, totalReward);
+    $profitRateSpan.innerHTML = profitRate;
+
+    onModalShow();
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+function getWinningNumbers() {
+  return [...$winningNumberInputs].map((e) => parseInt(e.value));
+}
+
+function getBonusNumber() {
+  return parseInt($bonusNumberInput.value);
+}
+
+function getMoney() {
+  return parseInt($moneyInput.value);
+}
+
+function setTotalCountLabel(length) {
+  $totalCountLabel.innerHTML = `총 ${length}개를 구매하였습니다.`;
+}
+
+function setLottosDiv(numbersList) {
+  const spans = numbersList.map(generateLottoNumbersSpan);
+  $lottosDiv.replaceChildren(...spans);
+}
+
+function generateLottoNumbersSpan(numbers) {
+  const span = document.createElement("span");
+  span.classList.add("mx-1");
+  span.classList.add("text-4xl");
+  span.value = numbers;
+  span.innerHTML = `🎟️ ${numbers}`;
+  return span;
+}