import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

const App = () => {
  const handleDragEnd = (result) => {
    // 드래그 앤 드롭 완료시 실행될 콜백 함수
    // 이곳에서 아이템의 순서를 변경해줄 수 있습니다.
    if (!result.destination) return;  // 드롭되지 않은 경우

    const newItems = Array.from(items);
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);

    // 변경된 순서의 아이템들을 업데이트합니다.
    // 이후에는 업데이트된 순서에 따라 화면을 다시 렌더링합니다.
    // 예를 들어, 데이터베이스에 업데이트 요청을 보낼 수도 있습니다.
  };

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

export default App;