[Feat] ToolTip 컴포넌트 구현 #285

rtttr1 · 2024-10-21T15:29:40Z

해당 이슈 번호

closed #276

체크리스트

📌 내가 알게 된 부분

left, bottom, top, right의 기준점은 각 방향의 테두리이다.
즉, left 이동을 할때의 기준은 부모의 왼쪽 테두리이고, bottom 이동을 할때는 부모의 아래 테두리가 기준이 된다.
left, bottom, top, right의 % 값은 기준이 되는 부모의 width, height값의 % 이다.
즉, left: 100% 는 왼쪽 border를 기준으로 부모의 width 만큼 이동한거다

💎 PR Point

접근성 챙겨주는 리펙토링 했습니다!
tab 키로 tooltip 접근, escape 키로 tooltip 없앨 수 있습니다. 스토리북에서 체험해보세요!
해당 내용 아티클에서 자세하게 확인 가능합니다.

간단한 아티클로 대체하겠습니다.

🍀사용법

호버시 ToolTip을 띄어줄 컴포넌트를 ToolTip 공컴으로 감싸주고 적절한 prop을 넘겨주면 된다.

position: ToolTip을 띄워줄 방향 설정 left, right, bottom, top 네방향만 우선 구현, 추후 방향 추가시 나머지 방향 추가 예정
message: ToolTip에 보여줄 추가 정보
margin: 화살표 끝을 기준으로 기준 컴포넌트에서 간격을 띄워주고 싶을 때 사용. 기준은 rem

<ToolTip message='추가 정보' position= 'right' gap=0.8>
    <Component/>
</ToolTip>

트러블 슈팅

위의 사진 한장으로 모든 트러블 슈팅이 드러난다.

영어는 가로로 글이 써지는데 한글은 세로로 글이 써진다.
서브픽셀 랜더링 현상으로 각각 다른 컴포넌트인 화살표와 span 태그사이에 간격이 생긴다.

1번 문제는 width: ‘max-content’ 속성으로 쉽게 해결했다.

2번 문제가 오랫동안 나를 괴롭혔는데 최종적으로 해결방법은 1px 을 빼주는 것이었다.

서브픽셀 랜더링의 원인은 브라우저가 소수점을 계산하지 못해서 일어나는 현상이다. 즉, 오차가 1px 보다 클 수가 없다. 따라서 화살표 svg의 위치를 잡을 때 transform 속성을 사용하여 원래 위치해야 하는 곳에서 1px을 덜 움직여 주었다.

const style = {
    top: css({
      left: '50%',
      top: 'calc(100%)',
      // translateY(-1px)을 통해 소수점 간격 없애주기
      transform: `translateX(-50%) translateY(-1px) rotate(270deg)`,
    }),
}

해당 방법을 사용하니 대부분의 경우에 문제가 해결되었지만 사파리에서 화면을 극도로 축소하면 다시 간격이 벌어지는 것을 확인했다. 추후에 리펙토링을 한번 해야할 것 같다.

📌스크린샷 (선택)

storybook 확인해주세요~

github-actions · 2024-10-21T15:31:51Z

🚀 Storybook 확인하기 🚀

namdaeun

고생많으셨슴다 !! 언어에 따른 툴팁 이슈만 해결해주심 될 것 같아요 LGTM 🚀

namdaeun · 2024-10-21T15:44:05Z

src/common/component/ToolTip/ToolTip.style.ts

+export const arrowStyle = css({
+  position: 'absolute',
+});


툴팁 내용이 많아지는 경우 svg크기가 줄어들더라고요 !
flexShrink: 0으로 해결할 수 있을 것 같은데 한 번 수정해보시면 좋을 것 같아요

namdaeun · 2024-10-21T15:50:27Z

src/common/component/ToolTip/ToolTip.tsx

