Feat(client): 리마인드, 북마크 페이지 tooltip 구현#174
Merged
jjangminii merged 5 commits intodevelopfrom Oct 2, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough페이지 컴포넌트(MyBookmark, Remind)에 공용 Tooltip UI를 추가하고, 공유 경로에 신규 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page as Page (MyBookmark/Remind)
participant Tooltip as Tooltip
participant InfoCard as InfoCard
User->>Page: 페이지 로드
Page->>Tooltip: Tooltip 렌더링
User-->>Tooltip: info 버튼 호버/포커스
Note over Tooltip,InfoCard: CSS peer-hover / peer-focus-visible로 표시 전환
Tooltip->>InfoCard: InfoCard 표시 (visible)
User-->>Tooltip: 블러/마우스아웃
Tooltip->>InfoCard: InfoCard 숨김 (hidden)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/client/src/assets/card_img.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
apps/client/src/pages/myBookmark/MyBookmark.tsx(2 hunks)apps/client/src/pages/remind/Remind.tsx(2 hunks)apps/client/src/shared/components/tooltip/InfoCard.tsx(1 hunks)apps/client/src/shared/components/tooltip/Tooltip.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/client/src/shared/components/tooltip/Tooltip.tsx (1)
apps/client/src/shared/components/tooltip/InfoCard.tsx (1)
InfoCard(2-20)
apps/client/src/pages/myBookmark/MyBookmark.tsx (1)
apps/client/src/shared/components/tooltip/Tooltip.tsx (1)
Tooltip(4-29)
apps/client/src/pages/remind/Remind.tsx (1)
apps/client/src/shared/components/tooltip/Tooltip.tsx (1)
Tooltip(4-29)
Comment on lines
+12
to
+18
| <button | ||
| type="button" | ||
| aria-describedby="info-card" | ||
| className="peer rounded p-[0.4rem]" | ||
| > | ||
| <Icon name="ic_info" size={16} /> | ||
| </button> |
There was a problem hiding this comment.
아이콘 버튼 접근성 레이블 누락
Line [13]의 버튼은 아이콘만 포함하고 있어 스크린 리더에서 이름이 비어 있습니다. aria-label 등을 추가해 의도를 명확히 알려 주세요.
예:
- <button
- type="button"
- aria-describedby="info-card"
- className="peer rounded p-[0.4rem]"
- >
+ <button
+ type="button"
+ aria-describedby={infoCardId}
+ aria-label="메타데이터 안내 보기"
+ className="peer rounded p-[0.4rem]"
+ >Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/client/src/shared/components/tooltip/Tooltip.tsx around lines 12 to 18,
the icon-only button lacks an accessible name for screen readers; add an
explicit accessible label such as aria-label or aria-labelledby that describes
the button's purpose (preferably using a localized string from i18n or a prop),
keep aria-describedby if needed, and ensure the label accurately reflects the
tooltip/info action so the button is announced correctly by assistive
technologies.
Comment on lines
+20
to
+24
| <div | ||
| id="info-card" | ||
| className="pointer-events-none absolute left-0 top-[calc(100%+8px)] z-[100] opacity-0 transition-opacity duration-150 peer-hover:opacity-100 peer-focus-visible:opacity-100" | ||
| > | ||
| <InfoCard /> |
There was a problem hiding this comment.
고정 ID로 인한 중복 위험
Line [21]에서 id="info-card"를 하드코딩하면 Tooltip을 한 페이지에서 여러 번 사용할 때 DOM ID 충돌이 발생합니다. useId 등을 사용해 인스턴스마다 고유 값을 생성하거나 prop으로 받아 처리해 주세요.
예:
-import { Icon } from '@pinback/design-system/icons';
-import InfoCard from './InfoCard';
+import { Icon } from '@pinback/design-system/icons';
+import { useId } from 'react';
+import InfoCard from './InfoCard';
export default function Tooltip() {
+ const infoCardId = useId();
+
return (
@@
- <button
- type="button"
- aria-describedby="info-card"
+ <button
+ type="button"
+ aria-describedby={infoCardId}
className="peer rounded p-[0.4rem]"
>
@@
- <div
- id="info-card"
+ <div
+ id={infoCardId}
className="pointer-events-none absolute left-0 top-[calc(100%+8px)] z-[100] opacity-0 transition-opacity duration-150 peer-hover:opacity-100 peer-focus-visible:opacity-100"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div | |
| id="info-card" | |
| className="pointer-events-none absolute left-0 top-[calc(100%+8px)] z-[100] opacity-0 transition-opacity duration-150 peer-hover:opacity-100 peer-focus-visible:opacity-100" | |
| > | |
| <InfoCard /> | |
| // apps/client/src/shared/components/tooltip/Tooltip.tsx | |
| import { Icon } from '@pinback/design-system/icons'; | |
| import { useId } from 'react'; | |
| import InfoCard from './InfoCard'; | |
| export default function Tooltip() { | |
| const infoCardId = useId(); | |
| return ( | |
| <> | |
| <button | |
| type="button" | |
| aria-describedby={infoCardId} | |
| className="peer rounded p-[0.4rem]" | |
| > | |
| <Icon name="info" /> | |
| </button> | |
| <div | |
| id={infoCardId} | |
| className="pointer-events-none absolute left-0 top-[calc(100%+8px)] z-[100] opacity-0 transition-opacity duration-150 peer-hover:opacity-100 peer-focus-visible:opacity-100" | |
| > | |
| <InfoCard /> | |
| </div> | |
| </> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In apps/client/src/shared/components/tooltip/Tooltip.tsx around lines 20 to 24,
the Tooltip uses a hardcoded id="info-card" which can cause DOM ID collisions
when multiple Tooltips are rendered; replace the static id by generating a
unique id per instance (e.g., React's useId or a passed-in prop) and wire that
unique id into the element and any related aria/labeling usage so each Tooltip
instance has a distinct identifier.
jllee000
approved these changes
Oct 2, 2025
constantly-dev
approved these changes
Oct 2, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit