1. transform-origin (Framer Motion)
   • 애니메이션의 방향을 정해줍니다.
   • 코드조각

const Box = styled(motion.div)<{ bgPhoto: string }>`
  ...(생략);
  &:first-child {
    transform-origin: center left;
  }
  &:last-child {
    transform-origin: center right;
  }
`;

2. 부모 컴포넌트가 variants 를 가지고 있는 경우

• whileHover 와 같은 이벤트 애니메이션이 자식 컴포넌트에 자동으로 상속이 됩니다.
• 코드조각

<Box
  bgPhoto={maekImagePath(movie.poster_path, "w500")}
  key={movie.id}
  variants={boxVariants}
  initial="normal"
  whileHover="hover"
  transition={{ type: "tween" }}
>
  <Info />
</Box>