[FEAT] Task 드래그앤드롭 기능 구현 #143
Merged
Conversation
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
seong-hui
reviewed
Jul 16, 2024
| return ( | ||
| <StagingAreaLayout> | ||
| <StagingAreaContainer> | ||
| <StagingAreaUpContainer> | ||
| <StagingAreaTitle>쏟아내기</StagingAreaTitle> | ||
| <StagingAreaTaskContainer /> | ||
| <Droppable droppableId="staging"> |
There was a problem hiding this comment.
이런식으로 Droppable로 감싸서 드래그앤 드랍 영역과 대상을 지정할 수 있군요! 해당 라이브러리를 사용해본 경험이 없었는데 사용법에 대해서 알아갑니다!
Kjiw0n
force-pushed
the
feat/#132-task-drag-and-drop
branch
8 times, most recently
from
6644427 to
b5b3343
Compare
Kjiw0n
force-pushed
the
feat/#132-task-drag-and-drop
branch
from
b5b3343 to
970a1cc
Compare
jeeminyi
approved these changes
Jul 17, 2024
wrryu09
approved these changes
Jul 17, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
작업 내용 🧑💻
각 Task를 StagingArea <-> TargetArea 로 드래그앤드롭 하는 기능을 추가했습니다.
react-beautiful-dnd라이브러리 사용했습니다!알게된 점 🚀
react-beautiful-dnd 라이브러리 사용 방법
DragDropContext로 감쌈Droppable으로 감쌈Draggable로 감쌈DragDropContext의 필수 인자인onDragEnd은 드래그가 끝났을 때(드롭) 시에 발생하는 일을 처리하는 함수다.{provided.placeholder}: drop될 때 공간을 만들기 위해서 필요하다고 한다. 나의 경우엔 기존 영역 + 드롭될 영역이 잡히는 바람에 화면 밖으로 요소가 밀려서, 지웠다. (없어도 동작 잘 된다)리뷰 요구사항 💬
Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.에러는 뭐 추가해야해서 이슈 새로 파서 고칠 예정입니다!문제 2가지 🥺
ScrollGradient 겹쳐보이는 문제 (콘하스 Task 봐주세요)
이걸 하나하나 계산해서 해결할 수 있긴 한데 보다 더 좋은 방법을 제시해주시면 감사하겠습니다
하아아
{provided.placeholder}> 이거 필수값! 가 정말 문제인데 해결법을 찾는 중입니다. 같이 고민 부탁드립니다..!다음과 같은 개발자에러를 마주하거나
쏟아내기 부분에서... 저 버튼 밖으로 나가는 모습을 마주하거나 > 디자인에서 반려당함 근데 당연함
그래도 같이 고민해보고싶어서.. PR 올려두겠습니다!
관련 이슈
close #132
스크린샷 (선택)