Trello Clone Coding #4

24 Nov 2023

Reading time ~1 minute

Trello Clone Coding #4

프로젝트 목표

enter image description here

react-beautiful-dnd 에 나와있는 trello이다.

이전 포스팅에서의 부족한점

이전 포스팅까지 잘 따라왔다면 느꼈을 것이다. item을 이동할 때 조금이라도 위치에 어긋나게 된다면 목적지 miss로 return처리가 된다는 것을.

그리고 이동할 때의 느낌을 살리기 위하여 css도 조금 추가 해보도록 하겠다.

Board.tsx 수정

우리의 이전 Board.tsx를 보면 item을 담는 영역이 div로 작성 되어 있을 것이다.
css를 주기위하여 Area로 만들어준 뒤 sytled를 변경해보도록 하겠다.

Area로 바꿔준뒤 이제 Area를 정의 해주면 된다.

그리고 우리가 이제 magic말고 같이 snapshot인 info를 같이 던져주었는데
info에서 오른쪽 클릭으로 type 정의를 보면 우리가 무엇을 얻을 지 알 수 있다.

export  interface  DroppableStateSnapshot {
    isDraggingOver:  boolean;
    draggingOverWith:  DraggableId  |  null  |  undefined;
    draggingFromThisWith:  DraggableId  |  null  |  undefined;
    isUsingPlaceholder:  boolean;
} `isDraggingOver`을 통하여 유저가 board 위로 드래그 해서 <br>들어오고 있는지를 boolean값으로 받아 올 수 있다.

draggingFromThisWith을 통하여 유저가 해당 board로 부터 드래그를 시작했는지도 알려준다.
한마디로 어떤 board를 떠난다면 , 그 board로 부터 drag를 시작했다는 뜻이다.
그후 board로 들어올 때 isDraggigOver이라고 알려주는 방법이다.

우린 이제 이 정보를 활용해 볼 것이다.
위에 div를 수정한 Area를 보면 isDraggingOver과 isDraggingFromThis을 받아오고
이를 이용하여 styled 또한 수정해보겠다.

interface는 typescript니 이제 당연히 만들어주고,
isDraggingOver과 isDraggingFromThis에 해당하는 배경색을 넣어주었다.

그리고 Wrapper에는 display:flex와 flex-direction:column을 준 다음,
Area에 flex-grow에 1을 주면 모든곳이 area가 되어 자연스럽게 drop이 되는 것을 확인 할 수 있다.

그리고 옮기고 있다는 것을 강조하기 위한 transition을 주어 조금 더 detail하게 만들 어 주었다.

enter image description here

DragabbleCard.tsx 수정

지금도 괜찮지만 이동할때의 card도 css를 수정하고 싶다.
방법은 똑같으니 간단하게 바로 수정해보도록 하자.

마무리

enter image description here

간단하게 styled를 수정 후 동작해보았다.

trello