feat: 식당검색 리스트 스켈레톤 UI 추가, 식당카드에 별점관련 내용 제거

[jjjsun]

💡 개요

식당 검색하는 카카오맵 아래에 식당 리스트 스켈레톤 UI추가하고, MVP 스코프에서 제외된 별점 관련 내용 제거

🔢 관련 이슈 링크

• Closes [Feat] 식당예약 스켈레톤 UI추가/별점제거 #96

💻 작업내용

• SearchPage 검색 결과 영역에 스켈레톤 UI추가
• 검색 요청중일때 검색중 뱃지 추가+스켈레톤 표시되도록 로딩 분기 처리
• 처음 검색했을때, 검색결과가 없어요가 먼저 나오는 문제 해결
• isFetching과 isSuccess 기반으로 로딩 상태 분기 로직 개선
• RestaurantCard에서 별점관련 내용 UI 제거 (MVP 스코프 제외)

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• N/A

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 검색 중 로딩 상태를 시각적으로 표시하는 스켈레톤 UI 추가

• 업데이트

  • 레스토랑 카드 및 상세 정보에서 별점 표시 제거
  • 검색 결과 없음 상태의 UI 개선

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
eatsfine	Ready	Preview, Comment	Feb 16, 2026 3:08pm

[coderabbitai]

📝 Walkthrough

🎯 리뷰 분석

Walkthrough

식당 카드와 상세 모달에서 별점 표시를 제거하고, 새로운 스켈레톤 UI 컴포넌트(RestaurantCardSkeleton, RestaurantListSkeleton)를 추가했습니다. SearchPage에 로딩 상태 관리를 도입하여 검색 중 스켈레톤을 표시하고, RestaurantList의 빈 결과 조건 처리를 개선했습니다.

Changes

Cohort / File(s)	Summary
별점 제거 src/components/restaurant/RestaurantCard.tsx, src/components/restaurant/RestaurantDetailModal.tsx	Star 아이콘 import 제거 및 rating 렌더링 블록 삭제. UI에서 별점 정보가 표시되지 않습니다.
스켈레톤 UI 컴포넌트 src/components/restaurant/RestaurantCardSkeleton.tsx, src/components/restaurant/RestaurantListSkeleton.tsx	새로운 로딩 상태 표시 컴포넌트 추가. CardSkeleton은 pulsing 바를 렌더링하고, ListSkeleton은 count prop(기본값 8)을 받아 카드 스켈레톤들을 divider로 구분하여 배열로 표시합니다.
조건부 렌더링 개선 src/pages/SearchPage.tsx, src/components/restaurant/RestaurantList.tsx	SearchPage에서 isSearchingUI 상태를 추가하여 로딩/에러/빈 결과/성공 상태를 구분해 렌더링. RestaurantList의 빈 결과 early return 제거하여 항상 컨테이너 렌더링하도록 변경.

🎯 코드 리뷰 포인트

1. RestaurantList의 빈 결과 처리 ⚠️

빈 결과에 대한 early return을 제거했는데, 빈 화면에서 사용자 피드백이 필요할 수 있습니다.

현재:

// 아무것도 렌더링되지 않음 (또는 빈 컨테이너만)
return restaurants.map(...)

제안:
SearchPage의 조건부 렌더링에서 이미 "검색 결과가 없어요." 메시지를 처리하고 있으므로 현재 구조가 맞습니다만, RestaurantList가 단독으로 사용될 경우를 고려하면:

{restaurants.length === 0 ? (
  <div className="text-center text-gray-400 py-8">
    검색 결과가 없습니다
  </div>
) : (
  restaurants.map(...)
)}

2. RestaurantListSkeleton의 Key 속성 ⚠️

현재 idx를 key로 사용하는데, 이는 리스트가 변할 수 있는 경우 성능 문제를 일으킬 수 있습니다.

현재:

{Array.from({ length: count }).map((_, idx) => (
  <RestaurantCardSkeleton key={idx} />
))}

제안:

{Array.from({ length: count }).map((_, idx) => (
  <div key={`skeleton-${idx}`}>
    <RestaurantCardSkeleton />
  </div>
))}

3. 로딩 상태 리셋 타이밍 ✅

useEffect에서 검색 성공/에러 시 isSearchingUI를 리셋하는 로직이 좋습니다. 다만 keyword가 없을 때도 리셋하는 부분이 있으니, 로직의 일관성을 확인해주세요.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• yooseolhee
• dew102938

Poem

⭐️ 별점은 가고 스켈레톤 나타나고

로딩 상태, 부드럽게 표시되네 ✨

검색 중 반짝반짝, 기다림도 예뻐

결과 없을 땐 메시지로 안내하고 🎭

