Feat/#77 등록 현황 api 연결 관련 로직 수정 및 EmptyFallback 공통 컴포넌트 구현

[leeleeleeleejun]

#️⃣연관된 이슈

• [Feature] 등록현황 조회 api 연결 #77

📝작업 내용

1. RequestDetailSchema 에서 거부 사유를 nullable로 수정

• 기존 optional에서 nullable로 수정

2. EmptyFallback 공통 컴포넌트 구현

목적: 찜 목록, 신청 현황 등 리스트 데이터가 비어있을 때(Empty State) 사용자에게 보여줄 대체 UI 표준화

스크린샷 (선택)

💬리뷰 요구사항(선택)

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

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

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 전체 앱에서 일관된 빈 상태 표시 개선

• 버그 수정

  • 요청 목록 내 장소 상세 페이지 동적 네비게이션 수정

• 기타

  • 외부 이미지 소스 지원 추가

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

[coderabbitai]

개요

빈 상태 UI를 처리하기 위한 새로운 EmptyFallback 래퍼 컴포넌트를 도입하고, 이를 여러 리스트 컴포넌트에 적용합니다. 또한 rejectedReason 필드 타입을 변경하고, 동적 URL 라우팅을 개선하며, 요청 페이지 레이아웃을 재구성합니다.

변경 사항

내용	파일(들)
새 EmptyFallback 컴포넌트 빈 상태를 조건부로 렌더링하는 새로운 래퍼 컴포넌트 추가 및 인덱스 재내보내기	apps/web/app/_components/EmptyFallback/EmptyFallback.tsx, apps/web/app/_components/EmptyFallback/index.tsx
EmptyFallback 적용 기존 텍스트 기반 빈 상태 UI를 EmptyFallback 컴포넌트로 대체	apps/web/app/likes/_components/LikePlacesList/LikePlacesList.tsx, apps/web/app/map/_components/PlaceList/PlaceList.tsx, apps/web/app/requests/_components/RequestPlacesList/RequestPlacesList.tsx
스키마 및 동적 라우팅 RequestDetailSchema의 rejectedReason 필드를 옵션에서 nullable로 변경하고, PlaceListItem에서 동적 placeId 사용	apps/web/app/_apis/schemas/request.ts, apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx
페이지 레이아웃 재구성 HydrationBoundaryPage 래핑 구조 재구성 및 헤더 위치 조정	apps/web/app/requests/page.tsx
이미지 호스팅 설정 Kakao CDN 이미지에 대한 원격 패턴 추가	apps/web/next.config.ts

예상 코드 리뷰 노력

🎯 3 (보통) | ⏱️ ~20분

• EmptyFallback 컴포넌트: 새로운 UI 패턴 및 Props 인터페이스 검증 필요
• 반복된 적용 패턴: 여러 파일에서 동일한 리팩토링 패턴이 적용되었으므로 일관성 확인
• 요청 페이지 레이아웃: HydrationBoundaryPage 래핑 순서 변경이 프리페치 로직에 미치는 영향 검토

관련 PR

• Feat/#9 msw 초기 설정 및 HydrationBoundaryPage 추가 #11: apps/web/app/requests/page.tsx의 HydrationBoundaryPage 래핑 구조 변경과 직접 연관
• Fix/#59 페이지 진입 시 Zustand 전역 상태가 초기값으로 재설정되는 현상 #60: PlaceListItem 컴포넌트의 네비게이션 href 동적화 변경과 관련
• Feat/#51 Vercel 배포 관련 작업 #52: 동일한 요청 페이지 컴포넌트(apps/web/app/requests/page.tsx)의 구조 변경 관련

축하 시

🐰 빈 화면도 이제 멋진 메시지로,
래퍼 컴포넌트가 모두 감싸 주네요!
EmptyFallback 마법이 피어나,
리스트들도 행복해 보여요! 🌟✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 PR의 주요 변경사항을 명확하게 요약합니다: EmptyFallback 공통 컴포넌트 구현 및 요청 상태 API 연결 로직 수정.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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/#77

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between deb5a7a and aa3b674.

📒 Files selected for processing (9)

• apps/web/app/_apis/schemas/request.ts (1 hunks)
• apps/web/app/_components/EmptyFallback/EmptyFallback.tsx (1 hunks)
• apps/web/app/_components/EmptyFallback/index.tsx (1 hunks)
• apps/web/app/likes/_components/LikePlacesList/LikePlacesList.tsx (1 hunks)
• apps/web/app/map/_components/PlaceList/PlaceList.tsx (2 hunks)
• apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx (2 hunks)
• apps/web/app/requests/_components/RequestPlacesList/RequestPlacesList.tsx (1 hunks)
• apps/web/app/requests/page.tsx (2 hunks)
• apps/web/next.config.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (4)

