[Refactor/BAR-233] Dropdown 컴포넌트 수정

[dmswl98]

Summary

구현 내용 및 작업한 내역을 요약해서 적어주세요

• Dialog -> Dropdown 이름 변경
• useDisclosure hook 구현
• usePosition hook 구현
• useClickAway hook 구현
• (Card): useDisclosure hook을 이용해 리팩터링
• (Tooltip): useDisclosure, usePosition hook을 이용해 리팩터링
• (Dropdown): useDisclosure, usePosition, useClickAway을 이용해 리팩터링 및 trigger 요소와 결합해 작성 가능하도록 재구현
• (Header): Dropdown 컴포넌트 적용
• 컴포넌트 내부로 useContext hook 이동

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점을 적어주세요

• 기존에 직접 CSS로 Dropdown 컴포넌트 위치를 직접 조정했다면, 리팩토링을 통해 trigger 요소와 결합해 작성 가능하도록 구현했어요.

<Dropdown {...args}>
  <Dropdown.Trigger>버튼</Dropdown.Trigger>
  <Dropdown.List>
    <Dropdown.Item onClick={}>수정하기</Dropdown.Item>
    <Dropdown.Item onClick={}>삭제하기</Dropdown.Item>
  </Dropdown.List>
</Dropdown>

useDisclosure

boolean 상태를 관리하는 hook

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

useClickAway

ref 객체 외부를 클릭했을 때 실행해야할 이벤트를 설정할 수 있어요.

const ref = useClickAway({
  onClickAway: onClose,
});

usePosition

triggerRef를 기준으로 targetRef 요소를 위치시킬 position: { top, left } 위치값을 반환해요.

type Placement = "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right"

const { triggerRef, targetRef, position } = usePosition({
  isOpen,
  placement,
});

const { targetRef, position } = usePosition<HTMLDivElement, HTMLUListElement>(
  {
    defaultTriggerRef: triggerRef,
    isOpen,
    placement,
    fixed,
  },
);

• 제네릭을 이용해 ref 요소를 특정 태그로 설정할 수 있어요.
• usePosition hook 내부에서 ref(triggerRef)를 생성하지 않고, 기존 ref를 사용하고 싶다면 defaultTriggerRef prop을 사용하면 돼요.

How To Test

PR의 기능을 확인하는 방법을 상세하게 적어주세요

[github-actions]

🚀 storybook: https://65808d663dd3d83a46e24b57-ynneluegms.chromatic.com/

[miro-ring]

@dmswl98
어떤 기준으로 위치를 결정하는걸까요?

[dmswl98]

triggerRef 요소를 기준으로 targetRef 요소를 위치시킵니다!

[miro-ring]

수고하셧습니다!!!
그 디자인 시스템에 Dialog로 되어 있는 부분만 Dropdown으로 변경 요청 드려도 좋을 것 같아요!