✨ feat: 글로벌 에러 / 404 페이지 구현

[swallowedB]

기능 설명

사용자가 잘못된 경로로 접근하거나 페이지 렌더링 중 에러가 발생했을 때,
일관된 UI로 안내하는 글로벌 에러 페이지(error.tsx)와 404 페이지(not-found.tsx)를 구현한다.

요구사항

1) 글로벌 404 페이지 (not-found.tsx)

• 위치: app/not-found.tsx
• 공통 레이아웃(SiteHeader / SiteFooter / DockMenu)을 그대로 사용한다.
• 내용:
  • 메인 메시지: 페이지를 찾을 수 없어요.
  • 서브 카피: 잘못된 주소 또는 삭제된 페이지 안내 문구
  • 행동 버튼:
    • [홈으로 돌아가기] → /
  • 디자인:
    • 글로벌 폰트/컬러 토큰 사용
    • 모바일/데스크톱 반응형 고려

2) 글로벌 에러 페이지 (error.tsx)

• 위치: app/error.tsx (client component)
• 공통 레이아웃 안에서 렌더링되도록 구성
• 내용:
  • 메인 메시지: 예상치 못한 에러가 발생했어요.
  • 서브 카피: 새로고침/홈 이동 안내
  • 행동 버튼:
    • [다시 시도하기] → reset() 호출
    • [홈으로 이동] → /
• 디자인:
  • 글로벌 스타일 토큰 사용
  • 심각하지 않은 느낌의 에러 일러스트/아이콘 영역 확보 (추후 추가 여지)

3) 카테고리/포스트 상세 연동

• 존재하지 않는 slug 접근 시
  • notFound() 호출로 글로벌 404 페이지로 연결
• 예:
  • app/(shell)/posts/[slug]/page.tsx 내부에서 유효하지 않은 포스트면 notFound() 호출
  • app/(shell)/(category)/[category]/page.tsx 도 동일하게 처리

테스트 포인트

• 존재하지 않는 경로(/asdf) 접속 시 404 페이지가 렌더링된다.
• 포스트/카테고리에서 잘못된 slug로 접근 시 not-found가 호출된다.
• error 페이지에서 “다시 시도하기” 클릭 시 reset()이 호출되어 컴포넌트가 재렌더링된다.
• 두 페이지 모두 Header/Footer/DockMenu가 정상 렌더링된다.

완료 체크리스트

• 실패 테스트 작성(Red)
• 최소 구현(Green)
• 리팩터(Refactor)