다섯째주 #24 React Js - 또 다른 무비앱

다른 모양새의 무비앱...

https://codesandbox.io/s/react-js-master-final-challenge-3hct77

더 다듬을 부분
1. 모달창 스크롤바(기본 크롬 border-radius 깨지고 못생김)

참고할 블로그
https://github.com/wnsguddl789/nomad-netflix-assignment/blob/main/src/components/organisms/Modal.tsx

https://github.com/wnsguddl789/nomad-netflix-assignment/blob/main/src/pages/HomePage.tsx

2. 영화 이미지 누르면 모달창 뜰 때 모션 이용해서 애니메이션 주기

3. 검색창 연습할 겸 추가하면 좋을듯.

4. 모달창에 전 영화 이미지 안나오게 하기

function Modal({ id, onClose }) {
  const { data, isLoading } = useQuery<IMovieDetail>(["movie", "detail",id], () =>
    getMovie(id)
  );

피드백:

디테일 페이지 불러오는 useQuery 에다가 쿼리키에 useParams로 불러오는 Id 값 넣으셔야지 다른모달띄워질때, 이전에 클릭한 모달정보가 사라질꺼에용

저도 이거 말할라햇어요
queryKey : ["movieDetail", movieId]
이런식으로여

5. 모달창 떴을 때 스크롤 막기

영서님의 주간회고를 보고 나도 적용해보자고 생각!

6. 텍스트 길 때 말 줄임?

export const Title = styled(motion.h3)`
	//중략
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
`;

7. 나중에... 무한 스크롤

react-intersection-observer

import { useEffect } from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useInView } from "react-intersection-observer";
import { IAPIResponse } from "../types";
import { getMovies } from "../apis/api";
import { TYPE_MODE } from "../constants/constant";

function useGetMovies(type: TYPE_MODE) {
  const { ref, inView } = useInView();

  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery<IAPIResponse>(
    [type],
    async ({ pageParam = 1 }) => {
      return await getMovies(type, pageParam);
    },
    {
      getNextPageParam: (lastPage) => {
        return lastPage.page < lastPage.total_pages
          ? lastPage.page + 1
          : undefined;
      },
      getPreviousPageParam: undefined,
    }
  );

  useEffect(() => {
    if (inView && hasNextPage) {
      fetchNextPage();
    }
  }, [inView]);
  return { ref, data };
}

export default useGetMovies;

  src={makeImagePath(movie.poster_path, "w500")}
  onError={handleErrorImage}
  />
    </Card>
  <Title variants={cardVariants}>{movie.title}	</Title>
 </CardWrapper>
  ))
  )}
</Container>
)}
  </AnimatePresence>
<ObserverContent ref={refProp}></ObserverContent>

interface IMovieListProps {
  data: InfiniteData<IAPIResponse>;
  refProp: (node?: Element | null | undefined) => void;
}

나머지 킹갓영서님 경험 참고하자
https://shelled-coelurus-24e.notion.site/6-57ab569ae21d4308a4ebe1d144c4d050