[Feature] 에러 컴포넌트 ui 완성 #108
Conversation
Summary by CodeRabbit
WalkthroughError 컴포넌트의 placeholder 반환을 실제 에러 UI로 교체했습니다. AlertCircle 아이콘과 Button을 임포트하고, 한글 제목·설명·버튼 텍스트 및 중앙 정렬 레이아웃을 추가했으며 버튼 클릭 시 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant ErrorPage as Error.tsx
participant Browser as 브라우저
User->>ErrorPage: 에러 페이지 진입
ErrorPage-->>User: 경고 아이콘, 안내 문구, "이전 페이지로 돌아가기" 버튼 표시
User->>ErrorPage: 버튼 클릭
ErrorPage->>Browser: window.history.back()
Browser-->>User: 이전 페이지로 복귀
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Possibly related issues
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🧰 Additional context used🧬 Code Graph Analysis (1)src/pages/common/Error.tsx (3)
🪛 Biome (2.1.2)src/pages/common/Error.tsx[error] 5-5: Do not shadow the global "Error" property. Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global. (lint/suspicious/noShadowRestrictedNames) 🔇 Additional comments (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/pages/common/Error.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/common/Error.tsx (6)
src/components/common/Button.tsx (1)
Button(14-42)src/components/home/info.tsx (1)
MainInfo(10-63)src/pages/auth/RedirectPage.tsx (1)
err(42-48)src/pages/RedirectPage.tsx (1)
err(39-45)src/pages/auth/LoginPage.tsx (1)
err(57-60)src/pages/auth/FindPw.tsx (1)
err(117-119)
🪛 Biome (2.1.2)
src/pages/common/Error.tsx
[error] 5-5: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
| return ( | ||
| <> | ||
| <div className="flex flex-col items-center justify-center bg-white py-[100px]"> | ||
| <AlertCircle className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" /> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
접근성: 데코레이티브 아이콘은 스크린리더에서 숨기기
경고 아이콘이 정보 전달용 텍스트를 따로 제공하는 경우, 아이콘 자체는 스크린리더에서 숨기는 것이 좋습니다.
- <AlertCircle className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" />
+ <AlertCircle aria-hidden="true" focusable="false" className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" />📝 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.
| <AlertCircle className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" /> | |
| <AlertCircle | |
| aria-hidden="true" | |
| focusable="false" | |
| className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" | |
| /> |
🤖 Prompt for AI Agents
In src/pages/common/Error.tsx around line 9, the AlertCircle SVG is decorative
and should be hidden from screen readers; update the AlertCircle element to
include accessibility attributes such as aria-hidden="true" and
focusable="false" (or role="presentation") so it is ignored by assistive tech,
and ensure the surrounding markup provides the necessary accessible text (e.g.,
a visible heading or descriptive aria-label on the container) so screen reader
users still receive the warning message.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (3)
src/pages/common/Error.tsx (3)
5-5: 전역 Error 섀도잉 — 컴포넌트명을 ErrorPage로 변경 권장Biome가 지적한 대로 전역
Error객체를 섀도잉하고 있어 혼동과 잠재적 이슈가 있습니다. 기본 내보내기라 외부 영향은 거의 없으니 컴포넌트명을 바꾸는 편이 안전합니다.-export default function Error() { +export default function ErrorPage() {
9-9: 접근성: 데코레이티브 아이콘은 스크린리더에서 숨기기의미 텍스트가 따로 있으므로 아이콘은 보조기술에서 감추는 게 좋습니다.
- <AlertCircle className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" /> + <AlertCircle aria-hidden="true" focusable="false" className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" />
11-13: Tailwind 클래스(text-l) 및 문장부호·공백 정리 제안기본 Tailwind에는
text-l스케일이 없을 가능성이 높습니다. 또한 문장부호와<br />주변 공백을 다듬으면 가독성이 좋아집니다.- <p className="text-l text-default-gray-500 text-center mb-[160px]"> - 요청하신 페이지를 찾을 수 없습니다 <br /> 경로가 잘못되었거나, 인터넷 연결이 불안정할 수 있습니다 + <p className="text-lg text-default-gray-500 text-center mb-[160px]"> + 요청하신 페이지를 찾을 수 없습니다.<br />경로가 잘못되었거나 인터넷 연결이 불안정할 수 있습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/pages/common/Error.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/common/Error.tsx (5)
src/components/common/Button.tsx (1)
Button(14-42)src/pages/auth/FindPw.tsx (1)
err(117-119)src/pages/auth/LoginPage.tsx (1)
err(57-60)src/pages/auth/RedirectPage.tsx (1)
err(42-48)src/pages/RedirectPage.tsx (1)
err(39-45)
🪛 Biome (2.1.2)
src/pages/common/Error.tsx
[error] 5-5: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (2)
src/pages/common/Error.tsx (2)
8-8: 세로 중앙 정렬 보장(min-h-screen/px-4) 적용 — 좋습니다
min-h-screen과px-4추가로 레이아웃 견고성이 좋아졌습니다.
10-10: 시맨틱 마크업 개선(h1) — 좋습니다메인 제목을 h1으로 표기한 점이 접근성 측면에서 적절합니다.
|
딱히 문제 없으니까 bypass 로 머지하겠습니다!! |
넵! |
🚨 관련 이슈
#107
✨ 변경사항
✏️ 작업 내용
에러 컴포넌트 ui 제작 완료
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항