Feat(client): 온보딩 final-step 수정 #210
Closed
+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.
|
|
✅ Storybook chromatic 배포 확인: |
WalkthroughonBoarding final 스텝 UI를 업데이트하여 세 개의 새로운 이미지를 import하고, 인라인 아이콘이 포함된 설명 텍스트 단락과 최종 이미지 요소를 추가했습니다. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (4 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 |
![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
🧹 Nitpick comments (1)
apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx (1)
10-16: 인라인 이미지의 접근성과 반응형 레이아웃을 고려해보세요.텍스트 내부에 이미지를
inline-block으로 배치한 구현이 잘 작동하고 있습니다. 다만 다음 사항들을 검토해보시면 좋을 것 같습니다:
- 인라인 아이콘이 작은 화면에서도 텍스트와 잘 정렬되는지 확인
- 장식적 목적이라면
alt=""사용을 고려하거나, 현재처럼 설명적인 alt 텍스트를 유지- 매우 구체적인 여백 값(
mx-[0.39rem])이 의도적인 디자인인지 확인
📜 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
🔇 Additional comments (1)
apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx (1)
2-4: 이미지 파일 경로 확인 완료 - 모든 파일이 올바르게 존재합니다.다음의 이미지 파일들이 모두 정상적으로 존재하고 적절하게 최적화되어 있습니다:
final.webp(66K): WebP 형식으로 효율적으로 최적화됨ext.svg(1.5K): 소형 SVG 아이콘pin.svg(387B): 소형 SVG 아이콘임포트 경로가 올바르고 PR 목표의 이미지 포맷 최적화가 이루어진 상태입니다.
| <img src={pinImg} className="mx-[0.39rem] inline-block" alt="pin" />을 | ||
| 선택하여 북마크를 빠르게 저장해보세요 | ||
| </p> | ||
| <img src={finalImg} className="" alt="mac" /> |
There was a problem hiding this comment.
이미지의 alt 텍스트를 개선하고 불필요한 속성을 제거하세요.
다음 개선사항을 고려해주세요:
- 빈
className=""은 불필요하므로 제거 - alt 텍스트 "mac"이 이미지 내용을 충분히 설명하지 못함 (예: "온보딩 완료 화면" 등으로 개선)
- 명시적인 width/height 속성 추가를 고려하여 레이아웃 시프트 방지
다음 diff를 적용하여 개선할 수 있습니다:
- <img src={finalImg} className="" alt="mac" />
+ <img src={finalImg} alt="온보딩 완료 화면" />📝 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
| <img src={finalImg} className="" alt="mac" /> | |
| <img src={finalImg} alt="온보딩 완료 화면" /> |
🤖 Prompt for AI Agents
In apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx around
line 17, remove the empty className attribute, replace the vague alt="mac" with
a more descriptive alt like "온보딩 완료 화면" (or another succinct Korean description
of the image), and add explicit width and height attributes (or appropriate
layout props) to prevent layout shift; update the JSX accordingly so the element
no longer contains className="" and includes the improved alt plus explicit
dimensions.
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.