[React] 페이지 전환 애니메이션

import { motion } from "framer-motion";

<motion.div
  initial="initial"
  animate="animate"
  exit="exit"
  variants={pageTransition}
  transition={{ duration: 0.3 }}
  style={{ width: "100%", height: "100%" }} // 컨테이너 전체를 사용하는 애니메이션
>
// 전체 코드
</motion.div>

const pageTransition = {
  initial: { x: "100%" }, // 오른쪽에서 시작
  animate: { x: "0%" }, // 가운데로 이동
  exit: { x: "-100%" }, // 왼쪽으로 이동
};