[1단계 - 나만의 유튜브 강의실] 심바(임선빈) 미션 제출합니다.

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "plugins": ["prettier"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "ignorePatterns": ["cypress/"],
+  "rules": {
+    "no-new": "off",
+    "no-alert": "off",
+    "no-param-reassign": "off",
+    "no-return-assign": "off",
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "max-depth": ["error", 1],
+    "max-lines-per-function": ["error", 15]
+  }
+}

.gitignore

@@ -102,3 +102,12 @@ dist
 
 # TernJS port file
 .tern-port
+youtubeAPI.js
+
+# Cypress
+cypress/fixtures/
+cypress/plugins/
+cypress/support/
+
+# Vscode
+.vscode/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "all",
+  "endOfLine": "auto"
+}

README.md

@@ -33,6 +33,38 @@
 - [ ] 검색 모달에 다시 접근했을 때 가장 마지막에 검색한 키워드로 검색한 결과를 보여준다.
 - [ ] 최근 검색 키워드를 3개까지 화면상에 검색창 하단에 보여준다.
 
+### ✅ TODO(FEAT) - step1
+
+- [x] eslint, prettier, cypress 환경설정
+- [x] TODO 작성
+- [x] 클릭한 탭의 색을 하이라이트한다.
+- [x] `동영상 검색` 버튼을 누르면 검색 모달 창이 열린다.
+- [x] 검색 모달 창의 x 버튼을 누르면 검색 모달 창이 닫히고, 볼 영상 목록으로 돌아간다.
+- [x] 최근 검색어에 목록에 최근 검색한 검색어가 3개 뜬다.
+- [x] 가장 마지막에 검색한 검색 결과 동영상들을 보여준다.
+- [x] 검색어를 입력 받을 수 있다.
+- [x] 검색을 실행하면 youtube api를 통해 사용자가 입력한 검색어로 검색 결과를 가져온다.
+- [x] youtube api에서 결과를 가져오는 동안 skeleton card UI로 로딩 화면을 보여준다.
+- [x] youtube api를 통해 가져온 검색 결과를 10개씩 보여준다.
+- [x] 검색 후 스크롤을 끝까지 이동시킬 경우 api 추가 요청을 통해 검색 결과를 10개씩 더 보여준다.
+- [x] 검색 결과가 없는 경우 결과 없음 이미지를 보여준다.
+- [x] 검색 결과 동영상의 저장 버튼을 누르면 Web Storage에 저장한다.
+  - [x] 저장한 동영상들을 `볼 영상` 목록에 추가한다.
+  - [x] 이미 저장된 동영상의 경우 저장 버튼을 비활성화한다.
+  - [x] 저장한 동영상의 개수를 업데이트한다.
+
+### 👾 TODO(TEST) - step1
+
+- [x] 클릭한 탭의 색을 하이라이트한다.
+- [x] `동영상 검색` 버튼을 누르면 검색 모달 창이 열린다.
+- [x] 검색 모달 창의 x 버튼을 누르면 검색 모달 창이 닫히고, 볼 영상 목록으로 돌아간다.
+- [x] 현재 검색한 검색어가 최근 검색어 목록에 남는다.
+- [x] youtube api에서 결과를 가져오는 동안 skeleton card UI로 로딩 화면을 보여준다.
+- [x] 검색 결과가 없는 경우 결과 없음 이미지를 보여준다.
+- [x] 검색 후 스크롤을 끝까지 이동시킬 경우 api 추가 요청을 통해 검색 결과를 10개씩 더 보여준다.
+- [x] 검색 결과 동영상의 저장 버튼을 누르면 저장한 동영상들을 `볼 영상` 목록에 보여준다.
+- [x] 최근 검색어를 누르면 해당 검색어로 검색을 실행한 결과를 보여준다.
+
 ### 🎯🎯 step2 강의실 관리 기능
 
 - [ ] 가장 처음에는 저장된 영상이 없음으로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/myYouTube.spec.js

