라이브러리 없이 드래그앤드롭 구현하기

받아온 데이터 예시

const appointment = [
  { username: "김", date: "2023-08-12", time: "12:00 - 13:00" },
  { username: "이", date: "2023-08-12", time: "09:00 - 10:00" },
  { username: "박", date: "2023-08-12", time: "11:00 - 12:00" },
  { username: "홍", date: "2023-08-12", time: "13:00 - 14:00" },
  { username: "정", date: "2023-08-12", time: "15:00 - 16:00" },
];

시간과 날짜를 오름차순으로 정렬하여 대기중 데이터에 모두 삽입

function compareDates(a, b) {
  const dateA = new Date(`${a.date} ${a.time.split(" - ")[0]}`);
  const dateB = new Date(`${b.date} ${b.time.split(" - ")[0]}`);
  return dateA - dateB;
}
const sortedAppointments = appointment.sort(compareDates);
  const [tasks, setTasks] = useState({
    대기중: sortedAppointments,
    진료중: [],
    완료: [],
  });

  const handleDragStart = (e, appointment, status) => {
    e.dataTransfer.setData(
      "text/plain",
      JSON.stringify({ appointment, status }),
    );
  }; 

드래그가 시작될때 일어나는 함수
이 함수는 (e, appointment, status) 세 개의 매개변수를 받는다. 첫 번째 매개변수인 e는 드래그 앤 드롭 이벤트, 두 번째 매개변수인 appointment는 드래그하는 항목, 세 번째 매개변수인 status는 해당 예약의 상태(Status)
e.dataTransfer.setData(): 이 부분은 드래그 앤 드롭 작업을 위한 데이터를 설정하는 메서드로 "text/plain" 형식으로 예약과 상태 정보를 JSON 형태로 문자열화하여 설정, 드래그 중에 정보가 유지되어 드롭 대상으로 정보를 전달하도록

const handleDragOver = (e) => {
    e.preventDefault();
  };

드래그 중 일어나는 함수

  const handleDrop = (e, targetStatus) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    const { appointment, status } = JSON.parse(data);
    if (status !== targetStatus) {
      const updatedTasks = {
        ...tasks,
        [status]: tasks[status].filter(
          (apt) => apt.username !== appointment.username,
        ),
        [targetStatus]: [...tasks[targetStatus], appointment],
      };
      setTasks(updatedTasks);
      localStorage.setItem("tasks", JSON.stringify(updatedTasks));
    }
  };

드래그가 끝난 시점에 일어나는 함수
매개변수는 (e, targetStatus)로 첫번째 e는 드롭이벤트, targetStatus는 드롭될 목표의 상태
e.preventdefault를 통해 드롭이벤트의 기본동작을 막는다.
드래그앤드롭데이터에서 data를 가져오고
json형식으로 파싱하여 appointment와 status를 가져온다.
만약 드롭될 상태와 현재 상태가 일치하지 않는다면 업데이트하기 위해 updatedTasks라는 복사본을 setTasks에 넣는다. 이 후 렌더링 되어도 사용할 수 있도록 로컬스토리지에 저장한다.

새로 렌더링되어도 드래그앤드롭을 적용한 값이 보이도록 useeffect사용

  useEffect(() => {
    const storedTasks = localStorage.getItem("tasks");
    if (storedTasks) {
      setTasks(JSON.parse(storedTasks)); // 읽어온 값으로 tasks초기화
    }
  }, []);

       {Object.keys(tasks).map((status) => (
         <Column
           key={status}
           onDragOver={handleDragOver}
           onDrop={(e) => handleDrop(e, status)}
         >
           <Title>{status}</Title>
           {tasks[status].map((appointment) => (
             <Appointment
               key={appointment.username}
               draggable
               onDragStart={(e) => handleDragStart(e, appointment, status)}
             >
               <DateText>{appointment.date}</DateText>
               <Info>
                 <StyledP>{appointment.username}</StyledP>
                 <StyledP>{appointment.time}</StyledP>
               </Info>
             </Appointment>
           ))}
         </Column>
       ))}
     </ColumnContainer>
   </Container>
 );
};