UX는 매끄럽게 흘러가네! 🌊

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 PR의 주요 변경사항을 명확하게 반영하고 있습니다: 스켈레톤 UI 추가와 별점 제거라는 두 가지 핵심 작업을 간결하게 표현했습니다.
Linked Issues check	✅ Passed	PR의 모든 주요 코딩 요구사항이 충족되었습니다. SearchPage에 스켈레톤 UI 추가, 로딩 상태 분기 처리, RestaurantCard에서 별점 제거가 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #96의 범위 내에 있습니다. SearchPage, RestaurantList, RestaurantCard 관련 코드만 수정되었으며 불필요한 추가 변경은 없습니다.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop
Description check	✅ Passed	PR 설명이 템플릿의 모든 필수 섹션(개요, 이슈 링크, 작업내용, 변경사항, 체크리스트)을 완벽하게 포함하고 있으며, 구체적인 변경사항과 완료된 체크리스트까지 잘 작성되어 있습니다.

_{✏️ 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/Skeleton-searchPage

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/restaurant/RestaurantDetailModal.tsx (1)

124-128: ⚠️ Potential issue | 🟡 Minor

에러 상태 backdrop 버튼에 aria-label 누락

로딩 상태(Line 94)에서는 aria-label="모달 닫기"가 있는데, 에러 상태의 backdrop 버튼에는 빠져있어요. 접근성 일관성을 위해 추가해주시면 좋겠습니다.

🛡️ 수정 제안

         <button
           type="button"
           className="absolute inset-0 bg-black/40"
+          aria-label="모달 닫기"
           onClick={() => onOpenChange(false)}
         />

As per coding guidelines, src/components/**: 컴포넌트는 단일 책임, props 타입/네이밍 명확히, 접근성(aria) 체크.

🧹 Nitpick comments (4)

src/components/restaurant/RestaurantCardSkeleton.tsx (1)

1-12: 스켈레톤에 접근성 힌트 추가 고려

스크린 리더 사용자에게는 이 영역이 로딩 placeholder라는 걸 알려주는 게 좋아요. 부모인 RestaurantListSkeleton 쪽에서 한번에 처리해도 되고, 개별 카드에 aria-hidden="true"를 넣어도 괜찮습니다.

♻️ 예시

 export default function RestaurantCardSkeleton() {
   return (
-    <div className="w-full px-5 py-4">
+    <div className="w-full px-5 py-4" aria-hidden="true">
       <div className="flex items-center justify-between gap-3">

As per coding guidelines, src/components/**: 컴포넌트는 단일 책임, props 타입/네이밍 명확히, 접근성(aria) 체크.

src/components/restaurant/RestaurantListSkeleton.tsx (1)

3-17: 구조 깔끔하고 RestaurantList와 일관성 잘 맞아요 👍

컨테이너 스타일과 divider 패턴이 RestaurantList.tsx와 동일해서 실제 리스트 ↔ 스켈레톤 전환 시 레이아웃 점프 없이 자연스럽겠네요.

한 가지 선택사항: 스크린 리더에게 로딩 상태임을 알리려면 컨테이너에 role="status"와 aria-label을 추가하면 좋습니다.

♻️ 예시

-    <div className="border rounded-xl bg-white overflow-hidden">
+    <div className="border rounded-xl bg-white overflow-hidden" role="status" aria-label="검색 결과 로딩 중">

src/pages/SearchPage.tsx (2)

38-38: isSearchingUI 상태 관리 로직 잘 동작하지만, 약간 복잡해요

isSearchingUI를 별도 state로 두고 useEffect로 리셋하는 패턴이 잘 동작하긴 하는데, searchQuery.isFetching과 역할이 상당 부분 겹쳐요. 현재 렌더링 조건(Line 290)에서 isSearchingUI || searchQuery.isFetching으로 OR 처리하고 있어서, isSearchingUI가 주로 커버하는 건 setSearchParams → React Query가 fetch를 시작하기 전의 짧은 갭뿐입니다.

지금 구조로도 문제없이 동작하니 당장 바꿀 필요는 없지만, 나중에 searchQuery.isFetching 하나로 통합하는 것도 고려해보세요. 그러면 isSearchingUI state와 관련 effect를 제거할 수 있어서 코드가 단순해집니다.

Also applies to: 224-249

---

290-290: searchQuery.isFetching이 true인데 동시에 이전 캐시 데이터가 있는 경우 고려

React Query에서 background refetch 시 isFetching=true이면서 results에 이전 캐시 데이터가 남아있을 수 있어요. 현재 로직에서는 isFetching이 true면 무조건 스켈레톤을 보여주니까 문제는 없지만, 나중에 "이전 결과를 보여주면서 새 결과 로딩" 같은 UX를 원하면 isLoading(첫 로드)과 isFetching(리패치 포함)을 구분해야 할 수 있습니다. 참고만 해주세요!