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

const App = () => {
  const [items, setItems] = useState(['아이템 1', '아이템 2', '아이템 3']);

  const handleDragEnd = (result) => {
    // 드래그가 끝났을 때 호출됩니다.
    if (!result.destination) return; // 유효한 드롭 대상이 없으면 종료합니다.

    const updatedItems = [...items];
    updatedItems.splice(result.source.index, 1); // 드래그된 아이템을 삭제합니다.
    setItems(updatedItems);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            style={{ background: snapshot.isDraggingOver ? 'lightblue' : 'white' }}
          >
            {items.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      padding: 16,
                      margin: '0 0 8px 0',
                      background: snapshot.isDragging ? 'lightgreen' : 'white',
                      ...provided.draggableProps.style
                    }}
                  >
                    {item}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;