Genre

https://feelvieact.netlify.app/genre/movie/16

프로그래스바

// 상단 프로그래스바 - 0부터 100으로 width 설정
const calculateProgress = () => {
  return !listLoading ? 0 : 100;
};

// 0~100까지 가는 숫자를 가져와서 width에 넣어줌으로써 자연스러운 프로그레스바 만들기
<div className="progress"
	style={{
		width: `${props.progress}%`,
	}}
></div>

---

장르 탭 선택 후 url 변경

// 장르 선택
const genreChange = async (itemId) => {
  setListLoading(true);
  setProgressState(true);
  setGenreNumber(itemId);
  navigate(`/genre/${type}/${itemId}`);
};

---

정렬 선택 + 이미지 없을 시

// 정렬 선택
const SortClick = async (event) => {
  try {
    setSelectedValue(event.target.value);
    setProgressState(true);
    setListLoading(true);

    let genreUrl;
    switch (event.target.value) {
      case 'popularityDesc' :
        genreUrl = await movieApi.genrePopularDesc(type, genreNumber);
        break;
      case 'popularityAsc' :
        genreUrl = await movieApi.genrePopularAsc(type, genreNumber);
        break;
      case 'dateDesc' :
        genreUrl = await movieApi.genreDateDesc(type, genreNumber);
        break;
      case  'dateAsc' :
        genreUrl = await movieApi.genreDateAsc(type, genreNumber);
        break;
      default:
        break;
    }
    setGenreList(genreUrl.data.results);
  } catch (error) {
    console.log(error)
  } finally {
    setProgressState(false);
    setListLoading(false);
  }
}
// 장르 변경 시 리스트 변경
useEffect(() => {
  async function fetchApi() {
    setProgressState(true);
    setListLoading(true);

    try {
      const genre = await movieApi.genreTitle(type);
      setGenreTitle(genre.data.genres);

      // 현재 장르 번호가 All로 되어있을 경우에는 장르리스트가 아닌 인기순을 보여준다
      if (number === 'All') {
        const popular = await movieApi.popular(type);
        setGenreList(popular.data.results);
        setGenreNumber(number);
      } else {
        // 장르 번호로 되어있을 시엔 장르번호 넣어주고 그 값에 해당하는 리스트 뿌려줌
        const genreUrl = await movieApi.genreList(type, genreNumber);
        setGenreList(genreUrl.data.results);
      }
      
      // 데이터가 다 들어오면 false 처리
      setProgressState(false);
      setListLoading(false);
    } catch (error) {
      console.log(error)
    }
  }

  fetchApi();
}, [type, genreNumber]);

---

리스트 더보기

/* 리스트 더보기 클릭*/
const listMoreBtn = () => {
	setLoading(true);
	ListMore();
}
  
/* 리스트 디바운스 1초 뒤 api 호출 */
const ListMore = debounce(() => {
	const nextPage = page + 1;
	const PageData = async () => {
	try {
		if (number === 'All') {
          const popularScroll = await movieApi.popularScroll(type, nextPage);
          setGenreList((prevGenreList) => [...prevGenreList, ...popularScroll.data.results]);
        } else {
          const genreUrlScroll = await movieApi.genreScroll(type, genreNumber, nextPage);
          setGenreList((prevGenreList) => [...prevGenreList, ...genreUrlScroll.data.results]);
        }
      } finally {
        setLoading(false);
      }
    };
	setPage(nextPage);
	PageData();
}, 1000);