Feat(client): 온보딩 final-step 수정 #211
Merged
+19
−0
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughFinalStep.tsx 컴포넌트에 세 개의 새로운 이미지 import 및 설명 단락을 추가하고, 인라인 아이콘과 최종 일러스트레이션 이미지를 렌더링합니다. 컴포넌트의 공개 API는 변경되지 않습니다. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/client/public/assets/onBoarding/icons/ext.svgis excluded by!**/*.svgapps/client/public/assets/onBoarding/icons/pin.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-08T11:47:10.642Z
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
Applied to files:
apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
Comment on lines
+2
to
+4
| import finalImg from '/assets/onBoarding/story/final.webp'; | ||
| import extImg from '/assets/onBoarding/icons/ext.svg'; | ||
| import pinImg from '/assets/onBoarding/icons/pin.svg'; |
There was a problem hiding this comment.
아이콘·일러스트 이미지의 alt 텍스트를 더 의미 있게 다듬는 것을 권장합니다.
- Line 12–15:
alt="ext",alt="pin"은 영어 약칭이라 화면읽기 사용자가 무엇을 눌러야 하는지 이해하기 어렵습니다.- 예:
alt="브라우저 확장 프로그램 아이콘",alt="Pinback 확장 프로그램 아이콘"처럼 동작을 설명하거나, - 아이콘이 순수 장식이라면
alt=""와aria-hidden="true"를 주고 문장 안에 텍스트로 버튼 이름을 풀어 쓰는 것도 방법입니다.
- 예:
- Line 17:
alt="mac"역시 정보성이 부족합니다.- 단순 장식용 일러스트라면
alt=""로 스크린 리더에서 제외하는 것이 좋고, - 의미가 있다면
"Pinback 온보딩 일러스트"같이 화면 내용을 설명하는 한국어 문구가 더 적절합니다.
- 단순 장식용 일러스트라면
기능에는 영향 없지만, 접근성과 한국어 UX 측면에서 경미한 개선 포인트라 다음 번 UI 수정 시 함께 정리하면 좋겠습니다.
Also applies to: 10-17
🤖 Prompt for AI Agents
In apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx around
lines 10–17, the image alt texts are uninformative ("ext", "pin", "mac");
replace them with meaningful Korean descriptions that convey purpose (e.g.,
alt="브라우저 확장 프로그램 아이콘" or alt="Pinback 확장 프로그램 아이콘") or, if the images are
purely decorative, set alt="" and add aria-hidden="true"; ensure any action
buttons have visible textual labels in the markup rather than relying solely on
alt text so screen readers can communicate the action clearly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.