{isLoading && !detail ? (
-
-
+
) : (
<>
{name}
-
- {category ? {category} : null}
- {detail?.rating != null ? (
-
- {category ? · : null}
-
-
- {detail.rating.toFixed(1)}
-
-
- ) : null}
- {address ? (
- <>
- {category || detail?.rating != null ? (
- ·
- ) : null}
- {address}
-
- ) : null}
-
+
)}
@@ -162,3 +139,35 @@ export function MobileRouteCandidateCard({
);
}
+
+function CandidateMetadata({ category, address, rating }: Readonly<{
+ category: string;
+ address: string;
+ rating: number | null | undefined;
+}>) {
+ return (
+
+ {category ? {category} : null}
+ {rating != null ? (
+
+ {category ? · : null}
+
+
+ {rating.toFixed(1)}
+
+
+ ) : null}
+ {address ? (
+ <>
+ {category || rating != null ? (
+ ·
+ ) : null}
+ {address}
+
+ ) : null}
+
+ );
+}
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
index 6471ef0a..9ea90a49 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
@@ -158,14 +158,14 @@ export function MobileRouteExpandedShell({
/** 처음 불러오는 동안 — 카드와 같은 자리를 잡는다 */
export function MobileRoutePlaceCardSkeleton() {
return (
-
+
+
);
}
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
index 8421b063..af8e2abc 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
@@ -49,10 +49,10 @@ export function MobileRoutePlaceDetail({
{showSkeleton ? (
-
+
+
) : (
// 장소 상세 시트와 같은 홈·리뷰 탭 — 같은 상세 응답을 쓰므로 추가 호출이 없다
diff --git a/src/app/(main)/map/_components/useMobileRouteView.test.tsx b/src/app/(main)/map/_components/useMobileRouteView.test.tsx
new file mode 100644
index 00000000..c1e0d8af
--- /dev/null
+++ b/src/app/(main)/map/_components/useMobileRouteView.test.tsx
@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { act, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { expect, it, vi } from "vitest";
+
+const fixtures = vi.hoisted(() => ({
+ schedules: [{ scheduleId: 10, dayNumber: 1, date: "2026-10-10" }],
+ places: [
+ { id: "item-101", itemId: 101, title: "첫 장소", location: { lat: 37.5, lng: 127 } },
+ { id: "item-102", itemId: 102, title: "먼 장소", location: { lat: 37.7, lng: 127.2 } },
+ ],
+ setSelectedPlace: vi.fn(),
+ router: { replace: vi.fn() },
+}));
+
+vi.mock("next/navigation", () => ({ useRouter: () => fixtures.router }));
+vi.mock("@/hooks/use-room-id", () => ({ useCurrentRoomId: () => ({ roomId: "room-1" }) }));
+vi.mock("@/hooks/useRooms", () => ({
+ useRoomSchedules: () => ({ data: fixtures.schedules, isSuccess: true }),
+ useSchedulePlanPlaces: () => ({ data: fixtures.places, isSuccess: true, isFetching: false }),
+}));
+vi.mock("@/hooks/usePrefetchScheduleRoutes", () => ({ usePrefetchScheduleRoutes: () => true }));
+vi.mock("@/components/expenses/ExpenseProvider", () => ({
+ useExpenseContext: () => ({ list: { data: [] }, canManage: true }),
+}));
+vi.mock("@/contexts/SelectedPlaceContext", () => ({
+ useSelectedPlace: () => ({ setSelectedPlace: fixtures.setSelectedPlace }),
+}));
+vi.mock("@/components/place/usePlaceDetailData", () => ({ usePlaceDetailData: () => ({}) }));
+vi.mock("@/lib/plan/scheduleItemPlaces", () => ({ readSchedulePlanPlacesFromCache: () => fixtures.places }));
+vi.mock("@/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch", () => ({
+ useMobileAddPlaceSearch: () => ({ recentlyAddedItemId: null, screen: null }),
+}));
+vi.mock("@/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets", () => ({
+ MobilePlanPlaceSheets: () => null,
+ openPlaceExpenses: vi.fn(),
+}));
+vi.mock("@/components/map/MapCloseButton", () => ({ MapCloseButton: () => null }));
+vi.mock("./MobileRouteCandidateCard", () => ({ MobileRouteCandidateCard: () => null }));
+vi.mock("./MobileRouteCardCarousel", () => ({ MobileRouteCardCarousel: () => null }));
+vi.mock("./MobileRoutePlaceDetail", () => ({ MobileRoutePlaceDetail: () => null }));
+vi.mock("./MobileRoutePlaceCard", () => ({
+ MobileRouteEmptyDayCard: () => null,
+ MobileRouteMessageCard: () => null,
+ MobileRoutePlaceCard: () => null,
+ MobileRoutePlaceCardSkeleton: () => null,
+}));
+
+import { readMapRouteParams } from "@/lib/mobile-view";
+import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import { useMobileRouteView } from "./useMobileRouteView";
+
+it.each([
+ { url: "/map?view=route&day=1", camera: "fit", item: "101" },
+ { url: "/map?view=route&day=1&item=102", camera: "place", item: "102" },
+])("$url 진입 시 URL 동기화 후에도 $camera 카메라를 유지한다", async ({ url, camera, item }) => {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+ window.history.replaceState(null, "", url);
+ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+ queryClient.setQueryData(scheduleItemsQueryKey("room-1", 10), fixtures.places);
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ let current: ReturnType | undefined;
+ function Harness() {
+ const route = readMapRouteParams(new URLSearchParams(window.location.search));
+ const result = useMobileRouteView({ active: route.active, day: route.day, initialItemId: route.itemId });
+ useEffect(() => { current = result; });
+ return null;
+ }
+ const render = () => root.render();
+ try {
+ await act(async () => render());
+ expect(current?.mapRouteView?.camera.kind).toBe(camera);
+ expect(new URLSearchParams(window.location.search).get("item")).toBe(item);
+ // Next.js reflects native replaceState into useSearchParams; emulate that rerender.
+ await act(async () => render());
+ expect(current?.mapRouteView?.camera.kind).toBe(camera);
+ } finally {
+ await act(async () => root.unmount());
+ queryClient.clear();
+ host.remove();
+ }
+});
diff --git a/src/app/(main)/map/_components/useMobileRouteView.tsx b/src/app/(main)/map/_components/useMobileRouteView.tsx
index 22b52545..7e0fb0b3 100644
--- a/src/app/(main)/map/_components/useMobileRouteView.tsx
+++ b/src/app/(main)/map/_components/useMobileRouteView.tsx
@@ -161,37 +161,14 @@ export function useMobileRouteView({
});
});
- const entries = [...baseEntries];
- const anchorIndex = candidate ? baseEntries.findIndex((e) => e.key === candidate.anchorKey) : -1;
- const anchorEntry = anchorIndex >= 0 ? baseEntries[anchorIndex] : undefined;
- let ghost: CandidateEntry | undefined;
- // 넣을 자리가 사라졌으면(삭제 등) 후보도 보이지 않는다
- if (candidate && anchorEntry && anchorEntry.kind !== "candidate") {
- ghost = {
- kind: "candidate",
- key: `candidate-${candidate.id}`,
- scheduleId: anchorEntry.scheduleId,
- dayNumber: anchorEntry.dayNumber,
- googlePlaceId: candidate.googlePlaceId,
- prev: anchorEntry.kind === "place" ? anchorEntry : null,
- };
- if (anchorEntry.kind === "empty") entries.splice(anchorIndex, 1, ghost);
- else entries.splice(anchorIndex + 1, 0, ghost);
- }
+ const { entries, anchorIndex, ghost } = insertCandidate(baseEntries, candidate);
- const [focus, setFocus] = useState({ key: null, index: 0, camera: { kind: "fit", seq: 0 } });
+ const [focus, setFocus] = useRouteFocus(active, initialItemId);
const [expanded, setExpanded] = useState(false);
/** 카드의 ⋮·시간·메모에서 연 시트 — 일정 목록과 같은 시트를 쓴다 */
const [routeSheet, setRouteSheet] = useState<{ scheduleId: number; sheet: MobilePlanPlaceSheet } | null>(null);
- let focusedIndex: number;
- if (focus.key === null) {
- const byItem = initialItemId === null ? -1 : entries.findIndex((e) => e.kind === "place" && e.itemId === initialItemId);
- focusedIndex = byItem >= 0 ? byItem : entries.findIndex((e) => e.dayNumber === Math.min(day, schedules.length));
- } else {
- const byKey = entries.findIndex((e) => e.key === focus.key);
- focusedIndex = byKey >= 0 ? byKey : Math.min(focus.index, entries.length - 1);
- }
+ const focusedIndex = resolveFocusedIndex(entries, focus, initialItemId, day, schedules.length);
const focused = focusedIndex >= 0 ? entries[focusedIndex] : undefined;
const activeScheduleId = active ? (focused?.scheduleId ?? null) : null;
const activeDayNumber = focused?.dayNumber ?? 0;
@@ -297,11 +274,12 @@ export function useMobileRouteView({
}
// 후보 핀은 그 일차를 볼 때만 그린다
- const ghostOnMap = ghost && ghost.scheduleId === activeScheduleId ? ghost : undefined;
+ const ghostOnMap = ghost?.scheduleId === activeScheduleId ? ghost : undefined;
const candidateLocation = candidateDetail?.location ?? candidate?.location ?? null;
- const mapRouteView: MapRouteView | undefined = active
- ? {
+ function buildRouteView(): MapRouteView | undefined {
+ if (!active) return undefined;
+ return {
scheduleId: activeScheduleId,
color: activeScheduleId === null ? FALLBACK_DAY_COLOR : dayColor(activeScheduleId),
focusedItemId,
@@ -315,7 +293,7 @@ export function useMobileRouteView({
if (index >= 0) focusEntry(index, "pan");
},
// 처음 들어올 때 — 일정 카드로 들어왔으면 그 장소를 가까이, 경로 보기 버튼이면 일차 전체를 보여 준다
- camera: focus.key === null ? { kind: initialItemId !== null ? "place" : "fit", seq: 0 } : focus.camera,
+ camera: focus.camera,
locations,
expanded: isExpanded,
candidate:
@@ -353,8 +331,8 @@ export function useMobileRouteView({
onBackgroundClick: () => {
if (candidate) closeCandidate();
},
- }
- : undefined;
+ };
+ }
const goToDay = (dayNumber: number) => {
const index = entries.findIndex((e) => e.dayNumber === dayNumber);
@@ -394,36 +372,12 @@ export function useMobileRouteView({
const itemExpenses = (scheduleId: number, itemId: number) =>
expensesInScope(expenses.list.data ?? [], { scheduleId, scheduleItemId: itemId, label: "" });
- // 경로 보기가 아닐 때(일반 지도)는 카드를 만들지 않는다 — 장소마다 비용 요약까지 계산하므로
- let cards: ReactNode = null;
- if (!active) {
- cards = null;
- } else if (schedulesQuery.isLoading || (schedules.length > 0 && entries.length === 0)) {
- cards = ;
- } else if (schedulesQuery.isError) {
- cards = (
-
-
-
- );
- } else if (entries.length === 0) {
- cards = (
-
-
-
- );
- } else {
- cards = (
- focusEntry(index)}
- onPreviewChange={setPreviewIndex}
- cards={entries.map((entry, index) => ({
- key: entry.key,
- node:
- entry.kind === "empty" ? (
+ function renderEntry(entry: StripEntry, index: number): ReactNode {
+ if (entry.kind === "empty") return (
- ) : entry.kind === "candidate" ? (
+
+ );
+ if (entry.kind === "candidate") return (
setExpandedAndRecenter(false)}
detailActive={index === focusedIndex}
/>
- ) : (
+
+ );
+ return (
setRouteSheet({ scheduleId: entry.scheduleId, sheet: { kind: "time", place: entry.place } })}
detail={isExpanded ? : null}
/>
- ),
+
+ );
+ }
+
+ // 경로 보기가 아닐 때(일반 지도)는 카드를 만들지 않는다 — 장소마다 비용 요약까지 계산하므로
+ function renderCards(): ReactNode {
+ if (!active) {
+ return null;
+ } else if (schedulesQuery.isLoading || (schedules.length > 0 && entries.length === 0)) {
+ return ;
+ } else if (schedulesQuery.isError) {
+ return (
+
+
+
+ );
+ } else if (entries.length === 0) {
+ return (
+
+
+
+ );
+ } else {
+ return (
+ focusEntry(index)}
+ onPreviewChange={setPreviewIndex}
+ cards={entries.map((entry, index) => ({
+ key: entry.key,
+ node: renderEntry(entry, index),
}))}
/>
);
}
+ }
+
const sheetSchedule = routeSheet ? schedules.find((s) => s.scheduleId === routeSheet.scheduleId) : undefined;
const overlay = active ? (
<>
@@ -500,7 +488,7 @@ export function useMobileRouteView({
{/* 접힘: 가장 긴 카드에 맞춰 모든 카드가 같은 높이 / 펼침: 지도의 70% */}
- {cards}
+ {renderCards()}
@@ -524,10 +512,62 @@ export function useMobileRouteView({
) : null;
- return { mapRouteView, overlay, open };
+ return { mapRouteView: buildRouteView(), overlay, open };
}
/** 카드가 하나뿐일 때도 넘기는 카드와 같은 폭·위치에 둔다 */
function RouteCardSlot({ children }: Readonly<{ children: ReactNode }>) {
return
;
}
+
+function insertCandidate(baseEntries: StripEntry[], candidate: RouteCandidate | null) {
+ const entries = [...baseEntries];
+ const anchorIndex = candidate ? baseEntries.findIndex((e) => e.key === candidate.anchorKey) : -1;
+ const anchorEntry = anchorIndex >= 0 ? baseEntries[anchorIndex] : undefined;
+ let ghost: CandidateEntry | undefined;
+ // 넣을 자리가 사라졌으면(삭제 등) 후보도 보이지 않는다
+ if (candidate && anchorEntry && anchorEntry.kind !== "candidate") {
+ ghost = {
+ kind: "candidate",
+ key: `candidate-${candidate.id}`,
+ scheduleId: anchorEntry.scheduleId,
+ dayNumber: anchorEntry.dayNumber,
+ googlePlaceId: candidate.googlePlaceId,
+ prev: anchorEntry.kind === "place" ? anchorEntry : null,
+ };
+ if (anchorEntry.kind === "empty") entries.splice(anchorIndex, 1, ghost);
+ else entries.splice(anchorIndex + 1, 0, ghost);
+ }
+
+ return { entries, anchorIndex, ghost };
+}
+
+function resolveFocusedIndex(entries: StripEntry[], focus: Focus, initialItemId: number | null,
+ day: number, scheduleCount: number) {
+ let focusedIndex: number;
+ if (focus.key === null) {
+ const byItem = initialItemId === null ? -1 : entries.findIndex((e) => e.kind === "place" && e.itemId === initialItemId);
+ focusedIndex = byItem >= 0 ? byItem : entries.findIndex((e) => e.dayNumber === Math.min(day, scheduleCount));
+ } else {
+ const byKey = entries.findIndex((e) => e.key === focus.key);
+ focusedIndex = byKey >= 0 ? byKey : Math.min(focus.index, entries.length - 1);
+ }
+
+ return focusedIndex;
+}
+
+function initialFocus(itemId: number | null): Focus {
+ return { key: null, index: 0, camera: { kind: itemId === null ? "fit" : "place", seq: 0 } };
+}
+
+function useRouteFocus(active: boolean, initialItemId: number | null) {
+ const [focus, setFocus] = useState