@@ -0,0 +1,115 @@
+describe('simba-tube', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:5500/');
+    cy.window().then((win) => cy.stub(win, 'alert').as('windowAlert'));
+  });
+
+  const searchVideo = (keyword) => {
+    cy.get('#search-btn').click();
+    cy.get('#modal-search-input').type(keyword);
+    cy.get('#modal-search-button').click();
+  };
+
+  const interceptSearch = (keyword) => {
+    cy.intercept({
+      url: 'https://www.googleapis.com/youtube/v3/search',
+      query: { q: keyword },
+    }).as('search');
+  };
+
+  it('클릭한 탭의 색을 하이라이트한다.', () => {
+    cy.get('#nav-bar > button').each((button) => {
+      cy.wrap(button).click();
+      cy.wrap(button).should(
+        'have.css',
+        'background-color',
+        'rgb(179, 234, 242)',
+      );
+    });
+  });
+
+  it('동영상 검색 버튼을 클릭하면 모달 창이 열린다.', () => {
+    cy.get('#search-btn').click();
+    cy.get('.modal').should('be.visible');
+  });
+
+  it('검색 모달 창의 x 버튼을 누르면 검색 모달 창이 닫히고, 볼 영상 목록으로 돌아간다.', () => {
+    cy.get('#search-btn').click();
+    cy.get('.modal-close').click();
+    cy.get('.modal').should('not.be.visible');
+    cy.get('#saved-btn').should(
+      'have.css',
+      'background-color',
+      'rgb(179, 234, 242)',
+    );
+  });
+
+  it('현재 검색한 검색어가 최근 검색어 목록에 남는다.', () => {
+    const keyword = '불닭';
+
+    searchVideo(keyword);
+    cy.get('.chip').eq(0).should('have.text', keyword);
+  });
+
+  it('youtube api에서 결과를 가져오는 동안 skeleton card UI로 로딩 화면을 보여준다.', () => {
+    searchVideo('불닭');
+    cy.get('.skeleton').should('be.visible');
+  });
+
+  it('검색 결과가 없는 경우 결과 없음 이미지를 보여준다. ', () => {
+    const keyword = 'sadffsdasdb';
+
+    interceptSearch(keyword);
+    searchVideo(keyword);
+
+    cy.wait('@search');
+    cy.get('.not-found').should('be.visible');
+  });
+
+  it('검색 후 스크롤를 끝까지 이동시킬 경우 api 추가 요청을 통해 검색 결과를 10개씩 더 보여준다.', () => {
+    const keyword = 'bts';
+
+    interceptSearch(keyword);
+    searchVideo(keyword);
+
+    cy.wait('@search');
+    cy.get('#modal-videos').scrollTo('bottom');
+    cy.wait('@search');
+    cy.get('#modal-videos').find('.clip').should('have.length', 20);
+  });
+
+  it('검색 결과 동영상의 저장 버튼을 누르면 저장한 동영상들을 볼 영상 목록에 보여준다.', () => {
+    const keyword = 'bts';
+
+    interceptSearch(keyword);
+    searchVideo(keyword);
+
+    cy.wait('@search');
+    cy.get('.clip-save-btn').eq(0).click();
+
+    cy.get('#saved-video-count').should('have.text', 1);
+    cy.get('#main-videos').find('.clip').should('have.length', 1);
+  });
+
+  it('최근 검색어 클릭 시 해당 검색어로 검색을 한다.', () => {
+    searchVideo('bts');
+
+    cy.get('#modal-search-input').clear().type('day6');
+    cy.get('#modal-search-button').click();
+
+    cy.get('#chip-1').should('have.text', 'day6');
+
+    cy.intercept({
+      url: 'https://www.googleapis.com/youtube/v3/search',
+    }).as('search');
+
+    cy.get('#chip-2').click();
+
+    cy.wait('@search').should(({ request }) => {
+      expect(request.url).to.include('q=bts');
+    });
+
+    cy.get('#modal-search-input').should('have.value', 'bts');
+    cy.get('#chip-1').should('have.text', 'bts');
+  });
+});

index.html

@@ -12,50 +12,20 @@
         <div class="w-100">
           <header class="my-4">
             <h2 class="text-center font-bold">👩🏻‍💻 나만의 유튜브 강의실 👨🏻‍💻</h2>
-            <nav class="d-flex justify-center">
-              <button class="btn bg-cyan-100 mx-1">👁️ 볼 영상</button>
-              <button class="btn mx-1">✅ 본 영상</button>
-              <button id="search-button" class="btn mx-1">
+            <nav id="nav-bar" class="d-flex justify-center">
+              <button id="saved-btn" class="nav-btn btn bg-cyan-100 mx-1">
+                👁️ 볼 영상
+              </button>
+              <button id="watched-btn" class="nav-btn btn mx-1">
+                ✅ 본 영상
+              </button>
+              <button id="search-btn" class="nav-btn btn mx-1">
                 🔍 동영상 검색
               </button>
             </nav>
           </header>
           <main class="mt-10">
