typescript-youtube-classroom

.gitignore

@@ -1,3 +1,6 @@
+dist/js/env.js
+src/js/env.ts
+
 # Logs
 logs
 *.log
@@ -6,6 +9,8 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+.vscode/
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -80,7 +85,6 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
 
 # Gatsby files
 .cache/

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120
+}

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://127.0.0.1:5500"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/main-page.spec.js

@@ -0,0 +1,27 @@
+import { typeSearchInputAndClick } from './utils.js';
+
+describe('볼 영상 버튼 눌렀을때 페이지 구성', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('bts영상 저장 후 영상 버튼 눌렀을 때, checkView가 false인것 렌더링', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .d-flex > .btn`).click();
+    cy.get('svg').click();
+    cy.reload()
+  });
+
+  // it("삭제 버튼 클릭시 자료구조에서 해당 item 삭제", () => {
+  // })
+  // it("checkLike false일 때 좋아요 버튼 클릭시, checkLike true로 변경", () => {
+  // })
+  // it("checkLike true일 때 좋아요 버튼 클릭시, checkLike false로 변경", () => {
+  // })
+  // it("checkView가 false일때 체크박스 클릭 시, 자료구조 checkView 값 true로 변경.", () => {
+  // })
+  // it("볼 영상 버튼 누를 시 다른 페이지 삭제 및 볼 영상 렌더링", () => {
+  // })
+
+});

cypress/integration/search-page.spec.js

@@ -0,0 +1,78 @@
+import { typeSearchInputAndClick } from './utils.js';
+
+describe('검색 버튼 눌렀을 때 페이지 구성', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('youtube API 불러왔을 때 10개의 skeleton UI 생성 확인', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+
+    cy.get('.skeleton').should('have.length', 10);
+  });
+
+  it('youtube API 불러왔을 때 10개의 item이 있는지 확인', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+    cy.get('.skeleton').should('have.length', 0);
+    cy.get('.clip').should('have.length', 10);
+  });
+
+  it('item을 불러왔을때 channelTitle, publishedAt, thumbnail, title, videoId 값 불러오기', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+    cy.get(':nth-child(1) > .preview-container > iframe').should('have.attr', 'src');
+    cy.get(`:nth-child(1) > .content-container > h3`).contains(/[^\s]/);
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .channel-name`).should('have.attr', 'href');
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .channel-name`).contains(/[^\s]/);
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .meta > p`).contains(/[^\s]/);
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .d-flex > .btn`).should('exist');
+  });
+
+  it('BTS 입력 후 검색버튼 누를때 최근 검색어 shift 최대 3개', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+    cy.get('#modal-recent-search-items > :nth-child(1)').should('have.text', 'bts');
+    typeSearchInputAndClick('ccc');
+    cy.get('#modal-recent-search-items > :nth-child(1)').should('have.text', 'ccc');
+    typeSearchInputAndClick('aaa');
+    cy.get('#modal-recent-search-items > :nth-child(1)').should('have.text', 'aaa');
+  });
+
+  it('bts 입력후 item 카드로 UI 띄우기', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+
+    for (let youtubeCardCount = 1; youtubeCardCount < 11; youtubeCardCount++) {
+      cy.get(`:nth-child(${youtubeCardCount}) > .preview-container > iframe`).should('exist');
+      cy.get(`:nth-child(${youtubeCardCount}) > .content-container > h3`).should('exist');
+      cy.get(`:nth-child(${youtubeCardCount}) > .content-container > :nth-child(2) > .channel-name`).should('exist');
+      cy.get(`:nth-child(${youtubeCardCount}) > .content-container > :nth-child(2) > .meta > p`).should('exist');
+      cy.get(`:nth-child(${youtubeCardCount}) > .content-container > :nth-child(2) > .d-flex > .btn`).should('exist');
+    }
+  });
+
+  /*// 검색어 중복처리
+    it("한 item에 대해 저장 버튼 눌렀을 때 localstorage videos 자료구조에 추가되는지 확인", () => {
+      // cy.get('#search-button').click();
+      // typeSearchInputAndClick('bts');
+      // cy.log(window.localStorage.getItem('recent-search'))
+      // expect(window.localStorage.getItem('recent-search')).to.equal(['bts'])
+    })*/
+
+  it('한 item에 대해 저장 버튼 눌렀을 때 저장된 영상 갯수 오른쪽 상단에 띄우기', () => {
+    cy.get('#search-button').click();
+    typeSearchInputAndClick('bts');
+    cy.get(`:nth-child(1) > .content-container > :nth-child(2) > .d-flex > .btn`).click();
+    cy.get(`#modal-saved-video-length`).contains('저장된 영상 갯수: 1개');
+  });
+
+  // it("[3단계] scroll 했을때 10개씩 늘어나게 하기(lazy loading)", () => {
+
+  // })
+
+  // it("한 item에 대해 저장 버튼 눌렀을 때 저장된 영상 갯수 100개 제한하기", () => {
+
+  // })
+});

