[Next.js] 수평 dnd 만들기

이전 게시물에서 구현했던 dnd는 수직으로 정렬되어 있어서 단순히 display: flex 설정만 해주면 동작하겠지 했는 데

[Next.js] 다중 이미지 업로드 및 미리보기 + 드래그로 순서 변경

 

아래처럼 깨지는 느낌과 함께 내가 원하는 대로 정렬이 안되어서 애를 먹었다.

 

공식 문서와 구글링으로 찾은 블로그를 참고하여 문제를 해결 할 수 있었다.

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React

React-beautiful-dnd 알아보기 ④ | Kasterra's Archive

 

빨간색으로 표시한 영역에서 direction="horizontal"과 display: flex만 설정해주면 쉽게 문제 해결이 가능하다.