[framer-motion] 뷰포트 인-아웃 감지

import React from 'react';
import { motion, useAnimation } from 'framer-motion';

const items = ['아이템 1', '아이템 2', '아이템 3', '아이템 4'];

const ListComponent = () => {
  const handleViewportEnter = (index) => {
    console.log(`컴포넌트 ${index + 1}가 뷰에 노출되었습니다.`);
  };

  return (
    <div>
      {items.map((item, index) => (
        <motion.div
          key={index}
          onViewportEnter={() => handleViewportEnter(index)}
        >
          {item}
        </motion.div>
      ))}
    </div>
  );
};

export default ListComponent;