react drag and drop list - TEAM-ARK/inflearn-clone-front GitHub Wiki

// 사용 예 - 코드 1
const { createLectureData, lectureData, saveCourseInfoDone } = useSelector((state: RootState) => state.lecture);

const [whatYouCanLearn, setWhatYouCanLearn] = useState<ItemInterface[]>(
  lectureData?.courseInfo.whatYouCanLearn.map((item) => ({
  id: item.order,
  name: item.name,
  }))
);

<ReactSortable list={whatYouCanLearn} setList={setWhatYouCanLearn} animation={200} handle=".handle">
  {whatYouCanLearn.map((item, index) => (
    <TextListBox key={item.id} item={item} list={whatYouCanLearn} setList={setWhatYouCanLearn} index={index} />
  ))}
</ReactSortable>

// react-sortablejs에서 권장하는 item type interface - 코드 2
export interface ItemInterface {
    /** The unique id associated with your item. It's recommended this is the same as the key prop for your list item. */
    id: string | number;
    /** When true, the item is selected using MultiDrag */
    selected?: boolean;
    /** When true, the item is deemed "chosen", which basically just a mousedown event. */
    chosen?: boolean;
    /** When true, it will not be possible to pick this item up in the list. */
    filtered?: boolean;
    [property: string]: any;
}

// 내가 사용하는 item의 type - 코드 3
export type LectureInfoChild = {
  name: string;
  order: number | string;
};

// react-sortablejs에 맞게 변형 - 코드 4
useEffect(() => {
  setWhatYouCanLearn(
    lectureData?.courseInfo.whatYouCanLearn.map((item) => ({
    id: item.order,
    name: item.name,
    }))
  );
}, [lectureData?.courseInfo]);

    <DynamicBox>
      <div>{item.name}</div>
      <div>
        <button onClick={onClickDelete} type="button">
          <DeleteIcon />
        </button>
        <DraggableButton className="handle"> // 핸들을 위한 클래스 이름 지정
          <DragHandleIcon />
        </DraggableButton>
      </div>
    </DynamicBox>