Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다. #47

Closed
5 tasks done
aereeeee opened this issue Nov 25, 2019 · 0 comments
Closed
5 tasks done

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다. #47

aereeeee opened this issue Nov 25, 2019 · 0 comments
Assignees
@aereeeee
Labels
🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 📠Location : api server 작업의 위치가 애플리케이션을 나타내는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨
Projects
Sprint - 03 🏃‍♂️
Milestone
Sprint - 03

Comments

@aereeeee
Copy link
Contributor

aereeeee commented Nov 25, 2019 •
edited
Loading

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다.

  • 스피커의 현재 슬라이드 페이지를 리스너가 구독하도록 한다.

완료 조건 ✅

  • 슬라이드 동기화 버튼 UI구현
  • 스피커의 현재 위치를 DB에 저장한다.
  • 리스너가 채널 접속시 스피커의 현재위치를 동기화 하여 보여준다.
  • 클라이언트에서 스피커의 위치를 리스너가 subscribe해야한다.
  • 동기화 활성화 시 리스너와 스피커의 슬라이드가 동기화 된다.

관련 이슈 📎

레퍼런스 📚
@aereeeee aereeeee added the 🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 label Nov 25, 2019
@aereeeee aereeeee self-assigned this Nov 25, 2019
@devphilip21 devphilip21 added this to the Sprint - 03 milestone Nov 25, 2019
@aereeeee aereeeee mentioned this issue Nov 25, 2019
Closed
3 tasks
@aereeeee aereeeee added 📠Location : api server 작업의 위치가 애플리케이션을 나타내는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨 labels Nov 25, 2019
@aereeeee aereeeee mentioned this issue Nov 25, 2019
Closed
36 tasks
@aereeeee aereeeee moved this from To do to In progress in Sprint - 03 🏃‍♂️ Nov 27, 2019
aereeeee added a commit that referenced this issue Nov 27, 2019
@aereeeee
[ FEATURE ] 스피커의 현재 슬라이드 페이지 넘버를 리스너와 공유하기 위한 api 서버 로직 작성 (#47)
c446c3b 
Why
- 스피커가 슬라이드를 이동하면 리스너도 해당 페이지 번호를 동기화 해야한다.

What
- Slide mongoose 스키마를 작성
- 클라이언트에서 Slide 데이터를 mutate, query, subscribe하도록 graphQL로직 작성
- slide 데이터 upsert로직작성
- slide 데이터를 payload형태로 변환하기 위한 toPayload method작성
aereeeee added a commit that referenced this issue Nov 27, 2019
@aereeeee
[ FEATURE ] 스피커의 슬라이드 페이지 동기화를 위한 클라이언트 graphQL 로직 구현 (#47)
95a57af 
Why
- 스피커의 슬라이드 페이지와 리스너의 페이지에 동기화가 필요하다.

What
- 클라이언트에서 스피커일 경우 슬라이드 페이지를 이동하면 useSetCurrentSlide훅을 이용하여 데이터를 mutate하도록 구현
- useSlideChanged 훅을 이용하여 Slide데이터가 변경될 경우 구독하도록 구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ REFACTOR ] 슬라이드 동기화를 위한 graphQL server로직 수정 (#47)
9bf9576 
Why
- 스피커 슬라이드 페이지를 구독하기 위해 slide 스키마를 따로 관리하기보다 기존 channel 로직에서 처리하는것이 효율적이라고 판단

What
- 채널 graphQL 로직에 setCurrentSlide mutation, slideChanged subscription을 생성
- channel mongoose 스키마에 channelStatus, currentSlide데이터 추가
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 클라이언트 스피커 슬라이드 페이지 subscription 로직 구현 (#47)
d7c070f 
Why
- 스피커가 페이지를 이동하면 mutation이 일어나고 변경된 데이터를 subscribe하는 컴포넌트는 데이터를 사용할 수 있어야 한다.

Whay
- 스피커의 뮤테이션을 발생시키는 SetCurrentSlide 훅 구현
- subscription을 위한 useSlideChanged 훅 구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 슬라이드 현재 페이지와 전체페이지를 표시하는 페이지 넘버 컴포넌트 구현 (#47)
ba32214 
Why
- 더 좋은 사용자 경험을 위해 사용자의 페이지 넘버를 표시해야 한다.
- 스피커와 동기화가 이루어졌을 때 페이지 넘버를 표시하여 직관적인 정보를 제공할수 있다.

What
- useSlideChanged훅을 사용하여 pageNumber를 표시하는 컴포넌트 구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 채널페이지에서 사용되는 SmallButton컴포넌트를 공통 컴포넌트로 구현 (#47)
7881bdb 
Why
- 채널 페이지에서 다양한 인터랙션을 담당하는 버튼의 형태를 통일할 필요가 있다.

What
- 공통 컴포넌트 폴더에 SmallButton 컴포넌트 구현
- materialUI 사용
- MuiTheme에서 기존 materia UI 버튼 컴포넌트를 오버라이드하는 스타일 작성
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 슬라이드 상단 Status 영역의 버튼 UI 구현 (#47)
cbada5f 
Why
- 슬라이드뷰어 상단에 슬라이드 상태를 관리할 수 있는 버튼 컴포넌트들이 위치해야 한다.

What
- SlideStatus컴포넌트 안에 현재 스피치 상황을 표현하는 StatusButton UI를 구현하였다
- SlideStatus 컴포넌트 오른쪽에 위치한 화면 동기화, 필기도구, 전체화면 버튼 UI를 구현하였다
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 스피커 동기화 이벤트 구현 (#47)
923d8c9 
Why
- 리스너에게는  스피커 동기화 버튼이 보여져야 한다.
- 리스너가 스피커 동기화 버튼을 누르면 현재 스피커의 슬라이드페이지로 이동해야한다.
- 페이지 넘버 또한 동기화상태와 아닌 상태에서 다르게 보여져야한다.

What
- useState를 이용해 isSync state를 관리한다.
- 스피커동기화 버튼의 이벤트 핸들러를 통해 isSync state를 변경한다.
- isSync가 true일 경우 useSlideChanged 훅을 통해 현재 스피커 슬라이드페이지를 렌더하도록 한다.
- useChannelSelector훅을 통해 컨텍스트의 isMaster 데이터를 가져와 리스너일 경우에만 동기화 버튼을 렌더한다
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ REFACTOR ] 슬라이드 페이지 동기화 관련 graphQL로직 수정 (#47)
c53631f 
Why
- graphQL은 데이터를 graph로 관리하므로 응답마다 다른 type을 만들어 사용할 필요가 없다.

What
slideChanged subscription과 setCurrentSlide mutation의 응답을 Channel타입으로 변경하였다
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ UTIL ] 슬라이드의 이동을 제어하는 util함수 구현 (#47)
3c6ca4c 
Why
- 슬라이드의 이동은 일정한 규칙과 조건을 가지므로 유틸함수로 구현할 필요가 있다

What
- 슬라이드가 마지막, 첫 페이지일때 이동가능성을 판단하는 moveSlidePossible유틸 구현
- 이동 방향과 콜백함수, 현재 페이지 번호를 인자로 받아 실행하는 moveSlide함수 구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATU
a700b8f 
RE ] 리스너 접속 시 최초 동기화를 위해 initialSlide를 채널컨텍스트에서
 제공 (#47)

Why
- 리스너가 발표 도중에 채널에 접속해도 스피커의 페이지와 동기화 되어야 한다.

What
- currentPage 데이터를 initialSlide로 채널컨텍스트에서 내려주도록 구현
- subscription데이터가 없는 초기 접속 상황에서 initialSlide 데이터를 사용하도록 구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 사용자의 상태, 동기화여부에 따라 현재 필요한 슬라이드 페이지를 구하는 custom hook구현 (#47)
2f56527 
Why
- 채널에서 결정되는 여러 상태에 따라 사용자에게 보여지는 슬라이드 페이지가 달라진다.

What
- 사용자 상태, 동기화여부, 사용자의 페이지, 스피커의 페이지를 인자로 받아 상황에 맞는 페이지를 반환하는 hook구현
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ FEATURE ] 슬라이드 컴포넌트 동기화 로직 구현 완성 (#47)
7cda69e 
Why
- 슬라이드 컴포넌트 내의 인터랙션을 통해 스피커와 리스너의 페이지가 동기화되어야한다.
- 각각 컴포넌트의 인터랙션으로 전반적인 상태가 변경되어야한다.
What
- Slide 컴포넌트에서 useState로 사용자에게 보여질 page를 관리한다.
- Slide 컴포넌트에서 isSync로 동기화 상태를 관리한다.
- SlideStatus의 SyncButton컴포넌트를 통해 페이지 상태를 변경한다.
- SlideViewer컴포넌트에서 인디케이터에 handler를 넘겨 상태를 변경한다.
@aereeeee aereeeee mentioned this issue Nov 28, 2019
Merged
@aereeeee aereeeee moved this from In progress to Done in Sprint - 03 🏃‍♂️ Nov 28, 2019
aereeeee added a commit that referenced this issue Nov 28, 2019
@aereeeee
[ REFACTOR ] 리뷰어 리뷰사항 반영 (#47)
c713cc5 
Why
- 코드 컨벤션을 맞출 필요가 있다.

What
- 개행, 띄어쓰기 등 수정
This was referenced Nov 29, 2019
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aereeeee aereeeee

Labels
🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 📠Location : api server 작업의 위치가 애플리케이션을 나타내는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨
Projects
No open projects
Sprint - 03 🏃‍♂️
Done
Milestone
Sprint - 03
Development

No branches or pull requests
2 participants
@aereeeee @devphilip21