Skip to content

[Feature] 에러 컴포넌트 ui 완성 #108

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.

Sign up for GitHub

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

Merged
yujin5959 merged 3 commits into from
Aug 14, 2025
Merged

[Feature] 에러 컴포넌트 ui 완성 #108

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c2736b
feat: 에러 컴포넌트 ui 완성
yujin5959 Aug 14, 2025
2c5dc12
fix: 피드백 기반 코드 수정
yujin5959 Aug 14, 2025
4935883
fix: 하드코딩 폰트 사이징 제거
yujin5959 Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/pages/common/Error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
import Button from '@/components/common/Button';

import AlertCircle from '@/assets/icons/alert-circle_Fill.svg?react';

export default function Error() {
return <div />;
return (
<>
<div className="flex flex-col items-center justify-center bg-white py-[100px] min-h-screen px-4">
<AlertCircle className="w-[130px] h-[130px] mb-[80px] text-default-gray-500" />
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.

Suggested change
<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.

<h1 className="text-3xl mb-[32px] text-default-gray-700 font-bold">서비스 이용에 불편을 드려 죄송합니다</h1>
<p className="text-l text-default-gray-500 text-center mb-[160px]">
요청하신 페이지를 찾을 수 없습니다 <br /> 경로가 잘못되었거나, 인터넷 연결이 불안정할 수 있습니다
</p>

<Button onClick={() => window.history.back()} size={'big-16'} variant={'mint'}>
이전 페이지로 돌아가기
</Button>
</div>
</>
);
}