diff --git a/__tests__/LottoMachine.test.js b/__tests__/LottoMachine.test.js
index 12b42d68dc..37fbf0a9fa 100644
--- a/__tests__/LottoMachine.test.js
+++ b/__tests__/LottoMachine.test.js
@@ -2,16 +2,14 @@ import LottoMachine from '../src/Domain/LottoMachine';
 import LOTTO_SETTING from '../src/Constants/lottoSetting';
 
 describe('로또를 생성해주고 결과를 반환해주는 로또 머신 클래스에 대한 테스트', () => {
-  test.each([[7000], [8000]])('구입금액에 해당하는 만큼 로또를 발행한다.', (validInput) => {
+  test.each([[7500], [8000]])('구입금액에 해당하는 만큼 로또를 발행한다.', (validInput) => {
     // arrange
-    const lottoMachine = new LottoMachine(validInput);
+    const lottoMachine = new LottoMachine();
 
-    const totalLottoLength = lottoMachine.getLottos().length;
+    lottoMachine.makeLottoByMoney(validInput);
 
-    expect(totalLottoLength).toBe(validInput / LOTTO_SETTING.MIN_PRICE);
-  });
+    const boughtLottoLength = lottoMachine.getLottos().length;
 
-  test.each([0, -1000, 999])('1000원 미만인 경우, (%i 인 경우) 에러를 던진다.', (money) => {
-    expect(() => new LottoMachine(money)).toThrow();
+    expect(boughtLottoLength).toBe(Math.floor(validInput / LOTTO_SETTING.MIN_PRICE));
   });
 });
diff --git a/__tests__/Money.test.js b/__tests__/Money.test.js
new file mode 100644
index 0000000000..c8abb01930
--- /dev/null
+++ b/__tests__/Money.test.js
@@ -0,0 +1,19 @@
+import Money from '../src/Domain/Money.js';
+
+describe('돈을 담당하는 클래스에 관한 테스트 코드 작성', () => {
+  test.each([[1000], [8300]])('1000원 이상이 되는 금액을 투입 했을때, 1000으로 나눈 몫을 저장한다', (validInput) => {
+    const money = new Money();
+
+    money.receiveInjectionValue(validInput);
+
+    expect(money.getMoney()).toBe(validInput);
+  });
+
+  test('1000원 미만의 금액을 투입하면 예외 처리 한다.', () => {
+    const invalidInput = 999;
+
+    const money = new Money();
+
+    expect(() => money.receiveInjectionValue(invalidInput)).toThrow();
+  });
+});
diff --git a/docs/STEP2-READ-ME.md b/docs/STEP2-READ-ME.md
new file mode 100644
index 0000000000..27af7fcc7c
--- /dev/null
+++ b/docs/STEP2-READ-ME.md
@@ -0,0 +1,33 @@
+# STEP 2에 관한 README.md
+
+> [배포 링크](https://brgndyy.github.io/javascript-lotto/)
+
+## - 도메인
+
+### 1. Lotto
+
+단일 로또에 관한 클래스입니다. 숫자 6개를 받아서 숫자 배열로 관리해주는 기능을 합니다.
+
+### 2. LottoMachine
+
+금액을 입력 받아서, 구입 금액에 맞는 랜덤 로또를 발행해주는 기능을 합니다.
+
+또한 당첨 번호를 받아서, 1등부터 5등까지의 등수 결과 객체를 반환해줍니다.
+
+### 3. Money
+
+돈을 입력 받아서, 해당 구입금액에 대한 유효성을 검사합니다.
+
+### 4. RewardGenerator
+
+구매한 로또와 입력받은 당첨번호를 대조해보면서 각 매치카운트를 계산해서 1등부터 5등까지의 랭크를 지정합니다.
+
+### 5. WinningLotto
+
+당첨 번호, 보너스 번호를 입력받아서 관리합니다.
+
+---
+
+## - 레이아웃 구성
+
+<img width="1081" alt="스크린샷 2024-02-28 오전 11 54 43" src="https://github.com/brgndyy/javascript-lotto/assets/109535991/8ea07b1e-c900-40d7-9552-129acb2fe106">
diff --git a/index.html b/index.html
index e083bc1cbb..e49699c1b9 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,140 @@
     <title>🎱 행운의 로또</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link rel="stylesheet" href="./src/step2/styles/globals.css"" /> <link rel="stylesheet"
+    href="./src/step2/styles/main.css"" />
+    <link rel="stylesheet" href="./src/step2/styles/content.css" />
+    <link rel="stylesheet" href="./src/step2/styles/footer.css" />
+    <link rel="stylesheet" href="./src/step2/styles/header.css" />
+    <link rel="stylesheet" href="./src/step2/styles/modal.css" />
+    <link rel="stylesheet" href="./src/step2/styles/moneyInput.css" />
+    <link rel="stylesheet" href="./src/step2/styles/winningLottoInput.css" />
+    <link rel="stylesheet" href="./src/step2/styles/table.css" />
+    <link rel="stylesheet" href="./src/step2/styles/variables.css" />
+    <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;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
-    <div id="app">
-      <h1>🎱 행운의 로또</h1>
+    <div id="app" class="main-card" role="application">
+      <header class="main-header">
+        <div class="main-header-container">
+          <h1 class="main-header-logo" role="heading">🎱 행운의 로또</h1>
+        </div>
+      </header>
+
+      <main class="content-card" role="main">
+        <div class="content-container">
+          <div class="content-title-container">
+            <h1>🎱 내 번호 당첨 확인 🎱</h1>
+          </div>
+          <div class="buy-lotto-container">
+            <form class="buy-lotto-form" id="moneyInputForm" role="form">
+              <div class="buy-lotto-label-input-wrapper">
+                <label for="moneyInput" class="label buy-lotto">구입할 금액을 입력해주세요</label>
+                <input type="text" placeholder="금액" name="moneyInput" id="moneyInput" class="input buy-lotto-input" />
+              </div>
+              <div class="buy-lotto-button-container">
+                <button class="buy-lotto-button" id="buyingButton" type="submit" role="button">구입</button>
+              </div>
+            </form>
+          </div>
+          <div class="result-winning-lotto-container" id="resultAndWinningLottoContainer">
+            <div class="result-container">
+              <p class="result-text" id="resultText"></p>
+              <div id="boughtLottosContainer"></div>
+            </div>
+            <div class="winning-lotto-form-container">
+              <p class="winning-lotto-form-banner-text">지난 주 당첨번호 6개와 보너스 번호 1개를 입력해주세요.</p>
+              <form class="winning-lotto-form" id="winningLottoForm" role="form">
+                <div class="winning-lotto-wrapper">
+                  <div>
+                    <label for="winningLottoNumbers" class="winning-lotto-label"> 당첨 번호 </label>
+                    <div class="winning-lotto-input-container">
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                      <input type="text" name="winningLottoNumbers" class="winning-lotto-input" />
+                    </div>
+                  </div>
+                  <div class="bonus-number-container">
+                    <label for="bonusNumber" class="winning-lotto-label bonus-number">보너스 번호 </label>
+                    <div class="bonus-number-input-wrapper">
+                      <input type="text" id="bonusNumberInput" class="winning-lotto-input" />
+                    </div>
+                  </div>
+                </div>
+                <div class="result-button-container">
+                  <button class="result-button" type="submit">결과 확인하기</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer class="footer-container">
+        <p class="footer-logo-text">Copyright 2023. woowacourse</p>
+      </footer>
+
+      <main class="modal-card" id="modalCard">
+        <div class="modal-container">
+          <div class="close-button-container">
+            <span class="close-button" id="modalCloseButton">X</span>
+          </div>
+          <div class="winning-statistics-result-banner-container">
+            <span class="result-banner-text"> 🏆 당첨 통계 🏆 </span>
+          </div>
+          <table class="result-table">
+            <tr class="table-row">
+              <th class="table-heading table-data-text">일치 갯수</th>
+              <th class="table-heading table-data-text">당첨금</th>
+              <th class="table-heading table-data-text">당첨 갯수</th>
+            </tr>
+            <tr class="table-row">
+              <td class="table-data-text">3개</td>
+              <td class="table-data-text">5,000</td>
+              <td class="table-data-text match-count-text"></td>
+            </tr>
+            <tr class="table-row">
+              <td class="table-data-text">4개</td>
+              <td class="table-data-text">50,000</td>
+              <td class="table-data-text match-count-text"></td>
+            </tr>
+            <tr class="table-row">
+              <td class="table-data-text">5개</td>
+              <td class="table-data-text">1,500,000</td>
+              <td class="table-data-text match-count-text"></td>
+            </tr>
+            <tr class="table-row">
+              <td class="table-data-text">5개+보너스볼</td>
+              <td class="table-data-text">30,000,000</td>
+              <td class="table-data-text match-count-text"></td>
+            </tr>
+            <tr class="table-row">
+              <td class="table-data-text">6개</td>
+              <td class="table-data-text">2,000,000,000</td>
+              <td class="table-data-text match-count-text"></td>
+            </tr>
+          </table>
+
+          <div class="statistics-result-banner-container">
+            <p class="statistics-result-text" id="statisticsResultText"></p>
+          </div>
+
+          <div class="retry-select-button-container">
+            <button id="retrySelectButton" class="retry-select-button">다시 시작하기</button>
+          </div>
+        </div>
+      </main>
     </div>
-    <script type="module" src="./src/js/index.js"></script>
+    <script type="module" src="./src/step2-index.js"></script>
+    <!-- <script type="module" src="./dist/step2-bundle.js"></script> -->
   </body>
 </html>
diff --git a/package.json b/package.json
index 973688dd05..11063580c1 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/Constants/Messages/errorMessage.js b/src/Constants/Messages/errorMessage.js
index 3b40b9807e..539a7577df 100644
--- a/src/Constants/Messages/errorMessage.js
+++ b/src/Constants/Messages/errorMessage.js
@@ -1,10 +1,12 @@
 const ERROR_MESSAGE = Object.freeze({
   INVALID_MIN_MONEY: '최소 구입 금액은 1000원 이상이어야해요!',
+  OVER_MAX_PRICE: '최대 구입 금액은 100,000원이에요!',
   NO_ANY_INPUT: '',
   HAVE_DUPLICATION_OF_LOTTO_NUMBER: '로또 번호에 중복된 숫자가 존재합니다.',
   OUT_OF_RANGE: '로또 번호는 1이상 45이하의 숫자여야해요!',
   INVALID_LENGTH: '로또 번호는 총 6개여야해요!',
   INVALID_RETRY_INPUT: 'y나 n을 입력해주세요!',
+  INVALID_TYPE: '구입 금액은 숫자여야해요!',
 });
 
 export default ERROR_MESSAGE;
diff --git a/src/Constants/Messages/progressMessage.js b/src/Constants/Messages/progressMessage.js
index 9e7189254b..40e6910413 100644
--- a/src/Constants/Messages/progressMessage.js
+++ b/src/Constants/Messages/progressMessage.js
@@ -3,9 +3,9 @@ const PROGRESS_MESSAGE = Object.freeze({
   INPUT_WINNING_LOTTO: '당첨 번호를 입력해주세요.',
   INPUT_BONUS_NUMBER: '보너스 번호를 입력해주세요.',
   SELECT_RE_RUN: '다시 시작하시겠습니까? (y/n)',
-  BUY_LOTTO: '개를 구매했습니다.',
+  BUY_LOTTO: (lottoLength) => `총 ${lottoLength}개를 구매했습니다.`,
   RESULT_HEADER: '당첨 통계\n--------------------',
-  RATE_OF_RETURN_MESSAGE: (rateOfReturn) => `총 수익률은 ${rateOfReturn.toLocaleString()}% 입니다.`,
+  RATE_OF_RETURN_MESSAGE: (rateOfReturn) => `당신의 총 수익률은 ${rateOfReturn.toLocaleString()}% 입니다.`,
 });
 
 export default PROGRESS_MESSAGE;
diff --git a/src/Constants/lottoReward.js b/src/Constants/lottoReward.js
index 5216c3a708..aeb5bbd150 100644
--- a/src/Constants/lottoReward.js
+++ b/src/Constants/lottoReward.js
@@ -1,4 +1,4 @@
-import deepFreeze from '../Utils/deepFreeze';
+import deepFreeze from '../Utils/deepFreeze.js';
 
 const LOTTO_REWARD = deepFreeze({
   1: {
diff --git a/src/Constants/lottoSetting.js b/src/Constants/lottoSetting.js
index bc60773793..d0ee743066 100644
--- a/src/Constants/lottoSetting.js
+++ b/src/Constants/lottoSetting.js
@@ -1,5 +1,6 @@
 const LOTTO_SETTING = Object.freeze({
   MIN_PRICE: 1000,
+  MAX_PRICE: 100000,
   MIN_NUM: 1,
   MAX_NUM: 45,
   VALID_LENGTH: 6,
diff --git a/src/Constants/matchCountCondition.js b/src/Constants/matchCountCondition.js
index 5e6effba57..40a98b4969 100644
--- a/src/Constants/matchCountCondition.js
+++ b/src/Constants/matchCountCondition.js
@@ -1,4 +1,4 @@
-import deepFreeze from '../Utils/deepFreeze';
+import deepFreeze from '../Utils/deepFreeze.js';
 
 const MATCH_COUNT_CONDITION = deepFreeze({
   FIRST: {
diff --git a/src/Constants/retry.js b/src/Constants/retry.js
index 392e7a93c9..7eee176727 100644
--- a/src/Constants/retry.js
+++ b/src/Constants/retry.js
@@ -1,4 +1,4 @@
-import deepFreeze from '../Utils/deepFreeze';
+import deepFreeze from '../Utils/deepFreeze.js';
 
 const RETRY = deepFreeze({
   YES: ['y', 'Y'],
diff --git a/src/Domain/Lotto.js b/src/Domain/Lotto.js
index 6fe7367130..58e6a74f30 100644
--- a/src/Domain/Lotto.js
+++ b/src/Domain/Lotto.js
@@ -1,6 +1,6 @@
-import LOTTO_SETTING from '../Constants/lottoSetting';
-import ERROR_MESSAGE from '../Constants/Messages/errorMessage';
-import AppError from '../Error/AppError';
+import LOTTO_SETTING from '../Constants/lottoSetting.js';
+import ERROR_MESSAGE from '../Constants/Messages/errorMessage.js';
+import AppError from '../Error/AppError.js';
 
 export default class Lotto {
   #numbers;
diff --git a/src/Domain/LottoMachine.js b/src/Domain/LottoMachine.js
index 0044652719..53763da12c 100644
--- a/src/Domain/LottoMachine.js
+++ b/src/Domain/LottoMachine.js
@@ -1,35 +1,22 @@
-import LOTTO_SETTING from '../Constants/lottoSetting';
-import ERROR_MESSAGE from '../Constants/Messages/errorMessage';
-import generateRandomNumberFromRange from '../Utils/generateRandomNumberFromRange';
-import RewardGenerator from './RewardGenerator';
-import AppError from '../Error/AppError';
-import Lotto from './Lotto';
-import LOTTO_REWARD from '../Constants/lottoReward';
+import LOTTO_SETTING from '../Constants/lottoSetting.js';
+import generateRandomNumberFromRange from '../Utils/generateRandomNumberFromRange.js';
+import RewardGenerator from './RewardGenerator.js';
+import Lotto from './Lotto.js';
+import LOTTO_REWARD from '../Constants/lottoReward.js';
 
 export default class LottoMachine {
-  #money;
-
   #totalPrize = 0;
 
   #boughtLottos;
 
   #rewardGenerator;
 
-  constructor(money) {
+  constructor() {
     this.#rewardGenerator = new RewardGenerator();
-    this.#money = money;
-    this.#validateMoney();
-    this.#makeLottoByMoney();
-  }
-
-  #validateMoney() {
-    if (this.#money < LOTTO_SETTING.MIN_PRICE) {
-      throw new AppError(ERROR_MESSAGE.INVALID_MIN_MONEY);
-    }
   }
 
-  #makeLottoByMoney() {
-    const totalBoughtLottoCount = Math.floor(this.#money / LOTTO_SETTING.MIN_PRICE);
+  makeLottoByMoney(money) {
+    const totalBoughtLottoCount = Math.floor(money / LOTTO_SETTING.MIN_PRICE);
 
     this.#boughtLottos = Array.from({ length: totalBoughtLottoCount }, () => {
       const newLotto = this.#makeNewLotto();
@@ -62,7 +49,7 @@ export default class LottoMachine {
       this.#rewardGenerator.calculateRewardRank(lottoNumber, totalWinningLottoInfo);
     });
 
-    const totalRewardResult = this.#rewardGenerator.getTotalRewardResult();
+    const totalRewardResult = this.#rewardGenerator.getTotalRewardResult().sort((a, b) => b.rank - a.rank);
 
     this.#calculateTotalPrize(totalRewardResult);
 
@@ -77,7 +64,7 @@ export default class LottoMachine {
     });
   }
 
-  getRateOfIncome() {
-    return Number(((this.#totalPrize / this.#money) * 100).toFixed(1)).toLocaleString();
+  getRateOfIncome(money) {
+    return Number(((this.#totalPrize / money) * 100).toFixed(1)).toLocaleString();
   }
 }
diff --git a/src/Domain/Money.js b/src/Domain/Money.js
new file mode 100644
index 0000000000..c3e53c9025
--- /dev/null
+++ b/src/Domain/Money.js
@@ -0,0 +1,42 @@
+import LOTTO_SETTING from '../Constants/lottoSetting.js';
+import AppError from '../Error/AppError.js';
+import ERROR_MESSAGE from '../Constants/Messages/errorMessage.js';
+
+class Money {
+  #money;
+
+  #validateMoney(money) {
+    this.#validateType(money);
+    this.#validateMinPrice(money);
+    this.#validateMaxPrice(money);
+  }
+
+  #validateMinPrice(money) {
+    if (money < LOTTO_SETTING.MIN_PRICE) {
+      throw new AppError(ERROR_MESSAGE.INVALID_MIN_MONEY);
+    }
+  }
+
+  #validateMaxPrice(money) {
+    if (money > LOTTO_SETTING.MAX_PRICE) {
+      throw new AppError(ERROR_MESSAGE.OVER_MAX_PRICE);
+    }
+  }
+
+  #validateType(money) {
+    if (!Number.isInteger(money)) {
+      throw new AppError(ERROR_MESSAGE.INVALID_TYPE);
+    }
+  }
+
+  receiveInjectionValue(money) {
+    this.#validateMoney(money);
+    this.#money = money;
+  }
+
+  getMoney() {
+    return this.#money;
+  }
+}
+
+export default Money;
diff --git a/src/Domain/RewardGenerator.js b/src/Domain/RewardGenerator.js
index 93f373586d..d5fa796983 100644
--- a/src/Domain/RewardGenerator.js
+++ b/src/Domain/RewardGenerator.js
@@ -1,4 +1,4 @@
-import MATCH_COUNT_CONDITION from '../Constants/matchCountCondition';
+import MATCH_COUNT_CONDITION from '../Constants/matchCountCondition.js';
 
 class RewardGenerator {
   #totalRewardResult = [
diff --git a/src/Domain/WinningLotto.js b/src/Domain/WinningLotto.js
index c376e39886..2f4eaa458e 100644
--- a/src/Domain/WinningLotto.js
+++ b/src/Domain/WinningLotto.js
@@ -1,7 +1,7 @@
-import Lotto from './Lotto';
-import ERROR_MESSAGE from '../Constants/Messages/errorMessage';
-import LOTTO_SETTING from '../Constants/lottoSetting';
-import AppError from '../Error/AppError';
+import Lotto from './Lotto.js';
+import ERROR_MESSAGE from '../Constants/Messages/errorMessage.js';
+import LOTTO_SETTING from '../Constants/lottoSetting.js';
+import AppError from '../Error/AppError.js';
 
 class WinningLotto {
   #winningLottoNumbers;
@@ -13,23 +13,23 @@ class WinningLotto {
   }
 
   setBonusNumber(bonusNumber) {
+    this.#validateBonusNumber(bonusNumber);
     this.#bonusNumber = bonusNumber;
-    this.#validateBonusNumber();
   }
 
-  #validateBonusNumber() {
-    this.#validateRange();
-    this.#validateDuplicate();
+  #validateBonusNumber(bonusNumber) {
+    this.#validateRange(bonusNumber);
+    this.#validateDuplicate(bonusNumber);
   }
 
-  #validateRange() {
-    if (this.#bonusNumber < LOTTO_SETTING.MIN_NUM || this.#bonusNumber > LOTTO_SETTING.MAX_NUM) {
+  #validateRange(bonusNumber) {
+    if (bonusNumber < LOTTO_SETTING.MIN_NUM || bonusNumber > LOTTO_SETTING.MAX_NUM) {
       throw new AppError(ERROR_MESSAGE.OUT_OF_RANGE);
     }
   }
 
-  #validateDuplicate() {
-    if (this.#winningLottoNumbers.includes(this.#bonusNumber)) {
+  #validateDuplicate(bonusNumber) {
+    if (this.#winningLottoNumbers.includes(bonusNumber)) {
       throw new AppError(ERROR_MESSAGE.HAVE_DUPLICATION_OF_LOTTO_NUMBER);
     }
   }
diff --git a/src/LottoController.js b/src/LottoController.js
index 5607ee3373..614bb542a4 100644
--- a/src/LottoController.js
+++ b/src/LottoController.js
@@ -3,12 +3,15 @@ import OutputView from './View/OutputView';
 import LottoMachine from './Domain/LottoMachine';
 import WinningLotto from './Domain/WinningLotto';
 import retryOnFailureAsync from './Utils/retryOnFailureAsync';
+import Money from './Domain/Money.js';
 
 class LottoController {
-  #lottoMachine;
+  #lottoMachine = new LottoMachine();
 
   #winningLotto = new WinningLotto();
 
+  #money = new Money();
+  
   async run() {
     await retryOnFailureAsync(this.#readBuyingLottoMoney, this);
     this.#printBoughtLottos();
@@ -20,8 +23,10 @@ class LottoController {
   }
 
   async #readBuyingLottoMoney() {
-    const money = await InputView.readMoney();
-    this.#lottoMachine = new LottoMachine(money);
+    const moneyInput = await InputView.readMoney();
+    this.#money.fromInputValue(moneyInput);
+    const buyingMoney = this.#money.getMoney();
+    this.#lottoMachine.makeLottoByMoney(buyingMoney);
   }
 
   #printBoughtLottos() {
@@ -48,7 +53,8 @@ class LottoController {
   }
 
   #printRateOfReturn() {
-    const rateOfIncome = this.#lottoMachine.getRateOfIncome();
+    const buyingMoney = this.#money.getMoney();
+    const rateOfIncome = this.#lottoMachine.getRateOfIncome(buyingMoney);
     OutputView.printRateOfReturn(rateOfIncome);
   }
 
diff --git a/src/View/OutputView.js b/src/View/OutputView.js
index c9891e35d4..0abf94096e 100644
--- a/src/View/OutputView.js
+++ b/src/View/OutputView.js
@@ -1,6 +1,6 @@
-import DELIMITER from '../Constants/delimiter';
-import PROGRESS_MESSAGE from '../Constants/Messages/progressMessage';
-import LOTTO_REWARD from '../Constants/lottoReward';
+import DELIMITER from '../Constants/delimiter.js';
+import PROGRESS_MESSAGE from '../Constants/Messages/progressMessage.js';
+import LOTTO_REWARD from '../Constants/lottoReward.js';
 
 const OutputView = {
   printBoughtLottoLength(lottoCount) {
@@ -12,9 +12,7 @@ const OutputView = {
   },
 
   printRewardResult(rewardResult) {
-    const sortedResult = rewardResult.sort((a, b) => b.rank - a.rank);
-
-    sortedResult.forEach((result) => {
+    rewardResult.forEach((result) => {
       this.printMessage(`${LOTTO_REWARD[result.rank].message}${result.count}개`);
     });
   },
diff --git a/src/step2-index.js b/src/step2-index.js
index f1527d9448..5a3337ba10 100644
--- a/src/step2-index.js
+++ b/src/step2-index.js
@@ -2,3 +2,35 @@
  * step 2의 시작점이 되는 파일입니다.
  * 노드 환경에서 사용하는 readline 등을 불러올 경우 정상적으로 빌드할 수 없습니다.
  */
+
+import { inputMoneyHandler } from './step2/handlers/inputMoneyHandler.js';
+import { inputWinningLottoNumbersHandler } from './step2/handlers/inputWinningLottoNumbersHandler.js';
+import { statisticsResultHandler, modalCloseHandler } from './step2/handlers/statisticsResultHandler.js';
+import { reloadPage } from './step2/handlers/uiUtils.js';
+import './step2/styles/globals.css';
+import './step2/styles/main.css';
+import './step2/styles/header.css';
+import './step2/styles/content.css';
+import './step2/styles/moneyInput.css';
+import './step2/styles/winningLottoInput.css';
+import './step2/styles/modal.css';
+import './step2/styles/footer.css';
+import './step2/styles/variables.css';
+import './step2/styles/table.css';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const moneyInputForm = document.getElementById('moneyInputForm');
+  const winningLottoInputs = document.querySelectorAll('.winning-lotto-input');
+  const winningLottoForm = document.getElementById('winningLottoForm');
+  const modalCloseButton = document.getElementById('modalCloseButton');
+  const winningCounts = document.querySelectorAll('.match-count-text');
+  const retrySelectButton = document.getElementById('retrySelectButton');
+
+  moneyInputForm.addEventListener('submit', inputMoneyHandler);
+  winningLottoInputs.forEach((input, index) => {
+    inputWinningLottoNumbersHandler({ input, index, winningLottoInputs });
+  });
+  winningLottoForm.addEventListener('submit', (e) => statisticsResultHandler({ e, winningCounts }));
+  modalCloseButton.addEventListener('click', modalCloseHandler);
+  retrySelectButton.addEventListener('click', reloadPage);
+});
diff --git a/src/step2/handlers/boughtLottoHandlers.js b/src/step2/handlers/boughtLottoHandlers.js
new file mode 100644
index 0000000000..3fead5ca48
--- /dev/null
+++ b/src/step2/handlers/boughtLottoHandlers.js
@@ -0,0 +1,29 @@
+import PROGRESS_MESSAGE from '../../Constants/Messages/progressMessage.js';
+import DELIMITER from '../../Constants/delimiter.js';
+
+/**
+ * 구매한 로또 갯수를 렌더링 합니다.
+ * @param { number } lottoLength
+ */
+export const renderBoughtLottosLength = (boughtLottoslLength) => {
+  const resultText = document.getElementById('resultText');
+  resultText.textContent = `${PROGRESS_MESSAGE.BUY_LOTTO(boughtLottoslLength)}`;
+};
+
+/**
+ * 구매한 로또들을 렌더링 합니다.
+ * @param { number[] } boughtLottos
+ */
+export const renderBoughtLottos = (boughtLottos) => {
+  boughtLottos.forEach((lotto) => {
+    boughtLottosContainer.innerHTML += `<div class="boughtLotto"><p class ="lottoEmoji">🎟️</p> ${lotto.join(
+      `${DELIMITER.LOTTO_NUMBER_SEPERATOR} `,
+    )}</div>`;
+  });
+};
+
+export const visibilizeWinningLottoForm = () => {
+  const resultAndWinningLottoContainer = document.getElementById('resultAndWinningLottoContainer');
+
+  resultAndWinningLottoContainer.classList.add('visible');
+};
diff --git a/src/step2/handlers/inputMoneyHandler.js b/src/step2/handlers/inputMoneyHandler.js
new file mode 100644
index 0000000000..325358596c
--- /dev/null
+++ b/src/step2/handlers/inputMoneyHandler.js
@@ -0,0 +1,49 @@
+import { initializeInputValue } from './uiUtils.js';
+import { money, lottoMachine } from '../instances.js';
+import { renderBoughtLottos, renderBoughtLottosLength, visibilizeWinningLottoForm } from './boughtLottoHandlers.js';
+import safeEventHandlerWithAlertError from '../utils/safeEventHandlerWithAlertError.js';
+
+/**
+ * 구입 금액을 입력한후, 올바른 구입 금액이라면 해당 입력값을 반환합니다.
+ * @param { string } inputMoney
+ * @returns { number }
+ */
+
+const inputBuyingLottoMoney = (inputMoney) => {
+  money.receiveInjectionValue(Number(inputMoney));
+
+  return money.getMoney();
+};
+
+/**
+ * 구입금액으로 무작위 로또를 구매합니다.
+ * @param { number } buyingLottoMoney
+ * @returns { number[] }
+ */
+
+const buyLottos = (buyingLottoMoney) => {
+  lottoMachine.makeLottoByMoney(buyingLottoMoney);
+  const boughtLottos = lottoMachine.getLottos();
+
+  return boughtLottos;
+};
+
+export const inputMoneyHandler = (e) => {
+  e.preventDefault();
+
+  safeEventHandlerWithAlertError(
+    () => {
+      const buyingLottoMoney = inputBuyingLottoMoney(moneyInput.value);
+      const boughtLottos = buyLottos(buyingLottoMoney);
+      renderBoughtLottosLength(boughtLottos.length);
+      renderBoughtLottos(boughtLottos);
+      visibilizeWinningLottoForm();
+    },
+    (error) => {
+      alert(error.message);
+    },
+    () => {
+      initializeInputValue(moneyInput);
+    },
+  );
+};
diff --git a/src/step2/handlers/inputWinningLottoNumbersHandler.js b/src/step2/handlers/inputWinningLottoNumbersHandler.js
new file mode 100644
index 0000000000..53fa8bcddc
--- /dev/null
+++ b/src/step2/handlers/inputWinningLottoNumbersHandler.js
@@ -0,0 +1,61 @@
+import { winningLotto } from '../instances.js';
+import LOTTO_SETTING from '../../Constants/lottoSetting.js';
+import safeEventHandlerWithAlertError from '../utils/safeEventHandlerWithAlertError.js';
+import { initializeInputValue } from './uiUtils.js';
+
+const winningNumbers = [];
+
+const focusNextInput = ({ index, winningLottoInputs }) => {
+  if (index + 1 < winningLottoInputs.length) {
+    winningLottoInputs[index + 1].focus();
+  }
+};
+
+const setBonusNumber = (bonusNumber, input) => {
+  safeEventHandlerWithAlertError(
+    () => {
+      winningLotto.setBonusNumber(bonusNumber);
+    },
+    (error) => {
+      alert(error.message);
+      initializeInputValue(input);
+    },
+  );
+};
+
+const totalWinningLottoNumbersHandler = ({ input, index, winningLottoInputs }) => {
+  const winningNumber = Number(input.value);
+
+  if (index < LOTTO_SETTING.VALID_LENGTH) {
+    focusNextInput({ index, winningLottoInputs });
+    winningNumbers.push(winningNumber);
+  }
+
+  if (winningNumbers.length === LOTTO_SETTING.VALID_LENGTH) {
+    safeEventHandlerWithAlertError(
+      () => {
+        winningLotto.setWinLottoNumbers(winningNumbers);
+      },
+      (error) => {
+        alert(error.message);
+        winningLottoInputs.forEach((input) => {
+          initializeInputValue(input);
+        });
+      },
+    );
+  }
+
+  if (index === LOTTO_SETTING.VALID_LENGTH) {
+    setBonusNumber(winningNumber, input);
+    input.blur();
+  }
+};
+
+export const inputWinningLottoNumbersHandler = ({ input, index, winningLottoInputs }) => {
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      totalWinningLottoNumbersHandler({ input, index, winningLottoInputs });
+    }
+  });
+};
diff --git a/src/step2/handlers/statisticsResultHandler.js b/src/step2/handlers/statisticsResultHandler.js
new file mode 100644
index 0000000000..a87e15e5a5
--- /dev/null
+++ b/src/step2/handlers/statisticsResultHandler.js
@@ -0,0 +1,51 @@
+import { addClassNameHandler, removeClassNameHandler } from './uiUtils.js';
+import { winningLotto, lottoMachine, money } from '../instances.js';
+import PROGRESS_MESSAGE from '../../Constants/Messages/progressMessage.js';
+
+const modalOpenHandler = () => {
+  const modalCard = document.getElementById('modalCard');
+  addClassNameHandler(modalCard, 'modal-open');
+};
+
+export const modalCloseHandler = () => {
+  const modalCard = document.getElementById('modalCard');
+  removeClassNameHandler(modalCard, 'modal-open');
+};
+
+/**
+ * 총 수익률을 렌더링 합니다.
+ * @param { number } rateOfReturn
+ */
+
+const renderStatisticsResultText = (rateOfReturn) => {
+  const statisticsResultText = document.getElementById('statisticsResultText');
+
+  statisticsResultText.textContent = PROGRESS_MESSAGE.RATE_OF_RETURN_MESSAGE(rateOfReturn);
+};
+
+const isAlreadyPrintedRateOfReturn = () => {
+  const statisticsResultText = document.getElementById('statisticsResultText').textContent;
+  return statisticsResultText !== '';
+};
+
+export const statisticsResultHandler = ({ e, winningCounts }) => {
+  e.preventDefault();
+
+  if (isAlreadyPrintedRateOfReturn()) {
+    modalOpenHandler();
+    return;
+  }
+
+  modalOpenHandler();
+
+  const totalWinningLottoInfo = winningLotto.getWinLottoNumbers();
+  const result = lottoMachine.getRewardResult(totalWinningLottoInfo);
+
+  winningCounts.forEach((winningCount, index) => {
+    winningCount.textContent = result[index].count + '개';
+  });
+
+  const buyingMoney = money.getMoney();
+  const rateOfReturn = lottoMachine.getRateOfIncome(buyingMoney);
+  renderStatisticsResultText(rateOfReturn);
+};
diff --git a/src/step2/handlers/uiUtils.js b/src/step2/handlers/uiUtils.js
new file mode 100644
index 0000000000..9491034004
--- /dev/null
+++ b/src/step2/handlers/uiUtils.js
@@ -0,0 +1,15 @@
+export const initializeInputValue = (targetInput) => {
+  targetInput.value = '';
+};
+
+export const addClassNameHandler = (targetTag, className) => {
+  targetTag.classList.add(className);
+};
+
+export const removeClassNameHandler = (targetTag, className) => {
+  targetTag.classList.remove(className);
+};
+
+export const reloadPage = () => {
+  window.location.reload();
+};
diff --git a/src/step2/instances.js b/src/step2/instances.js
new file mode 100644
index 0000000000..9ad9e44ded
--- /dev/null
+++ b/src/step2/instances.js
@@ -0,0 +1,7 @@
+import Money from '../Domain/Money.js';
+import LottoMachine from '../Domain/LottoMachine.js';
+import WinningLotto from '../Domain/WinningLotto.js';
+
+export const money = new Money();
+export const lottoMachine = new LottoMachine();
+export const winningLotto = new WinningLotto();
diff --git a/src/step2/styles/content.css b/src/step2/styles/content.css
new file mode 100644
index 0000000000..462193d667
--- /dev/null
+++ b/src/step2/styles/content.css
@@ -0,0 +1,23 @@
+.content-card {
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content-container {
+  width: 414px;
+  height: 727px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  margin-top: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: scroll;
+}
+
+.content-title-container {
+  margin: 30px 0;
+}
diff --git a/src/step2/styles/footer.css b/src/step2/styles/footer.css
new file mode 100644
index 0000000000..2b482bb6d9
--- /dev/null
+++ b/src/step2/styles/footer.css
@@ -0,0 +1,15 @@
+.footer-container {
+  border-top: 1px solid rgba(78, 91, 166, 0.2);
+  height: 80px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer-logo-text {
+  color: var(--main-color);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 800;
+  font-size: 14px;
+}
diff --git a/src/step2/styles/globals.css b/src/step2/styles/globals.css
new file mode 100644
index 0000000000..3bbf6e6597
--- /dev/null
+++ b/src/step2/styles/globals.css
@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  margin: 0;
+  width: 100vw;
+  min-height: 100vh;
+  height: auto;
+  background: white;
+  position: relative;
+  overflow: scroll;
+}
+
+input {
+  border-radius: 4px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+}
+
+button {
+  background: var(--main-color);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
diff --git a/src/step2/styles/header.css b/src/step2/styles/header.css
new file mode 100644
index 0000000000..ad2ff96b21
--- /dev/null
+++ b/src/step2/styles/header.css
@@ -0,0 +1,27 @@
+.main-header {
+  width: 100vw;
+  max-height: 64px;
+  height: auto;
+  background: var(--main-color);
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.main-header-container {
+  width: 30%;
+  text-align: center;
+}
+
+.main-header-logo {
+  color: #fff;
+  font-weight: 800;
+  font-size: 24px;
+  line-height: 36px;
+  font-family: 'Roboto', sans-serif;
+  white-space: nowrap;
+}
diff --git a/src/step2/styles/main.css b/src/step2/styles/main.css
new file mode 100644
index 0000000000..9aa4927acc
--- /dev/null
+++ b/src/step2/styles/main.css
@@ -0,0 +1,4 @@
+.main-card {
+  height: 100vh;
+  margin: 0 auto;
+}
diff --git a/src/step2/styles/modal.css b/src/step2/styles/modal.css
new file mode 100644
index 0000000000..31e9e1de63
--- /dev/null
+++ b/src/step2/styles/modal.css
@@ -0,0 +1,58 @@
+.modal-card {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-open {
+  display: flex;
+}
+
+.modal-container {
+  width: 350px;
+  height: 500px;
+  background: #fff;
+  border-radius: 4px;
+  position: relative;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.winning-statistics-result-banner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 25px 0;
+}
+
+.result-banner-text {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.close-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px;
+}
+
+.close-button {
+  font-size: 18px;
+  color: rgba(0, 0, 0, 1);
+  cursor: pointer;
+}
diff --git a/src/step2/styles/moneyInput.css b/src/step2/styles/moneyInput.css
new file mode 100644
index 0000000000..35e8269756
--- /dev/null
+++ b/src/step2/styles/moneyInput.css
@@ -0,0 +1,74 @@
+.buy-lotto-container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 64px;
+}
+
+.buy-lotto-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.buy-lotto-label-input-wrapper {
+  width: 75%;
+}
+
+.buy-lotto {
+  margin: 10px;
+}
+
+.inputLabel {
+  margin: 10px;
+}
+
+.buy-lotto-input {
+  margin: 10px;
+  padding: 10px;
+  width: 100%;
+}
+
+.buy-lotto-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.buy-lotto-button {
+  padding: 10px;
+  width: 56px;
+  margin-top: 20px;
+  height: 36px;
+  margin-left: 25px;
+}
+
+.result-winning-lotto-container {
+  width: 100%;
+  padding: 20px;
+  display: none;
+}
+
+.visible {
+  display: inline;
+}
+
+.result-container {
+  width: 100%;
+}
+
+.result-text {
+  margin-bottom: 10px;
+}
+
+.lottoEmoji {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 600;
+  font-size: 34px;
+  margin-right: 10px;
+}
+
+.boughtLotto {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/step2/styles/table.css b/src/step2/styles/table.css
new file mode 100644
index 0000000000..ac73527cbe
--- /dev/null
+++ b/src/step2/styles/table.css
@@ -0,0 +1,60 @@
+.result-table {
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+}
+
+.table-row {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 10px 0;
+}
+
+.table-row:nth-last-child(1) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.table-heading {
+  font-weight: bold !important;
+}
+
+.table-data-text {
+  font-size: 15px;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+  text-align: center;
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.statistics-result-banner-container {
+  width: 100%;
+  margin: 40px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistics-result-text {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-size: 15px;
+}
+
+.retry-select-button-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.retry-select-button {
+  width: 100%;
+  height: 36px;
+  padding: 6px 6px 6px 8px;
+  margin-bottom: 20px;
+}
diff --git a/src/step2/styles/variables.css b/src/step2/styles/variables.css
new file mode 100644
index 0000000000..ded88ac286
--- /dev/null
+++ b/src/step2/styles/variables.css
@@ -0,0 +1,3 @@
+:root {
+  --main-color: #4e5ba6;
+}
diff --git a/src/step2/styles/winningLottoInput.css b/src/step2/styles/winningLottoInput.css
new file mode 100644
index 0000000000..d067392a04
--- /dev/null
+++ b/src/step2/styles/winningLottoInput.css
@@ -0,0 +1,67 @@
+.winning-lotto-form-container {
+  width: 100%;
+}
+
+.winning-lotto-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.winning-lotto-form-banner-text {
+  margin: 10px 0;
+}
+
+.winning-lotto-label {
+  margin-bottom: 10px;
+}
+
+.winning-lotto-numbers-container {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+}
+
+.winning-lotto-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.winning-lotto-input-container {
+  margin-top: 10px;
+}
+
+.winning-lotto-input {
+  width: 34px;
+  height: 36px;
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid rgba(180, 180, 180, 1);
+}
+
+.bonus-number-container {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+}
+
+.bonus-number {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bonus-number-input-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.result-button-container {
+  width: 100%;
+  margin-top: 30px;
+}
+
+.result-button {
+  width: 100%;
+  padding: 6px 6px 6px 8px;
+  height: 36px;
+}
diff --git a/src/step2/utils/safeEventHandlerWithAlertError.js b/src/step2/utils/safeEventHandlerWithAlertError.js
new file mode 100644
index 0000000000..f339a0a820
--- /dev/null
+++ b/src/step2/utils/safeEventHandlerWithAlertError.js
@@ -0,0 +1,22 @@
+/**
+ * 주어진 작업을 안전하게 수행하고, 에러 처리 및 정리 작업을 관리하는 함수.
+ * @param {Function} action 실행할 작업을 담은 함수.
+ * @param {Function} errorHandler 에러 발생 시 실행할 처리 로직을 담은 함수.
+ * @param {Function} finalAction 항상 실행해야 하는 마무리 작업을 담은 함수.
+ */
+
+const safeEventHandlerWithAlertError = (action, errorHandler = null, finalAction = null) => {
+  try {
+    action();
+  } catch (error) {
+    if (errorHandler) {
+      errorHandler(error);
+    }
+  } finally {
+    if (finalAction) {
+      finalAction();
+    }
+  }
+};
+
+export default safeEventHandlerWithAlertError;
diff --git a/step2.config.js b/step2.config.js
index 9b9ffd9318..87fef2e18c 100644
--- a/step2.config.js
+++ b/step2.config.js
@@ -1,19 +1,19 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
-  mode: "development",
+  mode: 'development',
   devServer: {
     port: 9000,
   },
-  entry: "./src/step2-index.js",
+  entry: './src/step2-index.js',
   output: {
-    filename: "step2-bundle.js",
-    path: path.resolve(__dirname, "dist"),
+    filename: 'step2-bundle.js',
+    path: path.resolve(__dirname, 'dist'),
   },
   resolve: {
-    extensions: [".js", ".mjs", ".css"],
+    extensions: ['.js', '.mjs', '.css'],
   },
   module: {
     rules: [
@@ -22,24 +22,24 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: "babel-loader",
+            loader: 'babel-loader',
             options: {
-              presets: ["@babel/preset-env"],
+              presets: ['@babel/preset-env'],
             },
           },
         ],
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },
   plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      template: "./index.html",
+      template: './index.html',
     }),
   ],
-  devtool: "inline-source-map",
+  devtool: 'inline-source-map',
 };

일치 갯수	당첨금	당첨 갯수
3개	5,000
4개	50,000
5개	1,500,000
5개+보너스볼	30,000,000
6개	2,000,000,000