-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Youngwoo Cho
committed
Feb 5, 2024
1 parent
5fc535c
commit 0215640
Showing
1 changed file
with
42 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
######################################### | ||
해당 부분과 각 예시는 삭제 후 작성해주세요. | ||
|
||
- PR 제목 | ||
- [작업 구분]: 작업 요약 | ||
- ex) feat: 드래그 앤 드롭 기능 구현 | ||
######################################### | ||
|
||
## 🎟️ 태스크 | ||
|
||
[태스크 이름](해당 태스크 노션 링크) | ||
|
||
## ✅ 작업 내용 | ||
|
||
ex) | ||
|
||
- 드래그 앤 드롭 구현 방법 결정 | ||
- 드래그 앤 드롭 구현 | ||
|
||
## 🖊️ 구체적인 작업 | ||
|
||
ex) | ||
|
||
### 드래그 앤 드롭 구현 방법 | ||
|
||
- react-beautiful-dnd를 이용해 구현하기로 결정했습니다. | ||
- react-beautiful-dnd는 다른 라이브러리에 비해 번들 크기가 크다는 단점이 있지만, 사용하기 좋은 UI 및 애니메이션이 적용되어 있어서 얼마 남지 않은 기간 동안 빠르게 완성도 높은 기능 구현을 할 수 있을 것이라 판단해 선택했습니다. | ||
|
||
### 드래그 앤 드롭 | ||
|
||
- 각 칸반보드 컴포넌트마다 wrapper를 적용해서 그룹화 했을 때 같은 그룹에 속한 태스크만 옮길 수 있도록 했습니다. | ||
- 선택한 태스크의 배경 색을 변경해 선택되었음을 확실히 인지할 수 있도록 했습니다. | ||
- 태스크 수정 api와 연결해 태스크를 드롭하면 실제 태스크의 상태가 변경될 수 있도록 했습니다. | ||
- api 연결에는 `usePostTaskState`라는 커스텀 훅을 만들어 사용했습니다. | ||
|
||
## 🤔 고민 및 의논할 거리(선택) | ||
|
||
ex) | ||
|
||
- 태스크 상태를 변경할 때, 태스크 목록을 다시 불러오는 것으로 인해(API 통신) 칸반보드에 반영이 늦어지고 깜빡거린다는 문제가 있습니다. 이 부분에 있어서 실제로 요청이 성공했는지 여부를 확인하는 것도 중요하지만 칸반보드에서는 UX를 위해 사용자가 드롭한 곳에 바로 반영되는 것이 좋다고 생각합니다. 이를 위해 낙관적 업데이트를 도입해서 화면에 바로 반영되도록 하고 오류 발생 시 롤백하도록 하는 것은 어떨까요? | ||
|
||
## 📸 결과 화면(선택) |