[2단계 - 나만의 유튜브 강의실] 유세지(김용래) 미션 제출합니다.

.eslintrc.json

@@ -13,14 +13,20 @@
     "sourceType": "module"
   },
   "rules": {
+    "no-new": 0,
     "no-var": "error",
     "max-depth": ["error", 2],
+    "no-alert": 0,
+    "default-case": 0,
     "no-console": "warn",
     "no-param-reassign": "error",
     "no-undefined": 0,
     "no-constant-condition": 0,
     "no-unused-private-class-members": 0,
+    "class-methods-use-this": 0,
     "lines-between-class-members": 0,
-    "no-useless-escape": 0
+    "no-useless-escape": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0
   }
 }

README.md

@@ -12,6 +12,7 @@
 </p>
 
 ### 데모 페이지
+
 [데모 페이지](https://usageness.github.io/javascript-youtube-classroom/)
 
 ---
@@ -20,6 +21,8 @@
 
 ---
 
+### Step 1
+
 - [x] 메인 화면에서 검색 버튼을 누르면 검색 모달창이 나타난다.
 - [x] 유튜브 검색 API를 사용해 내가 보고 싶은 영상들을 검색할 수 있다.
   - 엔터키를 눌러 검색할 수 있다.
@@ -34,19 +37,33 @@
   - 저장 가능한 최대 동영상의 갯수는 100개이다.
 - [x] 이미 저장된 영상이라면 저장 버튼이 보이지 않도록 한다.
 
+### Step 2
+
+- [x] 가장 처음에는 저장된 영상이 없으므로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.
+- [x] 이후 페이지를 방문했을 때 기본 메인 화면은 내가 볼 영상들의 리스트를 보여준다.
+- [x] 영상 카드의 이모지 버튼을 클릭하여 아래와 같은 상태 변경이 가능해야 한다.
+  - ✅ 본 영상으로 체크
+  - 🗑️ 버튼으로 저장된 리스트에서 삭제할 수 있다. (삭제 시 사용자에게 정말 삭제할 것인지 물어봅니다.)
+- [x] 본 영상, 볼 영상 버튼을 눌러 필터링 할 수 있다.
+- [x] 반응형 웹: 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 변경한다.
+  - 1280px 이상: 4개
+  - 960px이상~1280px 미만: 3개
+  - 600px이상~960px 미만: 2개
+  - 600px 미만: 1개
+
 ## 테스트 요구사항
 
 ---
 
 - [x] 단위 테스트를 Jest로 작성한다.
 - [x] E2E 테스트를 Cypress로 작성한다.
+  - 검증이 필요하다고 생각되는 플로우를 1가지 설정하고 이에 대한 검증을 E2E 테스트로 진행한다.
 
 ## 배포
 
 ---
 
 - [x] 실행 가능한 페이지에 접근할 수 있도록 github page 기능을 이용하고, 해당 링크를 PR과 README에 작성한다.
-- API key를 public repo에 올리지 않은 채로 데모 페이지를 배포하려면, 별도의 설정이 추가로 필요합니다.
 
 ## 📝 License
 

cypress/integration/app.test.js

@@ -1,35 +1,26 @@
 import { ITEMS_PER_REQUEST } from "../../src/js/constants/constants";
 
-describe("보고싶은 영상 찾기 모달창 전체 로직 테스트", () => {
+describe("나만의 유튜브 강의실 전체 플로우 테스트", () => {
   before(() => {
     cy.visit("./index.html");
   });
 
   const searchKeyword = "xooos";
-  const errorSearchKeyword = `\!\@\!\@\$\!\%\@\$\^\%\&\$\^\*\%\!\@\!\$\!\%\&\(\^\*\%\$\!\@!@$$!#@!#)_)&_%^_)&%_^)&_@!@#!#$@#$%$@#^%&$%^&#$@$^#%&$%^$^%*$^&^@#$@#$@#%@#$^#%&^**#^#$%@#$@#$^@#$!$@#%@#$%#$^#$%^$%@#$!@#!@#%)^_&)%_^$%#$%#$^#%^#%^#^&_%^_)&_#$)%_)#_$)%#_$%!@#!@$#$!#@!#)_)&_%^_)&%_^)&_%)^_&)%_^&_%^_)&_#$)%_)#_$)%#_$\%`;
+
+  it("처음 실행하면 저장된 영상이 없다는 안내 문구가 나타난다.", () => {
+    cy.get(".no-result__description").should("be.visible");
+  });
 
   it("초기 화면에서 검색 버튼을 누르면 보고싶은 영상 찾기 모달창이 나타난다.", () => {
     cy.openSearchModal();
     cy.get(".modal-container").should("be.visible");
   });
 
-  /**
-   * youtube에 검색한 결과가 없는 경우를 찾기 어려움... (테스트 통과가 되지 않을 확률이 높다.)
-   */
-  // it("보고싶은 영상 찾기 모달창 안에서 원하는 영상을 검색한 결과가 없는 경우 검색 결과 없음 이미지를 보여준다.", () => {
-  //   cy.get("#search-input-keyword").type(errorSearchKeyword);
-  //   cy.get("#search-button").click();
-  //   cy.get(".search-result--no-result").should("be.visible");
-  // });
-
-  /**
-   * 실제 API 호출 했을 경우 주석을 제거 후 테스트를 돌려주세요.
-   */
-  // it("보고싶은 영상 찾기 모달창 안에서 검색된 영상을 불러오는 동안 로딩 이미지를 보여준다.", () => {
-  //   cy.get("#search-input-keyword").clear().type(searchKeyword);
-  //   cy.get("#search-button").click();
-  //   cy.get(".skeleton").should("be.visible");
-  // });
+  it("보고싶은 영상 찾기 모달창 안에서 검색된 영상을 불러오는 동안 로딩 이미지를 보여준다.", () => {
+    cy.get("#search-input-keyword").clear().type(searchKeyword);
+    cy.get("#search-button").click();
+    cy.get(".skeleton").should("be.visible");
+  });
 
   it("보고싶은 영상 찾기 모달창 안에서 검색창에 검색어를 입력하지 않으면 에러 메시지를 보여준다.", () => {
     cy.searchWithNoKeyword();
@@ -53,12 +44,41 @@ describe("보고싶은 영상 찾기 모달창 전체 로직 테스트", () => {
   });
 
   it("보고싶은 영상 찾기 모달창 안에서 검색된 영상이 이미 저장된 영상이라면 저장 버튼이 보이지 않아야 한다.", () => {
-    cy.searchWithKeyword(searchKeyword);
     cy.get(".video-item__save-button").eq(0).should("be.not.visible");
   });
 
   it("보고싶은 영상 찾기 모달창이 열린 상태에서 모달창 뒤의 음영 된 부분을 누르면 모달창이 사라진다.", () => {
     cy.closeSearchModal();
     cy.get(".modal-container").should("be.not.visible");
   });
+
+  it("초기 화면에서 저장된 영상을 확인할 수 있어야 한다.", () => {
+    cy.get(".video-item").should("be.visible");
+  });
+
+  it("볼 영상 섹션에서 저장된 영상의 ✅ 버튼을 눌러 본 영상 섹션으로 옮길 수 있어야 한다.", () => {
+    cy.clickVideoWatchButton();
+    cy.get(".video-item").should("be.not.visible");
+  });
+
+  it("초기 화면에서 본 영상 버튼을 눌러 본 영상 목록을 확인할 수 있어야 한다.", () => {
+    cy.clickWatchedVideoListTab();
+    cy.get(".video-item").should("be.visible");
+  });
+
+  it("본 영상 섹션에서 저장된 영상의 ✅ 버튼을 눌러 볼 영상 섹션으로 옮길 수 있어야 한다.", () => {
+    cy.clickVideoWatchButton();
+    cy.clickWatchLaterVideoListTab();
+    cy.get(".video-item").should("be.visible");
+  });
+
+  it("초기 화면에서 저장된 영상의 🗑️ 버튼을 눌러 영상을 삭제할지 확인할 수 있어야 한다.", () => {
+    cy.clickVideoDeleteButton(false);
+    cy.get(".video-item").should("be.visible");
+  });
+
+  it("영상을 삭제할지 확인하는 화면에서 확인을 눌러 삭제할 수 있어야 한다.", () => {
+    cy.clickVideoDeleteButton(true);
+    cy.get(".video-item").should("be.not.visible");
+  });
 });

cypress/support/commands.js

@@ -9,9 +9,11 @@ Cypress.Commands.add("searchWithNoKeyword", () => {
 
   cy.on("window:alert", alertStub);
   cy.get("#search-input-keyword").clear().type(" ");
-  cy.get("#search-button").click(() => {
-    expect(alertStub).to.be.calledWith(ERROR_MESSAGE.SEARCH_INPUT_IS_EMPTY);
-  });
+  cy.get("#search-button")
+    .click()
+    .then(() => {
+      expect(alertStub).to.be.calledWith(ERROR_MESSAGE.SEARCH_INPUT_IS_EMPTY);
+    });
 });
 
 Cypress.Commands.add("searchWithKeyword", (keyword) => {
@@ -30,3 +32,25 @@ Cypress.Commands.add("loadMoreVideos", () => {
 Cypress.Commands.add("closeSearchModal", () => {
   cy.get(".dimmer").click({ force: true });
 });
+
+Cypress.Commands.add("clickWatchedVideoListTab", () => {
+  cy.get("#watched-video-button").click();
+});
+
+Cypress.Commands.add("clickWatchLaterVideoListTab", () => {
+  cy.get("#watch-later-video-button").click();
+});
+
+Cypress.Commands.add("clickVideoWatchButton", () => {
+  cy.get(".video-item__watched-button").eq(0).click();
+});
+
+Cypress.Commands.add("clickVideoDeleteButton", (confirmButtonClick) => {
+  cy.get(".video-item__delete-button").eq(0).click();
+
+  cy.on("window:confirm", (text) => {
+    console.log(text);
+    expect(text).to.contains("정말로 삭제하시겠습니까?");
+    return confirmButtonClick;
+  });
+});

index.html

@@ -9,12 +9,34 @@
     <main id="app" class="classroom-container">
       <h1 class="classroom-container__title">👩🏻‍💻 나만의 유튜브 강의실 👨🏻‍💻</h1>
       <nav class="nav">
+        <button
+          id="watch-later-video-button"
+          class="button nav__button saved-video__button selected"
+        >
+          👁️ 볼 영상
+        </button>
+        <button
+          id="watched-video-button"
+          class="button nav__button saved-video__button"
+        >
+          ✅ 본 영상
+        </button>
         <button id="search-modal-button" class="button nav__button">
           🔍 검색
         </button>
       </nav>
+      <section class="saved-video__section">
+        <h3 hidden>저장된 영상</h3>
+        <ul class="saved-video-list"></ul>
+        <div class="no-result hide">
+          <img src="" alt="no result image" class="no-result__image" />
+          <p class="no-result__description">
+            저장된 영상이 없습니다<br />나만의 영상을 검색하여 저장해보세요
+          </p>
+        </div>
+      </section>
     </main>
-    <!-- 1 검색 버튼을 누르면 아래와 같은 검색 모달을 보여줍니다.-->
+
     <div class="modal-container hide">
       <div class="dimmer"></div>
       <div
@@ -45,6 +67,17 @@ <h3 hidden>검색어 입력</h3>
         <section class="search-result">
           <h3 hidden>검색 결과</h3>
           <ul class="video-list"></ul>
+          <div class="no-result hide">
+            <img
+              src=""
+              id="search-modal-no-result__image"
+              alt="no result image"
+              class="no-result__image"
+            />
+            <p class="no-result__description">
+              검색 결과가 없습니다<br />다른 키워드로 검색해보세요
+            </p>
+          </div>
         </section>
       </div>
     </div>

package.json

@@ -15,15 +15,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kkojae91/javascript-youtube-classroom.git"
+    "url": "git+https://github.com/usageness/javascript-youtube-classroom.git"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/kkojae91/javascript-youtube-classroom/issues"
+    "url": "https://github.com/usageness/javascript-youtube-classroom/issues"
   },
-  "homepage": "https://github.com/kkojae91/javascript-youtube-classroom#readme",
+  "homepage": "https://usageness.github.io/javascript-youtube-classroom/",
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@babel/plugin-transform-runtime": "^7.17.0",

src/css/app.css

@@ -11,34 +11,56 @@ body {
 .classroom-container__title {
   text-align: center;
   font-weight: bold;
-  font-size: 34px;
   line-height: 36px;
   margin-bottom: 64px;
 }
 
 .nav {
   display: flex;
   justify-content: center;
+  margin-bottom: 40px;
 }
 
-.button {
-  cursor: pointer;
-  border-radius: 4px;
-  border: none;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 14px;
-  letter-spacing: 1.25px;
+.nav__button:hover {
+  background: #ebebeb;
 }
 
-.nav__button {
-  width: 80px;
-  height: 36px;
-  background: #f5f5f5;
+#search-modal-button {
+  margin-left: auto;
 }
 
-.nav__button:hover {
-  background: #ebebeb;
+.saved-video__button {
+  border: 1px solid #cccccc;
+}
+
+.saved-video__button:hover {
+  background: rgba(0, 188, 212, 0.12);
+}
+
+.selected {
+  background: rgba(0, 188, 212, 0.12);
+}
+
+.saved-video-list {
+  width: 105%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 32px 20px;
+  overflow-y: hidden;
+}
+
+.video-button__wrapper {
+  text-align: right;
+}
+
+.no-result {
+  flex-grow: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 /* ******** */