2024-05-07 로컬스토리지를 활용하여 현재 보고 있는 메뉴 유지시키기

팀프로젝트를 하면서 팀원께서 미리 제작한 페이지에서 한/영 전환 기능을 구현하는 역할을 맡았다.

 

 

위와 같은 상태에서 헤더에 포함된 한영 전환 버튼을 누르면 이벤트리스너가 동작하면서 api를 한글로 fetch하여 화면에 새롭게 영화 카드를 그려지게 구상하였는데,

문제는 현재 보고 있는 메뉴가 Top Rated인데, 한/영 전환을 하면서 한국어 API로 fetch 하는 데까지는 아무 문제가 없으나 이 바뀐 언어의 API로 다시 영화 카드를 화면에 그리는 과정에서 페이지가 새로고침 되며

 

페이지의 초기 상태인 popular로 강제 이동되는 현상이 발생했다.

눈으로 보이는 페이지는 하나지만 popular와 top rated에서 각각 fetch를 다르게 요청해야 하는 상황인데,

이를 해결할 방법을 찾지 못하다가 로컬스토리지에 top_rated와 popular라는 값을 할당해서 fetch하는 url에 갈아 끼워 넣는 방식으로 해결했다.

 

 

아래 코드는 팀원께서 작성한 코드에 추가 기능을 살짝 얹은 내용이다.

자세한 내용은 주석으로 달았다.

// 이 코드를 작성한 이유는 사용자가 '높은 평점순(top_rated)'를 보고 있을 때 언어 변경 버튼을 누르면 html이 초기화 되면서 초기 페이지인 '인기순(popular)'로 화면이 초기화 되기 때문에
// 이를 유지시키기 위해 fetch하는 url에서 베이스 url 중 top_rated, popular 부분을 로컬 스토리지에 저장된 값을 기준으로 쿼리스트링에 교체하여 fetch하기 위함.
// 로컬 스토리지에 isViewedNow라는 변수를 생성하고 기본 값으로 'popular'를 할당함.
localStorage.setItem('isViewedNow', 'popular');
// setViewedMenu라는 함수를 만들고 임의의 매개변수 menu를 만들어 사용자가 현재 보고 있는 메뉴(인기순, 높은 평점순 중)를 로컬스토리지에 값으로 할당할 준비를 함.
let setViewedMenu = (menu) => {
    localStorage.setItem('isViewedNow', menu);
}

// isViewedNow라는 변수를 만들고 로컬스토리지에서 isViewedNow의 값을 할당함.
export let isViewedNow = localStorage.getItem("isViewedNow");

export const handleMenuSelect = (e) => {
    const targetBtn = e.target.closest('.menu_btn');
    if (targetBtn && !targetBtn.classList.contains('chk')) {
        const $chk = document.querySelector(".chk");
        if (targetBtn.id === "popular") {
            // 사용자가 popular를 보고 있을 경우 위에서 선언한 setViewedMenu 함수에 매개변수로 전달해서 로컬스토리지의 isViewedNow 값으로 "popular"를 할당함.
            setViewedMenu("popular");
            movieListAPI();
        } else if (targetBtn.id === "top_rated") {
            // 사용자가 top_rated를 보고 있을 경우 로컬스토리지에 top_rated로 할당함.
            setViewedMenu("top_rated");
            movieListAPI(`/3/movie/top_rated?&page=1`);
        }
        if ($chk) {
            $chk.classList.remove("chk");
        }
        targetBtn.classList.add('chk');
    }
}