virtual scroll component (드르륵) 구현

[imb96]

⚙️ PR 타입

• Feature
• Hotfix

✨ 기능 설명 or 🚨 문제 상황

리스트중 아이템을 스크롤을 셀렉트 할 수 있는 컴포넌트를 구현했습니다.
리스트중 가운데에 있는 요소가 선택되며 배경색이 변경됩니다.

👨‍💻 구현 내용 or 👍 해결 내용

리스트가 하나일 경우인, 예를 들면 인원선택, 경기 플레이 타임 선택은 가능하지만
리스트가 여러개인 경기시작 시간 선택은 아직 구현하지 못했습니다.

🎯 PR 포인트

// 사용 예시
import { VirtualScroll } from '@components/shared/VirtualScroll';

const Page = () => {
  const [selectedItem, setSelectedItem] = useState<string | null>('');

  const handleItemSelected = (item: string) => {
    setSelectedItem(item);
  };

return (
    <>
      <VirtualScroll
        list={[
          '1명',
          '2명',
          '3명',
          '4명',
          '5명',
          '6명',
          '7명',
          '8명',
          '9명',
          '10명',
        ]}
        onItemSelected={handleItemSelected}
      />
      <h1>{selectedItem}</h1>
    </>
  );
}

📝 참고 사항

컴포넌트에 list: string[]를 props로 넘겨주시면 됩니다.
onItemSelected={선택된 아이템을 처리할 함수} 전달해주시면 됩니다.

❓ 궁금한 점

#41 close

[1eecan]

🎉 @1eecan 님 랜덤 리뷰어로 당첨되셨습니다! 리뷰를 부탁드립니다. 🙏

[1g2g]

LGTM!!