woowacourse · roy-jung · Mar 15, 2022 · Mar 8, 2022 · Mar 8, 2022 · Mar 8, 2022
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["@babel/preset-env",
+    {
+      "shippedProposals": true,
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+.*
+webpack.config.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,28 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "ignorePatterns": ["*.test.js", "*.config.js"],
+    "extends": ["eslint:recommended", "airbnb-base"],
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "import/prefer-default-export": "off",
+        "class-methods-use-this": "off",
+        "import/no-unresolved": "off",
+        "no-new":"off",
+        "arrow-parens":"off",
+        "no-unused-vars":"off",
+        "consistent-return":"off",
+        "no-param-reassign":"off",
+        "no-unused-expressions":"off",
+        "implicit-arrow-linebreak":"off",
+        "function-paren-newline":"off",
+        "no-return-assign":"off",
+        "object-curly-newline":"off"
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,9 @@
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
 # Logs
 logs
 *.log

diff --git a/.prettierrc b/.prettierrc
@@ -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/docs/README.md b/docs/README.md
@@ -0,0 +1,29 @@
+# 나만의 유튜브 강의실
+- API
+- 비즈니스 로직 & 상태
+  - 유튜브 검색
+    - [x] 검색어를 API에 전달하여, 검색 결과를 가져온다.
+      - **예외 처리**
+      - [x] 검색 결과 없을 때의 오류 결과 값을 반환한다.
+      - [x] 기타 API 오류에 대해 처리 결과 값을 반환한다.
+    - [x] 사용자가 요청한 유튜브 영상을 로컬 스토리지 클래스를 활용하여 저장 혹은 취소할 수 있다. 
+  - 로컬 스토리지에 저장 클래스
+    - [x] 사용자가 요청한 동영상의 ID를 JSON 형식으로 100개까지 저장할 수 있다.
+- 사용자 인터페이스
+  - 첫 화면
+    - [x] 검색 버튼을 누르면, 검색 모달이 출력되어야 한다.
+  - 검색 모달
+    - 검색창
+      - [x] 검색어를 입력하고 검색을 시도할 수 있다.
+        - **예외 처리**
+        - [x] 검색어는 빈 칸일 수 없다.
+        - [x] 현재 검색어와 중복된 검색어를 시도할 시 검색을 하지 않는다.
+
+    - 검색 결과 컨텐츠
+      - [x] 데이터를 불러오고 있을 땐 스켈레톤 UI를 보여준다.
+      - [x] 유튜브 컨텐츠는 10개씩 보여준다.
+        - [x] 10개씩 불러온 부분은 상수 처리를 하여준다.
+      - [x] 검색 결과에서 스크롤이 마지막에 도착했을 때 새로운 컨텐츠를 불러온다.
+      - [x] 검색 결과가 없을 때는 요구사항의 이미지를 출력한다.
+      - [x] 검색 결과에서 동영상을 저장할 수 있어야 한다.
+        - [x] 이미 저장한 동영상은 저장 취소 버튼이 출력 되어야 한다.
diff --git a/index.html b/index.html
@@ -5,30 +5,29 @@
   <meta charset="UTF-8" />
   <title>나만의 유튜브 강의실</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="./src/css/index.css">
 </head>
 
 <body>
   <main id="app" class="classroom-container">
     <h1 class="classroom-container__title">👩🏻‍💻 나만의 유튜브 강의실 👨🏻‍💻</h1>
-    <nav class="nav">
-      <button id="search-modal-button" class="button nav__button">🔍 검색</button>
+    <nav id="classroom-navigation" class="nav">
+      <button id="search-modal-button" class="button nav__button" data-modal="search-modal">🔍 검색</button>
     </nav>
   </main>
   <!-- 1 검색 버튼을 누르면 아래와 같은 검색 모달을 보여줍니다.-->
-  <div class="modal-container hide">
+  <div id="modal" class="modal-container hide">
     <div class="dimmer"></div>
-    <div class="search-modal" role="dialog" aria-labelledby="search-modal-title">
-      <h2 id="search-modal-title" class="search-modal__title">🔍 보고싶은 영상 찾기 🔍</h2>
-      <section class="search-input">
+    <div id="search-modal" class="modal-content show" role="dialog" aria-labelledby="modal-content-title">
+      <h2 id="search-modal-title" class="modal-content__title">🔍 보고싶은 영상 찾기 🔍</h2>
+      <form id="search-form" class="search-input">
         <h3 hidden>검색어 입력</h3>
         <input id="search-input-keyword" type="text" placeholder="검색" class="search-input__keyword">
-        <button id="search-button" class="search-input__search-button button">검색</button>
-      </section>
+        <button id="search-button" class="search-input__search-button button" disabled>검색</button>
+      </form>
       <!-- 2-1 검색 결과가 있을 경우, 아래와 같은 검색 결과 목록을 보여줍니다.-->
-      <section class="search-result">
+      <section id="search-result" class="search-result">
         <h3 hidden>검색 결과</h3>
-        <ul class="video-list">
+        <ul id="video-list" class="video-list">
           <!-- <li class="video-item" data-video-id="">
             <img
               src="https://i.ytimg.com/vi/ECfuKi5-Cfs/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDvmIcX-TgdcH2g_Bd4AUxw6hjmvQ"
@@ -53,7 +52,6 @@ <h3 hidden>검색 결과</h3>
       </section> -->
     </div>
   </div>
-  <script type="module" src="./src/js/index.js"></script>
 </body>
 
 </html>