이동 수단
+ {/* 아이콘 | 수단 | 시간·거리 세 칸을 모든 줄이 함께 써서(subgrid), 시간·거리가 가장 긴 수단 이름 뒤 오른쪽 끝에 맞춰진다 */}-
{SCHEDULE_TRAVEL_MODES.map(({ value }) => {
const rowSummary = modeRouteSummaries[value];
+ const selected = value === effectiveMode;
const row =
rowSummary &&
rowSummary.durationSeconds >= 0 &&
@@ -151,12 +153,9 @@ export function TravelDirectionsCard({
- +
-
{scheduleTravelModeLabel(value)} - {selected ? - - 적용 중 - - : {row}} + {rowValue}
);
}
return (
- - +
- ); })} {showUnknownOption && !readOnly ? ( -
- +
-
;
if (key.includes("TRANSIT") || key.includes("BUS") || key.includes("SUBWAY"))
return
; - if (key.includes("CYCL") || key === "CYCLING" || key.includes("BICY")) - return ; return ; } diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 6d224724..fc98210c 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -12,11 +12,13 @@ import { type MapMouseEvent, } from "@vis.gl/react-google-maps"; +import { useMobileView } from "@/contexts/MobileViewContext"; import { useSelectedPlace } from "@/contexts/SelectedPlaceContext"; import { MAP_MAX_ZOOM, MAP_MIN_ZOOM, MAP_PAN_RESTRICTION, + normalizeGooglePlaceResourceId, readDestinationLatLngFromSession, viewportSearchRadiusMetersFromBounds, writeDestinationLatLngToSession, @@ -36,6 +38,7 @@ import { useMapCenterStore } from "@/stores/map-center-store"; import { useSearchMapPinsStore } from "@/stores/search-map-pins-store"; import { useSessionStore } from "@/stores/session-store"; import { useMapPinsFocusStore } from "@/stores/map-pins-focus-store"; +import { usePlanMapFocusStore } from "@/stores/plan-map-focus-store"; import { usePlanItineraryStopNormalizedPlaceIds } from "@/hooks/usePlanItineraryStopNormalizedPlaceIds"; import { useRoomDetail } from "@/hooks/useRoomDetail"; import { useRoomsList } from "@/hooks/useRooms"; @@ -58,7 +61,7 @@ import type { OpenValue, RatingValue } from "./map-filters"; export type MapRouteView = PlanItineraryRouteDay & { /** * `seq`가 바뀔 때마다 실행 — fit: 일차 전체가 보이게, pan: 줌은 두고 고른 장소로 이동, - * place: 고른 장소를 가까이(줌 15) 보여 준다(일정 카드를 눌러 들어올 때) + * place: 고른 장소를 가까이(줌 15) 보여 준다(경로 보기에 처음 들어올 때 — 일정 카드·경로 보기 버튼 모두) */ camera: { kind: "fit" | "pan" | "place"; seq: number }; /** 일차 장소 위치(순서대로) — 호출측에서 memo해 넘긴다 */ @@ -81,6 +84,24 @@ export type MapRouteView = PlanItineraryRouteDay & { onBackgroundClick: () => void; }; +// ─── 웹 일정에서 고른 장소로 지도 이동 ───────────────────────────────────────── + +/** 일정 카드·핀으로 고르면 줌은 그대로 두고 그 장소로 부드럽게 옮긴다(모바일 경로 보기의 카드 넘김과 같은 이동) */ +function PlanFocusCameraController({ roomId }: Readonly<{ roomId: string | null }>) { + const map = useMap(); + const rid = typeof roomId === "string" ? roomId.trim() : ""; + const focusSeq = usePlanMapFocusStore((s) => (s.focus && s.focus.roomId === rid ? s.focus.seq : null)); + const lat = usePlanMapFocusStore((s) => (s.focus?.roomId === rid ? s.focus.location?.lat : undefined)); + const lng = usePlanMapFocusStore((s) => (s.focus?.roomId === rid ? s.focus.location?.lng : undefined)); + + useEffect(() => { + if (!map || focusSeq === null || lat === undefined || lng === undefined) return; + map.panTo({ lat, lng }); + }, [map, focusSeq, lat, lng]); + + return null; +} + // ─── 장소 선택 시 지도 이동 ─────────────────────────────────────────────────── function SelectedPlaceController() { @@ -314,6 +335,8 @@ export default function TripMap({ const planStopPlaceIds = usePlanItineraryStopNormalizedPlaceIds(isPlanPage); const { setSelectedPlace } = useSelectedPlace(); + const { isMobileDevice } = useMobileView(); + const clearPlanFocus = usePlanMapFocusStore((s) => s.clearFocus); const setMapCamera = useMapCenterStore((s) => s.setMapCamera); const [selectedCategoryId, setSelectedCategoryId] = useState ( null, @@ -431,11 +454,14 @@ export default function TripMap({ googlePlaceId: placeId, ...(latLng ? { location: latLng } : {}), }, - { analyticsSource: "map", skipMapRecenter: true }, + // 웹은 누른 장소로 줌을 두고 부드럽게 옮긴다. 모바일은 아래 시트가 지도를 가려 그대로 둔다 + { analyticsSource: "map", ...(isMobileDevice ? { skipMapRecenter: true } : { preserveMapZoom: true }) }, ); return; } + // 빈 곳을 누르면 상세를 닫고, 웹 일정에서 고른 장소(강조·일차 경로만 보기)도 푼다 setSelectedPlace(null); + clearPlanFocus(); }; return ( @@ -474,6 +500,8 @@ export default function TripMap({ /> + {/* 웹 일정에서 고른 장소로 이동 — 모바일(일반 지도·경로 보기)은 쓰지 않는다 */} + {routeView || isMobileDevice ? null : } ) function SelectedPlaceMarker() { const { selectedPlace } = useSelectedPlace(); + const { isMobileDevice } = useMobileView(); + // 고른 일정 장소를 핀으로 열었으면 번호 핀을 키워 보이므로 일반 선택 핀을 겹쳐 그리지 않는다(웹 전용) + const planFocusGid = usePlanMapFocusStore((s) => (isMobileDevice ? null : (s.focus?.googlePlaceId ?? null))); + const selectedIsPlanFocus = + planFocusGid !== null && + typeof selectedPlace?.googlePlaceId === "string" && + normalizeGooglePlaceResourceId(selectedPlace.googlePlaceId.trim()) === + normalizeGooglePlaceResourceId(planFocusGid.trim()); const bookmarkColor = selectedPlace?.fromBookmark ? selectedPlace.bookmarkCategoryColor?.trim() : undefined; let colorClass = "text-primary"; if (selectedPlace?.fromBookmark) colorClass = bookmarkColor ? "" : "text-secondary"; return <> - {selectedPlace?.location && ( + {selectedPlace?.location && !selectedIsPlanFocus && ( e.stop()} diff --git a/src/components/map/PlanItineraryMapRoutes.tsx b/src/components/map/PlanItineraryMapRoutes.tsx index 2d27d4d8..689addfe 100644 --- a/src/components/map/PlanItineraryMapRoutes.tsx +++ b/src/components/map/PlanItineraryMapRoutes.tsx @@ -6,6 +6,7 @@ import { AdvancedMarker, Polyline } from "@vis.gl/react-google-maps"; import { useQueries, useQueryClient } from "@tanstack/react-query"; import { useEffect, useMemo, type JSX } from "react"; +import { useMobileView } from "@/contexts/MobileViewContext"; import { useSelectedPlace } from "@/contexts/SelectedPlaceContext"; import { useRoomSchedules } from "@/hooks/useRooms"; import { @@ -38,6 +39,7 @@ import { usePlanMapDirectionsEpochStore, } from "@/stores/plan-map-directions-epoch-store"; import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store"; +import { usePlanMapFocusStore } from "@/stores/plan-map-focus-store"; import { useSessionStore } from "@/stores/session-store"; import { PlanItineraryStopMapPin } from "./PlanItineraryStopMapPin"; @@ -73,13 +75,23 @@ export function PlanItineraryMapRoutes({ const { isSuccess: schedulesHydrated } = useRoomSchedules(rid || null); const { selectedPlace, setSelectedPlace } = useSelectedPlace(); - // 경로 보기는 선택 장소도 일차 핀으로 강조해 보여 준다 — 일반 선택 핀으로 바꾸지 않는다 - const selectedNorm = + const { isMobileDevice } = useMobileView(); + const focusPlace = usePlanMapFocusStore((s) => s.focusPlace); + // 웹 일정에서 고른 장소 — 그 일차 경로만 그리고 번호 핀을 키운다. 모바일(일반 지도·경로 보기)에서는 쓰지 않는다: + // 화면 크기가 바뀌어 PC → 모바일로 넘어가도 남은 포커스가 모바일 지도에 걸리지 않게 읽는 쪽에서도 막는다 + const webFocus = usePlanMapFocusStore((s) => + !routeDay && !isMobileDevice && s.focus && s.focus.roomId === rid ? s.focus : null, + ); + const webFocusScheduleId = webFocus?.scheduleId ?? null; + const webFocusNorm = webFocus?.googlePlaceId ? normalizeGooglePlaceResourceId(webFocus.googlePlaceId) : null; + // 선택 장소는 일반 선택 핀으로 보이므로 같은 번호 핀을 숨긴다. 단 경로 보기와 고른 일정 장소는 번호 핀을 키워 보인다 + const selectedGid = !routeDay && selectedPlace?.googlePlaceId && selectedPlace.googlePlaceId.trim().length > 0 ? normalizeGooglePlaceResourceId(selectedPlace.googlePlaceId.trim()) : null; + const selectedNorm = selectedGid !== null && selectedGid !== webFocusNorm ? selectedGid : null; const visibleByScheduleId = usePlanScheduleRouteVisibilityStore( (s) => s.visibleByScheduleId, @@ -91,14 +103,17 @@ export function PlanItineraryMapRoutes({ const routeDayScheduleId = routeDay?.scheduleId ?? null; const inRouteView = routeDay != null; const routesReady = routeDay?.routesReady ?? true; + // 경로 보기·웹에서 고른 장소가 있으면 그 일차 하나만(일차 표시 토글보다 우선) + const singleDayScheduleId = inRouteView ? routeDayScheduleId : webFocusScheduleId; + const singleDay = inRouteView || webFocusScheduleId !== null; const visibleScheduleIds = useMemo( () => { - if (inRouteView) return routeDayScheduleId !== null ? [routeDayScheduleId] : []; + if (singleDay) return singleDayScheduleId !== null ? [singleDayScheduleId] : []; return Object.keys(visibleByScheduleId) .map(Number) .filter((id) => Number.isFinite(id) && visibleByScheduleId[id] === true); }, - [inRouteView, routeDayScheduleId, visibleByScheduleId], + [singleDay, singleDayScheduleId, visibleByScheduleId], ); const directionsEpoch = usePlanMapDirectionsEpochStore((s) => @@ -321,9 +336,9 @@ export function PlanItineraryMapRoutes({ () => filterVisiblePlanMapStops( stopsForOffset, - inRouteView ? visibleScheduleIds : visibilityOrder, + singleDay ? visibleScheduleIds : visibilityOrder, ), - [inRouteView, stopsForOffset, visibilityOrder, visibleScheduleIds], + [singleDay, stopsForOffset, visibilityOrder, visibleScheduleIds], ); const placeByScheduleAndItemId = useMemo(() => { @@ -356,7 +371,12 @@ export function PlanItineraryMapRoutes({ const legacyId = normalizeGooglePlaceResourceId(gid); const dayColor = routeColorByScheduleId.get(scheduleId) ?? fallbackRouteStroke; - const focused = routeDay != null && routeDay.focusedItemId === place.itemId; + const focused = + routeDay != null + ? routeDay.focusedItemId === place.itemId + : webFocus !== null && + webFocus.scheduleId === scheduleId && + webFocus.itemId === place.itemId; const itemId = place.itemId; stopMarkers.push( { }); let hydrateScheduleRoutesBatch: typeof import("@/lib/plan/schedule-bulk-hydration").hydrateScheduleRoutesBatch; +let fetchAndSeedScheduleRoutesBatch: typeof import("@/lib/plan/schedule-bulk-hydration").fetchAndSeedScheduleRoutesBatch; let resolveScheduleSegmentRoute: typeof import("@/lib/plan/scheduleSegmentRoute").resolveScheduleSegmentRoute; let scheduleItemsQueryKey: typeof import("@/lib/query-keys").scheduleItemsQueryKey; let scheduleItemRouteQueryKey: typeof import("@/lib/query-keys").scheduleItemRouteQueryKey; @@ -39,7 +40,7 @@ beforeAll(async () => { process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI = "http://localhost/callback"; process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = "test-maps-key"; - ({ hydrateScheduleRoutesBatch } = await import( + ({ hydrateScheduleRoutesBatch, fetchAndSeedScheduleRoutesBatch } = await import( "@/lib/plan/schedule-bulk-hydration" )); ({ resolveScheduleSegmentRoute } = await import( @@ -92,6 +93,24 @@ describe("hydrateScheduleRoutesBatch", () => { }); }); + it("자전거로 저장된 구간만 화면에 보이는 수단(자동차)으로 계산해 달라고 지정한다", async () => { + const queryClient = new QueryClient(); + const places = [ + { ...place(1, "places/a"), travelMode: "BICYCLING" }, + { ...place(2, "places/b"), travelMode: "WALKING" }, + place(3, "places/c"), + ]; + queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places); + getScheduleItemRoutesBatchMock.mockResolvedValue([]); + + await hydrateScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places); + + expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledWith(ROOM_ID, SCHEDULE_ID, [ + { itemId: 1, travelMode: "DRIVING" }, + { itemId: 2 }, + ]); + }); + it("폴리라인이 없는 구간은 encodedPolyline 없이 시딩한다", async () => { const queryClient = new QueryClient(); queryClient.setQueryData( @@ -199,3 +218,45 @@ describe("hydrateScheduleRoutesBatch", () => { ).toBeUndefined(); }); }); + +describe("fetchAndSeedScheduleRoutesBatch", () => { + const places = [place(1, "places/a"), place(2, "places/b"), place(3, "places/c")]; + const route = { travelMode: "DRIVING", distanceMeters: 100, durationSeconds: 60 }; + + function seededClient() { + const queryClient = new QueryClient(); + queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places); + queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"), route); + queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, "DRIVING"), route); + return queryClient; + } + + it("모든 구간 경로가 캐시에 있으면 일괄 요청을 보내지 않는다", async () => { + await fetchAndSeedScheduleRoutesBatch(seededClient(), ROOM_ID, SCHEDULE_ID, places); + + expect(getScheduleItemRoutesBatchMock).not.toHaveBeenCalled(); + }); + + it("캐시에 없는 구간이 있으면 일괄로 다시 받는다", async () => { + const queryClient = seededClient(); + queryClient.removeQueries({ queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, "DRIVING") }); + getScheduleItemRoutesBatchMock.mockResolvedValue([]); + + await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places); + + expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce(); + }); + + it("일정 변경으로 무효화된 구간이 있으면 일괄로 다시 받는다", async () => { + const queryClient = seededClient(); + await queryClient.invalidateQueries({ + queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"), + refetchType: "none", + }); + getScheduleItemRoutesBatchMock.mockResolvedValue([]); + + await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places); + + expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce(); + }); +}); diff --git a/src/lib/plan/schedule-bulk-hydration.ts b/src/lib/plan/schedule-bulk-hydration.ts index a668a4b1..fd7e85fa 100644 --- a/src/lib/plan/schedule-bulk-hydration.ts +++ b/src/lib/plan/schedule-bulk-hydration.ts @@ -19,7 +19,10 @@ import { } from "@/lib/places/place-queries"; import { schedulePlacesFingerprint } from "@/lib/plan/planTravelLocalStorage"; import { sortRoomSchedules } from "@/lib/plan/scheduleMerge"; -import { canonicalScheduleTravelMode } from "@/lib/plan/scheduleTravelMode"; +import { + SCHEDULE_TRAVEL_MODE_DEFAULT, + canonicalScheduleTravelMode, +} from "@/lib/plan/scheduleTravelMode"; import type { PlanPlace } from "@/lib/plan/types"; import { roomSchedulesQueryKey, @@ -237,7 +240,32 @@ function scheduleRoutesBatchKey( return `${roomId.trim()}:${scheduleId}:${placesFingerprint}`; } -/** 일차 구간 경로를 저장된 공유 이동수단 기준 batch로 시딩합니다 (in-flight dedup). */ +/** + * 일차의 모든 구간 경로가 이미 캐시에 있는지 — 일정 화면에서 받아 뒀거나, 화면을 다시 열었거나, + * 지도 경로 보기로 넘어온 경우다. 캐시가 지워졌거나(gc) 일정 변경으로 무효화된 구간이 하나라도 있으면 false. + */ +export function scheduleSegmentRoutesCached( + queryClient: QueryClient, + roomId: string, + scheduleId: number, + places: readonly PlanPlace[], +): boolean { + const rid = roomId.trim(); + const sources = places + .slice(0, -1) + .filter((p): p is PlanPlace & { itemId: number } => typeof p.itemId === "number" && Number.isFinite(p.itemId)); + if (!rid.length || !sources.length) return false; + return sources.every((place) => { + const mode = canonicalScheduleTravelMode(place.travelMode) ?? SCHEDULE_TRAVEL_MODE_DEFAULT; + const state = queryClient.getQueryState(scheduleItemRouteQueryKey(rid, scheduleId, place.itemId, mode)); + return state?.status === "success" && !state.isInvalidated; + }); +} + +/** + * 일차 구간 경로를 저장된 공유 이동수단 기준 batch로 시딩합니다 (in-flight dedup). + * 모든 구간이 이미 캐시에 있으면 보내지 않는다 — 재마운트·화면 이동만으로 다시 조회하지 않는다. + */ export async function fetchAndSeedScheduleRoutesBatch( queryClient: QueryClient, roomId: string, @@ -253,6 +281,7 @@ export async function fetchAndSeedScheduleRoutesBatch( const key = scheduleRoutesBatchKey(rid, scheduleId, fingerprint); const inFlight = inFlightScheduleRoutesBatch.get(key); if (inFlight) return inFlight; + if (scheduleSegmentRoutesCached(queryClient, rid, scheduleId, places)) return; const promise = hydrateScheduleRoutesBatch( queryClient, @@ -296,10 +325,15 @@ export async function hydrateScheduleRoutesBatch( if (!rid.length || places.length < 2) return; const segments = places.slice(0, -1); - const requestItems = segments - .map((place) => place.itemId) - .filter((id): id is number => typeof id === "number" && Number.isFinite(id)) - .map((itemId) => ({ itemId })); + const requestItems = segments.flatMap((place) => { + const itemId = place.itemId; + if (typeof itemId !== "number" || !Number.isFinite(itemId)) return []; + // 저장값이 표준 수단과 다르면(예: 고를 수 없게 된 자전거) 화면에 보이는 수단으로 계산해 달라고 지정한다 — + // 수단을 빼면 서버가 저장값으로 계산해, 자동차로 보이는 구간에 자전거 경로가 들어간다 + const saved = place.travelMode?.trim().toUpperCase() ?? ""; + const shown = canonicalScheduleTravelMode(saved); + return [saved && shown && shown !== saved ? { itemId, travelMode: shown } : { itemId }]; + }); if (!requestItems.length) return; diff --git a/src/lib/plan/scheduleTravelMode.test.ts b/src/lib/plan/scheduleTravelMode.test.ts new file mode 100644 index 00000000..7817cd85 --- /dev/null +++ b/src/lib/plan/scheduleTravelMode.test.ts @@ -0,0 +1,28 @@ +import { describe, expect, it } from "vitest"; + +import { + SCHEDULE_TRAVEL_MODE_DEFAULT, + SCHEDULE_TRAVEL_MODES, + canonicalScheduleTravelMode, + scheduleTravelModeLabel, +} from "./scheduleTravelMode"; + +describe("scheduleTravelMode", () => { + it("고를 수 있는 이동수단에 자전거가 없다", () => { + expect(SCHEDULE_TRAVEL_MODES.map((m) => m.value)).toEqual(["WALKING", "TRANSIT", "DRIVING"]); + }); + + it("예전에 자전거로 저장된 값은 기본값(자동차)으로 읽는다", () => { + expect(SCHEDULE_TRAVEL_MODE_DEFAULT).toBe("DRIVING"); + expect(canonicalScheduleTravelMode("BICYCLING")).toBe("DRIVING"); + expect(canonicalScheduleTravelMode("cycling")).toBe("DRIVING"); + expect(scheduleTravelModeLabel("BICYCLING")).toBe("자동차"); + }); + + it("표준 수단과 예전 별칭은 그대로 읽는다", () => { + expect(canonicalScheduleTravelMode("walk")).toBe("WALKING"); + expect(canonicalScheduleTravelMode("TRANSIT")).toBe("TRANSIT"); + expect(canonicalScheduleTravelMode("")).toBeNull(); + expect(canonicalScheduleTravelMode("BOAT")).toBeNull(); + }); +}); diff --git a/src/lib/plan/scheduleTravelMode.ts b/src/lib/plan/scheduleTravelMode.ts index 42ea306d..d9426a1b 100644 --- a/src/lib/plan/scheduleTravelMode.ts +++ b/src/lib/plan/scheduleTravelMode.ts @@ -1,9 +1,12 @@ -/** 일정 구간(이전 장소 → 이 항목) 이동 수단 — 서버: `WALKING`, `DRIVING`, `BICYCLING`, `TRANSIT` */ +/** + * 일정 구간(이전 장소 → 이 항목) 이동 수단 — 서버: `WALKING`, `DRIVING`, `BICYCLING`, `TRANSIT`. + * 자전거는 경로 조회(Google Routes)를 줄이려 고를 수 없게 뺐다 — 예전에 자전거로 저장된 구간은 + * 기본값(자동차)으로 보이고, 사용자가 다시 고르면 서버 값도 바뀐다(`LEGACY_ALIAS`). + */ export const SCHEDULE_TRAVEL_MODES = [ { value: "WALKING", label: "도보" }, { value: "TRANSIT", label: "대중교통" }, { value: "DRIVING", label: "자동차" }, - { value: "BICYCLING", label: "자전거" }, ] as const; export type ScheduleTravelModeValue = @@ -16,14 +19,14 @@ const API_VALUES = new Set ( SCHEDULE_TRAVEL_MODES.map((m) => m.value), ); -/** 예전 클라이언트·데이터 호환 */ +/** 예전 클라이언트·데이터 호환 — 고를 수 없게 된 자전거는 기본값으로 읽는다 */ const LEGACY_ALIAS: Record ((set, get) => ({ + focus: null, + focusPlace: (target) => set({ focus: { ...target, seq: (get().focus?.seq ?? 0) + 1 } }), + clearFocus: () => set({ focus: null }), +}));