+  margin?: number;
+}
+
+const ToolTip = ({ position = 'right', message, margin = 0, children }: ToolTipProps) => {


...props 추가해 줍시다 ~!

namdaeun · 2024-10-21T15:53:41Z

src/common/component/ToolTip/ToolTip.style.ts

+export const containerStyle = css({
+  position: 'relative',
+  border: '1px solid',
+  '&:hover': {


필수는 아니고 제 욕심 ..? 인데
transition 넣으면 더 부드럽게 뜰 것 같아요

이건 아마 디자이너분들과 얘기해봐야겠네요

wuzoo

고생하셨고, 수정하실거 수정하시면 다시한번 보겠습니답 !

wuzoo · 2024-10-21T16:07:13Z

src/common/component/ToolTip/ToolTip.style.ts

+export const containerStyle = css({
+  position: 'relative',
+  border: '1px solid',
+  '&:hover': {


이건 아마 디자이너분들과 얘기해봐야겠네요

Bowoon1216

아티클을 보니 고민의 흔적이 보입니다
까다로워 보이는 구조인데 넘 수고 많으셨어요 !! 👍

…iki/TIKI_CLIENT into feature/tiki/#276-tooltip

github-actions · 2024-10-23T07:04:20Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-10-23T07:15:32Z

🚀 Storybook 확인하기 🚀

wuzoo

고생하셨습니다 ! 뀨 홍 !

wuzoo · 2024-10-24T05:10:39Z

src/common/component/ToolTip/ToolTip.tsx

+
+const ToolTip = ({ position = 'right', message, margin = 0, children, ...props }: ToolTipProps) => {
+  return (
+    <div css={containerStyle}>


aria role을 통해 부가적인 설명해주어도 좋을 것 같아요 ! role=tooltip도 존재하니까 이거 사용하면 될 것 같습니다. 그리고 children 요소에게 cloneElement하여서 aria-describeby: message 부여하고 툴팁의 div요소에는 id=message 추가해주면 아주 좋을 것 같아요 !
요고 참고해보시면 좋을 것 같습니다.

wuzoo · 2024-10-24T05:10:58Z

src/common/component/ToolTip/ToolTip.tsx

+export interface ToolTipProps extends HTMLAttributes<HTMLSpanElement> {
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  message: string;
+  margin?: number;


마진보다는 gap ??이 더 와닿는 것 같은데 다른 분들 생각은 어떠신지

동의합니다.

namdaeun

이슈 해결하느라 고생 많으셨습니다 !

github-actions · 2024-10-24T07:04:02Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-10-24T07:16:23Z

🚀 Storybook 확인하기 🚀

wuzoo · 2024-10-24T07:57:48Z

src/common/component/ToolTip/ToolTip.tsx

+
+  return (
+    <div
+      id={message}


aria-describeby를 id 대신 넣어주어야할것 같아요 !! id는 tooltip인 span에다가 넣어주어야할 것 같습니다 ㅎㅎ

tabIndex로 컨테이너 요소가 포커스될 때 tooltip 나오게 하는거 너무 좋아요 ! 다만 현재 tooltip에 컨테이너 요소와 함께 outline이 생겨서, 컨테이너 요소만 아웃라인 생기게 해주시면 좋을 것 같슴다 !

github-actions · 2024-10-24T16:56:07Z

🚀 Storybook 확인하기 🚀

rtttr1 added 5 commits October 21, 2024 22:23

docs: svg 추가

92ec149

feat: ToolTip 공통 컴포넌트 구현

8605c2e

style: ToolTip style 구현

11e126f

feat: storybook 작성

c280cc1

Merge branch 'develop' into feature/tiki/#276-tooltip

67abfec

rtttr1 added ✨Feature 🍭규홍 labels Oct 21, 2024

rtttr1 requested review from namdaeun, cindy-chaewon, Bowoon1216 and wuzoo October 21, 2024 15:29

rtttr1 self-assigned this Oct 21, 2024

namdaeun reviewed Oct 21, 2024

View reviewed changes

wuzoo reviewed Oct 21, 2024

View reviewed changes

Bowoon1216 approved these changes Oct 23, 2024

View reviewed changes

rtttr1 added 3 commits October 23, 2024 15:50

chore: 사고 수습

d3358a8

fix: 코드리뷰 반영

cba187a

Merge branch 'feature/tiki/#276-tooltip' of https://github.com/Team-T…

9dfbaa4

…iki/TIKI_CLIENT into feature/tiki/#276-tooltip

style: UX를 고려한 delay 적용

41d537a

wuzoo approved these changes Oct 24, 2024

View reviewed changes

namdaeun approved these changes Oct 24, 2024

View reviewed changes

rtttr1 added 2 commits October 24, 2024 14:58

feat: aria 로 접근성 챙기기

23a399f

feat: state 사용으로 키보드 이벤트까지 구현

ea155f5

fix: 네이밍 수정

c61e881

wuzoo reviewed Oct 24, 2024

View reviewed changes

fix: 코드리뷰 반영

82bd7b3

rtttr1 merged commit a5868a8 into develop Oct 24, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] ToolTip 컴포넌트 구현 #285

[Feat] ToolTip 컴포넌트 구현 #285

rtttr1 commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024

namdaeun left a comment

namdaeun Oct 21, 2024

namdaeun Oct 21, 2024

namdaeun Oct 21, 2024

wuzoo Oct 21, 2024

wuzoo left a comment

wuzoo Oct 21, 2024

Bowoon1216 left a comment

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024

wuzoo left a comment

wuzoo Oct 24, 2024

wuzoo Oct 24, 2024

rtttr1 Oct 24, 2024

namdaeun left a comment

github-actions bot commented Oct 24, 2024

github-actions bot commented Oct 24, 2024

wuzoo Oct 24, 2024

github-actions bot commented Oct 24, 2024

[Feat] ToolTip 컴포넌트 구현 #285

[Feat] ToolTip 컴포넌트 구현 #285

Conversation

rtttr1 commented Oct 21, 2024 • edited Loading

해당 이슈 번호

체크리스트

📌 내가 알게 된 부분

💎 PR Point

🍀사용법

트러블 슈팅

📌스크린샷 (선택)

github-actions bot commented Oct 21, 2024

namdaeun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wuzoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bowoon1216 left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024

wuzoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namdaeun left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 24, 2024

github-actions bot commented Oct 24, 2024

Choose a reason for hiding this comment

github-actions bot commented Oct 24, 2024

rtttr1 commented Oct 21, 2024 •

edited

Loading