[클린코드 2기 소인성] 로또 미션 STEP3

cypress/integration/app.test.js

@@ -22,6 +22,59 @@ describe('Lotto', () => {
   });
 
   describe('로또 구입 금액이 정상인 경우', () => {
+    it('로또 구입 금액을 입력하면, 수동 구매 모달이 팝업되며 가격에 맞는 총 구매 가능한 개수가 출력된다.', () => {
+      cy.inputAmount('3000');
+      cy.get('.modal').should('be.visible');
+      cy.get('[data-props="available-count-h3"]').should('have.text', '총 3장 구매할 수 있어요!');
+    });
+
+    describe('수동 구매 개수가 비정상인 경우', () => {
+      it('수동 구매 개수는 총 구매 개수보다 많을 수 없다.', () => {
+        const alertStub = cy.stub();
+        cy.on('window:alert', alertStub);
+        cy.inputAmount('3000');
+        cy.get('[data-props="purchase-count-input"]').type('4');
+        cy.get('[data-props="purchase-count-button"]')
+          .click()
+          .then(() => {
+            expect(alertStub).to.be.calledWith(ERROR_MESSAGE.IMPOSSIBLE_COUNT);
+          });
+      });
+
+      it('수동 구매 개수는 0보다 작을 수 없다.', () => {
+        const alertStub = cy.stub();
+        cy.on('window:alert', alertStub);
+        cy.inputAmount('3000');
+        cy.get('[data-props="purchase-count-input"]').type('-1');
+        cy.get('[data-props="purchase-count-button"]')
+          .click()
+          .then(() => {
+            expect(alertStub).to.be.calledWith(ERROR_MESSAGE.IMPOSSIBLE_COUNT);
+          });
+      });
+
+      it('수동 구매 개수는 숫자 이외의 문자가 올 수 없다.', () => {
+        const alertStub = cy.stub();
+        cy.on('window:alert', alertStub);
+        cy.inputAmount('3000');
+        cy.get('[data-props="purchase-count-input"]').type('네개');
+        cy.get('[data-props="purchase-count-button"]')
+          .click()
+          .then(() => {
+            expect(alertStub).to.be.calledWith(ERROR_MESSAGE.REQUIRED_DIGIT);
+          });
+      });
+    });
+
+    describe('수동 구매 개수가 정상인 경우', () => {
+      it('수동 구매 개수만큼 로또 번호를 입력할 수 있어야 한다.', () => {
+        cy.inputAmount('3000');
+        cy.get('[data-props="purchase-count-input"]').type('1');
+        cy.get('[data-props="purchase-count-button"]').click();
+        cy.get('.scroll-area').should('be.visible');
+      });
+    });
+
     it('로또 구입 금액을 입력하면, 금액에 해당하는 개수의 로또를 발급해야 한다.', () => {
       cy.inputAmount('3000');
       cy.get('.lotto-section').should('be.visible');

src/css/index.css

@@ -55,4 +55,60 @@ body {
 
 svg {
   pointer-events: none;
+}
+
+.asterisk {
+  color: red;
+  font-size: small;
+}
+
+[data-props="purchase-count-input"], [data-props="purchase-count-button"] {
+  height: 30px;
+  box-sizing: border-box;
+}
+
+[data-props="purchase-count-button"] {
+  padding: 1px 2px;
+}
+
+.purchase-number {
+  width: 30px;
+  height: 36px;
+}
+
+input[type="number"].purchase-number {
+  background-color: #c2f8ff;
+  border-color: #c2f8ff;
+}
+
+input[type="number"].purchase-number.bonus-number {
+  background-color: #00e1ff;
+}
+
+.scroll-area {
+  overflow-y: auto;
+  min-height: 200px;
+  max-height: 300px;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  border-radius: 8px;
+  background-color: rgb(171, 224, 245);
+}
+
+::-webkit-scrollbar-thumb {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
 }

src/css/shared/modules/flex.css

@@ -123,3 +123,7 @@
 .order-none {
   order: 0;
 }
+
+.gap-3 {
+  gap: 0.75rem; /* 12px */
+}

src/css/shared/modules/sizing.css

@@ -2,3 +2,7 @@
 .w-100 {
   width: 100%;
 }
+
+.max-w-none {
+  max-width: none !important;
+}

src/js/components/App.actions.js

@@ -1,58 +1,23 @@
-import { $, $elementRemoveClass, $allElementProp } from '../helper/index.js';
-import LottoList from './lottoList/LottoList.js';
-import LottoCheck from './lottoCheck/LottoCheck.js';
-import LottoResultModal from './lottoResultModal/LottoResultModal.js';
+import { $, $handleDOMError, $open } from '../helper/index.js';
+import { LottoManualPurchase } from './modal/index.js';
 import LottoService from '../services/Lotto.service.js';
 
-export const inputAmount = event => {
+export const handleSubmitAmount = event => {
   event.preventDefault();
 
   const $amountInput = $('[data-props="amount-input"]');
-  const $lottoSection = $('.lotto-section');
   try {
-    const count = LottoService.validCount($amountInput.value);
-
-    const $lottoList = LottoList(count);
-    const $lottoCheck = LottoCheck();
-
-    $lottoSection.replaceChildren($lottoList, $lottoCheck);
-    $elementRemoveClass($lottoSection, 'hidden');
+    setModalContent($amountInput.value);
+    $open();
   } catch (error) {
-    $amountInput.value = '';
-    alert(error.message);
+    $handleDOMError({ $amountInput, isReset: true, error });
   }
 };
 
-export const toggleLottoResultModal = event => {
-  event.stopPropagation();
-  const $target = event.target;
-
-  if (LottoService.notingAction($target)) return;
-
-  const $modal = $('.modal');
+function getModalContent(amount) {
+  return LottoManualPurchase(LottoService.validAmount(amount));
+}
 
-  try {
-    if (LottoService.isLotteryOpen($target)) {
-      const purchasedNumbers = $allElementProp('.winning-number', 'value');
-      const lotteryResult = LottoService.lotteryResult(purchasedNumbers);
-      const $lottoResultModal = LottoResultModal(lotteryResult);
-      $modal.replaceChildren($lottoResultModal);
-    }
-    $modal.classList.toggle('open');
-  } catch (error) {
-    alert(error.message);
-  }
-};
-
-export const lottoRestart = ({ target }) => {
-  if (!target.matches('[data-props="restart-button"]')) return;
-
-  const $modal = $('.modal');
-  const $amountInput = $('[data-props="amount-input"]');
-  const $lottoSection = $('.lotto-section');
-
-  LottoService.initLottos();
-  $lottoSection.replaceChildren();
-  $amountInput.value = '';
-  $modal.classList.remove('open');
-};
+function setModalContent(amount) {
+  $('.modal').replaceChildren(getModalContent(amount));
+}

src/js/components/App.js

@@ -1,14 +1,10 @@
 import { $eventBindedComponent } from '../helper/index.js';
 import AppTemplate from './App.template.js';
-import { inputAmount, toggleLottoResultModal, lottoRestart } from './App.actions.js';
+import { handleSubmitAmount } from './App.actions.js';
 
 const App = $eventBindedComponent(() => {
   const $template = AppTemplate();
-  const $events = [
-    { type: 'submit', callback: inputAmount },
-    { type: 'click', callback: toggleLottoResultModal },
-    { type: 'click', callback: lottoRestart },
-  ];
+  const $events = [{ type: 'submit', callback: handleSubmitAmount }];
 
   return [$template, $events];
 });

src/js/components/App.template.js

@@ -1,8 +1,7 @@
 import { $elements } from '../helper/index.js';
 
 const AppTemplate = () =>
-  $elements(
-    `
+  $elements(/*html*/ `
     <div id="app" class="p-3">
       <div class="d-flex justify-center mt-5" data-props="amount-info-form">
         <div class="w-100">
@@ -11,16 +10,15 @@ const AppTemplate = () =>
             <label class="mb-2 d-inline-block">구입할 금액을 입력해주세요.
             </label>
             <div class="d-flex">
-              <input type="text" class="w-100 mr-2 pl-2" data-props="amount-input" placeholder="구입 금액" />
-              <button type="submit" data-props="confirm-button" class="btn btn-cyan">확인</button>
+              <input type="text" class="w-100 mr-2 pl-2" name="amount-input" data-props="amount-input" placeholder="구입 금액" />
+              <button type="submit" data-props="confirm-button" class="open-purchase-modal-button btn btn-cyan">구매</button>
             </div>
           </form>
           <div class="lotto-section hidden"></div>
         </div>
       </div>
       <div class="modal"></div>
     </div>
-    `,
-  );
+    `);
 
 export default AppTemplate;

src/js/components/lottoCheck/LottoCheck.actions.js

@@ -0,0 +1,22 @@
+import { $, $allElementProp } from '../../helper/index.js';
+import LottoService from '../../services/Lotto.service.js';
+import { LottoResult } from '../modal/index.js';
+
+export const toggleLottoResultModal = event => {
+  event.stopPropagation();
+  const $target = event.target;
+  if ($target.matches('.open-purchase-modal-button')) return;
+  if (LottoService.notingAction($target)) return;
+  const $modal = $('.modal');
+  try {
+    if (LottoService.isLotteryOpen($target)) {
+      const purchasedNumbers = $allElementProp('.winning-number', 'value');
+      const lotteryResult = LottoService.lotteryResult(purchasedNumbers);
+      const $lottoResult = LottoResult(lotteryResult);
+      $modal.replaceChildren($lottoResult);
+    }
+    $modal.classList.add('open');
+  } catch (error) {
+    alert(error.message);
+  }
+};

src/js/components/lottoCheck/LottoCheck.js

@@ -1,8 +1,11 @@
+import { $eventBindedComponent } from '../../helper/dom.js';
 import LottoCheckTemplate from './LottoCheck.template.js';
+import { toggleLottoResultModal } from './LottoCheck.actions.js';
 
-const LottoCheck = () => {
+const LottoCheck = $eventBindedComponent(() => {
   const $template = LottoCheckTemplate();
-  return $template;
-};
+  const $events = [{ type: 'click', callback: toggleLottoResultModal }];
+  return [$template, $events];
+});
 
 export default LottoCheck;

src/js/components/lottoCheck/LottoCheck.template.js

@@ -1,7 +1,7 @@
 import { $elements } from '../../helper/index.js';
 
 const LottoCheckTemplate = () => {
-  return $elements(`
+  return $elements(/*html*/ `
     <form class="mt-9" data-props="compare-number-form">
       <label class="flex-auto d-inline-block mb-3">지난 주 당첨번호 6개와 보너스 넘버 1개를 입력해주세요.</label>
       <div class="d-flex" data-props="lotto-winning-numbers">

src/js/components/lottoList/LottoList.js

@@ -3,8 +3,10 @@ import LottoService from '../../services/Lotto.service.js';
 import { toggleShowLottoNumber } from './LottoList.actions.js';
 import LottoListTemplate from './LottoList.template.js';
 
-const LottoList = $eventBindedComponent(count => {
-  const $template = LottoListTemplate({ numbers: LottoService.generatedLotto(count) });
+const LottoList = $eventBindedComponent(manualPurchaseLotto => {
+  const $template = LottoListTemplate({
+    numbers: LottoService.generatedLotto(manualPurchaseLotto),
+  });
   const $events = [
     {
       type: 'change',

src/js/components/lottoList/LottoList.template.js

@@ -1,11 +1,11 @@
 import { $elements } from '../../helper/index.js';
 
 const LottoListTemplate = ({ numbers }) => {
-  return $elements(`
+  return $elements(/*html*/ `
   ${
     numbers.length === 0
       ? ''
-      : `
+      : /*html*/ `
     <section class="mt-9" data-props="lotto-wrapper-section">
       <div class="d-flex">
         <label class="flex-auto my-0">총 <span data-props="count-span">${

src/js/components/modal/index.js

@@ -0,0 +1,2 @@
+export { default as LottoManualPurchase } from './lottoManualPurchase/LottoManualPurchase.js';
+export { default as LottoResult } from './lottoResult/LottoResult.js';