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#12] 파일 업로드 시 새로운 채널이 생성된다. #25

Closed
4 tasks done
devphilip21 opened this issue Nov 18, 2019 · 0 comments
Closed
4 tasks done

[Epic#12] 파일 업로드 시 새로운 채널이 생성된다. #25

devphilip21 opened this issue Nov 18, 2019 · 0 comments
Assignees
@happydhKim @aereeeee @always-awake @devphilip21
Labels
🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 🥇Priority : high 작업의 우선순위가 가장 높은 라벨
Projects
Sprint - 02 🏃‍♂️
Milestone
Sprint - 02

Comments

@devphilip21
Copy link
Contributor

devphilip21 commented Nov 18, 2019 •
edited by always-awake
Loading

[Epic#12] 파일 업로드 시 새로운 채널이 생성된다.

  • 메인 화면에서 채널생성하기 버튼 클릭시 파일을 업로드하는 딤이 노출된다.
  • 업로드 버튼을 통해 업로드시 채널이 생성된다.
  • 또는 드래그앤드롭을 통해 채널 생성도 가능하다.

완료 조건 ✅

  • 파일 업로드 버튼 UI를 구현한다.
  • 파일 업로드 시 채널 코드가 생성된다.(util로 구현)
  • 파일 업로드 시 새로운 url의 채널 창이 켜진다.
  • 채널 데이터가 디비에 저장된다.

관련 이슈 📎

관련 이슈 없음

레퍼런스 📚

레퍼런스 없음
@devphilip21 devphilip21 added 🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 🥇Priority : high 작업의 우선순위가 가장 높은 라벨 labels Nov 18, 2019
@devphilip21 devphilip21 added this to the Sprint - 02 milestone Nov 18, 2019
@aereeeee aereeeee mentioned this issue Nov 18, 2019
Closed
3 tasks
@always-awake always-awake mentioned this issue Nov 18, 2019
Closed
@always-awake always-awake moved this from To do to In progress in Sprint - 02 🏃‍♂️ Nov 20, 2019
aereeeee added a commit that referenced this issue Nov 20, 2019
@aereeeee
[ FEATURE ] 채널만들기 버튼 UI 구현 (#25)
e4d2d68 
Why
- 채널 생성을 위한 버튼 UI가 필요하다.

What
- ChannelButton 컴포넌트를 구현하였다.
- theme에 ChannelButton 컴포넌트를 위한 스타일을 정의하였다.
aereeeee added a commit that referenced this issue Nov 20, 2019
@aereeeee
[ FEATURE ] 메인 로고 UI 컴포넌트 구현 (#25)
e151cfe 
Why
- 사용자가 접속 했을 때 서비스 로고 이미지를 보여주어야 한다.

What
- 메인 로고를 담을 컴포넌트를 만들었다
happydhKim added a commit that referenced this issue Nov 20, 2019
@happydhKim
[ FEATURE ] Main 페이지 UI 구현 (#25)
2631078 
Why
- 사용자가 채널에 입장할 수 있는 메인페이지가 필요하다.
- 페이지를 이동할 수 있는 라우터가 필요하다.

What
- 메인페이지 생성 및 스타일 적용.
- react-router-dom 설치 및 적용.
aereeeee added a commit that referenced this issue Nov 21, 2019
@aereeeee
[ REFACTOR ] 메인 페이지 UI 스타일 수정 (#25)
2015413 
Why
- 메인 페이지 레이아웃이 디바이스에 상관 없이 일정하게 유지되어야 한다.

What
- 전체 페이지를 감싸는 Wrapper 컴포넌트에 flex속성을 주어 메인 컨텐츠가 화면 중앙에 위치하도록 조정
- 웹팩 파일로더 설정을 추가하여 이미지 파일을 build할 수 있도록 함
always-awake added a commit that referenced this issue Nov 21, 2019
@always-awake
[ FEATURE ] 메인 화면의 drag & drop UI에 필요한 컴포넌트 구현 (#25)
a99e1ab 
Why
- 사용자가 파일을 drag & drop 하기 위한 UI 화면이 필요하다.

What
- 가이드를 위한 이모지, 텍스트 컴포넌트 구현하였다.
- 파일 Input 컴포넌트를 구현하였다.
happydhKim added a commit that referenced this issue Nov 21, 2019
@happydhKim
[ FEATURE ] 스피치 자료를 업로드하기 위한 Modal UI 구현 (#25)
e2bb66d 
Why
- 스피치가 자료를 업로드를 하기 위한 공간이 필요하다.

What
- DropModal UI를 구현하였다.
- DropModal UI에 DropEmoji, DropText, DropInput 을 삽입하였다.
- DropEmoji에 애니메이션을 추가하였다.
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
@aereeeee
[ FEATURE ] 채널만들기 버튼 UI 구현 (#25)
faf7cbe 
Why
- 채널 생성을 위한 버튼 UI가 필요하다.

What
- ChannelButton 컴포넌트를 구현하였다.
- theme에 ChannelButton 컴포넌트를 위한 스타일을 정의하였다.
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
@aereeeee
[ FEATURE ] 메인 로고 UI 컴포넌트 구현 (#25)
051ec67 
Why
- 사용자가 접속 했을 때 서비스 로고 이미지를 보여주어야 한다.

What
- 메인 로고를 담을 컴포넌트를 만들었다
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
@happydhKim
[ FEATURE ] Main 페이지 UI 구현 (#25)
ceea4cd 
Why
- 사용자가 채널에 입장할 수 있는 메인페이지가 필요하다.
- 페이지를 이동할 수 있는 라우터가 필요하다.

What
- 메인페이지 생성 및 스타일 적용.
- react-router-dom 설치 및 적용.
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
@aereeeee
[ REFACTOR ] 메인 페이지 UI 스타일 수정 (#25)
9f4a966 
Why
- 메인 페이지 레이아웃이 디바이스에 상관 없이 일정하게 유지되어야 한다.

What
- 전체 페이지를 감싸는 Wrapper 컴포넌트에 flex속성을 주어 메인 컨텐츠가 화면 중앙에 위치하도록 조정
- 웹팩 파일로더 설정을 추가하여 이미지 파일을 build할 수 있도록 함
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
@always-awake
[ FEATURE ] 메인 화면의 drag & drop UI에 필요한 컴포넌트 구현 (#25)
f62839e 
Why
- 사용자가 파일을 drag & drop 하기 위한 UI 화면이 필요하다.

What
- 가이드를 위한 이모지, 텍스트 컴포넌트 구현하였다.
- 파일 Input 컴포넌트를 구현하였다.
devphilip21 pushed a commit that referenced this issue Nov 21, 2019
[ FEATURE ] 클라이언트 파일 업로드 로직 구현 (#25)
1a55f5b 
Why
- 사용자가 파일을 업로드 했을 때, 서버로 전송되어야 한다.
- 파일 업로드 UI가 있어야 한다.

What
- 파일 업로드 컴포넌트 구현
- fetch 메서드 유틸화 - http.js
- 파일 업로드 통신로직 구현
devphilip21 pushed a commit that referenced this issue Nov 22, 2019
[ FEATURE ] 클라이언트 파일 업로드 로직 구현 (#25)
2f78c31 
Why
- 사용자가 파일을 업로드 했을 때, 서버로 전송되어야 한다.
- 파일 업로드 UI가 있어야 한다.

What
- 파일 업로드 컴포넌트 구현
- fetch 메서드 유틸화 - http.js
- 파일 업로드 통신로직 구현
happydhKim added a commit that referenced this issue Nov 22, 2019
@happydhKim
[ MERGE ] 이미지 컨버터 서버와 UI 연동 (#25)
8223359 
* feature/issue25 -> develop
@devphilip21 devphilip21 mentioned this issue Nov 22, 2019
Closed
always-awake added a commit that referenced this issue Nov 22, 2019
@always-awake
[ FEATURE ] 파일 업로드 시, 생성된 채널 id를 생성하는 로직 구현 (#25)
fc54a01 
Why
- 사용자가 파일을 업로드할 때, 채널 id가 생성되어야 한다.
- 생성된 채널 id는 컨버터 서버에 전송되어야 한다.

What
- short-uuid를 이용해 랜덤한 채널 id를 생성해준다.
- 생성된 채널 id를 form data에 넣어 컨버터 서버에 전송한다.
always-awake added a commit that referenced this issue Nov 22, 2019
@always-awake
[ FEATURE ] 채널 생성 버튼 클릭 시, drop 모달창이 보이도록 구현 (#25)
6700aec 
Why
- 채널 버튼을 클릭하면, 파일을 업로드하기 위한 UI가 필요하다.

What
- ChannelButton의 onClick에 showDropModal의 값을 변경해주는 이벤트를 설정해준다.
- showDropModal의 값에 따라 DropModal이 조건부로 렌더링된다.
happydhKim added a commit that referenced this issue Nov 22, 2019
@happydhKim
[ FEATURE ] 채널 페이지 생성 및 router 수정 (#25)
209c37e 
Why
- 메인 페이지에서 파일을 업로드 하면 채널 페이지가 생겨야 한다.
- 채널 컴포넌트에서 채널아이디를 가지고 와야 한다.

What
- 채널 컴포넌트를 구현하였다.
- useRouteMatch를 이용해 props내의 channelId를 가지고 오도록 구현하였다.
- router에 채널 페이지를 추가하였다.
happydhKim added a commit that referenced this issue Nov 22, 2019
@happydhKim
[ FEATURE ] 채널을 생성하기 위한 서버로직 완성 (#25)
f291c97 
Why
- 채널을 생성하면, DB로 관리 되어야 한다.

What
- util에서 object를 합치는 merge 함수 구현.
- 채널을 생성하기 위한 resolvers, typeDefs 구현.
- 채널을 관리하기 위한 channels 모델을 생성.
@aereeeee aereeeee mentioned this issue Nov 22, 2019
Closed
aereeeee added a commit that referenced this issue Nov 24, 2019
@aereeeee
[ UTIL ] formData를 생성하는 유틸 함수를 구현 (#25)
ee11418 
Why
- 파일을 formdata형태로 업로드 해야한다.

What
- data객체를 인자로 받아 formData를 return하는 유틸함수를 만들었다.
aereeeee added a commit that referenced this issue Nov 24, 2019
@aereeeee
[ FEATURE ] 채널 생성 후 리다이렉션 구현 (#25)
3f51446 
Why
- 채널이 생성되면 채널아이디 url로 리다이렉션 되어야 한다.

What
- 서버에서 채널을 같이 response하도록 변경하였다.
- 파일업로드 후 response의 status에 따라 redirection하도록 구현하였다.
@aereeeee aereeeee mentioned this issue Nov 24, 2019
Merged
aereeeee added a commit that referenced this issue Nov 24, 2019
@aereeeee
[ MERGE ] 파일 업로드하여 채널로 화면 전환 (#25)
4e5809c 
* feature/issue25 -> develop
@aereeeee aereeeee moved this from In progress to Done in Sprint - 02 🏃‍♂️ Nov 24, 2019
@aereeeee aereeeee mentioned this issue Nov 25, 2019
Closed
aereeeee added a commit that referenced this issue Nov 25, 2019
@aereeeee
[ FEATURE ] 사용자 채널 입장 시 스피커/리스너 구분하기 위한 쿼리 구현 (#25)
2b26b94 
Why
- 사용자가 채널에 입장 시 스피커 혹은 리스너인지 판단이 필요하다.

What
- checkChannelMaster resolver를 구현하였다.
aereeeee added a commit that referenced this issue Nov 25, 2019
@aereeeee
[ FEATURE ] 사용자 채널 입장 시 스피커/리스너 구분하기 위한 쿼리 구현 (#25)
6a56d45 
Why
- 사용자가 채널에 입장 시 스피커 혹은 리스너인지 판단이 필요하다.

What
- checkChannelMaster resolver를 구현하였다.
aereeeee added a commit that referenced this issue Nov 25, 2019
@aereeeee
[ FEATURE ] 채널 입장 시 채널 정보를 확인한다 (#25)
2da571d 
Why
- 채널의 존재 여부와 사용자의 상태를 확인해야 한다.

What
- 채널 정보를 쿼리하는 훅을 만들었다.
- 채널 정보를 전역으로 관리하기 위해 context를 만들었다.
@aereeeee aereeeee mentioned this issue Dec 2, 2019
Closed
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@happydhKim happydhKim

@aereeeee aereeeee

@always-awake always-awake

@devphilip21 devphilip21

Labels
🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 🥇Priority : high 작업의 우선순위가 가장 높은 라벨
Projects
No open projects
Sprint - 02 🏃‍♂️
Done
Milestone
Sprint - 02
Development

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