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#11] 메인 화면에서 슬라이드를 드롭다운 할 수 있다. #48

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

[Epic#11] 메인 화면에서 슬라이드를 드롭다운 할 수 있다. #48

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#11] 메인 화면에서 슬라이드를 드롭다운 할 수 있다.

  • 메인화면에서 파일을 드롭다운 할 수 있어야 한다.

완료 조건 ✅

  • 메인 화면의 Drag & Drop Page에 파일을 드롭다운 할 수 있다.
  • 파일을 드롭다운하면, 파일이 image-converter 서버로 전송된다.
  • image-converter 서버의 응답이 있기 전까지는 유저에게 로딩화면을 보여준다.
  • image-converter 서버의 응답이 ok라면, 채널 화면이 보여지도록 한다.
  • image-converter 서버의 응답이 ok가 아니라면(error 발생), 에러 페이지를 보여준다.

관련 이슈 📎

레퍼런스 📚

레퍼런스 없음
@aereeeee aereeeee mentioned this issue Nov 25, 2019
Closed
36 tasks
@always-awake always-awake mentioned this issue Nov 25, 2019
Closed
6 tasks
@always-awake always-awake mentioned this issue Nov 25, 2019
Closed
2 tasks
@always-awake always-awake added 🐣Feature 새로운 기능을 추가할 때 사용하는 라벨 📠Location : web server web 서버에 대한 작업을 나타내는 라벨 labels Nov 25, 2019
@always-awake always-awake added this to the Sprint - 03 milestone Nov 25, 2019
@always-awake always-awake moved this from To do to In progress in Sprint - 03 🏃‍♂️ Nov 25, 2019
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 파일 드롭다운 시, 파일이 image-converter 서버로 전송되는 로직 구현 (#48)
0a427cf 
Why
- 사용자는 파일을 화면에 드롭다운하여, 자신의 파일을 업로드할 수 있어야 한다.
- 사용자가 업로드한 파일은 이미지 컨버터 서버로 전송되어야 한다.

What
- onDrop 이벤트를 처리하는 handleDrop 함수를 구현하였다.
- handleDrop 함수는 drop됬을 때, event 객체의 dataTransfer.files의 첫번째 file을 이미지 컨버터 서버에 전송한다.
- 이미지 컨버터 서버의 응답이 'ok'일 경우, useCreateChannel 훅을 이용해 채널을 생성한다.
- DropModal 컴포넌트명을 더욱 직관적인 DropZone으로 수정하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 로딩 시, 렌더링할 스피너 컴포넌트 구현 (#48)
a535192 
Why
- 로딩 중인 상황을 사용자가 알 수 있도록 해야 한다.

What
- material ui 의 CircularProgress 컴포넌트를 사용하였다.
- S.SpinnerWrapper로 CircularProgress 컴포넌트를 감싸서, z-index의 값을 999로 설정하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 로딩 시, 렌더링할 LoadingText 컴포넌트 구현 (#48)
19e40fc 
Why
- 로딩 시, 유저에게 현재 진행중인(로딩중인) 작업에 대한 정보를 전달해야 한다.

What
- message props를 전달받으면, 해당 message 문자열을 보여주는 LoadingText 컴포넌트 구현하였다.
- LoadingText 컴포넌트는 스타일 컴포넌트를 이용하여 스타일링하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 로딩 시, 렌더링할 LoadingModal 컴포넌트 구현 (#48)
5082e15 
Why
- 로딩 시, 데이터 처리가 완료될 때까지 유저에게 로딩화면을 보여주어야 한다.

What
- LoadingModal 컴포넌트가 message prop을 받아 LoadingText에 전달하도록 구현하였다.
- LoadingModal 컴포넌트가 Spinner 컴포넌트와 LoadingText 컴포넌트를 함께 렌더링하도록 구현하였다.
- LoadingModal 컴포넌트의 스타일링은 스타일 컴포넌트를 이용하여 구현하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 에러 발생시, 에러 메시지를 렌더링하는 ErrorText 컴포넌트 구현 (#48)
1abeacc 
Why
- 에러가 발생하면, 유저에게 에러에 대한 정보를 전달해야 한다.

What
- message props를 전달받으면, 해당 message 문자열을 보여주는 ErrorText 컴포넌트를 구현하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 에러 발생시, 렌더링할 ErrorEmoji 컴포넌트 구현 (#48)
bd61c92 
Why
- 에러가 발생하면, 에러가 발생했음을 쉽게 알 수 있는 이모지를 보여주어야 한다.
What
- 후라이펜 모양의 이모지를 렌더링하는 ErrorEmogi 컴포넌트를 구현하였다.
- ErrorEmoji는 스타일 컴포넌트를 이용하여 스타일링 하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 에러가 발생 시, 에러에 대한 정보를 전달하는 ErrorModal 컴포넌트 구현 (#48)
60a4986 
Why
- 에러가 발생하면, 사용자에게 에러에 대한 정보를 전달해야 한다.
- 에러가 발생하면, 사용자가 한눈에 에러임을 알 수 있도록 해야 한다.

What
- message props를 전달받아 ErrorText 컴포넌트에 전달하는 ErrorModal 을 구현하였다.
- ErrorEmoji 컴포넌트와 ErrorText를 렌더링하는 ErrorModal을 구현하였다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 파일을 drop 하였을 때, 사용자 파일을 이미지 컨버터 서버로 전송하는 로직 구현 (#48)
fad2c4e 
Why
- 파일을 drop하는 이벤트가 발생하면, 이벤트 객체 내 파일을 이미지 컨버터 서버에 업로드해야 한다.
- 이미지 컨버터 서버에 업로드 성공 여부에 따라 다른 처리를 하기 위해 분기 처리해야 한다.

What
- drop 이벤트 객체에서 사용자 file과 channelId를 담고 있는 formData 객체를 생성해준다.
- 생성된 formData를 이미지 컨버터 서버로 전송한다.
- 이미지 컨버터 서버의 응답이 'ok'라면, channelId를 이용해 채널을 생성해주는 로직이 실행되도록 처리한다.
- 'ok'외의 응답이 온다면, setIsError 을 이용해 isError의 값을 true로 변경시켜준다.
always-awake added a commit that referenced this issue Nov 26, 2019
@always-awake
[ FEATURE ] 파일을 드롭다운하면, 해당 파일을 업로드하는 DropZone 컴포넌트 구현 (#48)
85d9755 
Why
- dropy 핵심 UX인 Drag & Drop 기능을 구현해야 한다.
- 사용자가 Drag & Drop 기능으로 쉽게 사용자의 파일을 업로드할 수 있어야 한다.

What
- 파일을 drag 하고 있을 때 발생하는 이벤트를 처리하는 handleDragOver 함수를 구현하였다.
- 파일을 drag하고 있지 않을 때 발생하는 이벤트를 처리하는 handleDragLeave 함수를 구현하였다.
- isError 값에 따라 ErrorModal의 렌더링 여부가 결정되도록 구현하였다.
- isError 값이 false일 경우, isLoading 값에 따라 LoadingModal의 렌더링 여부가 결정되도록 구현하였다.
@always-awake always-awake moved this from In progress to Done in Sprint - 03 🏃‍♂️ Nov 26, 2019
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ IMPROVE ] DropEmoji 컴포넌트가 props로 받을 emoji를 렌더링할 수 있도록 수정 (#48)
f5eaf76 
Why
- 고정된 이모지만을 렌더링하지 않고, 매번 다른 이모지를 렌더링하기 위함

What
- DropEmoji는 props내 emoji를 전달받아 렌더링하도록 수정하였다.
- 이모지의 크기를 작게 수정하였다.
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ IMPROVE ] fontColor, message에 따라 다른 스타일의 컴포넌트를 렌더링할 수 있도록 수정 (#48)
1d6d998 
Why
- DropText 컴포넌트가 고정된 색과 message만을 렌더링하지 않도록 하기 위함

What
- DropText는 props 내 fontColor, message를 전달받아 가변적으로 렌더링하도록 수정하였다.
- 스타일 컴포넌트에서 fontColor 값에 따라 다른 color 값을 설정하도록 분기 처리하였다.
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ IMPROVE ] 처리 결과에 따라 로딩화면과 에러 화면을 조건부로 렌더링 할 수 있도록 수정 (#48)
2fc18c2 
Why
- DropInput 컴포넌트를 이용하여 파일을 업로드할 경우, 처리 결과에 따라 사용자에게 로딩/에러 정보를 제공해야 한다.
What
- useState 리액트 훅을 이용하여 isLoading, isError 상태 값을 관리하였다.
- isLoading, isError 값에 따라 ErrorModal 또는 LoadingModal을 조건부 렌더링 하도록 구현하였다.
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ STYLE ] 매번 사용자가 파일을 드래그할 때마 다 다른 DropEmoji와 DropText가 렌더링 되도록 수정 (#48)
1ba910a 
Why
- 파일을 drag 했을 때, 매번 고정된 이모지와 텍스트가 아닌 가변 적인 이모지와 텍스트를 보여주어야 한다.

What
- DropZone 컴포넌트 내에 파일 drag가 시작되었을 때, 이벤트를 처리하는 handleDragEnter 함수를 구현하였다.
- 특정 리스트의 아이템을 렌덤으로 리턴해주는 getRandomItemOfList 함수를 구현하였다.
- getRandomItemOfList 함수를 이용하여 emojiList 내에 있는 이모 지들을 랜덤하게 dropZoneEmoji 로 설정하였다.
@always-awake always-awake mentioned this issue Nov 27, 2019
Merged
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ BUGFIX ] 드롭다운 됬을 때, 채널 생성이 되지 않는 에러 해결 (#48)
490839d 
Why
- 컨버터 서버의 처리 결과를 제대로 받지 못하는 버그를 해결해야 한다.
- 채널 생성 로직에 필요한 변수가 제대로 전달되지 못하는 버그를 해결해야 한다.

What
- 컨버터 서버로부터 응답받는 정보가 status외에 slideUrls, fileUrl이 함께 전달되도록 수 정하였다.
- status 가 ok일 경우, mutate 변수에 channelId외에 slideUrls와 fileUrl을 함께 전달하도 록 수정하였다.
always-awake added a commit that referenced this issue Nov 27, 2019
@always-awake
[ REFACTOR ] DropText 컴포넌트로 전달하는 상태값을 dragOver 로 수정 (#48)
45e4f07 
Why
- 기존에는 불필요하게 dropZoneTextColor, dropZoneMessag 두개의 상태값을 관리했었다.
- 불필요한 상태관리 코드 수정이 필요하다.

What
- 위 두개의 상태값을 대신하여 Boolean 값의 dragOver 상태값을 선언해준다.
- DropText는 dragOver 값만을 props로 전달 받는다.
- DropText 컴포넌트는 dragOver 값에 따라 다른 스타일/메시지를 갖는 컴포넌트를 렌더링한다.
@always-awake always-awake mentioned this issue Nov 29, 2019
Closed
@aereeeee aereeeee mentioned this issue Dec 2, 2019
Closed
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 🏃‍♂️
Done
Milestone
Sprint - 03
Development

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