feat/119 404, 에러 페이지 제작 #120
Merged
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
Closed
2 tasks
Walkthrough새로운 전체 화면 에러 페이지 React 컴포넌트가 추가되었고, 기존 NotFound 페이지의 레이아웃과 스타일이 개선되었습니다. 또한, tsconfig.json 파일에서 마지막 줄 개행이 제거되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ErrorPage
participant Browser
User->>ErrorPage: 에러 발생 시 접근
ErrorPage->>User: "OPPS!" 메시지, 안내문, 홈으로 돌아가기 버튼 표시
User->>ErrorPage: 홈으로 돌아가기 버튼 클릭
ErrorPage->>Browser: window.location.href = "/"
Browser->>User: 홈(메인 페이지)로 이동
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related issues
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
src/app/not-found.tsx (1)
8-8: 백그라운드 이미지 파일 존재 확인 필요동일한 백그라운드 이미지를 사용하고 있습니다. 파일 존재 여부를 확인해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
public/assets/img/404-image.pngis excluded by!**/*.png
📒 Files selected for processing (3)
src/app/error.tsx(1 hunks)src/app/not-found.tsx(1 hunks)tsconfig.json(1 hunks)
🔇 Additional comments (2)
tsconfig.json (1)
36-36: 파일 끝 개행 제거 확인 필요파일 끝 개행 문자가 제거되었습니다. 프로젝트의 ESLint/Prettier 설정이 이 변경사항과 일치하는지 확인해주세요.
src/app/error.tsx (1)
8-8: 백그라운드 이미지 경로 확인 완료
public/assets/img/404-image.png파일이 존재함을 확인했습니다.- 경로가 올바르므로 추가 조치는 필요 없습니다.
|
|
||
| import Button from '@/components/Button'; | ||
|
|
||
| export default function errorPage() { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
컴포넌트 함수명 규칙 준수 필요
React 컴포넌트 함수는 Pascal case를 사용해야 합니다.
-export default function errorPage() {
+export default function ErrorPage() {📝 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
| export default function errorPage() { | |
| -export default function errorPage() { | |
| +export default function ErrorPage() { |
🤖 Prompt for AI Agents
In src/app/error.tsx at line 5, the React component function name 'errorPage'
does not follow the PascalCase naming convention. Rename the function to
'ErrorPage' to comply with React component naming standards.
Comment on lines
+17
to
+23
| <Button | ||
| className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base" | ||
| variant="primary" | ||
| onClick={() => (window.location.href = '/')} | ||
| > | ||
| 홈으로 돌아가기 | ||
| </Button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
라우팅 방식 개선 및 스타일 중복 제거 필요
window.location.href대신 Next.js의 라우터 사용을 권장합니다.- Button 컴포넌트의 variant와 className에 중복된 스타일이 있습니다.
+'use client';
+
+import { useRouter } from 'next/navigation';
import Button from '@/components/Button';
export default function ErrorPage() {
+ const router = useRouter();
+
return (
// ... other code
<Button
- className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base"
+ className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-opacity duration-300"
variant="primary"
- onClick={() => (window.location.href = '/')}
+ onClick={() => router.push('/')}
>
홈으로 돌아가기
</Button>🤖 Prompt for AI Agents
In src/app/error.tsx around lines 17 to 23, replace the use of
window.location.href with Next.js router's navigation method to handle routing
properly. Import and use the useRouter hook from 'next/router' and call
router.push('/') inside the onClick handler. Additionally, review the Button
component's variant and className props to remove overlapping styles by
consolidating styles either in the variant or className to avoid duplication.
Comment on lines
+7
to
+26
| <main | ||
| className="relative flex h-screen w-screen items-center justify-center px-10 md:justify-end bg-none md:bg-[url('/assets/img/404-image.png')] bg-no-repeat bg-cover md:bg-center" | ||
| > | ||
| <div className="relative z-10 w-full max-w-1200 mx-auto px-6 md:px-12 flex justify-center md:justify-end"> | ||
| <div className="flex flex-col items-center md:items-start gap-8 md:gap-20 text-center md:text-left max-w-xl"> | ||
| <h1 className="text-5xl md:text-8xl font-extrabold text-nomad">404 ERROR</h1> | ||
| <p className="text-base md:text-xl text-nomad mb-6 leading-relaxed"> | ||
| 존재하지 않는 주소를 입력하셨거나,<br /> | ||
| 요청하신 페이지의 주소가 변경 또는 삭제되었을 수 있습니다. | ||
| </p> | ||
| <Button | ||
| className='cursor-pointer rounded-lg border border-gray-300 bg-gray-700 py-4 text-xl font-bold text-gray-100 transition-colors hover:bg-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none' | ||
| variant='primary' | ||
| className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base" | ||
| variant="primary" | ||
| onClick={() => (window.location.href = '/')} | ||
| > | ||
| 홈으로 돌아가기 | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
코드 중복 제거를 위한 공통 컴포넌트 추출 권장
error.tsx와 not-found.tsx가 거의 동일한 구조와 스타일을 공유하고 있습니다. 유지보수성 향상을 위해 공통 에러 페이지 컴포넌트로 추출하는 것을 권장합니다.
공통 컴포넌트 예시:
// src/components/ErrorPageLayout.tsx
interface ErrorPageLayoutProps {
title: string;
message: string;
}
export default function ErrorPageLayout({ title, message }: ErrorPageLayoutProps) {
const router = useRouter();
return (
<main
className="relative flex h-screen w-screen items-center justify-center px-10 md:justify-end bg-none md:bg-[url('/assets/img/404-image.png')] bg-no-repeat bg-cover md:bg-center"
>
<div className="relative z-10 w-full max-w-1200 mx-auto px-6 md:px-12 flex justify-center md:justify-end">
<div className="flex flex-col items-center md:items-start gap-8 md:gap-20 text-center md:text-left max-w-xl">
<h1 className="text-5xl md:text-8xl font-extrabold text-nomad">{title}</h1>
<p className="text-base md:text-xl text-nomad mb-6 leading-relaxed">
{message}
</p>
<Button
className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-opacity duration-300"
variant="primary"
onClick={() => router.push('/')}
>
홈으로 돌아가기
</Button>
</div>
</div>
</main>
);
}🤖 Prompt for AI Agents
In src/app/not-found.tsx around lines 7 to 26, the code duplicates the structure
and styling found in error.tsx. To improve maintainability, extract the shared
layout into a common ErrorPageLayout component that accepts title and message as
props. Replace the current JSX in not-found.tsx with this new component, passing
the appropriate title and message, and update the button's onClick to use
router.push('/') for navigation.
Comment on lines
17
to
23
| <Button | ||
| className='cursor-pointer rounded-lg border border-gray-300 bg-gray-700 py-4 text-xl font-bold text-gray-100 transition-colors hover:bg-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none' | ||
| variant='primary' | ||
| className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base" | ||
| variant="primary" | ||
| onClick={() => (window.location.href = '/')} | ||
| > | ||
| 홈으로 돌아가기 | ||
| </Button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
라우팅 방식 개선 및 스타일 중복 제거 필요
error.tsx와 동일한 이슈가 있습니다:
window.location.href대신 Next.js 라우터 사용 권장- Button 컴포넌트의 스타일 중복 제거 필요
+'use client';
+
+import { useRouter } from 'next/navigation';
import Button from '@/components/Button';
export default function NotFoundPage() {
+ const router = useRouter();
+
return (
// ... other code
<Button
- className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base"
+ className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-opacity duration-300"
variant="primary"
- onClick={() => (window.location.href = '/')}
+ onClick={() => router.push('/')}
>
홈으로 돌아가기
</Button>📝 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
| <Button | |
| className='cursor-pointer rounded-lg border border-gray-300 bg-gray-700 py-4 text-xl font-bold text-gray-100 transition-colors hover:bg-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none' | |
| variant='primary' | |
| className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base" | |
| variant="primary" | |
| onClick={() => (window.location.href = '/')} | |
| > | |
| 홈으로 돌아가기 | |
| </Button> | |
| 'use client'; | |
| import { useRouter } from 'next/navigation'; | |
| import Button from '@/components/Button'; | |
| export default function NotFoundPage() { | |
| const router = useRouter(); | |
| return ( | |
| // ... other code | |
| <Button | |
| className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-opacity duration-300" | |
| variant="primary" | |
| onClick={() => router.push('/')} | |
| > | |
| 홈으로 돌아가기 | |
| </Button> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/app/not-found.tsx around lines 17 to 23, replace the use of
window.location.href with Next.js router's navigation method (e.g., useRouter's
push) for client-side routing. Also, refactor the Button component's className
to remove redundant or duplicate style definitions, possibly by consolidating
styles or using a shared style variable or class to avoid repetition.
Contributor
|
깔끔하게 잘 만들어주셨네요! 수고하셨습니다! |
evaain706
approved these changes
Aug 3, 2025
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.
📌 변경 사항 개요
404, 에러 페이지 제작
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
신규 기능
스타일