고객은 마이페이지에서 자신이 번역한 문장 블록들과 모은 봉사시간을 확인할 수 있다.

고객은 최선의 번역을 선택하기 위해 마음에 드는 번역을 선택하여 추천할 수 있다.

duration , start time period 비교해서 더 작은 값을 db에 저장

고객은 번역하고자 하는 영상을 선택하기 위해 url을 입력 할 수 있다.

서비스 제공자는 고객이 내용 참고 및 투표를 할 수 있게, 문장 블록들에 대한 다른 사람들의 번역 정보(영어 원문과, 번역문, 추천 수)를 출력할 수 있다.

체크 버튼을 눌러 수정사항을 반영할 수 있다.

고객은 문장의 문맥을 확인하기 위해, 문장 블록을 위, 아래 방향키로서 탐색할 수 있다.

자신이 번역한 문장 블록을 클릭 할 시 해당 영상 페이지의 해당 문장으로 이동한다.

고객은 한 문장씩 번역을 진행할 수 있다.

서비스 제공자는 시간 별 텍스트 데이터를 추출 및 정제하기 위해 url 속 영상을 음성 인식 할 수 있다.

데이터 바인딩 로직 with react

D고객은 자신의 자막을 삭제하기 위해, 자신의 번역 문장 블록에서 X 버튼을 클릭할 수 있다.

DB에 vote model + 저장 로직 + routing + 버튼 이벤트 리스너

• 위 이미지에서 영상 나오는 부분과 오른쪽은 빈칸으로 레이아웃만 잡아두고, 나머지 html, css, js로 구현
• 각 블록 클릭 이벤트 리스너 달기 // 클릭하면 블록 색깔 변하는 걸로? 알아서잘딱깔끔하고센스있게
• url 라우팅 // 어떤 url 형식을 할건지 정해서 url만 잡아주면 될듯
• db에서 자막 데이터 불러와서 동적으로 블록 생성해서 뿌려주기

위 페이지 html, css, js로 구현

리스트 클릭 시 timeout이 끝나기 전에 다른 블록을 클릭하면
이전에 call 했던 timeout때문에 일찍 정지가 됨.
전역변수로 timeout을 부른 후에 cleartimeout을 하거나
state로 timeout을 설정해서 setstate를 해야 할듯 -> 근데 이거는 비동기 때문에 좀 꼬일듯?

유튜브 url 입력 폼 생성

저장된 최선의 (votes수가 제일 높은 ) 자막 export

고객은 자막 번역을 할 때, 특정 문장 블록을 선택하여, 자동생성된 영어 텍스트와, 자신만의 번역을 올릴 수 있다.

연필버튼 클릭 시 이벤트 처리(state 변경 → 폼 속성 수정) + 기존 데이터 바인딩

• html, css, javascript
  • 뷰는 프로토타입대로

고객은 문장의 문맥을 확인하기 위해, 문장 블록을 활성화 하여 선택된 문장 구간을 영상으로 확인할 수 있다.

고객은 export 버튼을 눌러, 현재 최선의 번역 데이터를 모아 자막 파일로 변환하여 다운로드 할 수 있다.

유저는 마이페이지에서 번역한 문장 블록들을 확인할 수 있다.

• create 이후, 폼에 데이터가 clear되게 한다.
• 폼에서 체크 버튼만 남긴다.
• translation block에 x버튼을 추가한다.
• translation block에 있는 x버튼에 클릭 리스너를 등록해주고, 해당 이벤트 핸들러에서 디비에 있는 데이터 삭제를 요청한다.

네비게이션 바에 더미데이터로 봉사시간 확인, 하는 김에 유저 이름도 더미 데이터로?

유저는 번역의 보상으로 봉사 시간을 받을 수 있다.

X 버튼을 눌러 수정사항을 취소할 수 있다.

리액트 공부

