react-beautiful-dnd로 TODO 뽀개기

  {(provided, snapshot) => (
    <div
        ref={provided.innerRef}
        {...provided.droppableProps}
        style={{ background: snapshot.isDraggingOver ? 'red' : 'blue' }}
    >
      {...}
      {provided.placeholder}
    </div>
  )}

{
  (provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      style={{
        backgroundColor: snapshot.isDragging ? 'blue' : 'grey',
        ...provided.draggableProps.style,
      }}
    >
      {item.content}
    </div>
  );
}

yarn add react-beautiful-dnd
yarn add -D @types/react-beautiful-dnd

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
};

module.exports = nextConfig;

const [enabled, setEnabled] = useState(false);

useEffect(() => {
  const animation = requestAnimationFrame(() => setEnabled(true));

  return () => {
    cancelAnimationFrame(animation);
    setEnabled(false);
  };
}, []);

if (!enabled) {
  return null;
}

import { useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';

export default function App() {
  // --- Mock 데이터
  const items = [...Array(4)].map((_, i) => ({ id: `${i}${i}${i}`, content: `item-${i}` }));

  // --- Draggable이 Droppable로 드래그 되었을 때 실행되는 이벤트
  const onDragEnd = ({ source, destination }: DropResult) => {
    console.log('>>> source', source);
    console.log('>>> destination', destination);
  };

  // --- requestAnimationFrame 초기화
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);

  if (!enabled) {
    return null;
  }
  // --- requestAnimationFrame 초기화 END

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

<Droppable droppableId="droppable">
  {(provided, snapshot) => (
    <div ref={provided.innerRef} {...provided.droppableProps}>
      {...}
      {provided.placeholder}
    </div>
  )}
</Droppable>

{
  items.map((item, index) => (
    <Draggable key={item.id} draggableId={item.id} index={index}>
      {(provided, snapshot) => (
        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
          {item.content}
        </div>
      )}
    </Draggable>
  ));
}

const [items, setItems] = useState(
  [...Array(4)].map((_, i) => ({ id: `${i}${i}${i}`, content: `item-${i}` })),
);

const onDragEnd = ({ source, destination }: DropResult) => {
  if (!destination) return;

  // 깊은 복사
  const _items = JSON.parse(JSON.stringify(items)) as typeof items;
  // 기존 아이템 뽑아내기
  const [targetItem] = _items.splice(source.index, 1);
  // 기존 아이템을 새로운 위치에 삽입하기
  _items.splice(destination.index, 0, targetItem);
  // 상태 변경
  setItems(_items);
};

export type TItemStatus = 'todo' | 'doing';

export type TItem = {
  id: string;
  status: TItemStatus;
  title: string;
};

export type TItems = {
  [key in TItemStatus]: TItem[];
};

export default function TodoPage() {
  const [items, setItems] = useState<TItems>({
    todo: [...Array(5)].map((_, i) => ({
      id: `${i}${i}${i}`,
      title: `Title ${i + 1}000`,
      status: 'todo',
    })),
    doing: [],
  });

  return (
    <>
      <TodoLibraryExample items={items} setItems={setItems} />
    </>
  );
}

{
  "todo": [],
  "doing": []
}

<DragDropContext>
  <div className="...">
    {Object.keys(items).map((key) => (
      <Droppable key={key} droppableId={key}>
        {(provided, snapshot) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items[key as TItemStatus].map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <h5>{item.title}</h5>
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    ))}
  </div>
</DragDropContext>

<Droppable key={key} droppableId={key}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.droppableProps}
      className={'기존 스타일 ' + (snapshot.isDraggingOver ? 'shadow-lg' : 'shadow')}
    >
      ...
    </div>
>
</Droppable>

<Draggable key={item.id} draggableId={item.id} index={index}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      className={
        '기존 스타일 ' +
          (snapshot.isDragging
           ? 'bg-opacity-90 shadow-2xl shadow-gray-400'
           : 'shadow')
      }
    >
      ...
    </div>
 </Draggable>

const onDragEnd = ({ source, destination }: DropResult) => {
  // 유효하지 않는 곳으로 drag시 이벤트를 종료한다.
  if (!destination) return;

  // 타입스크립트 호환되도록 타입을 지정해준다.
  const scourceKey = source.droppableId as TItemStatus;
  const destinationKey = destination.droppableId as TItemStatus;

  // 깊은 복사
  const _items = JSON.parse(JSON.stringify(items)) as typeof items;
  // drag를 시작한 리스트에서 drag한 아이템을 뺀다.
  const [targetItem] = _items[scourceKey].splice(source.index, 1);
  // drop되는 리스트에 알맞는 위치에 아이템을 추가해준다.
  _items[destinationKey].splice(destination.index, 0, targetItem);

  // 상태를 변경해준다.
  setItems(_items);
};

return (
  <>
    <DragDropContext onDragEnd={onDragEnd}>...</DragDropContext>
  </>
);

import TodoLibraryExample from '@/components/todo/TodoLibraryExample';
import { useState } from 'react';

export type TItemStatus = 'todo' | 'doing';

export type TItem = {
  id: string;
  status: TItemStatus;
  title: string;
};

export type TItems = {
  [key in TItemStatus]: TItem[];
};

export default function TodoPage() {
  const [items, setItems] = useState<TItems>({
    todo: [...Array(5)].map((_, i) => ({
      id: `${i}${i}${i}`,
      title: `Title ${i + 1}000`,
      status: 'todo',
    })),
    doing: [],
  });

  return (
    <>
      <TodoLibraryExample items={items} setItems={setItems} />
    </>
  );
}

import { TItems, TItemStatus } from '@/pages/todo';
import { $ } from '@/utils';
import { useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';

export default function TodoLibraryExample({
  items,
  setItems,
}: {
  items: TItems;
  setItems: (items: TItems) => void;
}) {
  const onDragEnd = ({ source, destination }: DropResult) => {
    if (!destination) return;

    const scourceKey = source.droppableId as TItemStatus;
    const destinationKey = destination.droppableId as TItemStatus;

    const _items = JSON.parse(JSON.stringify(items)) as typeof items;
    const [targetItem] = _items[scourceKey].splice(source.index, 1);
    _items[destinationKey].splice(destination.index, 0, targetItem);
    setItems(_items);
  };

  // --- requestAnimationFrame 초기화
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);

  if (!enabled) {
    return null;
  }
  // --- requestAnimationFrame 초기화 END

  return (
    <div className="p-4">
      <div className="mb-2">
        <h1 className="text-3xl font-bold">react-beautiful-dnd</h1>
        <span>with react library</span>
      </div>

      <div className="mt-4 flex">
        <DragDropContext onDragEnd={onDragEnd}>
          <div className="grid flex-1 select-none grid-cols-2 gap-4 rounded-lg">
            {Object.keys(items).map((key) => (
              <Droppable key={key} droppableId={key}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    className={$(
                      'flex flex-col gap-3 rounded-xl bg-gray-200 p-4 ring-1 ring-gray-300 transition-shadow dark:bg-[#000000]',
                      snapshot.isDraggingOver ? 'shadow-lg' : 'shadow',
                    )}
                  >
                    <span className="text-xs font-semibold">{key.toLocaleUpperCase()}</span>
                    {items[key as TItemStatus].map((item, index) => (
                      <Draggable key={item.id} draggableId={item.id} index={index}>
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            className={$(
                              'rounded-lg bg-white p-4 transition-shadow dark:bg-[#121212]',
                              snapshot.isDragging
                                ? 'bg-opacity-90 shadow-2xl shadow-gray-400'
                                : 'shadow',
                            )}
                          >
                            <h5 className="font-semibold">{item.title}</h5>
                            <span className="text-sm text-gray-500">Make the world beatiful</span>
                          </div>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            ))}
          </div>
        </DragDropContext>
      </div>
    </div>
  );
}