칸반 보드 모달 구현하기!
칸반 보드 예시
칸반 보드 피그마 디자인
칸반 보드, 즉 위와 같이 수평으로 뻗어있는 리스트 내 수직 요소가 이중으로 들어있는 디자인을 구현하기 위해 react-beautiful-dnd 라이브러리를 이용하게 되었다.
하지만, 아틀라시안은 더이상 위 라이브러리를 지원하지 않았고 최신 react 18버전에서는 몇몇 이슈가 있어 사용하기 껄끄러웠다.
다행히 hello-pangea라는 오픈소스 그룹이 관리하는 react-beautiful-dnd를 계승하는 hello-pangea/dnd라이브러리 덕분에 쉽게 진행할 수 있었다.
hello-pangea/dnd 깃허브 링크
처음에 이 라이브러리의 사용법을 이해하는것은 정말 어려웠지만, 다행히도 이 블로그 덕분에 빨리 튜토리얼을 진행해 원하는 기능을 빠르게 구현할 수 있었다!!!!
열정 넘치는 프론트엔드 개발자의 블로그!
(이 글을 통해 다시한번 감사의 말씀 드립니다...)
제일 어려웠던 점은, 부모인 수평 요소와 자식인 수직 요소들을 DB와 함께 관리하는것이 제일 어려웠다.
내가 선택한 방법은 부모 요소가 자식 요소들의 id를 배열로 가지고 있다가,
자식 요소들을 DB에서 불러오면 id에 알맞는 자식 요소들을 부모 요소 안에 넣어주는 방식이였다.
// 칸반 보드 모달 내 수평 요소(부모 요소)의 데이터 구조
interface StageData {
stages: {
[key: string]: { id: string; name: string; todoIds: string[] };
};
stageOrder: string[];
}
// 칸반 보드 모달 내 수직 요소(자식 요소)의 데이터 구조
interface TodoProps {
todo: {
id: string;
name: string;
info: string;
todo_tag_list: { color: string; label: string }[];
user_list: { image: string; label: string; value: string }[];
stage_id: string;
};
index: number;
}즉 todoIds를 통해 자식 요소가 배치되는 순서를 관리하고자 한 것이였는데...
처음에는 이게 맞는 방향이라 생각되었지만 지금 생각하면 많이 아쉽다.
각 데이터는 독립적으로 관리되어야 변경사항이 있을시 관리하기 용이하지만,
위 구조에는 Stage가 todoIds를 따로 관리하고 있어 불편한 점이 생겼다.
현재 구조에서는 Stage와 Todo가 같은 실시간 데이터가 아닌 서로 다른 실시간 데이터에 들어있기 때문에, 자식이 부모의 데이터를 가지고 있어야 관리하기 용이하지만, 이 구조에는 부모가 자식의 id 배열을 가지고 있게 되는 문제가 발생했다.
따라서 todo가 업데이트 될 때, 실시간 데이터가 todo를 먼저 업데이트 할 건지, stage 내 todoIds를 먼저 업데이트 할 건지에 따라 에러가 쉽게 발생할 수 있는 상황이 만들어져 버렸다.
이는 RDB 에서 1:N 관계를 가질 때 자식 요소에서 부모의 id를 가지고 있지, 부모에서 자식들의 id를 가지계 설계하지 않는 것과 거의 유사하다는 생각이 들었다.
물론 프론트 단에서 삼항 연산자나 if구문을 이용해 데이터가 존재하지 않을 경우 스킵하도록 만들수도 있지만, 근본적인 해결책이 되지 않아 좀 아쉬웠다.
지금은 1차 개발로 마무리 지었지만, 추후 refactoring을 진행할 때 해당 로직을 깔끔하게 개선하고 싶다!
