feat: 추천 맛집(찜많은 맛집, 오늘의 맛집) 에러 바운더리 따로 설정

[leeleeleeleejun]

#️⃣연관된 이슈

• [Feature] 추천맛집(찜많은 맛집, 오늘의 맛집) 에러바운더리 적용 #97

📝작업 내용

메인 페이지의 랭킹 섹션(RankingSection) 에서 데이터 로딩 중 에러가 발생하더라도, 페이지 전체가 중단되지 않고 안정적으로 동작하도록 에러 핸들링 및 예외 처리 로직을 추가했습니다.

1. ErrorBoundary 도입

RankingSection 내부 데이터 페칭 영역에 ErrorBoundary를 적용하여 에러 전파 범위를 해당 섹션으로 한정했습니다.
랭킹 API가 실패하더라도 해당 영역에만 Fallback UI를 노출하고, 카테고리 조회 등 페이지의 나머지 기능은 정상적으로 사용할 수 있도록 개선했습니다.

2. 데이터 공백 상태 처리

EmptyFallback을 활용하여 데이터는 성공적으로 불러왔으나 리스트가 비어있는 경우에 대한 처리도 함께 적용되었습니다

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

릴리스 노트

• Bug Fixes
  • 데이터 로드 실패 시 사용자 친화적인 오류 메시지 표시
  • 빈 목록 상태에 대한 로컬라이즈된 설명 추가
  • 데이터 로드 중 안정적인 대기 화면 제공

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📋 개요

Walkthrough

RankingSection 컴포넌트에 에러 처리 및 빈 상태 UI를 추가했습니다. ErrorBoundary로 목록 조회를 감싸고, Suspense를 그 안에 배치하며, 데이터가 없을 때와 에러 발생 시를 위한 전용 폴백 컴포넌트를 추가했습니다.

Changes

Cohort / File(s)	Summary
RankingSection 에러 및 빈 상태 처리 apps/web/app/(home)/_components/RankingSection/RankingSection.tsx	ErrorBoundary와 EmptyFallback을 추가하여 에러 상황과 빈 상태를 처리합니다. 새로운 ErrorFallback 컴포넌트를 도입하고, Suspense를 ErrorBoundary 내부에 중첩하여 에러 UI 경로를 구성했습니다. EmptyFallback을 사용하여 로컬라이제이션된 설명과 함께 빈 상태를 렌더링합니다.

🔗 관련 가능성 있는 PR

• PR #78: 이 PR에서 새로 추가된 EmptyFallback 사용이 EmptyFallback 컴포넌트 구현 및 내보내기를 담당하는 해당 PR과 직접적으로 연결됩니다.

⏱️ 예상 코드 리뷰 소요 시간

🎯 3 (Moderate) | ⏱️ ~20 minutes

🐰 축하 시

토끼가 깡충깡충 뛰며 외쳤네요 🐇✨
"에러도 잡고, 빈 상태도 처리하고!
ErrorBoundary는 안전한 요새,
EmptyFallback으로 우아하게 표현하네!
사용자 경험은 쏘옥, 버그는 방비된다!" 🛡️

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 변경 사항의 주요 목적을 명확하게 설명하고 있습니다. RankingSection에 에러 바운더리를 적용한다는 핵심 변경 사항을 정확히 전달합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/#97

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}