[2단계 - 행운의 로또 미션] 크리스(이송원) 미션 제출합니다.

README.md

@@ -29,9 +29,12 @@
 
 ### 🎯🎯 step2 당첨 결과 기능
 
-- [ ] 결과 확인하기 버튼을 누르면 당첨 통계, 수익률을 모달로 확인할 수 있다.
-- [ ] 로또 당첨 금액은 고정되어 있는 것으로 가정한다.
-- [ ] 다시 시작하기 버튼을 누르면 초기화 되서 다시 구매를 시작할 수 있다.
+- [x] 당첨 번호와 보너스 번호를 입력할 수 있다.
+  - 로또 번호들 중 중복된 번호가 있으면 안내메시지를 출력한다.
+  - 로또 번호들 중 1 ~ 45 사이의 숫자가 아닌 숫자가 있다면 안내메시지를 출력한다.
+- [x] 결과 확인하기 버튼을 누르면 당첨 통계, 수익률을 모달로 확인할 수 있다.
+  - 당첨 번호와 보너스 번호를 입력하지 않으면 안내메세지를 출력한다.
+- [x] 다시 시작하기 버튼을 누르면 초기화 되서 다시 구매를 시작할 수 있다.
 
 ### 🎯🎯🎯 step3 수동 구매
 
@@ -50,6 +53,13 @@
 - [x] 소비자가 받은 각각의 복권에서 중복되는 숫자가 존재하면 안된다.
 - [x] 금액은 1000원 이상을 입력해야 한다. 그 이하로 입력시 안내메세지를 출력한다.
 - [x] 남는 금액이 있을 경우 남는 금액만큼을 빼도록 안내한다.
+### step2 테스트
+
+- [x] 입력된 번호들 중 중복된 번호가 있다면 안내메세지를 출력한다.
+- [x] 입력된 번호들 중 1 ~ 45 사이의 숫자가 아닌 숫자가 있다면 안내메시지를 출력한다.
+- [x] 당첨번호가 모두 입력되지 않으면 결과를 확인할 수 없다.
+- [x] 결과 확인 버튼을 누르면, 당첨 통계, 수익률을 보여준다.
+- [x] 다시 시작하기 버튼을 누르면, 로또게임이 초기화된다.
 
 <br>
 
