툴팁 공통 컴포넌트

[leeminhee119]

툴팁 공통 컴포넌트 재작성

---

🏄🏼‍♂️‍ Summary (요약)

• 디자인 시스템을 모두 반영한 툴팁 공통 컴포넌트를 다시 작성했습니다.
• 새롭게 추가된 내용: 툴팁 위치, 트리거 클릭 시 사라지게 하기, 3초 후 사라지게 하기

→ 회고 생성 플로우 중 툴팁 위치가 부정확한 문제를 해결했습니다.

🫨 Describe your Change (변경사항)

🧐 Issue number and link (참고)

• 디자인 시스템 반영 #88

📚 Reference (참조)

2024-08-20.1.11.02.mov

Tooltip

• 툴팁 루트 프로바이더로, 작동에 필요한 상태들을 Context를 통해 아래로 전달합니다.

Tooltip.Trigger

• 툴팁을 띄울 기준이 되는 노드를 자식으로 작성합니다. (이하 '기준 노드')

Tooltip.Content

• 툴팁 컴포넌트

type Content = {
  message: string; // 툴팁 메시지
  animate?: boolean; // 애니메이션 적용 여부
  placement?: Extract<VariationPlacement, "top-start" | "top-end" | "bottom-start" | "bottom-end">; // 툴팁이 기준 노드 기준으로 어떤 방향에 위치할지
  modifiers?: Partial<OffsetModifier>[]; // 기타 popperjs 옵션
  offset?: [number, number]; // [x, y] 기준 노드 기준 x축, y축 방향 간격
  hideOnClick?: boolean; // 기준 노드 클릭 시 툴팁 숨길지에 대한 여부
};

• asChild와 함께 children을 전달하면 커스텀 컴포넌트를 툴팁으로 띄울 수 있습니다. 현재 디자인 시스템 상에서는 사용되지 않겠지만, 추후 발생할 수 있는 예외상황을 위해 작성했습니다.

사용 예시

              <Tooltip>
                <Tooltip.Trigger>
                  <Icon icon="ic_pencil" />
                </Tooltip.Trigger>
                <Tooltip.Content message="커스텀된 템플릿의 이름을 수정할 수 있어요!" placement="top-start" hideOnClick animate />
              </Tooltip>

(참고) placement

[klmhyeonwoo]

고생하셨습니다 : )
빌드만 잡아주시면 감사드려요!