재미없지만 droppable snapshot을 사용할 때와 똑같이 적용하면 된다.
const Card = styled.div<{ isDragging: boolean }>`
...
background-color: ${(props) =>
props.isDragging ? '#74b9ff' : props.theme.cardColor};
box-shadow: ${(props) =>
props.isDragging ? '0px 2px 5px rgba(0,0,0,0.05)' : 'none'};
`;
<Draggable key={toDo} draggableId={toDo} index={index}>
{(provided, snapshot) => (
<Card
isDragging={snapshot.isDragging}
...
>
{toDo}
</Card>
)}
</Draggable>
snapshot 속성을 추가한다.
isDragging={snapshot.isDragging}
그리고 Card에
props.isDragging 일때 색상을 바꾸는 로직을 추가한다.
참고로 Draggable interface의 속성은 이렇다.
export interface DraggableStateSnapshot {
isDragging: boolean;
isDropAnimating: boolean;
dropAnimation?: DropAnimation | undefined;
draggingOver?: DroppableId | undefined;
// the id of a draggable that you are combining with
combineWith?: DraggableId | undefined;
// a combine target is being dragged over by
combineTargetFor?: DraggableId | undefined;
// What type of movement is being done: 'FLUID' or 'SNAP'
mode?: MovementMode | undefined;
}