@@ -86,3 +96,10 @@ live-server 폴더명
 ## 📝 License
 
 This project is [MIT](https://github.com/woowacourse/javascript-lotto/blob/main/LICENSE) licensed.
+
+## 📓 Convention
+
+- 클래스에서 속성명 앞에 _ 가 붙여진 것은 해당 속성이 protected 속성임을 뜻하며 인스턴스 외부에서 해당 속성을 수정해서는 안됩니다.
+- 클래스에서 속성명 앞에 # 가 붙여진 것은 해당 속성이 private 속성임을 뜻하며 상속이 수행된 클래스 내부에서도 해당 속성을 사용하려 해서는 안됩니다.
+- 어떤 인스턴스에 pascal case 표기된 속성이 있다면 해당 속성이 사실 getter 임을 뜻합니다. 이를 조작하려는 시도를 하지 않도록 유의해주십시오. 
+

cypress/integration/lotto.spec.js

@@ -10,6 +10,7 @@ describe('기능 테스트', () => {
     cy.get('#lotto-count').should('have.text', '3');
     cy.get('.lotto-item').should('have.length', '3');
   });
+
   it('소비자가 받은 각각의 복권에서 중복되는 숫자가 존재하면 안된다.', () => {
     cy.get('#cost-input').type('5000');
     cy.get('#cost-submit-button').click();
@@ -21,6 +22,40 @@ describe('기능 테스트', () => {
       expect(lottoNumberList.length).to.equal(new Set(lottoNumberList).size);
     });
   });
+
+  it('결과 확인 버튼을 누르면, 당첨 통계, 수익률을 보여준다.', () => {
+    cy.get('#cost-input').type('3000');
+    cy.get('#cost-submit-button').click();
+    cy.get('.winning-number').eq(0).type(1);
+    cy.get('.winning-number').eq(1).type(2);
+    cy.get('.winning-number').eq(2).type(3);
+    cy.get('.winning-number').eq(3).type(4);
+    cy.get('.winning-number').eq(4).type(5);
+    cy.get('.winning-number').eq(5).type(6);
+    cy.get('.bonus-number').type(7);
+    cy.get('#result-modal-open-button').click();
+    cy.get('#modal').should('exist');
+    cy.get('#modal').contains('당첨 통계');
+    cy.get('#modal').contains('수익률');
+  });
+
+  it('다시 시작하기 버튼을 누르면, 로또게임이 초기화된다.', () => {
+    cy.get('#cost-input').type('3000');
+    cy.get('#cost-submit-button').click();
+    cy.get('.winning-number').eq(0).type(1);
+    cy.get('.winning-number').eq(1).type(2);
+    cy.get('.winning-number').eq(2).type(3);
+    cy.get('.winning-number').eq(3).type(4);
+    cy.get('.winning-number').eq(4).type(5);
+    cy.get('.winning-number').eq(5).type(6);
+    cy.get('.bonus-number').type(7);
+    cy.get('#result-modal-open-button').click();
+    cy.get('#restart-button').click();
+    cy.get('#cost-input').should('have.value', '');
+    cy.get('#purchase-result').should('not.be.visible');
+    cy.get('#winning-number-input-form').should('not.be.visible');
+    cy.get('#modal').should('not.be.visible');
+  });
 });
 
 describe('유저 입력 값 테스트', () => {
@@ -30,6 +65,7 @@ describe('유저 입력 값 테스트', () => {
       .then((win) => cy.stub(win, 'alert'))
       .as('alertStub');
   });
+
   it('금액은 1000원 이상을 입력해야 한다. 그 이하로 입력시 안내메세지를 출력한다.', () => {
     cy.get('#cost-input').type('500');
     cy.get('#cost-submit-button').click();
@@ -39,6 +75,7 @@ describe('유저 입력 값 테스트', () => {
     );
     cy.get('#purchase-result').should('not.be.visible');
   });
+
   it('남는 금액이 있을 경우 남는 금액만큼을 빼도록 안내한다.', () => {
     cy.get('#cost-input').type('3500');
     cy.get('#cost-submit-button').click();
@@ -48,5 +85,53 @@ describe('유저 입력 값 테스트', () => {
     );
     cy.get('#purchase-result').should('not.be.visible');
   });
-});
 
+  it('입력된 번호들 중 중복된 번호가 있다면 안내메세지를 출력한다.', () => {
+    cy.get('#cost-input').type('3000');
+    cy.get('#cost-submit-button').click();
+    cy.get('.winning-number').eq(0).type(1);
+    cy.get('.winning-number').eq(1).type(2);
+    cy.get('.winning-number').eq(2).type(3);
+    cy.get('.winning-number').eq(3).type(5);
+    cy.get('.winning-number').eq(4).type(5);
+    cy.get('.winning-number').eq(5).click();
+    cy.get('@alertStub').should(
+      'be.calledWith',
+      MESSAGE.DUPLICATED_NUMBER_EXIST_MESSAGE
+    );
+    cy.get('.winning-number').eq(5).should('have.text', '');
+  });
+
+  it('입력된 번호들 중 1 ~ 45 사이의 숫자가 아닌 숫자가 있다면 안내메시지를 출력한다.', () => {
+    cy.get('#cost-input').type('3000');
+    cy.get('#cost-submit-button').click();
+    cy.get('.winning-number').eq(0).type(1);
+    cy.get('.winning-number').eq(1).type(2);
+    cy.get('.winning-number').eq(2).type(3);
+    cy.get('.winning-number').eq(3).type(4);
+    cy.get('.winning-number').eq(4).type(55);
+    cy.get('.winning-number').eq(5).click();
+    cy.get('@alertStub').should(
+      'be.calledWith',
+      MESSAGE.NUMBER_RANGE_EXCEEDED_MESSAGE
+    );
+    cy.get('.winning-number').eq(4).should('have.text', '');
+  });
+
+  it('당첨번호가 모두 입력되지 않으면 결과를 확인할 수 없다.', () => {
+    cy.get('#cost-input').type('3000');
+    cy.get('#cost-submit-button').click();
+    cy.get('.winning-number').eq(0).type(1);
+    cy.get('.winning-number').eq(1).type(2);
+    cy.get('.winning-number').eq(2).type(3);
+    cy.get('.winning-number').eq(3).type(4);
+    cy.get('.winning-number').eq(4).type(5);
+    cy.get('.bonus-number').type(6);
+    cy.get('#result-modal-open-button').click();
+    cy.get('@alertStub').should(
+      'be.calledWith',
+      MESSAGE.SHOULD_INPUT_ALL_NUMBERS_MESSAGE
+    );
+    cy.get('#modal').should('not.be.visible');
+  });
+});

index.html

@@ -31,7 +31,7 @@ <h1 class="text-center">🎱 행운의 로또</h1>
               </button>
             </div>
           </form>
