feat: Tooltip 컴포넌트 제작

[ssolfa]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved feat: tooltip 컴포넌트 제작 #6

2025-02-02.5.15.47.mov

Tooltip 컴포넌트를 제작했습니다.

Tooltip props 설명

position: 'top' | 'bottom' | 'left' | 'right' // 툴팁 위치 상하좌우
offset: number // 툴팁 거리 조절

• offset prop으로 거리 조절 가능 (기본값: 10px)
• 기본적으로 상단에 표시되며 position prop으로 위치 변경 가능

이런식으로 위치 변경 가능합니당

기존 코드에 영향을 미치는 변경사항

dialog 컴포넌트의 css도 Handy에 정의된 상수 값을 사용하는 걸로 수정했습니다!
리뷰 감사합니당

2️⃣ 알아두시면 좋아요!

Table 컴포넌트의 편집 아이콘에 Tooltip 적용하려면 이렇게 수정하면 됩니다

기존 코드

{
  !specialCols.includes(cell.column.id) &&
  <StyledEditIcon>
      <IcEditLine width={20} height={20}/>
  </StyledEditIcon>
}

Tooltip 사용 코드

{!specialCols.includes(cell.column.id) && (
  <StyledEditIcon>
    <Tooltip
      content={`${cell.row.original.name} 정보 수정`}
    >
      <IcEditLine width={20} height={20} />
    </Tooltip>
  </StyledEditIcon>
)}

이렇게 각 행의 이름과 연동해서 "[이름] 정보 수정" 텍스트를 표시해주면 돼욤

3️⃣ 추후 작업

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?