fix(plan): 일정 드래그를 낙관적 갱신으로 바꿔 놓자마자 새 자리에 보이도록 수정

src/app/(main)/map/_components/useMobileRouteView.test.tsx

@@ -22,6 +22,7 @@ vi.mock("@/hooks/use-room-id", () => ({ useCurrentRoomId: () => ({ roomId: "room
 vi.mock("@/hooks/useRooms", () => ({
   useRoomSchedules: () => ({ data: fixtures.schedules, isSuccess: true }),
   useSchedulePlanPlaces: () => ({ data: fixtures.places, isSuccess: true, isFetching: false }),
+  useScheduleItemMoveSavingDays: () => [],
 }));
 vi.mock("@/hooks/usePrefetchScheduleRoutes", () => ({ usePrefetchScheduleRoutes: () => true }));
 vi.mock("@/components/expenses/ExpenseProvider", () => ({
@@ -128,7 +129,7 @@ it.each([
   document.body.append(host);
   const root = createRoot(host);
   function Route() { return useMobileRouteView({ active: true, day: 1, initialItemId: 101 }).overlay; }
-  const drag = { editing: false, dragDisabled: false, pending: null, dropTargetScheduleId: null,
+  const drag = { editing: false, dropTargetScheduleId: null,
     registerList: vi.fn(), registerRow: vi.fn(), registerPlaces: vi.fn(), startDrag: vi.fn(), rowStyle: () => undefined };
   try {
     await act(async () => root.render(<QueryClientProvider client={queryClient}>

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

@@ -13,7 +13,6 @@ import { Switch } from "@/components/ui/switch";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { usePlanItineraryExpandedStore } from "@/stores/plan-itinerary-expanded-store";
 import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
-import { usePlanItemCrossDayDragStore } from "@/stores/plan-item-cross-day-drag-store";
 import { cn } from "@/lib/utils";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 import { useCallback, useId, useState } from "react";
@@ -54,11 +53,14 @@ export type PlanDaySectionProps = {
   sectionRef?: Ref<HTMLElement>;
   sectionStyle?: CSSProperties;
   dragHandleProps?: PlanDaySectionDragHandleProps;
-  /** item cross-day D&D — 헤더·접힌 일차 drop (PlanItinerary list와 병행) */
-  crossDaySectionDropProps?: {
-    onDragOver: (e: DragEvent<Element>) => void;
-    onDragLeave: (e: DragEvent<Element>) => void;
-    onDrop: (e: DragEvent<Element>) => void;
+  /** 다른 일차 장소 놓기 — 헤더·접힌 일차 놓을 영역(목록은 PlanItinerary가 받는다)과 놓을 대상 강조 */
+  crossDayDrop?: {
+    props?: {
+      onDragOver: (e: DragEvent<Element>) => void;
+      onDragLeave: (e: DragEvent<Element>) => void;
+      onDrop: (e: DragEvent<Element>) => void;
+    };
+    isTarget: boolean;
   };
 };
 
@@ -88,7 +90,7 @@ export function PlanDaySection({
   sectionRef,
   sectionStyle,
   dragHandleProps,
-  crossDaySectionDropProps,
+  crossDayDrop,
 }: PlanDaySectionProps) {
   const panelId = useId();
 
@@ -142,18 +144,6 @@ export function PlanDaySection({
   const dragDisabled = dragHandleProps?.dragDisabled ?? true;
   const isDragging = dragHandleProps?.isDragging ?? false;
 
-  const sourceScheduleId = usePlanItemCrossDayDragStore(
-    (s) => s.sourceScheduleId,
-  );
-  const hoverTargetScheduleId = usePlanItemCrossDayDragStore(
-    (s) => s.hoverTargetScheduleId,
-  );
-  const isCrossDayItemDropTarget =
-    trackedSid !== undefined &&
-    sourceScheduleId !== null &&
-    sourceScheduleId !== trackedSid &&
-    hoverTargetScheduleId === trackedSid;
-
   const showScheduleMenu =
     onRequestAddExpense != null || onRequestDeleteSchedule != null || onRequestInsertScheduleAfter != null;
 
@@ -163,11 +153,11 @@ export function PlanDaySection({
     <section
       ref={sectionRef}
       style={sectionStyle}
-      {...crossDaySectionDropProps}
+      {...crossDayDrop?.props}
       className={cn(
         "rounded-2xl border border-gray-border bg-white",
         isDragging && "border-primary/80 ring-4 ring-inset ring-primary/45",
-        isCrossDayItemDropTarget &&
+        crossDayDrop?.isTarget &&
           "border-primary ring-3 ring-inset ring-primary/50",
       )}
       aria-label={subtitle ? `${title} ${subtitle}` : title}

src/app/(main)/plan/_components/itinerary/PlanItinerary.route-while-saving.test.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+
+import { PlanItemDragProvider, type PlanItemDragValue } from "@/hooks/usePlanItemDragController";
+import type { PlanPlace } from "@/lib/plan/types";
+
+import { PlanItinerary } from "./PlanItinerary";
+
+const fixtures = vi.hoisted(() => ({
+  places: [] as PlanPlace[],
+  savingDays: [] as number[],
+  travel: [] as { segmentSourceItemId: number; routeQueryEnabled?: boolean }[],
+}));
+vi.mock("@/hooks/useRooms", () => ({
+  useSchedulePlanPlaces: () => ({ data: fixtures.places, isLoading: false, isFetching: false, isError: false }),
+  useCreateScheduleItem: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useScheduleItemMoveSavingDays: () => fixtures.savingDays,
+}));
+vi.mock("@/hooks/usePrefetchScheduleRoutes", () => ({ usePrefetchScheduleRoutes: () => true }));
+vi.mock("../travel-time/PlanTravelTime", () => ({
+  PlanTravelTime: (props: { segmentSourceItemId: number; routeQueryEnabled?: boolean }) => {
+    fixtures.travel.push(props);
+    return null;
+  },
+}));
+vi.mock("./PlanPlaceCard", () => ({ PlanPlaceCard: () => null }));
+vi.mock("./PlanAddPlaceControls", () => ({ PlanAddPlaceControls: () => null }));
+vi.mock("./AddFromBookmarkModal", () => ({ AddFromBookmarkModal: () => null }));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const drag: PlanItemDragValue = {
+  getListProps: () => ({
+    dropZoneProps: { "data-plan-itinerary-drop-zone": "", onDragOver: () => {}, onDragLeave: () => {}, onDrop: () => {} },
+    isItemDragActive: false,
+    reservePaddingBottom: 0,
+    getRowProps: () => ({
+      ref: () => {},
+      style: undefined,
+      placeCardDragProps: { displayOrderIndex: 1, isDragging: false, dragDisabled: false, onDragStart: () => {}, onDragEnd: () => {} },
+    }),
+  }),
+  getSectionDrop: () => ({ props: { onDragOver: () => {}, onDragLeave: () => {}, onDrop: () => {} }, isTarget: false }),
+};
+
+const place = (itemId: number): PlanPlace => ({ id: `item-${itemId}`, itemId, googlePlaceId: `g${itemId}`, title: `장소 ${itemId}` });
+
+it("does not query segment routes of a day while its place move is saving — the server still has the old order", async () => {
+  fixtures.places = [place(2), place(1)];
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  const render = () =>
+    act(async () => {
+      root.render(
+        <PlanItemDragProvider value={drag}>
+          <PlanItinerary roomId="room-1" scheduleId={10} />
+        </PlanItemDragProvider>,
+      );
+    });
+  try {
+    // 순서 변경을 저장하는 중 — 캐시는 이미 새 순서(2 → 1)다
+    fixtures.savingDays = [10];
+    fixtures.travel = [];
+    await render();
+    expect(fixtures.travel.at(-1)).toMatchObject({ segmentSourceItemId: 2, routeQueryEnabled: false });
+
+    // 다른 일차를 저장하는 중이면 이 일차는 조회한다
+    fixtures.savingDays = [20];
+    await render();
+    expect(fixtures.travel.at(-1)).toMatchObject({ segmentSourceItemId: 2, routeQueryEnabled: true });
+
+    // 저장이 끝나면 조회한다
+    fixtures.savingDays = [];
+    await render();
+    expect(fixtures.travel.at(-1)).toMatchObject({ segmentSourceItemId: 2, routeQueryEnabled: true });
+  } finally {
+    await act(async () => root.unmount());
+  }
+});

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

@@ -2,26 +2,24 @@
 import { Spinner } from "@/components/ui/spinner";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useReducedMotion } from "framer-motion";
 import { PlanLoadingSkeleton } from "../PlanLoadingSkeleton";
 import { toast } from "sonner";
 
 import {
   useCreateScheduleItem,
+  useScheduleItemMoveSavingDays,
   useSchedulePlanPlaces,
 } from "@/hooks/useRooms";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { usePrefetchScheduleRoutes } from "@/hooks/usePrefetchScheduleRoutes";
-import { usePlanItineraryReorder } from "@/hooks/usePlanItineraryReorder";
-import { PLAN_ITEM_ITINERARY_DROP_ZONE_ATTR } from "@/lib/plan/planItemReorder";
+import { usePlanItemDrag } from "@/hooks/usePlanItemDragController";
 import { useMapCenterStore } from "@/stores/map-center-store";
 import { schedulePlacesFingerprint } from "@/lib/plan/planTravelLocalStorage";
 import {
   scheduleIdsToRouteColors,
   sortedScheduleIdsForRouteColors,
 } from "@/lib/plan/planRouteDayColors";
-import { usePlanItemCrossDayDragStore } from "@/stores/plan-item-cross-day-drag-store";
 import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
 import { cn } from "@/lib/utils";
 
@@ -86,6 +84,10 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
     routeQueryEnabled,
   );
 
+  // 장소 이동을 저장하는 동안 캐시는 새 순서지만 서버는 아직 옛 순서다 — 지금 새 구간 경로를 받으면
+  // 옛 이웃까지의 경로가 새 구간 key에 남는다. 저장이 끝나면(다시 받은 목록으로) 조회한다
+  const isSavingPlaceMove = useScheduleItemMoveSavingDays(roomId).includes(scheduleId);
+
   const existingItemIds = useMemo(
     () =>
       new Set(
@@ -105,20 +107,8 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
     insertIndex?: number;
   } | null>(null);
 
-  const prefersReducedMotion = useReducedMotion();
-
-  const {
-    getRowProps,
-    listContainerProps,
-    isDraggingActive,
-    listReservePaddingBottom,
-  } = usePlanItineraryReorder({
-    roomId,
-    scheduleId,
-    places,
-    interactionLocked:
-      isAdding || activeInsertIndex !== null,
-  });
+  const { dropZoneProps, isItemDragActive, reservePaddingBottom, getRowProps } =
+    usePlanItemDrag().getListProps(scheduleId, places);
 
   useEffect(() => {
     if (activeInsertIndex === null) return;
@@ -171,18 +161,13 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
 
   const addControlsDisabled = isAdding;
 
-  const crossDayItemDragActive = usePlanItemCrossDayDragStore(
-    (s) => s.sourceScheduleId !== null,
-  );
-
   return (
     <div
-      {...listContainerProps}
-      {...{ [PLAN_ITEM_ITINERARY_DROP_ZONE_ATTR]: "" }}
+      {...dropZoneProps}
       className={cn(
         !isLoading &&
           places.length === 0 &&
-          crossDayItemDragActive &&
+          isItemDragActive &&
           "min-h-12",
       )}
     >
@@ -205,17 +190,13 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
       <div
         className="flex flex-col gap-0"
         style={
-          listReservePaddingBottom > 0
-            ? { paddingBottom: listReservePaddingBottom }
+          reservePaddingBottom > 0
+            ? { paddingBottom: reservePaddingBottom }
             : undefined
         }
       >
         {places.map((place, index) => {
-          const motionEnabled = isDraggingActive && !prefersReducedMotion;
-          const { ref, style, placeCardDragProps } = getRowProps(
-            index,
-            motionEnabled,
-          );
+          const { ref, style, placeCardDragProps } = getRowProps(index);
           const insertIndex = index + 1;
           const segmentActive = activeInsertIndex === insertIndex;
           const nextItemId = places[index + 1]?.itemId;
@@ -275,6 +256,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
                     routeQueryEnabled={
                       placesData !== undefined &&
                       !isFetchingPlaces &&
+                      !isSavingPlaceMove &&
                       routesBatchSettled &&
                       existingItemIds.has(place.itemId) &&
                       existingItemIds.has(nextItemId)

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

@@ -25,6 +25,10 @@ import { MainPageHeader } from "@/components/layout/MainPageHeader";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
 
 import { usePlanScheduleDayReorder } from "@/hooks/usePlanScheduleDayReorder";
+import {
+  PlanItemDragProvider,
+  usePlanItemDragController,
+} from "@/hooks/usePlanItemDragController";
 import { planCopy } from "@/lib/plan/planCopy";
 import { useRoomDetail } from "@/hooks/useRoomDetail";
 import {
@@ -93,9 +97,11 @@ export function PlanPageView() {
     usePlanScheduleDayReorder({
       roomId,
       schedules: sortedSchedules,
-      interactionLocked: isCreatingSchedule || isDeletingSchedule,
     });
 
+  // 장소 드래그는 여러 일차에 걸치므로 페이지에서 한 벌만 둔다(모바일은 MobilePlanView의 컨트롤러)
+  const planItemDrag = usePlanItemDragController(roomId);
+
   const scheduleExpansionSyncKey = useMemo(
     () => sortedSchedules.map((s) => s.scheduleId).join(","),
     [sortedSchedules],
@@ -257,37 +263,38 @@ export function PlanPageView() {
         ) : null}
 
         {planDays.length > 0 ? (
-          <div className="space-y-2.5" {...listContainerProps}>
-            {planDays.map((day, dayIndex) => {
-              const sectionProps = getSectionProps(dayIndex);
+          <PlanItemDragProvider value={planItemDrag}>
+            <div className="space-y-2.5" {...listContainerProps}>
+              {planDays.map((day, dayIndex) => {
+                const sectionProps = getSectionProps(dayIndex);
 
-              return (
-                <PlanScheduleDayBlock
-                  key={day.id}
-                  roomId={roomId}
-                  scheduleId={sortedSchedules[dayIndex]!.scheduleId}
-                  title={day.dayLabel}
-                  subtitle={day.dateLabel}
-                  dateHeading={day.shortDateLabel}
-                  onRequestDeleteSchedule={
-                    sortedSchedules[dayIndex]
-                      ? () => handleDeleteScheduleDay(dayIndex)
-                      : undefined
-                  }
-                  onRequestInsertScheduleAfter={
-                    sortedSchedules[dayIndex]
-                      ? () => handleInsertScheduleAfter(dayIndex)
-                      : undefined
-                  }
-                  isScheduleMenuDisabled={
-                    isCreatingSchedule || isDeletingSchedule || isMovePending
-                  }
-                  interactionLocked={isCreatingSchedule || isDeletingSchedule}
-                  {...sectionProps}
-                />
-              );
-            })}
-          </div>
+                return (
+                  <PlanScheduleDayBlock
+                    key={day.id}
+                    roomId={roomId}
+                    scheduleId={sortedSchedules[dayIndex]!.scheduleId}
+                    title={day.dayLabel}
+                    subtitle={day.dateLabel}
+                    dateHeading={day.shortDateLabel}
+                    onRequestDeleteSchedule={
+                      sortedSchedules[dayIndex]
+                        ? () => handleDeleteScheduleDay(dayIndex)
+                        : undefined
+                    }
+                    onRequestInsertScheduleAfter={
+                      sortedSchedules[dayIndex]
+                        ? () => handleInsertScheduleAfter(dayIndex)
+                        : undefined
+                    }
+                    isScheduleMenuDisabled={
+                      isCreatingSchedule || isDeletingSchedule || isMovePending
+                    }
+                    {...sectionProps}
+                  />
+                );
+              })}
+            </div>
+          </PlanItemDragProvider>
         ) : null}
       </div>
       {deleteDayDialog}