cypress/integration/utils.js

@@ -0,0 +1,6 @@
+const typeSearchInputAndClick = (type) => {
+  cy.get('#modal-search-input').type(type);
+  cy.get('#modal-search-button').click();
+};
+
+export { typeSearchInputAndClick };

cypress/integration/watched-page.spec.js

@@ -0,0 +1,17 @@
+// describe("본 영상 버튼 눌렀을때 페이지 구성", () => {
+//   it("local storage의 saved-videos중 checkView가 true인것 렌더링", () => {
+
+//   })
+//   it("삭제 버튼 클릭시 자료구조에서 해당 item 삭제", () => {
+
+//   })
+//   it("checkLike false일때 좋아요 버튼 클릭시, checkLike true로 변경", () => {
+
+//   })
+//   it("checkLike true일때 좋아요 버튼 클릭시, checkLike false로 변경", () => {
+
+//   })
+//   it("checkView가 true일때 체크박스 클릭 시, 자료구조 checkView 값 false로 변경.", () => {
+
+//   })
+// })

cypress/integration/youtube-class.spec.js

@@ -0,0 +1,54 @@
+import { ENV } from '../../src/js/@shared/constants/env.ts';
+import { model } from '../../dist/js/model/index.js';
+
+// const BTSQUERY = `https://www.googleapis.com/youtube/v3/search?key=${ENV.API_KEY}&part=snippet&q=bts&maxResults=10&type=video&videoEmbeddable=true`;
+
+// describe("API 유효성 확인", () => {
+//   it("BTS 검색해 youtube API 요청 시 상태코드 200인지 확인", () => {
+//     cy.visit('/');
+//     cy.request({
+//       url: BTSQUERY,
+//       followRedirection: false,
+//     }).then((resp) => {
+//       cy.log(resp.status)
+//       expect(resp.status).to.eq(200);
+//     });
+//   });
+// })
+
+// ⬇️ 저장
+// ↪️ 저장 취소
+
+// - model (local storage)
+//   - [ ] video : [
+//       "a": {
+//           videodata: videoModel,
+//           checkLike : boolean,
+//           checkView: boolean
+//       }
+//   ]
+
+// describe("부가기능", () => {
+//   it("다크모드 클릭시 다크모드 전환", () => {
+
+//   })
+//   it("각 이벤트 발생시 알림창 띄우기 (추후에 세부적으로 분류)", () => {
+
+//   })
+// })
+
+
+// describe("좋아요 영상 버튼 눌렀을때 페이지 구성", () => {
+//   it("local storage의 saved-videos중 checkLike가 true인것 렌더링", () => {
+
+//   })
+//   it("삭제 버튼 클릭시 자료구조에서 해당 item 삭제", () => {
+
+//   })
+//   it("checkLike true일때 좋아요 버튼 클릭시, checkLike false로 변경하고 페이지에서 제거", () => {
+
+//   })
+//   it("checkView가 true일때 체크박스 클릭 시, 자료구조 checkView 값 false로 변경.", () => {
+
+//   })
+// })

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/README.md