apps/web/app/likes/_components/LikePlacesList/LikePlacesList.tsx (2)

apps/web/app/likes/_components/LikePlacesList/index.tsx (1)

• LikePlacesList (1-1)

apps/web/app/_apis/queries/place.ts (1)

• usePlaceQueries (27-69)

apps/web/app/requests/_components/RequestPlacesList/RequestPlacesList.tsx (2)

apps/web/app/_apis/queries/request.ts (1)

• useRequestQueries (10-21)

apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx (1)

• PlaceListItem (10-42)

apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx (1)

apps/web/app/_constants/path.ts (1)

• CLIENT_PATH (52-71)

apps/web/app/requests/page.tsx (2)

apps/web/app/HydrationBoundaryPage.tsx (1)

• HydrationBoundaryPage (29-44)

apps/web/app/requests/_components/RequestPlacesList/RequestPlacesList.tsx (1)

• RequestPlacesList (7-23)

🔇 Additional comments (9)

apps/web/app/_apis/schemas/request.ts (1)

18-20: rejectedReason를 optional → nullable로 바꾼 영향 점검

변경 자체는 Zod 스키마 관점에서 타당하지만, 이제 rejectedReason 키가 항상 존재해야 하고 값만 string | null이 허용됩니다. 백엔드 응답에서 이 필드를 아예 보내지 않는(undefined/missing) 경우가 없다면 괜찮지만, 그런 경우가 있다면 현재 스키마에서는 파싱 에러가 날 수 있으니 계약을 한 번만 확인해 주세요. 만약 “필드가 없거나(null) 문자열”까지 허용해야 한다면 z.string().nullish()로 두는 선택지도 있습니다.

apps/web/next.config.ts (1)

28-32: HTTPS 이미지 패턴 추가 확인 완료

t1.kakaocdn.net의 HTTPS 프로토콜 지원이 추가되었습니다. 기존 HTTP 패턴(34-37줄)과 함께 두 프로토콜을 모두 지원하여 유연한 이미지 로딩이 가능합니다.

apps/web/app/requests/page.tsx (1)

15-32: 페이지 구조 개선 확인

Header를 HydrationBoundaryPage 외부로 분리하여 정적 헤더를 불필요하게 hydrate하지 않도록 최적화했습니다. RequestPlacesList는 여전히 적절한 prefetch 처리를 받으며, Next.js의 선택적 hydration 패턴에 부합합니다.

apps/web/app/_components/EmptyFallback/index.tsx (1)

1-1: 표준 배럴 export 패턴 확인

EmptyFallback 컴포넌트의 공개 export 경로가 올바르게 설정되었습니다.

apps/web/app/requests/_components/RequestPlacesList/RequestPlacesList.tsx (1)

11-21: EmptyFallback 통합 완료

새로운 EmptyFallback 컴포넌트를 사용하여 빈 상태 처리를 표준화했습니다. 데이터가 없을 때 사용자에게 명확한 메시지와 행동 유도를 제공합니다.

apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx (1)

11-11: 중요한 동적 라우팅 수정 완료

하드코딩된 placeId '1'에서 실제 placeId prop을 사용하도록 변경되어, 각 항목이 올바른 상세 페이지로 이동할 수 있게 되었습니다. 이는 기능적 버그를 수정하는 중요한 변경사항입니다.

Also applies to: 24-24

apps/web/app/_components/EmptyFallback/EmptyFallback.tsx (1)

1-55: 잘 구현된 EmptyFallback 컴포넌트

새로운 공통 컴포넌트가 다음과 같은 장점을 가지고 있습니다:

• 명확한 타입 정의와 한글 주석
• JSDoc 예제를 통한 사용법 안내
• 조건부 렌더링을 통한 효율적인 구현
• 선택적 title/description prop으로 유연한 사용 가능
• 멀티라인 텍스트 처리(whitespace-pre-wrap, break-words)

여러 리스트 컴포넌트에서 일관되게 사용되어 빈 상태 UI를 표준화합니다.

apps/web/app/likes/_components/LikePlacesList/LikePlacesList.tsx (1)

12-26: 좋아요 목록에 EmptyFallback 적용 완료

기존의 인라인 빈 상태 JSX를 EmptyFallback 래퍼로 교체하여 코드 중복을 제거하고 일관된 사용자 경험을 제공합니다.

apps/web/app/map/_components/PlaceList/PlaceList.tsx (1)

26-35: 지도 목록에 EmptyFallback 통합 완료

BottomSheet 내부에서 EmptyFallback을 사용하여 검색 결과가 없을 때 적절한 피드백을 제공합니다. title 없이 description만 사용하는 것이 이 컨텍스트에 적합합니다.

---

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