Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new Tooltip component with rich content support and integrates it into Storybook for visual testing, while also updating the demo in App.tsx.
- Introduce
Tooltipcomponent with customizable position, color, and content - Expand
contentprop to support React nodes, and fix visual gap bug in arrow alignment - Add Storybook stories covering positions, colors, long text, rich content, and disabled triggers
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/libs/tooltip/Tooltip.type.ts | Add TooltipProps interface (needs content type update) |
| src/libs/tooltip/Tooltip.tsx | Implement tooltip rendering, hover/focus handlers |
| src/libs/tooltip/Tooltip.stories.tsx | Add Storybook scenarios for tooltip use cases |
| src/libs/tooltip/Tooltip.module.css | Define positioning and arrow styles, fix gap hack |
| src/App.tsx | Integrate Tooltip component in demo layout |
|
|
||
| export interface TooltipProps { | ||
| content: string; |
There was a problem hiding this comment.
The content prop is currently typed as string but the stories pass JSX (React.ReactNode). Change the type to React.ReactNode to allow rich content.
| export interface TooltipProps { | |
| content: string; | |
| import React from 'react'; | |
| export interface TooltipProps { | |
| content: React.ReactNode; |
| style, | ||
| }) => { | ||
| const [visible, setVisible] = useState(false); | ||
| const wrapperRef = useRef<HTMLDivElement>(null); |
There was a problem hiding this comment.
[nitpick] The wrapperRef is created but never used in this component. Consider removing it or using it for positioning logic to keep the code clean.
| const wrapperRef = useRef<HTMLDivElement>(null); | |
| // Removed unused wrapperRef to clean up the code. |
| > | ||
| {children} | ||
| {visible && ( | ||
| <div className={tooltipClass} style={style} role="tooltip"> |
There was a problem hiding this comment.
For proper accessibility, add a unique id to this tooltip and set aria-describedby on the trigger element to link them.
| > | |
| {children} | |
| {visible && ( | |
| <div className={tooltipClass} style={style} role="tooltip"> | |
| aria-describedby={visible ? tooltipId : undefined} | |
| > | |
| {children} | |
| {visible && ( | |
| <div id={tooltipId} className={tooltipClass} style={style} role="tooltip"> |
| transform: translateY(-50%); | ||
| border-top: 10px solid transparent; | ||
| border-bottom: 10px solid transparent; | ||
| border-left: 12px solid #181F24; |
There was a problem hiding this comment.
[nitpick] Hex color codes are mixed case; consider normalizing to lowercase (#181f24) to match the rest of the stylesheet.
| border-left: 12px solid #181F24; | |
| border-left: 12px solid #181f24; |
1️⃣ 어떤 작업을 했나요? (Summary)
신규 툴팁(Tooltip) 컴포넌트를 구현하고 Storybook을 연동하여 다양한 사용 사례에 대한 테스트 환경을 구축했습니다.
resolved: #39
기존 코드에 영향을 미치지 않는 변경사항
툴팁 컴포넌트 추가: Tooltip.tsx, Tooltip.module.css
Storybook 연동: Tooltip.stories.tsx 파일을 추가하여 컴포넌트의 시각적 테스트 케이스를 구축했습니다.
위치, 색상, 긴 텍스트, 비활성화 요소 등 다양한 상황에 대한 스토리를 추가했습니다.
기존 코드에 영향을 미치는 변경사항
content prop 타입 변경: 기존 string 타입에서 React.ReactNode로 변경하여 툴팁 내부에 JSX와 같은 리치 콘텐츠를 렌더링할 수 있도록 확장했습니다.
버그 픽스
UI 깨짐 현상 수정: 좌/우(left/right) 포지션에서 화살표와 본문 사이에 보이던 1px의 미세한 틈새(gap)를 수정했습니다.
2️⃣ 알아두시면 좋아요!
리치 콘텐츠 지원: content prop에
비활성화 요소 처리: disabled된 버튼과 같이 마우스 이벤트를 받지 못하는 요소는 태그 등으로 감싸야 툴팁이 정상적으로 동작합니다. (OnDisabledElement 스토리 참고)
3️⃣ 추후 작업
자동 위치 조정: 툴팁이 화면 경계를 벗어날 경우 자동으로 위치를 조정하는 기능을 추가
접근성(a11y) 개선: aria-describedby 등을 활용하여 트리거 요소와 툴팁을 프로그래매틱하게 연결하는 방안 고려 필요
4️⃣ 체크리스트 (Checklist)
[ ] dev 브랜치의 최신 코드를 pull 받았나요?