Vid+ : https://slides.com/jch9537/vid#/
Vid+의 전체적인 구성도이다. 동그라미는 Component(또는 화면 구성요소)이고 네모는 화면을 보여지는 Component이다.
1. Vid+의 페이지 접근 (인증확인 및 자동로그인)
Vid+의 페이지에 접근하면 App 컴포넌트를 렌더 한 뒤 ComponentDidMount에서 Server로 회원정보를 요청한다.
Server에서는 session의 userId의 유무를 확인하므로 없다면 SignIn 페이지로 이동하게 되고 회원정보를 응답을 해주게 되면(session의 userId가 있음) Home 페이지로 이동을 하거나 주소창에 WorkSpace에 맞는 주소를 입력하게 되면 바로 WorkSpace 화면으로 가게 된다.
존재하지 않는 주소를 입력하게 되면 Error 페이지로 이동한다.
- 인증이 되어있지 않은 경우
- 인증이 되어있는 상태에서 Vid+페이지에 접근 한 경우
- 인증이 되어있는 상태에서 url에 space주소에 맞게 입력한 경우
- 인증은 되어있으나 잘못된 주소를 입력한 경우
2. 동영상 추가, 목록 확인 및 수정
정상적으로 로그인이 됐다면 아래와 같은 화면이 나온다.
왼쪽에 검은색의 navigation과 동영상 url을 복사해 가져올 수 있는 창과 동영상에 이름을 넣는 창, 오른쪽 위는 노트들을 google Docs로 내보내기 버튼과 log out 버튼이 있다.
입력 후 "+"버튼을 누르면 해당 동영상이 list에 추가된다.
추가된 영상을 선택하면 WorkSpace 페이지로 이동을 한다.
아래 note 추가 창에 노트 내용을 넣으면 노트 추가한 동영상의 재생시간과 노트내용이 오른쪽 노트리스트에 보여지게 된다.
노트작성아래 input 창에는 동영상 재생시간을 적으면 해당시간에 대한 노트를 작성할 수 있는 창이 노트리스트에 추가된다.
아래 사진은 노트리스트의 노트들이다.
영상 시간을 클릭을 하면 동영상이 해당 시간으로 이동하게 되고 노트input 창에서 바로 내용을 수정을 할 수 있다.
그리고 오른쪽의 시계버튼을 누르면 노트에 해당하는 영상시간을 수정할 수 있고 휴지통 버튼을 누르면 노트가 삭제된다.
다음은 로그인 이후 모든 화면의 왼쪽에 위치한 Navigation bar이다.
위 쪽부터 각각 Home / WorkSpace / AccountSetting 페이지로 이동할 수 있다.
각각의 페이지로 이동하게 되면 해당 페이지가 파란색으로 포커스가 된다.
"vidplus"글자 아래 화살표는 좀 더 큰 네비게이션 바를 볼 수 있다. (큰 기능은 아님)
마지막으로 네비게이션 바의 세번째 사람모양의 버튼을 누르면 회원정보변경 Modal을 띄워 정보를 변경 할 수 있다.
