woowacourse · Vallista · Mar 30, 2022 · Mar 22, 2022 · Mar 22, 2022 · Mar 22, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {}
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 # Dependency directories
-node_modules/
+node_modules/
+
+dist
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "auto"
+}
diff --git a/index.html b/index.html
@@ -1,16 +1,24 @@
 <!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">
+      <header>
         <h1>🍿 자판기 🍿</h1>
-    </div>
-</body>
+        <nav>
+          <button type="button" id="product-manage-button">상품 관리</button>
+          <button type="button" id="change-add-button">잔돈 충전</button>
+          <button type="button" id="product-purchase-button">상품 구매</button>
+        </nav>
+      </header>
+      <section class="input-section"></section>
 
-</html>
+      <section class="contents-container"></section>
+    </div>
+  </body>
+</html>