SortDropdown

[bluetree7878]

📌 이슈 내용

SortDropdown이 랭킹 페이지에서만 쓰이는 게 아닌 여러 페이지에서도 쓰일 것 같아서 이걸 공통적으로 쓸 수 있게 만들려 합니다.
스타일은 그대로 가져갈 것 같아서 그 안에 들어갈 옵션이나 내용 같은 것만 변경이 가능하도록만 바꿔보겠습니다.

기존 코드

// features/ranking/ui/SortDropdown
import * as S from './styles';
import usePopover from '@hooks/usePopover';
import { RANKING_OPTIONS } from '@features/ranking/constant';
import { objectKeys } from '@modern-kit/utils';

interface SortDropDownProps {
  selectedOption: keyof typeof RANKING_OPTIONS;
  onSelectOption: (option: keyof typeof RANKING_OPTIONS) => void;
}

export default function SortDropdown({
  selectedOption,
  onSelectOption,
}: SortDropDownProps) {
  const { isOpen, togglePopover, popoverRef } = usePopover();

  const handleOptionClick = (option: keyof typeof RANKING_OPTIONS) => {
    onSelectOption(option);
    togglePopover();
  };

  // 정렬 옵션 목록을 동적으로 생성
  const SORT_OPTIONS = objectKeys(RANKING_OPTIONS);

  return (
    <S.SortContainer ref={popoverRef}>
      <S.SortSelectButton onClick={togglePopover} $isToggled={isOpen}>
        {selectedOption}
      </S.SortSelectButton>
      {isOpen && (
        <S.SortOptionUl>
          {SORT_OPTIONS.map(option => (
            <S.SortOptionLi
              key={option}
              onClick={() => handleOptionClick(option)}
            >
              {option}
            </S.SortOptionLi>
          ))}
        </S.SortOptionUl>
      )}
    </S.SortContainer>
  );
}

구현 내용

• SortDropdown 공통적으로 쓸 수 있게 변경

🖥️관련 화면 (선택사항)

현재 랭킹 페이지에서 쓰이는 부분

📝 참고 사항

[github-actions]

git fetch origin
git checkout modify/#100/SortDropdown