setup: utill 작성

jlee0505 · jlee0505 · commit 1e7414f3378d · 2022-08-19T08:02:07.000+09:00
diff --git a/index.html b/index.html
@@ -1,18 +1,28 @@
 <!DOCTYPE html>
 <html lang="ko">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="./index.css" />
-		<title>NEXTSTEP JavaScript Vending machine</title>
-	</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./index.css" />
+    <title>NEXTSTEP JavaScript Vending machine</title>
+  </head>
 
-	<body>
-		<button id="product-manage-menu">상품 관리</button>
-		<button id="vending-machine-manage-menu">잔돈충전</button>
-		<button id="product-purchase-menu">상품 구매</button>
+  <body>
+    <h1>🥤자판기🥤</h1>
+    <nav>
+      <button id="product-manage-menu" class="vending-machine-menu">
+        상품 관리
+      </button>
+      <button id="vending-machine-manage-menu" class="vending-machine-menu">
+        잔돈충전
+      </button>
+      <button id="product-purchase-menu" class="vending-machine-menu">
+        상품 구매
+      </button>
+    </nav>
 
-		<div id="app"></div>
-	</body>
+    <div id="app"></div>
+    <script type="module" src="./js/index.js"></script>
+  </body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,4 @@
+import { $ } from "./util/dom.js";
+import { MainRenderer } from "./View/MainRenderer.js";
+
+new MainRenderer($("#app"));
diff --git a/js/util/constants.js b/js/util/constants.js
@@ -5,13 +5,15 @@ export const MENU_TAB = {
 };
 
 export const PRODUCT_MANAGE_MENU = {
+  PRODUCT_FORM: "product-container-form",
   NAME_INPUT: `product-name-input`,
   PRICE_INPUT: "product-price-input",
   QUANTITY_INPUT: "product-quantity-input",
   ADD_BTN: "product-add-button",
   NAME_LIST_CLASS: ".product-manage-name",
   PRICE_LIST_CLASS: ".product-manage-price",
   QUANTITY_LIST_CLASS: ".product-manage-quantity",
+  INVENTORY_CLASS: ".product-inventory",
 };
 
 export const PRODUCT_PURCHASE_MENU = {
@@ -39,10 +41,13 @@ export const PRODUCT_PURCHASE_MENU = {
 
 export const VM_MANAGE_MENU = {
   //동전을 무작위로 생성하는 기능은 `/lib/` 내부의 랜덤 유틸 중 `Random.pick` 메서드를 활용해서 구현한다.
+  CONTAINER: ".purchase-container",
+  CHARGE_FORM: "vending-machine-form",
   CHARGE_INPUT: "vending-machine-charge-input",
   CHARGE_BTN: "vending-machine-charge-button",
   CHARGE_CHECK: "vending-machine-charge-amount",
 
+  RETURN_BTN: "coin-return-button",
   FIVE_HUNDRED_WON: "vending-machine-coin-500-quantity",
   ONE_HUNDRED_WON: "vending-machine-coin-100-quantity",
   FIFTY_WON: "vending-machine-coin-50-quantity",
diff --git a/js/util/dom.js b/js/util/dom.js
@@ -0,0 +1,4 @@
+export const $ = (selector, parent = document) =>
+  parent.querySelector(selector);
+export const $$ = (selector, parent = document) =>
+  parent.querySelectorAll(selector);
diff --git a/js/util/store/store.js b/js/util/store/store.js
@@ -0,0 +1,16 @@
+const store = {
+  setCurrentTab(tab) {
+    window.localStorage.setItem("tab", JSON.stringify(tab));
+  },
+  getCurrentTab() {
+    return JSON.parse(window.localStorage.getItem("tab"));
+  },
+  setTabState(state) {
+    window.localStorage.setItem("state", JSON.stringify(state));
+  },
+  getTabState() {
+    return JSON.parse(window.localStorage.getItem("state"));
+  },
+};
+
+export default store;
diff --git a/js/util/utils.js b/js/util/utils.js
@@ -0,0 +1,5 @@
+export const removeAllChild = (parentNode) => {
+  while (parentNode.hasChildNodes()) {
+    parentNode.removeChild(parentNode.firstChild);
+  }
+};