@@ -0,0 +1,68 @@
+## 🔥 Projects!
+
+### 기능 구현
+
+### local storage
+
+저장 해야될 것들: 볼영상, 좋아요 영상, 본영상
+
+- model (local storage)
+  - [ ] video : [
+      "a": {
+          like-youtube : boolean,
+          check: boolean
+      }
+  ]
+
+- [ ] Data fetch
+  - [ ] API_KEY github에 공개 안되게 하기/
+  - [ ] 동영상 검색 버튼 누르면 유튜브 api json으로 가져오는거 console.log로 확인
+
+- [ ] View
+  - [ ] search 결과 동영상 틀 UI 작성
+    - [ ] 모달 만들기
+      - [ ] 창 생성
+      - [ ] 검색 search UI
+      - [ ] 동영상 UI
+
+### 🎯 step1 검색 기능
+
+- [ ] [유튜브 검색 API](https://developers.google.com/youtube/v3/getting-started?hl=ko)를 통해서, 내가 추가로 보고 싶은 영상들을 검색할 수 있다.
+  - [ ] 검색 시 엔터키를 눌렀을 때와 마우스로 검색 버튼을 눌렀을 때 검색 동작이 이루어진다.
+- [ ] 로딩컴포넌트: 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 skeleton UI로 보여준다.
+- [ ] 검색 결과가 없는 경우 결과 없음 이미지를 추가하여, 사용자에게 메시지를 보여준다.
+  - [ ] 검색 결과 없음 이미지는 `src/images/status/not_found.png` 경로에 있다.
+- [ ] 최초 검색결과는 10개까지만 보여준다. 더 많은 데이터는 스크롤을 내릴 때 추가로 불러온다.
+  - 검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그다음 10개 아이템을 추가로 api요청하여 불러온다.
+- [ ] 내가 검색한 영상들의 json 데이터를 `저장`할 수 있다. (실제 저장이 아닌 영상 id를 Web Storage에 저장). 단 이미 저장된 경우는 저장 버튼이 보이지 않게 한다.
+- [ ] 저장 가능한 최대 동영상의 갯수는 100개이다.
+- [ ] 검색 모달에 다시 접근했을 때 가장 마지막에 검색한 키워드로 검색한 결과를 보여준다.
+- [ ] 최근 검색 키워드를 3개까지 화면상에 검색창 하단에 보여준다.
+
+### 🎯🎯 step2 강의실 관리 기능
+
+- [ ] 가장 처음에는 저장된 영상이 없음으로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.
+- [ ] 이후 페이지를 방문했을 때 기본 메인 화면은 내가 **볼 영상**들의 리스트를 보여준다.
+- [ ] 영상 카드의 이모지 버튼을 클릭하여 아래와 같은 상태 변경이 가능해야 한다.
+  - [ ] ✅ 본 영상으로 체크
+  - [ ] 🗑️ 버튼으로 저장된 리스트에서 삭제할 수 있습니다. (삭제 시 사용자에게 정말 삭제할 것인지 물어봅니다.)
+- [ ] 사용자가 버튼을 클릭했을 때 해당 행위가 정상적으로 동작하거나, 실패하였음을 `snackbar`를 통해 보여준다.
+- [ ] 본 영상, 볼 영상 버튼을 눌러 필터링 할 수 있다.
+
+### 🎯🎯🎯 step3 유저 경험 증가 기능
+
+- [ ] 내가 본 영상 중 좋은 영상에는 좋아요, 코멘트를 직접 추가할 수 있다. (실제 유튜브 영상에 추가하는 api 사용)
+  - [ ] 👍 좋아요 API를 이용하여 전송
+  - [ ] 💬 댓글 API를 이용하여 전송 (댓글 전송을 위한 modal과 form은 스스로 구현합니다.)
+- [ ] 좋아요 버튼을 누른 데이터만 필터링해서 보여준다.
+- [ ] 다크 모드를 위한 버튼을 만든다. 버튼 ui는 직접 만든다.
+  - [ ] 모든 글자 색상은 #FFFFFF, 배경 색상은 #000000 로 한정한다.
+- [ ] 반응형 웹: 유저가 사용하는 디바이스의 가로 길이에 따라 검색 결과의 row 당 column 개수를 변경한다.
+  - 992px 이하: 4개
+  - 768px 이하: 2개
+  - 576px 이하: 1개
+- [ ] 스크롤 페이징 방식을 이용해서 Lazy loading을 개선한다.
+
+### err
+
+[Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'](https://stackoverflow.com/questions/41522652/refused-to-display-url-in-a-frame-because-it-set-x-frame-options-to-sameori)