안녕하세요.

리액트 마스터클래스의 넷플릭스 클론 연습중에 모르겠는 부분이 있어서 질문 올립니다.

넷플릭스의 검색부분을 만들고 있는데, framer-motion 중에 안되는 부분이 있습니다.

검색한 내용을 grid로 해서 여러줄로 나타내는 부분이 있는데 이때 맨 마지막 줄을 제외하고는

motion 애니메이션이 작동을 안합니다. 며칠동안 찾고있는데 원인을 아직도 찾지 못해서 질문글 올립니다.

dune 을 검색하여 나온 결과들입니다. 마우스 커서를 갖다대면 위로 올라오면서 커지는 layout 을 이용하는 애니메이션입니다. 그런데 마지막줄만 애니메이션이 적용이 됩니다. 그래서 grid를 한줄로 만들어서 확인해 봤더니 그때는 모든 검색내용들에 layout 애니메이션이 적용이 됩니다.

원인을 찾지 못해서 질문글 올립니다...

제 깃허브 주소입니다..

https://github.com/0626na/netflex_clone_letcutre/tree/master/src/Components

마지막으로 해당부분의 코드입니다.

export const SearchResult = styled.div` display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; width: 90%; position: absolute; top: 10%; left: 5%; `;

import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, LayoutGroup } from "framer-motion";
import { useQuery } from "react-query";
import { useHistory, useLocation } from "react-router-dom";
import { getSearch, IGetVideosResult, IVideo } from "../api";
import { boxVariant, movieInfoVariant } from "../Components/AnimationVariants";
import Modal from "../Components/Modal";

import {
  Box,
  MovieInfo,
  RatingInInfo,
  RootContainer,
  SearchResult,
  TitleInInfo,
} from "../Components/styledComponents";
import { makeImagePath } from "../utiles";

const Search = () => {
  const location = useLocation();

  const history = useHistory();
  const keywords = new URLSearchParams(location.search).get("keywords");
  const { data, isLoading } = useQuery<IGetVideosResult>("search", () =>
    getSearch(keywords)
  );

  const boxClicked = (videoId: string) => {
    history.push(`/search/${videoId}`);
  };

  return (
    <>
      <RootContainer>
        {isLoading ? null : (
          <>
            <SearchResult>
              {data
                ? data.results.map((video: IVideo) =>
                    video.media_type === "movie" ||
                    video.media_type === "tv" ? (
                      <AnimatePresence>
                        <LayoutGroup>
                          <Box
                            layoutId={video.id + "search"}
                            onClick={() => boxClicked(video.id + "")}
                            variants={boxVariant}
                            initial="normal"
                            whileHover="hover"
                            transition={{ type: "tween" }}
                            key={video.id}
                            bgpic={makeImagePath(
                              video.backdrop_path || video.poster_path,
                              "w300"
                            )}
                          >
                            {video.media_type}
                            <MovieInfo variants={movieInfoVariant}>
                              <TitleInInfo>
                                {video.title ||
                                  video.name ||
                                  video.original_name}
                              </TitleInInfo>
                              <RatingInInfo>
                                <FontAwesomeIcon
                                  color="#fffa65"
                                  icon={faStar}
                                />{" "}
                                {video.vote_average}
                              </RatingInInfo>
                            </MovieInfo>
                          </Box>
                        </LayoutGroup>
                      </AnimatePresence>
                    ) : null
                  )
                : null}
            </SearchResult>
            {data ? <Modal sliderKey="search" movies={data.results} /> : null}
          </>
        )}
      </RootContainer>
    </>
  );
};