woowacourse · HyeonaKwon · Mar 31, 2022 · Mar 22, 2022 · Mar 22, 2022 · Mar 22, 2022
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,15 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules":{
+      "no-undef":"off"
+    }
+  }
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 # Dependency directories
-node_modules/
+node_modules/
+dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,21 @@
+# 상품 관리 탭
+
+- [x] 최초 상품 목록은 비워진 상태이다.
+- [x] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다.
+  - 상품명은 최대 10글자까지 가능하다.
+  - 상품 가격은 100원부터 시작하며, 최대 10,000원까지 가능하다. 그리고 10원으로 나누어 떨어져야 한다.
+  - 한 제품당 수량은 최대 20개까지 넣을 수있다.
+- [x] 관리자는 추가한 상품을 확인할 수 있다.
+- [x] 관리자는 추가한 상품을 수정, 삭제할 수 있다.
+  - [x] 수정 시 상품명, 가격, 수량 정보 영역 자체가 인풋 영역으로 변경된다.
+  - [x] 삭제 시 confirm을 활용하여 사용자에게 다시 한번 확인한다.
+
+# 잔돈 충전 탭
+
+- [x] 잔돈 충전탭은 자판기가 보유할 금액을 충전하는 기능을 수행한다.
+
+- [x] 잔돈 충전 탭에서 최초 자판기가 보유한 금액은 0원이며, 각 동전의 개수는 0개이다.
+- [x] 잔돈 충전 입력 요소에 충전할 금액을 입력한 후, 충전하기 버튼을 눌러 자판기 보유 금액을 충전할 수 있다.
+- [x] 잔돈은 10원으로 나누어 떨어지는 금액만 투입할 수 있다. 보유할 수 있는 최대 금액은 100,000원이다.
+- [x] 자판기 보유 금액만큼의 동전이 무작위로 생성된다.
+- [x] 자판기 보유 금액을 누적하여 충전할 수 있다. 추가 충전 금액만큼의 동전이 무작위로 생성되어 기존 동전들에 더해진다.
diff --git a/index.html b/index.html
@@ -1,16 +1,29 @@
 <!DOCTYPE html>
 <html lang="ko">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>자판기</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="app">
-        <h1>🍿 자판기 🍿</h1>
+      <h1>🍿 자판기 🍿</h1>
+      <nav id="page-tab-container">
+        <a
+          class="nav-button product-management-button"
+          href="#!productManagement"
+        >
+          상품 관리
+        </a>
+        <a class="nav-button changes-charge-button" href="#!changesCharge">
+          잔돈 충전
+        </a>
+        <a class="nav-button product-purchase-button" type="button">
+          상품 구매
+        </a>
+      </nav>
+      <div id="page"></div>
     </div>
-</body>
-
-</html>
+  </body>
+</html>