[2단계 - 자판기] 유세지(김용래) 미션 제출합니다.

.gitignore

@@ -9,4 +9,5 @@ db.json
 
 # test file
 cypress/fixtures/
-cypress/videos/
+cypress/videos/
+cypress/screenshots/

src/css/global.css

@@ -10,4 +10,7 @@
   --button-hover-color: rgba(0, 188, 212, 0.16);
   --primary-text-color: rgba(0, 0, 0, 0.87);
   --list-border-color: #dcdcdc;
+  --snackbar-bg-color: #333;
+  --snackbar-text-color: #fff;
+  --snackbar-error-bg-color: rgb(177, 28, 28);
 }

src/css/index.css

@@ -15,6 +15,15 @@ a {
   text-decoration: none;
 }
 
+li {
+  list-style-type: none;
+  text-align: center;
+  font-style: normal;
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid var(--list-border-color);
+}
+
 #app {
   width: 40%;
   min-width: 465px;
@@ -165,10 +174,6 @@ input:focus {
   height: 35px;
 }
 
-.single-input {
-  width: 300px;
-}
-
 .single-input-container {
   margin: auto;
 }
@@ -206,7 +211,9 @@ h4 {
   align-items: center;
   width: 100%;
 }
-#product-list-wrapper ul {
+
+#product-list-wrapper ul,
+#change-list-wrapper ul {
   padding: 0;
 }
 
@@ -217,19 +224,6 @@ h4 {
   width: 100%;
 }
 
-#change-list-wrapper ul {
-  padding: 0;
-}
-
-li {
-  list-style-type: none;
-  text-align: center;
-  font-style: normal;
-  display: flex;
-  justify-content: center;
-  border-bottom: 1px solid var(--list-border-color);
-}
-
 #product-list {
   width: 100%;
 }
@@ -279,7 +273,8 @@ li {
   margin-top: -8px;
 }
 
-#change-list li {
+#change-list li,
+.single-input {
   width: 300px;
 }
 

src/css/snackbar.css

@@ -12,8 +12,8 @@
   visibility: hidden;
   min-width: 250px;
   max-width: 300px;
-  background-color: #333;
-  color: #fff;
+  background-color: var(--snackbar-bg-color);
+  color: var(--snackbar-text-color);
   text-align: center;
   border-radius: 2px;
   padding: 16px;
