-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Tooltip 컴포넌트 제작 #7
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
깔끔하네유 이 이슈랑은 상관 없는거긴 한데 테이블에 행이 굉장히 적을 때 StateButton이 테이블 뒤로 숨어버리는 문제가 있어요... css 수정 해가지고는 해결이 안되어서 ref로 Dialog가 Button을 따라가게? 해야할 거 같아요
그게 아마 여기에서 말했던 문제 중에 하나일 것 같은데 흠ㅎ 흠 흠 일단 고쳐보고 여기에 커밋해볼게욤 |
이 글의 내용과 제가 조사한 바에 따르면 GenericDialog가 |
일단 늦은 수정 ㅠㅠ 죄송함다 제롬 말대로
컴포넌트가 테이블 내부에 갇히는 문제를 해결하기 위해 렌더링 위치를 DOM 계층구조 상 document.body 직접 하위로 이동해야 했고 이를 위해 createPortal을 사용했습니ㄷㅏ fix: Dialog 컴포넌트 최상단 고정 배치를 위해 createPortal을 사용한 버그 수정 주요 변경사항
![]()
코드 동작 흐름
입니다 적용 후 영상2025-02-08.3.23.20.mov |
1️⃣ 어떤 작업을 했나요? (Summary)
2025-02-02.5.15.47.mov
Tooltip 컴포넌트를 제작했습니다.
Tooltip props 설명
이런식으로 위치 변경 가능합니당
기존 코드에 영향을 미치는 변경사항
dialog 컴포넌트의 css도 Handy에 정의된 상수 값을 사용하는 걸로 수정했습니다!
리뷰 감사합니당
2️⃣ 알아두시면 좋아요!
Table 컴포넌트의 편집 아이콘에 Tooltip 적용하려면 이렇게 수정하면 됩니다
기존 코드
Tooltip 사용 코드
이렇게 각 행의 이름과 연동해서 "[이름] 정보 수정" 텍스트를 표시해주면 돼욤
3️⃣ 추후 작업
4️⃣ 체크리스트 (Checklist)
main
브랜치의 최신 코드를pull
받았나요?