• 비디오 넣으면 자동으로 자막 생성해주는 적절한 API 찾기
• 해당 API 적용해서, url 입력을 했을때 알아서 자막을 생성해주는 기능까지 구현 및 테스트

고객은 전체 영상을 확인하기 위해, 기본적인 영상 제어를 할 수 있다.

• 문장 블록에 대한 DB 스키마 짜기 // 스키마 짜고 같이 논의해 봐야 할듯 중요한 사안이라
• 자막 데이터를 가공하여, 해당 스키마에 맞게 디비에 저장
• 첫 번째 페이지에서 유튜브 링크 입력하고 검색 버튼 누를 때, 리다이렉트 되기 전에, 해당 자막 데이터를 모두 디비에 저장하는 기능 구현

디비 스키마

유저
- 이름
- 총 봉사 기간
- 내 번역 ids

동영상
- url
- 문장 블록들 ids
- contributor들 ids // user ids
==================================
(optional)
- 썸네일 이미지 // 관련 api 사용이 편하다면.

문장 블록
- 해당하는 동영상 id
- raw eng
- start_timing
- duration
- num_of_translation
- num_of_most_votes

번역들
    - translator // user id
    - 해당하는 문장 블록 ids
    - is_modified
    - modified_eng
    - translatd_kor
    - num_of_votes

        추천
            - 추천한 번역 ids
            - voter // user

• 디비에 있는 raw eng 불러와서 value값으로 넣어주는 기능

유저가 번역에 대한 보상과 자신의 정보를 확인할 수 있다.

U고객은 자신의 자막을 수정하기 위해, 자신의 번역 문장 블록에서 연필 버튼을 클릭할 수 있다.

• 서버세팅
  • node.js, 설치 + 기본적 테스트
  • ngrok? ip direct?

서비스 제공자는 고객이 자신이 번역한 문장을 확인할 수 있게 하기 위해 변경사항 저장 후 다른 사람들의 번역 리스트 뷰에 해당 내용을 출력할 수 있다.

1. YouTube url을 home에서 입력했을 때, 백엔드에서 정보를 받아 이미 DB에 존재하는 YouTube 영상인지 판별하고, 이미 존재할 경우 DB에서, 존재하지 않을 경우 api 서버에서 정보를 받아 넘겨준다.

2. api 서버에서 정보를 받아왔을 경우 새롭게 만들어진 Video와 Transcript 정보를 만들어서 DB에 저장하도록 한다.

3. url을 넘겨받을 경우, 알아서 parsing 해서 video의 id (v="***") 를 찾아올 수 있도록 한다.

4. React가 넘겨받은 정보를 render에 뿌려줄 수 있도록 한다.

• modeling with mongoose
• create or find dummy data and attach into mongo db
• set relationships with other collections

Translate 버튼 동적 크기 조절

서버 코드와 클라이언트 측 코드를 통합한다.

서비스 제공자는 고객이 번역할 문장을 선택할 수 있게, 리스트 뷰에서 문장 블록에 관한 다양한 정보(시간, 번역 수, 최다 추천 수)를 출력할 수 있다.

오른쪽에 리스트뷰 item 추가, 데이터 바인딩

• nodejs 설치
• ngrok? ip direct?
• 몽고 디비 설치 및 서버와 연결
• 웹 브라우저로 접속했을 시 반응이 오는지 테스트

• 첫 번째 페이지 url 정하기

• 유튜브 url 입력 후, 검색 버튼을 누르면, 해당 url이 서버에 잘 전송되는지 확인

• 서버에 url이 잘 도착한 이후, 페이지 리다이렉션기능 구현

고객은 번역을 원하는 영상을 선택 할 수 있다.

선택한 자막 블록을 반복재생한다

고객은 원하는 블록의 영상을 재생하기 위해, 엔터 키로 영상 재생을 제어할 수 있다.

고객은 프로그램이 자동으로 생성한 영어 문장을 수정할 수 있다.

• url 라우팅
• 서버에 request 보내기
• page 리다이렉팅