-          <section id="purchase-result" class="mt-9 hide">
+          <section id="purchase-result" class="mt-9 removed">
             <div class="d-flex">
               <label id="purchase-item-count" class="flex-auto my-0"></label>
               <div class="flex-auto d-flex justify-end pr-1">
@@ -41,62 +41,76 @@ <h1 class="text-center">🎱 행운의 로또</h1>
                 </label>
               </div>
             </div>
-            <div id="purchase-item-list" class="d-flex flex-wrap hide hide-lotto-numbers"></div>
+            <div
+              id="purchase-item-list"
+              class="d-flex flex-wrap removed lotto-numbers-removed"
+            ></div>
           </section>
-          <form class="mt-9" style="display: none">
+          <form id="winning-number-input-form" class="mt-9 removed">
             <label class="flex-auto d-inline-block mb-3"
               >지난 주 당첨번호 6개와 보너스 넘버 1개를 입력해주세요.</label
             >
-            <div class="d-flex">
+            <div id="correct-number-wrapper" class="d-flex">
               <div>
                 <h4 class="mt-0 mb-3 text-center">당첨 번호</h4>
                 <div>
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                   <input
                     type="number"
+                    data-custom-input
                     class="winning-number mx-1 text-center"
                   />
                 </div>
               </div>
               <div class="bonus-number-container flex-grow">
                 <h4 class="mt-0 mb-3 text-center">보너스 번호</h4>
                 <div class="d-flex justify-center">
-                  <input type="number" class="bonus-number text-center" />
+                  <input
+                    type="number"
+                    data-custom-input
+                    class="bonus-number text-center"
+                  />
                 </div>
               </div>
             </div>
             <button
               type="button"
-              class="open-result-modal-button mt-5 btn btn-cyan w-100"
+              id="result-modal-open-button"
+              class="mt-5 btn btn-cyan w-100"
             >
               결과 확인하기
             </button>
           </form>
         </div>
       </div>
 
-      <div class="modal">
+      <div id="modal">
         <div class="modal-inner p-10">
-          <div class="modal-close">
+          <div id="modal-close">
             <svg viewbox="0 0 40 40">
               <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
             </svg>
@@ -112,38 +126,16 @@ <h2 class="text-center">🏆 당첨 통계 🏆</h2>
                   <th class="p-3">당첨 갯수</th>
                 </tr>
               </thead>
-              <tbody>
-                <tr class="text-center">
-                  <td class="p-3">3개</td>
-                  <td class="p-3">5,000</td>
-                  <td class="p-3">n개</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>
-                </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>
-                </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>
-                </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>
-                </tr>
-              </tbody>
+              <tbody id="result-tbody"></tbody>
             </table>
           </div>
-          <p class="text-center font-bold">당신의 총 수익률은 %입니다.</p>
+          <p class="text-center font-bold">
+            당신의 총 수익률은 <span id="profit-rate"></span>%입니다.
+          </p>
           <div class="d-flex justify-center mt-5">
-            <button type="button" class="btn btn-cyan">다시 시작하기</button>
+            <button id="restart-button" type="button" class="btn btn-cyan">
+              다시 시작하기
+            </button>
           </div>
         </div>
       </div>

src/assets/css/index.css

@@ -31,10 +31,14 @@ body {
   padding-bottom: 4px;
 }
 
-#purchase-item-list.hide-lotto-numbers .lotto-numbers {
+#purchase-item-list.lotto-numbers-removed .lotto-numbers {
   display: none;
 }
 
+#purchase-item-list.lotto-numbers-added .lotto-numbers {
+  display: '';
+}
+
 .lotto-item {
   display: flex;
   align-items: center;

src/assets/css/shared/index.css

@@ -7,3 +7,4 @@
 @import 'modules/border.css';
 @import 'modules/flex.css';
 @import 'modules/display.css';
+@import 'modules/visibility.css';

src/assets/css/shared/modules/display.css

@@ -1,3 +1,7 @@
-.hide {
+.block-added {
+  display: none;
+}
+
+.removed {
   display: none;
 }

src/assets/css/shared/modules/visibility.css

@@ -0,0 +1,7 @@
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}

src/assets/css/ui/modules/modal.css

@@ -1,4 +1,4 @@
-.modal {
+#modal {
   opacity: 0;
   visibility: hidden;
   display: flex;
@@ -12,7 +12,7 @@
   z-index: 2;
 }
 
-.modal.open {
+#modal.open {
   opacity: 1;
   visibility: visible;
 }
@@ -27,7 +27,7 @@
   position: relative;
 }
 
-.modal-close {
+#modal-close {
   margin: 20px;
   width: 20px;
   position: absolute;