@@ -22,7 +22,7 @@
 }
 
 .error {
-  background-color: rgb(177, 28, 28);
+  background-color: var(--snackbar-error-bg-color);
 }
 
 .show {

src/js/__test__/vendingMachine.test.js

@@ -1,5 +1,5 @@
 import { ERROR_MESSAGE } from '../constants';
-import vendingMachine from '../model/VendingMachine';
+import vendingMachine from '../model/vendingMachine_Test';
 
 describe('자판기 기본 기능 테스트', () => {
   describe('자판기 상품 추가 기능 테스트', () => {

src/js/api/requestLogin.ts

@@ -1,17 +1,14 @@
-import { ALERT_MESSAGE, ERROR_MESSAGE, SERVER_URL } from '../constants';
+import { ERROR_MESSAGE } from '../constants';
+import { LoginSuccess } from '../interfaces/apiStatus.interface';
+import ApiWrapper from '../utils/ApiWrapper';
 
-const requestLogin = async (accountData: Object) => {
-  const response = await fetch(SERVER_URL + '/login', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(accountData),
-  });
+const apiWrapper = new ApiWrapper();
 
-  const dataResult = await response.json();
+const requestLogin = async (accountData: Object) => {
+  const response = await apiWrapper.post('/login', accountData);
+  const dataResult: LoginSuccess | string = await response.json();
 
-  if (!response.ok) {
+  if (typeof dataResult === 'string') {
     switch (dataResult) {
       case 'Cannot find user':
         throw new Error(ERROR_MESSAGE.USER_IS_NOT_EXIST);
@@ -21,9 +18,7 @@ const requestLogin = async (accountData: Object) => {
     throw new Error(dataResult);
   }
 
-  localStorage.setItem('accessToken', dataResult.accessToken);
-  localStorage.setItem('user', JSON.stringify(dataResult.user));
-  return ALERT_MESSAGE.LOGIN_SUCCESS(dataResult.user.name);
+  return dataResult;
 };
 
 export default requestLogin;

src/js/api/requestModifyUserData.ts

@@ -1,33 +1,22 @@
-import { ALERT_MESSAGE, ERROR_MESSAGE, SERVER_URL } from '../constants';
+import { ERROR_MESSAGE } from '../constants';
 import { User } from '../interfaces/UserData.interface';
+import ApiWrapper from '../utils/ApiWrapper';
 
-const requestModifyUserData = async (userData: User) => {
-  const response = await fetch(SERVER_URL + `/users/${userData.id}`, {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(userData),
-  });
+const apiWrapper = new ApiWrapper();
 
-  const dataResult = await response.json();
+const requestModifyUserData = async (userData: User) => {
+  const response = await apiWrapper.put(`/users/${userData.id}`, userData);
+  const dataResult: User | string = await response.json();
 
-  if (!response.ok) {
+  if (typeof dataResult === 'string') {
     switch (dataResult) {
       case 'Password is too short':
         throw new Error(ERROR_MESSAGE.PASSWORD_IS_TOO_SHORT);
     }
     throw new Error(dataResult);
   }
 
-  const updatedInfo = {
-    email: dataResult.email,
-    name: dataResult.name,
-    id: dataResult.id,
-  };
-
-  localStorage.setItem('user', JSON.stringify(updatedInfo));
-  return ALERT_MESSAGE.USER_INFO_MODIFY_SUCCESS;
+  return dataResult;
 };
 
 export default requestModifyUserData;

src/js/api/requestRegister.ts

@@ -1,14 +1,11 @@
-import { ALERT_MESSAGE, ERROR_MESSAGE, SERVER_URL } from '../constants';
+import { ERROR_MESSAGE } from '../constants';
 import { User } from '../interfaces/UserData.interface';
+import ApiWrapper from '../utils/ApiWrapper';
+
+const apiWrapper = new ApiWrapper();
 
 const requestRegister = async (userData: User) => {
-  const response = await fetch(SERVER_URL + '/users', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(userData),
-  });
+  const response = await apiWrapper.post('/users', userData);
 
   if (!response.ok) {
     const errorMessage = await response.json();
@@ -21,7 +18,7 @@ const requestRegister = async (userData: User) => {
     throw new Error(errorMessage);
   }
 
-  return ALERT_MESSAGE.REGISTER_SUCCESS;
+  return true;
 };
 
 export default requestRegister;

src/js/components/AddChangeComponent.ts

@@ -1,18 +1,21 @@
+import coinModel from '../model/CoinModel';
 import vendingMachine from '../model/VendingMachine';
 import throwableFunctionHandler from '../utils/throwableFunctionHandler';
+import * as Component from './abstractComponents/Component';
 
-class AddChangeComponent {
+class AddChangeComponent extends Component.DynamicComponent {
   $changeAddForm: HTMLElement;
   $totalChange: HTMLElement;
   noticeStateChanged: Function;
   parentElement: HTMLElement;
 
   constructor(parentElement: HTMLElement, noticeStateChanged: Function) {
+    super();
     this.parentElement = parentElement;
     this.noticeStateChanged = noticeStateChanged;
   }
 
-  private bindEventAndElement = () => {
+  protected bindEventAndElement = () => {
     this.$totalChange = document.querySelector('#total-change');
     this.$changeAddForm = document.querySelector('#change-add-form');
     this.$changeAddForm.addEventListener('submit', this.onSubmitChangeAdd);
@@ -28,16 +31,16 @@ class AddChangeComponent {
   };
 
   refreshChange = () => {
-    this.$totalChange.textContent = vendingMachine.getTotalMoney().toString();
+    this.$totalChange.textContent = coinModel.getCoinsValue(vendingMachine.getVendingMachineMoney()).toString();
   };
 
   render = () => {
     this.parentElement.insertAdjacentHTML('beforeend', this.template());
     this.bindEventAndElement();
   };
 
-  private template = () => `
-  <div id="change-add-container" class="single-input-container">
+  protected template = () => `
+  <div id="change-add-container">
       <p>자판기가 보유할 금액을 입력해주세요</p>
       <form id="change-add-form">
       <input

src/js/components/AddProductComponent.ts

@@ -1,19 +1,21 @@
 import vendingMachine from '../model/VendingMachine';
 import { Product } from '../interfaces/VendingMachine.interface';
 import throwableFunctionHandler from '../utils/throwableFunctionHandler';
+import * as Component from './abstractComponents/Component';
 
-class AddProductComponent {
+class AddProductComponent extends Component.StaticComponent {
   parentElement: HTMLElement;
   noticeStateChanged: Function;
   $productAddForm: HTMLElement;
   $productList: HTMLElement;
 
   constructor(parentElement: HTMLElement, noticeStateChanged: Function) {
+    super();
     this.parentElement = parentElement;
     this.noticeStateChanged = noticeStateChanged;
   }
 
-  private bindEventAndElement = () => {
+  protected bindEventAndElement = () => {
     this.$productAddForm = this.parentElement.querySelector('#product-add-form');
     this.$productList = this.parentElement.querySelector('#product-list');
 
@@ -34,14 +36,12 @@ class AddProductComponent {
     }
   };
 
-  refreshComponent = () => {};
-
   render = () => {
     this.parentElement.insertAdjacentHTML('beforeend', this.template());
     this.bindEventAndElement();
   };
 
-  private template = () => `
+  protected template = () => `
   <div id="product-manage-container">
     <p>추가할 상품 정보를 입력해주세요.</p>
     <form id="product-add-form">

src/js/components/ChangeListComponent.ts

@@ -1,6 +1,7 @@
 import vendingMachine from '../model/VendingMachine';
+import * as Component from './abstractComponents/Component';
 
-class ChangeListComponent {
+class ChangeListComponent extends Component.DynamicComponent {
   $changeList: HTMLElement;
   $amountCoin500: HTMLElement;
   $amountCoin100: HTMLElement;
@@ -9,10 +10,11 @@ class ChangeListComponent {
   parentElement: HTMLElement;
 
   constructor(parentElement: HTMLElement) {
+    super();
     this.parentElement = parentElement;
   }
 
-  private bindElement = () => {
+  protected bindEventAndElement = () => {
     this.$changeList = document.querySelector('#change-list');
     this.$amountCoin500 = document.querySelector('#amount-coin-500');
     this.$amountCoin100 = document.querySelector('#amount-coin-100');
@@ -21,7 +23,7 @@ class ChangeListComponent {
   };
 
   refreshChange = () => {
-    const { coin10, coin50, coin100, coin500 } = vendingMachine.getChanges();
+    const { coin10, coin50, coin100, coin500 } = vendingMachine.getVendingMachineMoney();
 
     this.$amountCoin500.textContent = `${coin500}개`;
     this.$amountCoin100.textContent = `${coin100}개`;
@@ -31,10 +33,10 @@ class ChangeListComponent {
 
   render = () => {
     this.parentElement.insertAdjacentHTML('beforeend', this.template());
-    this.bindElement();
+    this.bindEventAndElement();
   };
 
-  private template = () => `
+  protected template = () => `
   <div id="change-list-wrapper">
     <h4>자판기가 보유한 동전</h4>
     <ul id="change-list">

src/js/components/InputMoneyComponent.ts

@@ -1,18 +1,20 @@
 import vendingMachine from '../model/VendingMachine';
 import throwableFunctionHandler from '../utils/throwableFunctionHandler';
+import * as Component from './abstractComponents/Component';
 
-class InputMoneyComponent {
+class InputMoneyComponent extends Component.DynamicComponent {
   $inputMoneyForm: HTMLElement;
   $totalMoney: HTMLElement;
   noticeStateChanged: Function;
   parentElement: HTMLElement;
 
   constructor(parentElement: HTMLElement, noticeStateChanged: Function) {
+    super();
     this.parentElement = parentElement;
     this.noticeStateChanged = noticeStateChanged;
   }
 
-  private bindEventAndElement = () => {
+  protected bindEventAndElement = () => {
     this.$totalMoney = document.querySelector('#total-money');
     this.$inputMoneyForm = document.querySelector('#input-money-form');
     this.$inputMoneyForm.addEventListener('submit', this.onSubmitInputMoney);
@@ -28,15 +30,15 @@ class InputMoneyComponent {
   };
 
   refreshChange = () => {
-    this.$totalMoney.textContent = vendingMachine.getUserMoney().toString();
+    this.$totalMoney.textContent = vendingMachine.getUserInputMoney().toString();
   };
 
   render = () => {
     this.parentElement.insertAdjacentHTML('beforeend', this.template());
     this.bindEventAndElement();
   };
 
-  private template = () => `
+  protected template = () => `
   <div id="input-money-container">
       <p>상품을 구매할 금액을 투입해주세요</p>
       <form id="input-money-form">