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#31] 채널 코드를 입력할 수 있다. #50

Closed
6 tasks done
always-awake opened this issue Nov 25, 2019 · 0 comments
Closed
6 tasks done

[Epic#31] 채널 코드를 입력할 수 있다. #50

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

Comments

@always-awake
Copy link
Collaborator

always-awake commented Nov 25, 2019 •
edited
Loading

[Epic#31] 채널 코드를 입력할 수 있다.

  • 채널 코드를 입력하면, 해당 채널 코드를 갖고 있는 채널 페이지로 이동할 수 있다.
  • 입력한 채널 코드와 같은 채널 코드를 갖고 있는 채널이 있다면, 채널 목록 페이지로 이동한다.

완료 조건 ✅

  • 채널 코드를 입력할 수 있는 Input 컴포넌트를 생성해야 한다.
  • 만약, 입력한 채널의 코드가 다른 채널의 코드와 동일하다면, 동일한 채널 코드를 갖는 채널 목록을 보여주는 페이지가 보여진다. (채널 목록은 스크롤 되어야 한다.)
  • 채널 목록 페이지에는 헤더와 채널 정보가 담겨있는 채널 카드 컴포넌트 리스트가 보여진다.
  • 특정 카드를 클릭하면 해당 채널 페이지가 보여진다.
  • 선택된 채널 페이지로 이동할 때, 채널 컴포넌트가 로딩되기 전까지는 로딩화면이 보여진다.
  • 같은 채널 코드를 갖고 있는 채널이 없다면, 바로 채널 화면이 보여진다.

관련 이슈 📎

레퍼런스 📚

레퍼런스 없음
@always-awake always-awake mentioned this issue Nov 25, 2019
Closed
2 tasks
@always-awake always-awake mentioned this issue Nov 25, 2019
Closed
5 tasks
@aereeeee aereeeee mentioned this issue Nov 25, 2019
Closed
36 tasks
@always-awake always-awake added 🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨 labels Nov 25, 2019
@always-awake always-awake moved this from To do to In progress in Sprint - 03 🏃‍♂️ Nov 26, 2019
@always-awake always-awake added this to the Sprint - 03 milestone Nov 27, 2019
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ FEATURE ] 채널 코드를 입력할 수 있는 CodeInput 컴포넌트 구현 (#50)
b9bb738 
Why
- 사용자가 메인 화면에서 채널 코드를 입력하여 채널에 입장할 수 있게 해야 한다.

What
- 채널 코드를 입력할 수 있는 CodeInput 컴포넌트를 구현하였다.
- 채널 코드를 입력한 후, 해당 채널에 입장할 수 있도록 하는 EnterButton 컴포넌트를 구현하였다.
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ IMPROVE ] Channel 데이터를 저장할 때, channelCode가 추가로 저장되도록 수정 (#50)
cd377ec 
Why
- 리스너가 channelId 보다 짧은 채널 코드를 이용해 채널에 입장 할 수 있도록 해야 한다.
- 리스너가 채널 코드를 입력할 때, Channel 데이터의 channelCode 값을 조회하여, 적절한 채널에 접속 할 수 있도록 해야 한다.

What
- ChannelSchema에 channelCode 필드를 필수 필드로 추가하였다.
- Channel 타입에 channelCode를 추가해주었다.
- CREATE_CHANNEL 크래프큐엘에 channelCode 변수를 추가해주었다.
- server-api의 createChannel 리졸버에서 channelCode 정보도 추가로 처리할 수 있도록 수정하였다.
- channelCode 를 생성에 활용되는 sliceShortUuid 유틸함수를 구현하여 활용하였다.
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ FEATURE ] 채널 코드 입력 시, 해당 채널 코드를 갖고 있는 채널 목록 조회 기능 구현 (#50)
f1f0af7 
Why
- 사용자가 채널 코드를 입력하면, 해당 채널 코드를 갖고 있는 채널로 입장할 수 있어야 한다.
- 또는 같은 채널 코드를 갖고 있는 채널 목록을 보고, 원하는 채널에 입장할 수 있어야 한다.

What
- useGetChannelsByCode 커스텀 훅을 정의하여, 채널 코드를 이용해 채널 목록을 조회한다.
- 입력한 채널 코드를 갖고 있는 채널이 1개라면, channelId를 이용해 바로 채널에 입장할 수 있도록 구현하였다.
- 서버에 getChannelsByCode 리졸버를 새로 정의해주었다.
- getChannelsByCodeResponse 타입을 새로 정의해주었다.
- 불필요한 channelCode를 생성하는 유틸 함수를 삭제하고, 채널 ID의 앞 5글자를 채널 코드로 설정해주도록 수정하였다.
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ FEATURE ] 채널 목록 모달에서 채널에 대한 정보를 갖고 있는 ChannelCard 컴포넌트 구현 (#50)
5d86e39 
Why
- 다른 채널과 중복된 채널 코드 입력 시, 채널 목록 모달에서 각 채널에 대한 정보를 보여주어야 한다.

What
- channelId, channelName, channelCode 에 대한 정보를 props로 받아 렌더링하는 ChannelCard 컴포넌트 구현
- 특정 ChannelCard 컴포넌트를 클릭하면, 해당 채널로 이동할 수 있도록 구현하였다.
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ FEATURE ] ChannelCard 목록을 렌더링하는 ChannelListModal 구현 (#50)
1d682fd 
Why
- 사용자가 ChannelCard 목록을 볼 수있는 Modal 창이 필요하다.

What
- 채널 목록 props를 받아, 목록 내 채널 개수만큼의 ChannelCard 컴포넌트를 생성하여 렌더링하는 ChannelListModal 컴포넌트 구현
@always-awake always-awake mentioned this issue Nov 28, 2019
Merged
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ FEATURE ] 채널 목록에서 채널 상태에 따라 다른 스타일을 갖는 ChannelStatusBadge 컴포넌트 구현 (#50
de90bfe 
)

Why
- 사용자가 채널 목록에서 입장하고자 하는 채널의 상태를 쉽게 파악할 수 있어야 한다.

What
- channelStatus props를 받아 해당 값에 따라 다른 스타일을 렌더링하는 ChannelStatusBadge 컴포넌트를 구현하였다.
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ FEATURE ] ChannelCard에 채널 상태와 마스터 이름이 함께 렌더링 할 수있도록 수정 (#50)
111d0c1 
Why
- ChannelCard에 꼭 필요한 채널 상태와 마스터 이름을 함께 보여주어야 한다.

What
- useGetChannelsByCode 커스텀 훅에서 master에 대한 정보를 추가로 함께 fetching 해올 수 있도록 수정하였다.
- 추가로 fetching 해온 데이터를 ChannelCard 컴포넌트가 렌더링 할 수 있도록 수정하였다.
always-awake added a commit that referenced this issue Nov 28, 2019
@always-awake
[ REFACTOR ] 변수명 오타 수정 (#50)
5034f6e 
Why
- 원래 의도한 변수명인 refindedChannels 변수명으로 수정해야 한다.

What
- refindeChannels 변수명을 refindedChannels로 수정하였다.
@always-awake always-awake mentioned this issue Nov 29, 2019
Closed
@aereeeee aereeeee mentioned this issue Dec 2, 2019
Closed
always-awake added a commit that referenced this issue Dec 2, 2019
@always-awake
[ FEATURE ] 채널 입장시, 로딩화면을 렌더링하고, 에러 발생 시, 에러 화면을 렌더링하도록 구현 (#50)
db13f2d 
Why
- 유저가 채널 입장을 클릭하고, 채널 화면에 데이터가 렌더링 될 때까지 로딩화면이 렌더링되어야 한다.
- 찾는 채널이 없을 경우, 에러 화면이 렌더링되어야 한다.

What
- CodeInput 컴포넌트 내에서 입력한 채널 코드에 해당하는 채널이 없을 경우, ErrorModal을 렌더링한다.
- 채널 리스트 모달 컴포넌트에서 특정 채널 카드를 클릭했을 경우, 채널 데이터가 로딩될때까지 로딩 모달을 렌더링한다.
- 채널 코드를 입력하여 바로 채널에 입장할 경우, 채널 데이터가 로딩될때까지 로딩 모달을 렌더링한다.
@always-awake always-awake mentioned this issue Dec 2, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@always-awake always-awake

Labels
🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨
Projects
No open projects
Sprint - 03 🏃‍♂️
In progress
Milestone
Sprint - 03
Development

No branches or pull requests
4 participants
@happydhKim @aereeeee @always-awake @devphilip21