[Feat/#24] 드롭다운 공통 컴포넌트 생성

[sinji2102]

📌 관련 이슈번호

• Closes [ Feat ] 드롭다운 공통 컴포넌트 구현 #24

🎟️ PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 리팩토링

Check List

• 🔀 PR 제목의 형식을 잘 작성했나요?
• 🏗️ yarn build는 성공했나요?
• 🧹 불필요한 코드는 제거했나요? (TODO, 주석, clg... etc.)
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?

✅ Key Changes

모바일 뷰에서 사용할 드롭다운 공통 컴포넌트를 생성했습니다

• 드롭다운 공통 컴포넌트 생성
• 드롭다운을 열고 닫을 수 있는 커스텀 훅 생성

📢 To Reviewers

이게 최선의 방법인지는 모르겠는데... 제가 생각하기에 드롭다운 내에서 확장성 있는 방향이라고 생각해서 이렇게 작업했습니다! 혹시 다른 더 좋은 방법 있으면... 코드리뷰 많이 남겨주세요

드롭다운 자체는 드롭다운 내 요소를 선택하거나 외부를 클릭하면 닫게 만들어두었습니다!

사용법 자체가 워낙 어려워서 mobile 페이지에 예시 두었습니다!

사용법을 간단하게 설명하면,

1. Dropdown 컴포넌트와 useDropdown 훅 import
2. 드롭다운에 들어갈 내용으로 [{title : 내용, func: 실행 함수}, {title : 내용, func: 실행 함수}] 형태의 배열 생성
3. const { showDropdown, hideDropdown, isDropdownVisible } = useDropdown();으로 커스텀 훅에서 함수 가져오기
4. 하단의 드롭다운 컴포넌트 사용법에 맞추어 드롭다운 컴포넌트 생성
5. 열고 싶을 때는 showDropdown, 닫고 싶을 때는 hideDropdown 함수 사용

드롭다운 컴포넌트 사용법

<Dropdown
        actions={dropdownActions}  // 필수
        isVisible={isDropdownVisible}  // 필수 (그냥 이대로 사용하면 됩니다)
        hideDropdown={hideDropdown}  // 필수 (그냥 이대로 사용하면 됩니다)
        positionClasses="top-5 right-5"  // 위치 지정(선택. 입력하지 않을 시 우측 상단에 위치합니다)
      />

코드를 조금 설명해두면

'use client';

import MobileLayout from '@/components/mobile/layout';

// Dropdown 컴포넌트와 useDropdown 훅 import 
import Dropdown from '@/components/mobile/Dropdown';
import useDropdown from '@/hooks/useDropdown';

export default function Mobile() {
  // 드롭다운 리스트 -> 드롭다운에 들어갈 것들 title은 드롭다운에 보이는 이름이고 func는 클릭하면 실행될 함수입니다
  const dropdownActions = [
    { title: '전체', func: () => console.log('전체') },
    { title: '대여 신청', func: () => console.log('대여 신청') },
    { title: '반납 신청', func: () => console.log('반납 신청') },
  ];
 
  // 드롭다운 보여주기, 숨기기, 보여주는 여부를 useDropdown 훅에서 가져오기
  //  hideDropdown, isDropdownVisible는 필수로 가져와야 합니다!
  const { showDropdown, hideDropdown, isDropdownVisible } = useDropdown();

  return (
    <MobileLayout>
      <Dropdown
        actions={dropdownActions}  // 필수
        isVisible={isDropdownVisible}  // 필수 (그냥 이대로 사용하면 됩니다)
        hideDropdown={hideDropdown}  // 필수 (그냥 이대로 사용하면 됩니다)
        positionClasses="top-5 right-5"  // 위치 지정(선택. 입력하지 않을 시 우측 상단에 위치합니다)
      />
  
      // 위에서 가져온 드롭다운 보여주는 함수 실행법
      <button type="button" onClick={showDropdown}>
        열기
      </button>
 
     // 닫는 함수 실행법. 외부를 선택하거나 요소 선택하면 닫히므로 필수적이지는 않음.
      <button type="button" onClick={hideDropdown}>
        닫기
      </button>
    </MobileLayout>
  );
}

📸 스크린샷