페이지 및 컴포넌트 분리

1. 페이지
   1. 홈 (MOVIE)
   2. TV
   3. Search
2. 컴포넌트

MOVIE와 TV의 api에서 전달해주는 데이터의 타입명이 달라서 분리

1. MOVIE
   1. 배너
   2. 슬라이더 : now_Playing / Top_reated / up_coming
   3. Latest Movie : 데이터 값이 달라서 분리
   4. 정보를 담는 모달
2. TV
   1. 배너
   2. 슬라이더 : airingTody / topRated
   3. Latest Movie : 데이터 값이 달라서 분리
   4. 정보를 담는 모달
3. Search
   1. MOVIE 정보를 담는 모달
   2. TV 정보를 담는 모달

├── Routes
│   ├── Home.tsx
│   ├── Search.tsx
│   └── Tv.tsx
├── components
│   ├── Header.tsx
│   ├── movie
│   │   ├── LatestMovie.tsx
│   │   ├── ModalMovieDetailInfo.tsx
│   │   ├── MovieBanner.tsx
│   │   └── MovieSlider.tsx
│   ├── search
│   │   ├── ModalSearchedMovieDetailInfo.tsx
│   │   └── ModalSearchedTvDetailInfo.tsx
│   └── tv
│       ├── LatestTv.tsx
│       ├── TvBanner.tsx
│       ├── TvModalDetail.tsx
│       └── TvSlider.tsx

내가 누른 슬라이더가 어떤 슬라이더인지, 모달은 어떻게 알지?

//Home.tsx
<Container>
          <MovieBanner movies={nowPlaying.data?.results[0]} />
          <TopSliderWrapper>
            <Title>NOW PLAYING</Title>
            <MovieSlider                            //슬라이드1  
              type={movieType.now_playing}
              movies={nowPlaying.data?.results}
            />
          </TopSliderWrapper>
          <LatestMovie />
          <SliderWrapper>
            <Title>UPCOMING</Title>
            <MovieSlider                          // 슬라이드2
              type={movieType.upcoming}
              movies={upComing.data?.results}
            />
          </SliderWrapper>
          <SliderWrapper>
            <Title>TopRated</Title>
            <MovieSlider                          // 슬라이드2
              type={movieType.top_rated}
              movies={topRated.data?.results}
            />
          </SliderWrapper>
          <AnimatePresence>
            {isMatchedModalMovie ? (             // 모달
              <ModalMovieDetailInfo
                movietype={movietype}
                movieId={movieId}
                movies={              // 내가 누른 박스는 어느 슬라이드?
                  movietype === movieType.now_playing
                    ? nowPlaying.data?.results
                    : movietype === movieType.upcoming
                    ? upComing.data?.results
                    : movietype === movieType.top_rated
                    ? topRated.data?.results
                    : []
                }
                scrollY={scrollY.get()}
              />            ) : null}
          </AnimatePresence>
</Container>

처음에는 <Modal> 컴포넌트를 Home, Tv 페이지에 <Slide> 컴포넌트와 나란히 위치하게 해서 layoutID 값을 어떻게 줄지 고민함

⇒ 내가 누른 슬라이더가 어떤 슬라이더인지 모달은 어떻게 알지?

⇒ 리코일을 써서 넘겨주자

// MovieSlider.tsx
const handleBoxClick = (movieId: number) => {
    if (type) setMovietype(type);
      navigate(`movies/${movieId}`);
  };

⇒ 그런데 꼭 전역으로 상태관리를 해야할까?

export const movieTypeState = atom({
  key: "movieType",
  default: "",
});

export const tvTypeState = atom({
  key: "tvType",
  default: "",
});

export enum movieType {
  now_playing = "now_playing",
  latest = "latest",
  upcoming = "upcoming",
  top_rated = "top_rated",
  searched = "searched",
}

• 모달 컴포넌트를 슬라이드 컴포넌트안에 포함시킴
• 슬라이드 컴포넌트가 가지고있는 데이터를 모달컴포넌트로 전달

//Home.tsx
<AnimatePresence>
            {isMatchedModalMovie ? (
              <ModalMovieDetailInfo
                movietype={movietype}
                movieId={movieId}
                movies={
                  movietype === movieType.now_playing
                    ? nowPlaying.data?.results
                    : movietype === movieType.upcoming
                    ? upComing.data?.results
                    : movietype === movieType.top_rated
                    ? topRated.data?.results
                    : []
                }
                scrollY={scrollY.get()}
              />
            ) : null}
          </AnimatePresence>

//MovieSlider.tsx
return (
    <>
      <Wrrapper>
        <AnimatePresence>
          <Row>
            {movies &&
              movies
                .slice(1)
                .slice(offest * index, offest * index + offest)
                .map(movie => (
                  <Box>
                    <Info variants={infoVariants}>
                    </Info>
                  </Box>
                ))}
          </Row>
        </AnimatePresence>
        <LARR />
        </LARR>
        <RARR />
        </RARR>
      </Wrrapper>
      <AnimatePresence>
        {isMatchedModalMovie && type ? (
          <ModalMovieDetailInfo
            movietype={type}
            movieId={movieId}
            movies={movies}
            scrollY={scrollY.get()}
          />
        ) : null}
      </AnimatePresence>
    </>
  );
}

❗️ 모달 컴포넌트를 슬라이드 컴포넌트안에 포함시킨 후 생긴 에러

모달이 슬라이더 기준으로 렌더링 되고있음!!! ⇒ 수정 필요

SEARCH 페이지에서 박스를 클릭했을 때, 링크가 왜그래…

SEARCH 페이지만들고 검색된 MOVIE, TV 슬라이더가 나오는 것을 확인했으니 과제 제출!