diff --git a/src/components/restaurant/RestaurantList.tsx b/src/components/restaurant/RestaurantList.tsx
index 2b17303..bdf2d73 100644
--- a/src/components/restaurant/RestaurantList.tsx
+++ b/src/components/restaurant/RestaurantList.tsx
@@ -7,14 +7,6 @@ type Props = {
};
export default function RestaurantList({ restaurants, onSelect }: Props) {
- if (restaurants.length === 0) {
- return (
-
{restaurants.map((r, idx) => (
diff --git a/src/components/restaurant/RestaurantListSkeleton.tsx b/src/components/restaurant/RestaurantListSkeleton.tsx
new file mode 100644
index 0000000..2e7ad6f
--- /dev/null
+++ b/src/components/restaurant/RestaurantListSkeleton.tsx
@@ -0,0 +1,22 @@
+import RestaurantCardSkeleton from "./RestaurantCardSkeleton";
+
+export default function RestaurantListSkeleton({
+ count = 8,
+}: {
+ count?: number;
+}) {
+ return (
+
+ {Array.from({ length: count }).map((_, idx) => (
+
+
+ {idx !== count - 1 ?
: null}
+
+ ))}
+
+ );
+}
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 789c4d7..699385f 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -13,6 +13,7 @@ import { useRestaurantDetail } from "@/hooks/store/useRestaurantDetail";
import { useSearchStores } from "@/hooks/store/useSearchStores";
import type { CreateBookingResult } from "@/api/endpoints/reservations";
import { toHHmm } from "@/utils/time";
+import RestaurantListSkeleton from "@/components/restaurant/RestaurantListSkeleton";
export default function SearchPage() {
const [query, setQuery] = useState("");
@@ -34,6 +35,8 @@ export default function SearchPage() {
const detailQuery = useRestaurantDetail(selectedStoreId);
+ const [isSearchingUI, setIsSearchingUI] = useState(false);
+
const [searchParams, setSearchParams] = useState<{
keyword: string;
lat: number;
@@ -225,8 +228,10 @@ export default function SearchPage() {
if (!keyword) {
setSearchParams(null);
+ setIsSearchingUI(false);
return;
}
+ setIsSearchingUI(true);
const c = coords ?? (await getCoords());
setCoords(c);
@@ -234,6 +239,15 @@ export default function SearchPage() {
setSearchParams({ keyword, lat: c.lat, lng: c.lng });
};
+ useEffect(() => {
+ if (!hasSearched) return;
+ if (!isSearchingUI) return;
+
+ if (searchQuery.isSuccess || searchQuery.isError) {
+ setIsSearchingUI(false);
+ }
+ }, [hasSearched, isSearchingUI, searchQuery.isSuccess, searchQuery.isError]);
+
return (
<>
@@ -269,11 +283,29 @@ export default function SearchPage() {
/>
- {searchError ? (
-
{searchError}
- ) : null}
{hasSearched ? (
-
+ <>
+ {searchError ? (
+
{searchError}
+ ) : isSearchingUI || searchQuery.isFetching ? (
+ <>
+
+
+ 검색 중...
+
+
+ >
+ ) : results.length === 0 ? (
+
+ 검색 결과가 없어요.
+
+ ) : (
+
+ )}
+ >
) : null}