오픈 튜브 프로젝트 일지

카탈로그
  1. 1. 1차 작업 일지
    1. 1.1. 요약
    2. 1.2. 구현사항
    3. 1.3. 코드 테스트 방법
      1. 1.3.1. 로그인 확인
      2. 1.3.2. 폴더구조 확인
      3. 1.3.3. 모바일 창에서 확인
      4. 1.3.4. IE 미지원 확인
    4. 1.4. 스크린샷
      1. 1.4.1. 로그인 페이지
      2. 1.4.2. 메인 페이지
      3. 1.4.3. 모바일 창
      4. 1.4.4. 폴더구조 변경
    5. 1.5. 기타
  2. 2. 2차 작업 일지
    1. 2.1. 요약
    2. 2.2. 구현 사항
    3. 2.3. 코드 테스트 방법
      1. 2.3.1. 유저 이름 확인
      2. 2.3.2. 레포트 요청 모달창 확인
    4. 2.4. 스크린샷
    5. 2.5. 기타
  3. 3. 3차 작업 일지
    1. 3.1. 요약
    2. 3.2. 구현 사항
    3. 3.3. 코드 테스트 방법
    4. 3.4. 스크린샷
    5. 3.5. 기타
  4. 4. 4차 작업 일지
    1. 4.1. 요약
    2. 4.2. 구현 사항
    3. 4.3. 코드 테스트 방법
    4. 4.4. 스크린샷
    5. 4.5. 기타
  5. 5. 5차 작업 일지
    1. 5.1. 요약
    2. 5.2. 구현 사항
    3. 5.3. 코드 테스트 방법
    4. 5.4. 스크린샷
    5. 5.5. 특이 사항
    6. 5.6. 기타
  6. 6. 6차 작업 일지
    1. 6.1. 요약
    2. 6.2. 구현 사항
    3. 6.3. 코드 테스트 방법
    4. 6.4. 스크린샷
    5. 6.5. 기타
  7. 7. 7차 작업 일지
    1. 7.1. 요약
    2. 7.2. 기타

1차 작업 일지

요약

1차 레이아웃 작업 내용 ㅇㅅㅇ

구현사항

  • SCSS + Autoprefixer 추가
  • 로그인 페이지 / 메인 페이지 구현
  • 로그인 구현 (firebase Auth - Apache 2.0 이용)
  • 폴더구조 변경
    • 상세사항은 아래에 작성
  • 크로스 플랫폼 고려 (모바일 환경 고려)
    • 상세사항은 아래에 작성
  • IE 지원 X
    • 그리드 자동배치, 파이어베이스 미지원으로 인하여 지원 종료
  • Shadow DOM 제거 - FOUC 현상으로 인하여 제거

코드 테스트 방법

로그인 확인

  1. 구글 로그인 여부 확인
  2. 라우팅 처리 잘 되어있는지 확인
    비로그인시 /report 라우팅 접속 불가

폴더구조 확인

  • 삭제된 파일 및 이동된 폴더 검사

모바일 창에서 확인

  • 브라우저 크기를 작게하여 확인

IE 미지원 확인

  • IE 에서 접속시, 해당 브라우저는 지원되지 않습니다. 문구 표시

스크린샷

로그인 페이지

이름 이미지
로그인 image

메인 페이지

이름 이미지
메인 image

모바일 창

  • GIF 캡쳐 프로그램 오류로, 색 변조 존재함…. (하늘색 무시해줘용)
이름 이미지
로그인 image

폴더구조 변경

📦client
┣ 📂.storybook
┃ ┗ 📜config.js
┣ 📂functions
┃ ┣ 📜.eslintrc.json
┃ ┣ 📜.gitignore
┃ ┣ 📜index.js
┃ ┣ 📜package-lock.json
┃ ┗ 📜package.json
┣ 📂public
┃ ┣ 📂src
┃ ┃ ┗ 📂css
┃ ┃ ┃ ┣ 📜foundation.min.css
┃ ┃ ┃ ┗ 📜style.css # 추가 - SCSS 번들링 파일
┃ ┣ 📜index.css
┃ ┗ 📜index.html
┣ 📂src
┃ ┣ 📂components
┃ ┃ ┣ 📜app-footer.js
┃ ┃ ┣ 📜filter-list.js
┃ ┃ ┣ 📜nav-top.js
┃ ┃ ┗ 📜report-list.js
┃ ┣ 📂libs # 삭제 - LitRender 파일 삭제
┃ ┃ ┣ 📜actions.js
┃ ┃ ┣ 📜i18n.js
┃ ┃ ┣ 📜redux-zero.js
┃ ┃ ┗ 📜store.js
┃ ┣ 📂pages # 추가 - 페이지별 JS파일 별도 관리
┃ ┃ ┣ 📜page-login.js
┃ ┃ ┗ 📜page-reports.js
┃ ┣ 📂scss # 추가 - SCSS 파일 모음
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜app-footer.scss
┃ ┃ ┃ ┣ 📜filter-list.scss
┃ ┃ ┃ ┣ 📜nav-top.scss
┃ ┃ ┃ ┗ 📜report-list.scss
┃ ┃ ┣ 📂pages
┃ ┃ ┃ ┣ 📜page-login.scss
┃ ┃ ┃ ┣ 📜page-reports.scss
┃ ┃ ┃ ┗ 📜vars.scss
┃ ┃ ┗ 📜main.scss
┃ ┣ 📂stories
┃ ┃ ┗ 📜index.stories.js
┃ ┣ 📂_locale # 추가 - 언어리소스 모음
┃ ┃ ┗ 📜ko.js
┃ ┗ 📜main.js
┣ 📂test
┃ ┗ 📜index.html
┣ 📜.babelrc
┣ 📜.codebeatignore
┣ 📜.eslintignore
┣ 📜.eslintrc.js
┣ 📜.firebaserc
┣ 📜.gitignore
┣ 📜.travis.yml
┣ 📜database.rules.json
┣ 📜firebase.json
┣ 📜firestore.indexes.json
┣ 📜firestore.rules
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┣ 📜README.md
┣ 📜storage.rules
┣ 📜wct.conf.json
┗ 📜webpack.config.js

