[Feat] 404 에러 페이지 구현

[ShipFriend0516]

Note

작성자: 서정우
작성 날짜: 2024.11.18
404 에러 페이지 구현, 주말 저녁에 로티 테스트해보면서 만들어봤습니다.

✅ 체크리스트

• 코드가 정상적으로 작동하는지 확인했습니다.
• 주요 변경사항에 대한 설명을 작성했습니다.
• 코드 스타일 가이드에 따라 코드를 작성했습니다.

🧩 작업 내용

• 404 Not found 에러페이지 구현
• 로티 애니메이션 설치

📝 작업 상세 내역

404 에러페이지

• /error route로 접근하면 볼 수 있는 페이지입니다. 사용자가 접근할 수 없거나 오류가 발생하면 해당 페이지로 redirect 시킬 예정입니다.
• 애니메이션은 눈사람 애니메이션을 사용했고, lottie 애니메이션을 사용했습니다.
  • lottie 라이브러리 설치 후 애니메이션 json 파일을 사용해서 애니메이션을 구현했습니다.
  • 애니메이션은 svg 형태로 렌더링이 되기 떄문에 해상도에 관계 없이 좋은 화질을 유지할 수 있습니다.

<Lottie
  options={{
    animationData: snowmanAnimate,
    loop: true,
    autoplay: true,
  }}
  ariaRole={undefined}
  isClickToPauseDisabled={true}
/>

📌 테스트 및 검증 결과

• gif 형식에 프레임이 낮아 끊겨보이지만 실제로는 부드럽게 동작합니다.
  

💬 다음 작업 또는 논의 사항

• 로딩 인디케이터, 랜딩페이지 등에서 활용해볼 수 있을 것 같습니다.

📎 참고 자료 (선택)

• LottieFiles

[yiseungyun]

눈사람 이미지도 여러개인건가요? 매우 귀엽습니다. ☃️