From ee40a149c30ba06281f29b1bc562fa119bed9caa Mon Sep 17 00:00:00 2001
From: seoJing <tjwlsrb1021@kyonggi.ac.kr>
Date: Sun, 31 May 2026 21:00:10 +0900
Subject: [PATCH 1/2] fix: prevent map card deck close jitter

---
 src/features/feed/ui/MapFeedCardPager.tsx  | 101 +++++++++++++++++++--
 src/features/map/client/MapClient.tsx      |  52 ++++++-----
 src/features/map/ui/MapCardDeckOverlay.tsx |   2 +-
 3 files changed, 124 insertions(+), 31 deletions(-)

diff --git a/src/features/feed/ui/MapFeedCardPager.tsx b/src/features/feed/ui/MapFeedCardPager.tsx
index 65e975d..bbd7668 100644
--- a/src/features/feed/ui/MapFeedCardPager.tsx
+++ b/src/features/feed/ui/MapFeedCardPager.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import {
+    useCallback,
+    useEffect,
     useMemo,
     useRef,
     useState,
@@ -39,6 +41,7 @@ const STACK_BOTTOM_EXPANDED_DVH = -10;
 const DECK_ANIMATION = MAP_FEED_CARD_DECK_ANIMATION;
 
 type MapFeedCardPagerProps = {
+    hidden?: boolean;
     snap: FeedCardPagerSnap;
     onSnapChange: (snap: FeedCardPagerSnap) => void;
     promotedCount: number;
@@ -54,6 +57,7 @@ type MapFeedCardPagerProps = {
 type ExitDirection = CardDeckExitDirection;
 
 export function MapFeedCardPager({
+    hidden = false,
     snap,
     onSnapChange,
     promotedCount,
@@ -72,6 +76,9 @@ export function MapFeedCardPager({
     const searchQuery = useFilterStore((s) => s.searchQuery);
     const setPromotedCount = onPromotedCountChange;
     const isStackDragging = useRef(false);
+    const previousSafePromoted = useRef(0);
+    const resetToPeekTimerRef = useRef<number | null>(null);
+    const [isResettingToPeek, setIsResettingToPeek] = useState(false);
     // 좌/우 swipe 가 시작된 단일 카드만 override — 그 외는 기본 'down' exit.
     // ref + forceRerender 안티패턴 대신 단일 state 로 정리 (한 시점에 override 대상은 1장).
     const [exitOverride, setExitOverride] = useState<{
@@ -112,6 +119,67 @@ export function MapFeedCardPager({
     const promotedItems = filtered.slice(visibleStart, visibleEnd);
     const stackItems = filtered.slice(safePromoted, safePromoted + 4);
 
+    const clearResetToPeekTimer = useCallback(() => {
+        if (resetToPeekTimerRef.current === null) return;
+        window.clearTimeout(resetToPeekTimerRef.current);
+        resetToPeekTimerRef.current = null;
+    }, []);
+
+    const finishResetToPeek = useCallback(() => {
+        clearResetToPeekTimer();
+        setIsResettingToPeek(false);
+        onSnapChange('peek');
+    }, [clearResetToPeekTimer, onSnapChange]);
+
+    const holdStackUntilResetExitCompletes = useCallback(
+        (cardCount: number) => {
+            clearResetToPeekTimer();
+            if (cardCount <= 0) {
+                setIsResettingToPeek(false);
+                return;
+            }
+
+            setIsResettingToPeek(true);
+            // AnimatePresence onExitComplete is the source of truth, but keep a
+            // conservative fallback so the lower deck cannot stay locked if an
+            // exit is interrupted by route/HMR/state timing.
+            resetToPeekTimerRef.current = window.setTimeout(
+                finishResetToPeek,
+                cardCount * DECK_ANIMATION.staggerDelay * 1000 + 450,
+            );
+        },
+        [clearResetToPeekTimer, finishResetToPeek],
+    );
+
+    useEffect(() => {
+        const previous = previousSafePromoted.current;
+        previousSafePromoted.current = safePromoted;
+
+        if (previous > 0 && safePromoted === 0) {
+            holdStackUntilResetExitCompletes(previous);
+            return;
+        }
+
+        if (safePromoted > 0) {
+            clearResetToPeekTimer();
+            setIsResettingToPeek(false);
+        }
+    }, [
+        safePromoted,
+        clearResetToPeekTimer,
+        holdStackUntilResetExitCompletes,
+        promotedCount,
+    ]);
+
+    useEffect(
+        () => () => {
+            clearResetToPeekTimer();
+        },
+        [clearResetToPeekTimer],
+    );
+
+    const isStackInteractionLocked = isResettingToPeek;
+
     const isExpanded = snap === 'expanded';
     const stackWidth = isExpanded ? STACK_WIDTH_EXPANDED : STACK_WIDTH_PEEK;
     const stackBottom = isExpanded
@@ -119,7 +187,9 @@ export function MapFeedCardPager({
         : STACK_BOTTOM_PEEK_DVH;
 
     function promoteOne() {
-        if (safePromoted >= total) return;
+        if (safePromoted >= total) {
+            return;
+        }
 
         const overflowItem =
             promotedItems.length >= MAX_PROMOTED_FEED_CARDS
@@ -178,14 +248,13 @@ export function MapFeedCardPager({
             return;
         }
         setPromotedCount(0);
-        // 가장 깊은 카드의 exit 가 끝난 시점 직후에 snap 전환.
-        setTimeout(
-            () => onSnapChange('peek'),
-            start * DECK_ANIMATION.staggerDelay * 1000,
-        );
+        holdStackUntilResetExitCompletes(start);
     }
 
     function handleStackDragEnd(_e: unknown, info: PanInfo) {
+        if (isStackInteractionLocked) {
+            return;
+        }
         const dy = info.offset.y;
         setTimeout(() => {
             isStackDragging.current = false;
@@ -201,7 +270,12 @@ export function MapFeedCardPager({
     }
 
     function handleStackClick() {
-        if (isStackDragging.current) return;
+        if (isStackInteractionLocked) {
+            return;
+        }
+        if (isStackDragging.current) {
+            return;
+        }
         if (snap === 'peek') onSnapChange('expanded');
         else promoteOne();
     }
@@ -234,7 +308,9 @@ export function MapFeedCardPager({
         <>
             {/* promote 된 카드 더미 — 화면 위쪽으로 쌓임 */}
             <div
-                className="pointer-events-none fixed inset-x-0 z-30"
+                className={`pointer-events-none fixed inset-x-0 z-30 ${
+                    hidden ? 'opacity-0' : ''
+                }`}
                 style={{ top: `${DECK_ANIMATION.cardTopDvh}dvh` }}
             >
                 <div
@@ -246,6 +322,9 @@ export function MapFeedCardPager({
                         onExitComplete={() => {
                             setExitOverride(null);
                             setInstantDismissIds(new Set());
+                            if (isResettingToPeek) {
+                                finishResetToPeek();
+                            }
                         }}
                     >
                         {promotedItems.map((item, i) => {
@@ -404,7 +483,11 @@ export function MapFeedCardPager({
 
             {/* 하단 뭉치 — 카드 자체가 drag 영역 */}
             <motion.div
-                className="pointer-events-auto fixed left-1/2 z-30 -translate-x-1/2 cursor-grab touch-none active:cursor-grabbing"
+                className={`pointer-events-auto fixed left-1/2 z-30 -translate-x-1/2 cursor-grab touch-none active:cursor-grabbing ${
+                    isStackInteractionLocked || hidden
+                        ? 'pointer-events-none opacity-0'
+                        : ''
+                }`}
                 initial={false}
                 animate={{
                     width: stackWidth,
diff --git a/src/features/map/client/MapClient.tsx b/src/features/map/client/MapClient.tsx
index 64ce314..22f6f1c 100644
--- a/src/features/map/client/MapClient.tsx
+++ b/src/features/map/client/MapClient.tsx
@@ -160,7 +160,7 @@ export function MapClient() {
     const [viewportBbox, setViewportBbox] = useState<ViewportBbox | null>(null);
     const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
     const isMapMarkerDeckOpen = selectedClusterId !== null;
-
+    const isFeedPagerHidden = isMapMarkerDeckOpen || isPagerHiddenByMarkerDeck;
     // next-themes 의 resolvedTheme 은 초기 렌더에서 undefined — 이 상태로 MapV3Canvas 가 mount 되면
     // customStyleId 가 잘못 지정되어 기본 스타일로 뜬 뒤 live swap 되며 깜빡인다.
     // <html class="dark"> 는 next-themes inline 스크립트가 React 수화 전에 동기적으로 세팅하므로,
@@ -199,7 +199,9 @@ export function MapClient() {
         const revealTimer = window.setTimeout(() => {
             setIsPagerHiddenByMarkerDeck(false);
         }, 120);
-        return () => window.clearTimeout(revealTimer);
+        return () => {
+            window.clearTimeout(revealTimer);
+        };
     }, [isMapMarkerDeckOpen]);
 
     const openMapTutorial = useCallback(() => {
@@ -536,6 +538,9 @@ export function MapClient() {
 
     const handleClusterSelect = useCallback(
         (clusterId: string) => {
+            setIsPagerHiddenByMarkerDeck(true);
+            setPagerSnap('peek');
+            setPagerPromotedCount(0);
             updateUrl({ cluster: clusterId });
         },
         [updateUrl],
@@ -543,6 +548,9 @@ export function MapClient() {
 
     const handleFeedMarkerSelect = useCallback(
         (feedId: string) => {
+            setIsPagerHiddenByMarkerDeck(true);
+            setPagerSnap('peek');
+            setPagerPromotedCount(0);
             updateUrl({ cluster: `feed-${feedId}` });
         },
         [updateUrl],
@@ -550,6 +558,9 @@ export function MapClient() {
 
     const handleFeedMarkerGroupSelect = useCallback(
         (groupId: string) => {
+            setIsPagerHiddenByMarkerDeck(true);
+            setPagerSnap('peek');
+            setPagerPromotedCount(0);
             updateUrl({ cluster: groupId });
         },
         [updateUrl],
@@ -820,25 +831,24 @@ export function MapClient() {
                 onClose={() => updateUrl({ chat: false })}
             />
 
-            {!isPagerHiddenByMarkerDeck && (
-                <MapFeedCardPager
-                    snap={pagerSnap}
-                    onSnapChange={setPagerSnap}
-                    promotedCount={pagerPromotedCount}
-                    onPromotedCountChange={setPagerPromotedCount}
-                    items={visibleFeedItems}
-                    isInitialLoading={isInitialFeedLoading}
-                    onTutorialCardPromote={showCardTutorialStep}
-                    onTutorialCardDismiss={completeDeckTutorial}
-                    onTutorialCardDetail={
-                        tutorialOpen ? completeDeckTutorial : undefined
-                    }
-                    onBookmark={(item) => {
-                        // TODO: 다음 PR에서 useAddFavorite mutation 연결
-                        console.info('[bookmark]', item.id, item.title);
-                    }}
-                />
-            )}
+            <MapFeedCardPager
+                hidden={isFeedPagerHidden}
+                snap={pagerSnap}
+                onSnapChange={setPagerSnap}
+                promotedCount={pagerPromotedCount}
+                onPromotedCountChange={setPagerPromotedCount}
+                items={visibleFeedItems}
+                isInitialLoading={isInitialFeedLoading}
+                onTutorialCardPromote={showCardTutorialStep}
+                onTutorialCardDismiss={completeDeckTutorial}
+                onTutorialCardDetail={
+                    tutorialOpen ? completeDeckTutorial : undefined
+                }
+                onBookmark={(item) => {
+                    // TODO: 다음 PR에서 useAddFavorite mutation 연결
+                    console.info('[bookmark]', item.id, item.title);
+                }}
+            />
 
             <FeedBottomSheet
                 open={feedListOpen}
diff --git a/src/features/map/ui/MapCardDeckOverlay.tsx b/src/features/map/ui/MapCardDeckOverlay.tsx
index 28015e1..4b9c05f 100644
--- a/src/features/map/ui/MapCardDeckOverlay.tsx
+++ b/src/features/map/ui/MapCardDeckOverlay.tsx
@@ -69,6 +69,7 @@ export function MapCardDeckOverlay({
     );
     const topItem = visibleItems[0];
     const hasNextItem = dismissedCount < items.length - 1;
+
     function closeDeck() {
         if (isClosingDeck) return;
         setExitOverride(null);
@@ -151,7 +152,6 @@ export function MapCardDeckOverlay({
                         onExitComplete={() => {
                             setExitOverride(null);
                             if (!isClosingDeck) return;
-                            setIsClosingDeck(false);
                             onCloseAction();
                         }}
                     >

From a380c2eaab5fdee43a768c98dcce614bad386dc8 Mon Sep 17 00:00:00 2001
From: seoJing <tjwlsrb1021@kyonggi.ac.kr>
Date: Sun, 31 May 2026 21:12:39 +0900
Subject: [PATCH 2/2] fix: disable hidden pager card interactions

---
 src/features/feed/ui/MapFeedCardPager.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/features/feed/ui/MapFeedCardPager.tsx b/src/features/feed/ui/MapFeedCardPager.tsx
index bbd7668..088d64d 100644
--- a/src/features/feed/ui/MapFeedCardPager.tsx
+++ b/src/features/feed/ui/MapFeedCardPager.tsx
@@ -164,12 +164,7 @@ export function MapFeedCardPager({
             clearResetToPeekTimer();
             setIsResettingToPeek(false);
         }
-    }, [
-        safePromoted,
-        clearResetToPeekTimer,
-        holdStackUntilResetExitCompletes,
-        promotedCount,
-    ]);
+    }, [safePromoted, clearResetToPeekTimer, holdStackUntilResetExitCompletes]);
 
     useEffect(
         () => () => {
@@ -309,7 +304,7 @@ export function MapFeedCardPager({
             {/* promote 된 카드 더미 — 화면 위쪽으로 쌓임 */}
             <div
                 className={`pointer-events-none fixed inset-x-0 z-30 ${
-                    hidden ? 'opacity-0' : ''
+                    hidden ? 'pointer-events-none opacity-0' : ''
                 }`}
                 style={{ top: `${DECK_ANIMATION.cardTopDvh}dvh` }}
             >
@@ -388,7 +383,9 @@ export function MapFeedCardPager({
                                 <motion.div
                                     key={item.id}
                                     className={`absolute left-0 right-0 ${
-                                        isTop ? 'pointer-events-auto' : ''
+                                        isTop && !hidden
+                                            ? 'pointer-events-auto'
+                                            : ''
                                     }`}
                                     style={{
                                         zIndex: 100 - order,