기타


2차 작업 일지

요약

  • 일반 유저와 관리자를 uid를 통해 구분하는 코드를 작성했으며, 사용자가 우리 서비스에 레포트를 요청할 수 있는 모달창을 구현했습니다.

구현 사항

  • firebase.auth ~ uid를 통해, 관리자ID 구별 (서버리스 함수로 구현)

  • CSS duplicate 되던 버그 수정

  • 쉬운 아이콘 사용을 위해 Foundation-icon 모듈 추가 (자세한 사항]

  • 레포트 요청 모달창 구현 (아래의 스크린샷 첨부)

코드 테스트 방법

유저 이름 확인

  • 로그인 페이지에서 로그인을 하여, 메인 페이지 상단바의 사용자 이름이 뜨는지 확인

레포트 요청 모달창 확인

  • 메인 페이지에서 레포트 요청 버튼을 클릭하여 정상 표시되는지 확인

스크린샷

이름 이미지
사용자 이름 image
이름 이미지
모달창 image

기타


3차 작업 일지

요약

  • 더미 API를 받고, 레포트를 불러오는 기능과 레포트 모달창 구현

구현 사항

  • 더미 API 작성(레포트 상태, 영상제목, URL)
  • 레포트 UI 추가
  • 레포트 Router 추가

코드 테스트 방법

  1. 구글 open.tube.service 계정으로 로그인 (슬랙: info에 ID/PW 있음)
  2. 레포트가 정상적으로 받아오는지 확인
  3. 레포트를 클릭하여 모달창 뜨는지 확인

스크린샷

이름 이미지
더미 DB image
이름 이미지
더미 API image
이름 이미지
메인 페이지 image
이름 이미지
메인 페이지 image

기타

  • close #44

4차 작업 일지

요약

  • 웹팩 번들링 파일 분석을 위한 모듈 추가 및 라우팅 최적화

구현 사항

  • webpack-stylish, webpack-visualizer-plugin 모듈 추가

    기능 설명: 각 모듈의 파일 사이즈, 번들링 시간 등을 파악

  • 라우팅 최적화
  • firebaseui cdn -> 로컬로 변경, 네트워크에서 느리게 받아오는 것을 확인하여 변경

코드 테스트 방법

  • 각 리뷰어가 확인할 사항 없음

스크린샷

  • No ScreenShot

기타


5차 작업 일지

요약

  • 레포트 페이지 구현 및 CSS 테마1 적용

구현 사항

  • 레포트 - 영상 삽입 (동적 이용을 위해 Youtube Iframe API 사용)
  • 레포트 - 영상 기본 정보
  • 레포트 - 얼굴 인식
  • 레포트 - 댓글 분석
  • 레포트 - 키워드 분석

코드 테스트 방법

  1. https://open-tube.web.app 접속

  2. open.tube.service 구글 ID 로그인

  3. ID의 부여된 4개의 레포트 테스팅

스크린샷

이름 이미지
로그인 페이지 image
이름 이미지
메인 페이지 image
이름 이미지
요청 페이지 image

History API 수정 전으로, 아직 API 연결 안함 (아직 Status 분류가 되어있지 않음)

이름 이미지
영상정보 및 얼굴인식 image

Seconds Link 클릭시, 그 시간대로 영상 재생

이름 이미지
댓글 분석 image

각 항목별 오른차순·내림차순 정렬 가능

이름 이미지
키워드분석 image

특이 사항

  • Youtube Iframe API 사용
  • Word-Cloud 오픈소스(MIT) 사용

기타

  • closed issue #58

6차 작업 일지

요약

레포트 상태 분류 / API 연결 / GIF 설명 삽입

구현 사항

  • 레포트 - 상태 분류 표시 (대기/ 분석/ 완료)
  • 모달 메세지 컴포넌트 추가
  • 레포트 요청 API 연결
  • 로그인 GIF 설명 추가

코드 테스트 방법

  1. https://open-tube.web.app 접속

  2. open.tube.service 구글 ID 로그인

  3. ID의 부여된 4개의 레포트 테스팅

스크린샷

이름 이미지
최종상태 ezgif-3-1a5ed28f0577

기타


7차 작업 일지

요약

  • 자잘한 버그 수정

기타