찍찍이 #드랍다운 컴포넌트 (리팩토링)

다음 내가 맡은 공통 컴포넌트는 드랍다운 컴포넌트 입니다.

앞서 기존에 개발하였던 드랍다운 컴포넌트의 Props는

interface DropdownProps {
  dropdownData: string[];
  onSelectItem: (item: string) => void; // 콜백 함수
}

다음과 같지만 UI/UX를 고려한 애니메이션 적용과 드랍다운 데이터의 타입 확장성을 위해

interface DropdownProps<T> {
  dropdownData: T[];
  onSelectItem: (item: T) => void;
  isOpenDropdown: boolean;
  renderItem: (item: T) => JSX.Element;
}

제네릭 타입 지정, 렌더링 커스터마이징, 열림 상태를 가져와

  return (
    <motion.ul
      initial="closed"
      animate={isOpenDropdown ? 'open' : 'closed'}
      variants={dropdownVariants}
      className="absolute top-full z-20 inline-flex max-h-150 w-full origin-top flex-col items-start overflow-y-auto rounded-b-12 bg-white shadow-lg scrollbar-hide"
    >
      {dropdownData.map((item, index) => (
        <li
          key={index}
          className="flex-center mt-2 w-full cursor-pointer border-b-2 border-gray-100 p-10 text-sm-normal hover:bg-slate-200 sm:text-base-normal"
          onClick={() => handleClickItem(item)}
        >
          {renderItem(item)}
        </li>
      ))}
    </motion.ul>
  );

• Framer Motion을 이용한 아이콘 애니메이션 적용
• 렌더링 커스터마이징

을 하여 조금 더 유연한 드롭다운 컴포넌트를 구현하였음.

또한 Story Book 사용으로 JSDOC과 index.stories.tsx 파일에 컴포넌트 테스트를
위한 코드를 작성

깃허브 코드 주소

스토리북 chomatic 배포 주소

스크롤 hidden 플러그인을 사용하여 스크롤바 숨기기 UI 개선