-            <section class="video-wrapper">
-              <article class="clip">
-                <div class="preview-container">
-                  <iframe
-                    width="100%"
-                    height="118"
-                    src="https://www.youtube.com/embed/Ngj3498Tm_0"
-                    frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen
-                  ></iframe>
-                </div>
-                <div class="content-container pt-2 px-1">
-                  <h3>아두이노 무드등</h3>
-                  <div>
-                    <a
-                      href="https://www.youtube.com/channel/UC-mOekGSesms0agFntnQang"
-                      target="_blank"
-                      class="channel-name mt-1"
-                    >
-                      메이커준
-                    </a>
-                    <div class="meta">
-                      <p>2021년 3월 2일</p>
-                    </div>
-                    <div>
-                      <span class="opacity-hover">✅</span>
-                      <span class="opacity-hover">👍</span>
-                      <span class="opacity-hover">💬</span>
-                      <span class="opacity-hover">🗑️</span>
-                    </div>
-                  </div>
-                </div>
-              </article>
-            </section>
+            <section id="main-videos" class="video-wrapper"></section>
           </main>
         </div>
       </div>
@@ -69,52 +39,27 @@ <h3>아두이노 무드등</h3>
           <header>
             <h2 class="text-center">🔎 유튜브 검색</h2>
           </header>
-          <form class="d-flex">
-            <input type="text" class="w-100 mr-2 pl-2" placeholder="검색" />
-            <button type="button" class="btn bg-cyan-500">검색</button>
+          <form id="modal-search-form" class="d-flex">
+            <input
+              id="modal-search-input"
+              type="text"
+              name="search"
+              class="w-100 mr-2 pl-2"
+              placeholder="검색"
+            />
+            <button id="modal-search-button" class="btn bg-cyan-500">
+              검색
+            </button>
           </form>
-          <section class="mt-2">
+          <section class="mt-2 d-flex items-center">
             <span class="text-gray-700">최근 검색어: </span>
-            <a class="chip">메이커준</a>
-            <a class="chip">우아한테크코스</a>
-            <a class="chip">우아한형제들</a>
+            <div id="chip-container" class="ml-2"></div>
           </section>
           <section>
             <div class="d-flex justify-end text-gray-700">
-              저장된 영상 갯수: 50개
+              저장된 영상 개수: <span id="saved-video-count"></span>개
             </div>
-            <section class="video-wrapper">
-              <article class="clip">
-                <div class="preview-container">
-                  <iframe
-                    width="100%"
-                    height="118"
-                    src="https://www.youtube.com/embed/Ngj3498Tm_0"
-                    frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen
-                  ></iframe>
-                </div>
-                <div class="content-container pt-2 px-1">
-                  <h3>아두이노 무드등</h3>
-                  <div>
-                    <a
-                      href="https://www.youtube.com/channel/UC-mOekGSesms0agFntnQang"
-                      target="_blank"
-                      class="channel-name mt-1"
-                    >
-                      메이커준
-                    </a>
-                    <div class="meta">
-                      <p>2021년 3월 2일</p>
-                    </div>
-                    <div class="d-flex justify-end">
-                      <button class="btn">⬇️ 저장</button>
-                    </div>
-                  </div>
-                </div>
-              </article>
-            </section>
+            <section id="modal-videos" class="video-wrapper"></section>
           </section>
         </div>
       </div>

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "javascript-youtube-classroom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/zigsong/javascript-youtube-classroom.git",
+  "author": "zigsong <wldms5764@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "cypress": "^6.6.0",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "prettier": "^2.2.1"
+  },
+  "dependencies": {
+    "eslint-config-airbnb-base": "^14.2.1"
+  }
+}

src/css/shared/modules/layout.css

@@ -28,6 +28,10 @@
   display: inline-block;
 }
 
+.d-none {
+  display: none;
+}
+
 /* Layout - Top / Right / Bottom / Left */
 .mt-2 {
   margin-top: 8px;

src/css/ui/index.css

@@ -1,3 +1,4 @@
 @import 'modules/modal.css';
 @import 'modules/chip.css';
+@import 'modules/skeleton.css';
 @import 'modules/youtubeCard.css';

src/css/ui/modules/modal.css

@@ -21,7 +21,6 @@
   transition: top 0.25s ease;
   width: 960px;
   margin: auto;
-  overflow: auto;
   background: #fff;
   border-radius: 5px;
   position: relative;
@@ -39,6 +38,11 @@
   padding: 0;
 }
 
+#modal-videos {
+  height: 460px;
+  overflow: auto;
+}
+
 svg {
   display: block;
 }