[영화 검색 사이트 프로젝트] 5. 리팩토링2🌟完

1. 북마크 리팩토링

• 북마크 버튼의 핸들러 함수를 따로 함수로 빼고, 함수명도 좀더 가독성 있게 바꿈
• 클릭 이벤트는 공통 함수 파일로 뺌
• 👻북마크 페이지에서 로컬 스로티리지에 저장된 데이터를 뿌릴때 순서가 랜덤으로 됨ㅜㅜ
  👉객체로 바꾼후에 push로 붙여서 저장

// 전
bookmarkButton.addEventListener("click", () => {
    if (window.localStorage.getItem(data.title)) {
      window.localStorage.removeItem(data.title);
      alert("북마크에서 삭제되었습니다.");
      bookmarkButton.innerHTML = "Add bookmark";
      const event = new CustomEvent("bookmarkUpdate");
      window.dispatchEvent(event);
    } else {
      window.localStorage.setItem(data.title, JSON.stringify(data));
      alert("북마크에 추가되었습니다.");
      bookmarkButton.innerHTML = "Remove bookmark";
    }

    modalClose();
  });
  
  export function getBookmark() {
  if (!localStorage.key(0)) {
    alert("저장된 북마크가 없습니다");
    return;
  }
  const bookmarkData = Array.from({ length: localStorage.length }, (_, i) => {
    const key = localStorage.key(i);
    return JSON.parse(localStorage.getItem(key));
  });
  document.querySelector(".section__list").innerHTML = "";
  getMovieDataElement(bookmarkData);
  if (!bookmarkBtn.classList.contains("header__bookmark--active")) {
    bookmarkBtn.classList.add("header__bookmark--active");
  } else {
    bookmarkBtn.classList.remove("header__bookmark--active");
    document.querySelector(".section__list").innerHTML = "";
    getMovieData();
  }
}

// 후
function getBookmarks() {
  return JSON.parse(localStorage.getItem("movies")) || [];
}

export function isBookmarked(movieId) {
  const existingData = getBookmarks();
  return existingData.some((movie) => movie.id === movieId);
}
function addBookmark(movieData) {
  const bookmarks = getBookmarks();
  bookmarks.push(movieData);
  localStorage.setItem("movies", JSON.stringify(bookmarks));
  alert("북마크에 추가되었습니다.");
}
function removeBookmark(movieId) {
  let bookmarks = getBookmarks();
  bookmarks = bookmarks.filter((movie) => movie.id !== movieId);
  localStorage.setItem("movies", JSON.stringify(bookmarks));
  alert("북마크에서 삭제되었습니다.");
}
export function handleBookmarkToggle(data) {
  const bookmarkToggleBtn = document.querySelector(".modal_btn");
  const isBookmarkedMovie = isBookmarked(data.id);
  if (isBookmarkedMovie) {
    removeBookmark(data.id);
    bookmarkToggleBtn.innerHTML = "MARK";
  } else {
    addBookmark(data);
    bookmarkToggleBtn.innerHTML = "UNMARK";
  }
  closeModal();
}

export function displayBookmarked() {
  if (!localStorage.key(0)) {
    alert("저장된 북마크가 없습니다");
    return;
  }
  const sectionList = document.querySelector(".section__list");
  const bookmarkData = getBookmarks();

  sectionList.innerHTML = "";
  getMovieDataElement(bookmarkData);
}

 

2. 검색 리팩토링

마찬가지로 핸들러 함수를 따로 함수로 만들고, if문으로 바꿔서 가독성을 높임

//전
searchInput.addEventListener(
    "keyup",
    (e) => e.key === "Enter" && handleSearch
);

//후
function onEnterKey(e) {
    if (e.key === "Enter") {
      handleSearch();
    }
}
  
searchInput.addEventListener("keyup", onEnterKey);