[22.05.13] TIL

drag & drop

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

• ondragover : 요소가 드래그 대상 위를 지나갈 경우(밀리초 단위로 실행)
• ondragstart : 요소를 드래그 할 경우
• ondragend : 드래그가 끝날 경우
• ondragenter : 요소가 다른 드래그 요소 위에 있는 경우
• ondragleave : 요소가 다른 드래그 요소 위에 있다가 이탈한 경우
• ondrop : 요소를 드롭할 경우 (ondragover에서 preventDefault()가 발생해야 함)

datatransfer

https://runebook.dev/ko/docs/dom/datatransfer

드래그 앤 드롭 동작 중에 끌고 있는 데이터를 보유하기 위해 사용

setState & setLocalStorage

  const handleFavoriteButton = async (e: { currentTarget: { name: string } }) => {
    const { name } = e.currentTarget;

    if (name === ADD_FAVORITES) {
      addMovie();
    } else if (name === DELETE_FAVORITES) {
      deleteMovie();
    }

    setLocalStorage(FAVORITE_MOVIE_KEY, favoriteMovieList)
    onClose();
  };

add / delete 동작으로 state 업데이트 후 localStorage에 그 값을 set 하려 했지만... 비동기?

  const addMovie = () => {
    const newFavorites = isFavorite() ? favoriteMovieList : [...favoriteMovieList, movie];

    setFavoriteMovieList(newFavorites);
    setLocalStorage(FAVORITE_MOVIE_KEY, newFavorites);
  };

새 리스트를 가져오고 각각 새 리스트를 set 해주었다.

요구 사항 구현 완료하고 영화 앱 디자인까지 마무리했다.
drag & drop 해야지...