fix(places): 사진·미리보기 조회 실패 시 반복 요청하지 않도록 재시도·batch 조회 정리

src/app/(main)/bookmark/_components/BookmarkFolderDetailView.loading.test.tsx

@@ -4,28 +4,49 @@ import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
 import { BookmarkFolderDetailView } from "./BookmarkFolderDetailView";
 
+const placeQueries = vi.hoisted(() => ({ current: [] as unknown[] }));
+
 vi.mock("@/hooks/useOpenPlaceOnMap", () => ({ useOpenPlaceOnMap: () => vi.fn() }));
 vi.mock("@/stores/session-store", () => ({ useSessionStore: () => "room" }));
 vi.mock("@/hooks/useRooms", () => ({
   useAllRoomBookmarks: () => undefined,
   useRoomBookmarks: () => ({ data: [{ bookmarkId: 1, googlePlaceId: "place" }], isPending: false }),
 }));
 vi.mock("@/lib/places/place-queries", () => ({ placePreviewQueryOptions: () => ({ queryKey: ["place"] }) }));
-vi.mock("@tanstack/react-query", () => ({
-  useQueries: () => [{ isPending: false, isFetching: true, data: { name: "저장한 장소", googlePlaceId: "place", formattedAddress: "서울" } }],
-}));
+vi.mock("@tanstack/react-query", () => ({ useQueries: () => placeQueries.current }));
 vi.mock("./BookmarkFolderDetailHeader", () => ({ BookmarkFolderDetailHeader: () => null }));
 vi.mock("./BookmarkPlaceRow", () => ({ BookmarkPlaceRow: ({ place }: { place: { name: string } }) => <div>{place.name}</div> }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
-it("keeps cached places visible while their previews refetch", async () => {
+async function renderFolder() {
   const container = document.createElement("div");
   const root = createRoot(container);
+  await act(async () => root.render(<BookmarkFolderDetailView folder={{ id: "1", title: "여행", color: "red" }} />));
+  return { container, unmount: () => act(async () => root.unmount()) };
+}
+
+it("keeps cached places visible while their previews refetch", async () => {
+  placeQueries.current = [
+    { isPending: false, isFetching: true, data: { name: "저장한 장소", googlePlaceId: "place", formattedAddress: "서울" } },
+  ];
+  const { container, unmount } = await renderFolder();
   try {
-    await act(async () => root.render(<BookmarkFolderDetailView folder={{ id: "1", title: "여행", color: "red" }} />));
     expect(container.textContent).toContain("저장한 장소");
     expect(container.querySelector('[role="status"]')).toBeNull();
   } finally {
-    await act(async () => root.unmount());
+    await unmount();
+  }
+});
+
+it("미리보기를 모두 받지 못하면 내부 에러 문구 대신 안내 문구를 보여 준다", async () => {
+  placeQueries.current = [
+    { isPending: false, isFetching: false, isError: true, error: new Error("batch 응답에 place가 없음") },
+  ];
+  const { container, unmount } = await renderFolder();
+  try {
+    expect(container.textContent).toContain("장소 정보를 불러오지 못했습니다.");
+    expect(container.textContent).not.toContain("batch 응답에");
+  } finally {
+    await unmount();
   }
 });

src/app/(main)/bookmark/_components/BookmarkFolderDetailView.tsx

@@ -97,8 +97,6 @@ export function BookmarkFolderDetailView({ folder }: { folder: BookmarkFolder })
     placeQueries.length > 0 &&
     placeQueries.every((q) => q.isError);
 
-  const firstPlaceError = placeQueries.find((q) => q.isError)?.error;
-
   const retryPlacePreviews = () => {
     for (const q of placeQueries) {
       void q.refetch();
@@ -165,10 +163,9 @@ export function BookmarkFolderDetailView({ folder }: { folder: BookmarkFolder })
           <BookmarkListSkeleton />
         ) : cardsError ? (
           <div className="space-y-3 py-10">
+            {/* 에러 문구는 내부 메시지(요청 id·API 오류 코드)라 화면에 그대로 보여 주지 않는다 */}
             <p className="text-center text-body-m-regular mobile:text-body-s-regular text-primary">
-              {firstPlaceError instanceof Error
-                ? firstPlaceError.message
-                : "장소 정보를 불러오지 못했습니다."}
+              장소 정보를 불러오지 못했습니다.
             </p>
             <div className="text-center">
               <button

src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx

@@ -4,6 +4,7 @@ import { MapPin } from "lucide-react";
 
 import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 import { cn } from "@/lib/utils";
@@ -33,13 +34,14 @@ export function BookmarkPlacePreviewCard({
   const { data: imageUrl } = usePlacePhotoUrlQuery(googlePlaceId, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl, markUnavailable } = useVisiblePlacePhotoUrl(imageUrl);
 
   const rawGid = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
 
-  const thumbnailMedia = imageUrl ? (
+  const thumbnailMedia = visibleUrl ? (
     // eslint-disable-next-line @next/next/no-img-element -- remote place photo URL
     <img
-      src={imageUrl}
+      src={visibleUrl}
       alt={name}
       className="h-full w-full object-cover"
       loading="lazy"
@@ -49,6 +51,7 @@ export function BookmarkPlacePreviewCard({
           googlePlaceId,
           placeName: name,
           image: event.currentTarget,
+          onPhotoUnavailable: markUnavailable,
         })
       }
     />

src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx

@@ -17,6 +17,7 @@
   useUpdateScheduleItem,
 } from "@/hooks/useRooms";
 import { usePlanPlaceCardPhoto } from "@/hooks/usePlanPlaceCardPhoto";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
@@ -106,6 +107,8 @@
   const { resolvedPhotoUrl, photoLoading } = usePlanPlaceCardPhoto(place, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl: visiblePhotoUrl, markUnavailable: markPhotoUnavailable } =
+    useVisiblePlacePhotoUrl(resolvedPhotoUrl);
 
   const [memoOpen, setMemoOpen] = useState(false);
   const [timeOpen, setTimeOpen] = useState(false);
@@ -320,24 +323,25 @@
               className="absolute inset-0 m-auto h-5 w-5 animate-spin text-primary-strong"
               aria-hidden
             />
-          ) : resolvedPhotoUrl ? (
+          ) : visiblePhotoUrl ? (
             <Image
-              src={resolvedPhotoUrl}
+              src={visiblePhotoUrl}
               alt={place.title}
               fill
               className="object-cover"
               sizes="96px"
               draggable={false}
               onError={(event) =>
                 handlePlacePhotoImageError({
                   source: "plan-place-card",
                   googlePlaceId: place.googlePlaceId,
                   placeName: place.title,
                   image: event.currentTarget,
+                  onPhotoUnavailable: markPhotoUnavailable,
                 })
               }
             />
           ) : null;
 
           if (!hasGooglePlace) {
             return (

src/app/(main)/plan/_components/travel-time/PlanTravelTime.test.tsx

@@ -0,0 +1,52 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { PlanTravelTime } from "./PlanTravelTime";
+
+const selectedRoute = vi.hoisted(() => ({
+  current: { data: undefined, isPending: false, isError: false, isFetching: false } as Record<string, unknown>,
+}));
+
+vi.mock("@/hooks/useRooms", () => ({
+  useScheduleItemRoute: () => selectedRoute.current,
+  useUpdateScheduleItemTravelMode: () => ({ mutate: vi.fn() }),
+}));
+vi.mock("@tanstack/react-query", () => ({
+  useQueries: ({ queries }: { queries: unknown[] }) => queries.map(() => ({ data: undefined })),
+}));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: false }) }));
+
+function renderSummary() {
+  return renderToStaticMarkup(
+    createElement(PlanTravelTime, {
+      roomId: "room-1",
+      scheduleId: 1,
+      segmentSourceItemId: 100,
+      scheduleFingerprint: "100:a:|101:b:",
+      travelMode: "DRIVING",
+      contentOnly: true,
+    }),
+  );
+}
+
+describe("PlanTravelTime 요약 줄", () => {
+  beforeEach(() => {
+    selectedRoute.current = { data: undefined, isPending: false, isError: false, isFetching: false };
+  });
+
+  it("다시 받다가 실패해도 마지막 답이 '경로 없음'이면 오류 대신 그 답을 보여 준다", () => {
+    selectedRoute.current = { data: null, isPending: false, isError: true, isFetching: false };
+
+    const html = renderSummary();
+
+    expect(html).toContain("이동 안내 없음");
+    expect(html).not.toContain("경로 조회 오류");
+  });
+
+  it("받은 답 없이 실패하면 오류를 보여 준다", () => {
+    selectedRoute.current = { data: undefined, isPending: false, isError: true, isFetching: false };
+
+    expect(renderSummary()).toContain("경로 조회 오류");
+  });
+});

src/app/(main)/plan/_components/travel-time/PlanTravelTime.tsx

@@ -222,8 +222,9 @@ export function PlanTravelTime({
   const summaryPending =
     !displayRoute && !selectedFetching && selectedPending;
 
+  // 마지막 답이 "경로 없음"(null)이면 다시 받다가 실패해도 그 답을 보여 준다 — 재조회 실패로 이미 받은 답을 오류로 바꾸지 않는다
   const summaryIsError =
-    !displayRoute && primarySettled && selectedError;
+    !displayRoute && primarySettled && selectedError && selectedRoute !== null;
 
   const summaryUnavailable =
     !displayRoute &&

src/components/chat/messages/OgPlacePreviewCard.tsx

@@ -4,6 +4,7 @@ import { MapPin, Star } from "lucide-react";
 
 import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { resolveChatMessageTypography } from "@/components/chat/chat-typography";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 import { cn } from "@/lib/utils";
@@ -36,6 +37,7 @@ export function OgPlacePreviewCard({
   const { data: imageUrl } = usePlacePhotoUrlQuery(googlePlaceId, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl, markUnavailable } = useVisiblePlacePhotoUrl(imageUrl);
 
   return (
     <button
@@ -54,10 +56,10 @@ export function OgPlacePreviewCard({
           isMinimized ? "h-[72px] w-[72px]" : "h-[88px] w-[88px]",
         )}
       >
-        {imageUrl ? (
+        {visibleUrl ? (
           // eslint-disable-next-line @next/next/no-img-element -- 동적 장소 사진 URL (원격 패턴 비고정)
           <img
-            src={imageUrl}
+            src={visibleUrl}
             alt={name}
             className="h-full w-full object-cover"
             loading="lazy"
@@ -67,6 +69,7 @@ export function OgPlacePreviewCard({
                 googlePlaceId,
                 placeName: name,
                 image: event.currentTarget,
+                onPhotoUnavailable: markUnavailable,
               })
             }
           />

src/components/map/MapBookmarkPins.tsx

@@ -1,19 +1,16 @@
 "use client";
 
 import { Bookmark } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { useQueries, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
 import { AdvancedMarker } from "@vis.gl/react-google-maps";
 
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
 import { useAllRoomBookmarks, useBookmarkCategories } from "@/hooks/useRooms";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import type { PlacePreview } from "@/lib/api/places";
 
-import {
-  buildMapBookmarkPreviewPlan,
-  settleMapBookmarkPreviewBatch,
-} from "./map-bookmark-preview-query";
+import { buildMapBookmarkPreviewPlan } from "./map-bookmark-preview-query";
 import {
   MAP_PIN_BORDER_STROKE,
   MAP_PIN_BORDER_STROKE_WIDTH,
@@ -50,7 +47,6 @@ export function MapBookmarkPins({
   enabled,
   hiddenNormalizedPlaceIds,
 }: MapBookmarkPinsProps) {
-  const queryClient = useQueryClient();
   const { selectedPlace, setSelectedPlace } = useSelectedPlace();
 
   const { data: categories, isSuccess: categoriesReady } =
@@ -92,34 +88,11 @@ export function MapBookmarkPins({
     return out;
   }, [allBookmarks, categoryColorById, listsSettled]);
 
-  const [settledPreviewIdsKey, setSettledPreviewIdsKey] = useState<string | null>(
-    null,
-  );
   const previewPlan = useMemo(
-    () =>
-      buildMapBookmarkPreviewPlan(
-        flattenedBookmarks,
-        hiddenNormalizedPlaceIds,
-        settledPreviewIdsKey,
-      ),
-    [flattenedBookmarks, hiddenNormalizedPlaceIds, settledPreviewIdsKey],
+    () => buildMapBookmarkPreviewPlan(flattenedBookmarks, hiddenNormalizedPlaceIds),
+    [flattenedBookmarks, hiddenNormalizedPlaceIds],
   );
-  const { visibleBookmarks, previewIdsKey } = previewPlan;
-
-  useEffect(() => {
-    if (!previewIdsKey.length) return;
-
-    let cancelled = false;
-    void settleMapBookmarkPreviewBatch(previewIdsKey, queryClient).then(
-      (settledKey) => {
-        if (!cancelled) setSettledPreviewIdsKey(settledKey);
-      },
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, [previewIdsKey, queryClient]);
+  const { visibleBookmarks } = previewPlan;
 
   const placeQueryDefs = useMemo(() => {
     if (!roomId || !listsSettled || visibleBookmarks.length === 0) {

src/components/map/PlanItineraryMapRoutes.tsx

@@ -16,7 +16,10 @@ import {
   decodeOrientedPlanItinerarySegmentPath,
   normalizeGooglePlaceResourceId,
 } from "@/lib/maps";
-import { persistedScheduleItemRouteQueryOptions } from "@/lib/plan/scheduleItemRoutePersistedQuery";
+import {
+  loadScheduleItemRouteForMap,
+  persistedScheduleItemRouteQueryOptions,
+} from "@/lib/plan/scheduleItemRoutePersistedQuery";
 import { schedulePlacesFingerprint } from "@/lib/plan/planTravelLocalStorage";
 import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
 import {
@@ -196,11 +199,12 @@ export function PlanItineraryMapRoutes({
           segmentEpoch,
         ),
         /**
-         * 구간 경로는 일정 리스트와 같은 쿼리를 통해 가져옵니다. `fetchQuery`에 맡겨야
+         * 구간 경로는 일정 리스트와 같은 쿼리를 통해 가져옵니다. 그 쿼리에 맡겨야
          * in-flight 합치기와 재정렬 중 뒤늦게 온 응답 폐기를 React Query가 처리합니다.
          */
         queryFn: async () => {
-          const route = await queryClient.fetchQuery(
+          const route = await loadScheduleItemRouteForMap(
+            queryClient,
             persistedScheduleItemRouteQueryOptions(
               rid,
               seg.scheduleId,