Tooltip

[developerjhp]

컴포넌트 기능 정의

Tooltip 컴포넌트는 사용자가 특정 UI 요소 위로 마우스를 가져가거나 클릭했을 때 추가 정보를 표시하는 작은 팝업 박스를 제공합니다.
주요 기능:

• Trigger 방식: hover 또는 click을 통해 툴팁 표시.
• 위치 설정: top, bottom, left, right 등 다양한 위치 지원.
• 동적 스타일링: gap, 색상, 패딩 등 스타일 커스터마이징 가능.
• 접근성: 키보드 네비게이션 및 role="tooltip"을 활용한 접근성 보장.

디자인 요구사항

• 8px 둥근 모서리 형태의 박스로 구성합니다.
• 배경색은 #000입니다.
• 텍스트는 #ffffff, 12px, regular 폰트 스타일을 사용합니다.
• 좌측 상단부터 top-left, top, top-right, bottom-left, bottom, bottom-right, left, right 위치에 렌더링 가능합니다.
• 툴팁은 화살표를 포함하며, 화살표의 색상은 툴팁의 배경색과 동일합니다.
• 내부 요소 간 간격은 12px입니다.
• 기본 패딩은 10px이며, 필요시 사용자 정의 가능합니다.

컴포넌트 스펙

• Tooltip: 툴팁 컴포넌트의 루트 요소입니다.
  • Props:
    • tooltipContent: 툴팁에 표시될 텍스트나 요소를 지정합니다. (필수)
    • placement: 툴팁의 위치를 설정합니다. 기본값은 top입니다. (옵션)
    • trigger: 툴팁 활성화 트리거(hover 또는 click)를 지정합니다. 기본값은 hover입니다. (옵션)
    • tooltipStyle: 커스텀 스타일을 지정할 수 있는 객체입니다. (옵션)
    • tooltipClassName: 커스텀 클래스를 지정합니다. (옵션)
    • gap: 툴팁과 트리거 요소 간의 간격입니다. 기본값은 8px입니다. (옵션)
    • asChild: true인 경우 자식 요소를 그대로 사용합니다. (옵션)
• useTooltip: 툴팁의 위치와 가시성을 제어하기 위한 커스텀 훅입니다.
  • Parameters:
    • placement: 툴팁의 위치 지정 (top, bottom, left, right).
    • gap: 툴팁과 트리거 요소 간의 간격.
    • trigger: 툴팁 활성화 방식 (hover 또는 click).
  • Returns:
    • isVisible: 툴팁의 가시성을 나타내는 상태값.
    • toggleTooltip: 툴팁 가시성을 토글하는 함수.
    • tooltipStyles: 툴팁 위치를 지정하는 스타일 객체.
    • wrapperRef: 트리거 요소의 참조 객체.
    • tooltipRef: 툴팁 요소의 참조 객체.
    • handleKeyDown: 키보드 이벤트 핸들러.

기술적 고려사항

• 툴팁은 document.body에 포탈로 렌더링되어야 합니다.
• 화면 경계 밖으로 벗어나지 않도록 툴팁 위치를 동적으로 조정해야 합니다.
• 키보드 접근성을 지원하기 위해 tabIndex와 키보드 이벤트 핸들링을 고려합니다.
• 툴팁은 Escape 키를 눌러 닫을 수 있어야 합니다.

참고 자료

추가 논의사항

• 모바일 지원(touch 이벤트)을 고려중입니다.