woowacourse · lsw1164 · Feb 27, 2022 · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,46 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "airbnb-base",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "requireConfigFile": false
+  },
+  "rules": {
+    "allowTemplateLiterals": true,
+    "no-param-reassign": "off",
+    "no-return-assign": "off",
+    "no-unused-expressions": "off",
+    "consistent-return": "off",
+    "no-useless-return": "off",
+    "no-undef": "off",
+    "no-new": "off",
+    "no-unused-vars": "warn",
+    "class-methods-use-this": "off",
+    "no-alert": "off",
+    "no-plusplus": "off",
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "comma-dangle": ["error", "always-multiline"],
+    "max-depth": ["error", 2],
+    // "max-lines-per-function": ["error", 15],
+    "prettier/prettier": "error",
+    "import/no-anonymous-default-export": 0,
+    "no-multiple-empty-lines": ["error", { "max": 1 }],
+    "eol-last": ["error", "always"],
+    "object-curly-spacing": ["error", "always"],
+    "space-in-parens": ["error", "never"],
+    "computed-property-spacing": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "quotes": ["error", "single"],
+    "no-tabs": ["error", { "allowIndentationTabs": true }],
+    "semi": ["error", "always"],
+    "object-shorthand": "error"
+  }
+}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "useTabs": false
+}
diff --git a/README.md b/README.md
@@ -11,6 +11,9 @@
   <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square"/>
 </p>
 
+## 코드 구조 
+![](https://i.ibb.co/CmhQFkb/IMG-1580.jpg)
+
 ## ⚙️ Before Started
 
 #### 개발 환경 가이드

diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,18 @@
+# 기능 목록 
+- [X] 로또 구입 금액을 입력하면, 금액에 해당하는 로또를 발급해야 한다.
+
+- 금액이 1000원으로 나눠떨어지지 않으면, 사용자에게 알려준다.
+- 금액이 음수가 아니어야 한다.
+- 최대 구입 가능한 금액은 100,000원이다.
+
+- [X] 로또 1장의 가격은 1,000원이다.
+
+- [X] 소비자는 자동 구매를 할 수 있어야 한다.
+
+- [X] 번호 보기 토글 버튼을 클릭해 로또 번호를 볼 수 있어야 한다.
+
+- [X] 로또 번호는 1~45번으로 할당된다.
+
+- [X] 로또 1개당 6개의 번호가 할당된다.
+
+   - 중복되면 안 된다.
diff --git a/docs/TODO.md b/docs/TODO.md
@@ -0,0 +1,4 @@
+1. 기능 목록 작성
+2. 라이브러리 설치, gitignore 추가, lint, prettier 셋팅
+3. 퍼블리싱(HTML/CSS)
+4. 테스트코드 작성 및 기능 구현
diff --git a/index.html b/index.html
@@ -1,17 +1,44 @@
 <!DOCTYPE html>
 <html lang="ko">
-
-<head>
-  <meta charset="UTF-8" />
-  <title>🎱 행운의 로또</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-
-<body>
-  <div id="app">
-    <h1>🎱 행운의 로또</h1>
-  </div>
-  <script type="module" src="./src/js/index.js"></script>
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <title>🎱 행운의 로또</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <main id="app">
+      <h1>🎱 행운의 로또</h1>
+      <form id="purchase-form" class="purchase__form">
+        <label for="purchase-input" class="purchase__description">
+          구입할 금액을 입력해주세요.
+        </label>
+        <div class="purchase__input-container">
+          <input
+            id="purchase-input"
+            class="purchase__input"
+            placeholder="금액"
+            name="cash"
+            type="number"
+            min="1000"
+            max="100000"
+            required
+          />
+          <button class="purchase__submit">구입</button>
+        </div>
+      </form>
+      <section id="lotto-list-section" class="lotto-list__section lotto-list__section-display-none">
+        <header class="lotto-list__header">
+          <h4 id="lotto-list-description" class="lotto-list__description"></h4>
+          <div class="lotto-list__toggle-container">
+            <span class="lotto-list__toggle-description">번호 보기</span>
+            <span id="toggle" class="toggle">
+              <input type="checkbox" id="toggle-input" class="lotto-list__toggle-input" />
+              <label id="slider" class="slider round"></label>
+            </span>
+          </div>
+        </header>
+        <ul id="lotto-lists" class="lotto-lists"></ul>
+      </section>
+    </main>
+  </body>
 </html>