페이지 이동 시 지도 깜빡임 방지 - #251
Merged
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough지도 레이아웃을 라우트 기반 표시 모드로 재구성했다. 지도 뷰포트 캡처·복원과 위치 추적 제어를 추가했다. 지도 가림 상태에서 YouTube 재생을 중지한다. 핀 등록 단계는 현재 위치와 지도 뷰포트를 사용한다. Changes지도 표시 및 등록 흐름
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant MapLayout
participant MapPage
participant MapViewer
participant useGoogleMap
participant useYouTubeClipPlayer
MapLayout->>MapPage: 가림 상태와 저장된 뷰포트 전달
MapPage->>MapViewer: 현재 뷰포트 캡처 요청
MapViewer->>useGoogleMap: captureViewport 호출
useGoogleMap-->>MapPage: MapViewport 반환
MapPage->>useYouTubeClipPlayer: 플레이어 비활성화 및 재생 중지
MapLayout->>MapPage: 가림 해제와 저장된 뷰포트 전달
MapPage->>MapViewer: 저장된 뷰포트 복원 요청
MapViewer->>useGoogleMap: restoreViewport 호출
Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
onebone
marked this pull request as ready for review
August 8, 2026 20:01
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/features/map/hooks/useGoogleMap.ts (1)
323-337: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
restoreViewport에서flyingCancelRef.current를 비우세요.
captureViewport는 취소 후flyingCancelRef.current = null로 정리합니다.restoreViewport는 같은 정리를 하지 않습니다. 이미 취소된 콜백 참조가 남아 다음flyTo이전에 다시 호출될 수 있습니다. 동작 차이는 현재 없지만 두 경로의 정리 규칙을 같게 하세요.♻️ 제안 수정
flyingCancelRef.current?.(); + flyingCancelRef.current = null; clearFlyingSuppression(); clearCenterChangeSuppression();🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/map/hooks/useGoogleMap.ts` around lines 323 - 337, Update restoreViewport to set flyingCancelRef.current to null immediately after invoking the current cancellation callback, matching the cleanup performed by captureViewport. Keep the existing viewport restoration and suppression-clearing behavior unchanged.src/hooks/useYouTubeClipPlayer.ts (1)
312-324: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win비활성화 시
playingKey상태를 초기화하세요.비활성화 분기는
activeKeyRef.current만null로 설정합니다.playingKeystate는 이전 값을 유지합니다. 소비자는 재생이 멈춘 뒤에도 해당 핀을 재생 중으로 표시합니다.현재는
src/pages/MapPage.tsx의 241-243행이 별도 effect로stopClipPlayback()을 호출해 이를 보완합니다. 훅 내부에서 처리하면 이 보완 코드가 필요 없습니다.♻️ 제안 수정
if (!enabled) { - clearStopTimer(); - activeKeyRef.current = null; + stop(); destroyPlayer(); hostRef.current?.remove(); hostRef.current = null; return; } void ensurePlayer().catch(() => { // 미리 준비 실패해도 재생 시점에 다시 시도한다. }); - }, [clearStopTimer, destroyPlayer, enabled, ensurePlayer]); + }, [destroyPlayer, enabled, ensurePlayer, stop]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/hooks/useYouTubeClipPlayer.ts` around lines 312 - 324, Update the !enabled branch in useYouTubeClipPlayer to reset the playingKey state to null alongside activeKeyRef.current, ensuring consumers no longer see a clip as playing after playback is disabled. Then remove the redundant MapPage effect that calls stopClipPlayback solely to perform this reset.src/pages/MapPage.tsx (1)
208-221: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low value지도가 아직 준비되지 않으면 복원이 영구히 누락됩니다.
wasCoveredRef.current를 effect 시작 시점에 항상 갱신합니다.mapLoadStatus !== 'ready'여서 218행에서 return하면, 이후mapLoadStatus가'ready'로 바뀌어 effect가 다시 실행되어도wasCovered가 이미 false이므로restoreViewport가 호출되지 않습니다.현재는
initialCenter가 최초 생성 시 중심을 잡아 주므로 영향이 작습니다. 복원 대기 상태를 별도 ref로 유지하면 이 경계 케이스가 사라집니다.♻️ 제안 수정
useLayoutEffect(() => { const wasCovered = wasCoveredRef.current; wasCoveredRef.current = isCovered; if (!wasCovered && isCovered) { const liveViewport = mapViewerRef.current?.captureViewport(); if (liveViewport) onSaveViewport(liveViewport); + needsRestoreRef.current = true; return; } - if (!wasCovered || isCovered || !savedViewport || mapLoadStatus !== 'ready') return; + if (isCovered || !needsRestoreRef.current || !savedViewport || mapLoadStatus !== 'ready') { + return; + } + needsRestoreRef.current = false; mapViewerRef.current?.restoreViewport(savedViewport); }, [isCovered, mapLoadStatus, onSaveViewport, savedViewport]);
needsRestoreRef는wasCoveredRef옆에useRef(false)로 선언하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/MapPage.tsx` around lines 208 - 221, MapPage의 useLayoutEffect에서 지도 로딩 전 복원이 누락되지 않도록 wasCoveredRef와 별도로 needsRestoreRef를 useRef(false)로 추가하세요. 저장된 뷰포트 복원이 필요한 조건이 충족되면 needsRestoreRef를 유지하고, mapLoadStatus가 ready가 된 뒤 해당 ref를 확인해 restoreViewport를 호출한 후 초기화하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/hooks/useYouTubeClipPlayer.ts`:
- Around line 219-223: 비활성화 분기의 직접적인 event.target.destroy() 호출을 destroyPlayer()
경로로 변경해 playerRef.current를 먼저 비우고 플레이어를 정리하세요. 이후 기존 오류 reject 및 return 동작은
유지하고, ensurePlayer()와 cleanup에서 파괴된 YT.Player 인스턴스를 재사용하거나 다시 destroy하지 않도록 하세요.
In `@src/routes/index.tsx`:
- Around line 79-81: Update the /app/pin/search route configuration under
MapLayout to override the inherited bottomNavItem with null, ensuring the search
overlay renders without the bottom navigation while leaving other MapLayout
child routes unchanged.
---
Nitpick comments:
In `@src/features/map/hooks/useGoogleMap.ts`:
- Around line 323-337: Update restoreViewport to set flyingCancelRef.current to
null immediately after invoking the current cancellation callback, matching the
cleanup performed by captureViewport. Keep the existing viewport restoration and
suppression-clearing behavior unchanged.
In `@src/hooks/useYouTubeClipPlayer.ts`:
- Around line 312-324: Update the !enabled branch in useYouTubeClipPlayer to
reset the playingKey state to null alongside activeKeyRef.current, ensuring
consumers no longer see a clip as playing after playback is disabled. Then
remove the redundant MapPage effect that calls stopClipPlayback solely to
perform this reset.
In `@src/pages/MapPage.tsx`:
- Around line 208-221: MapPage의 useLayoutEffect에서 지도 로딩 전 복원이 누락되지 않도록
wasCoveredRef와 별도로 needsRestoreRef를 useRef(false)로 추가하세요. 저장된 뷰포트 복원이 필요한 조건이
충족되면 needsRestoreRef를 유지하고, mapLoadStatus가 ready가 된 뒤 해당 ref를 확인해
restoreViewport를 호출한 후 초기화하세요.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 160c8ff5-985b-4eb1-9110-9e90cb729bd6
📒 Files selected for processing (9)
src/features/map/components/MapViewer.tsxsrc/features/map/hooks/useCurrentLocationMarker.tssrc/features/map/hooks/useGoogleMap.tssrc/hooks/useYouTubeClipPlayer.tssrc/layouts/MapLayout.tsxsrc/layouts/PinRegistrationLayout.tsxsrc/pages/MapPage.tsxsrc/pages/PinRegisterEntryPage.tsxsrc/routes/index.tsx
onebone
temporarily deployed
to
preview-maintenance
August 9, 2026 10:08 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
This was referenced Aug 9, 2026
Merged
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
변경 내용
관련 이슈
Closes #249
변경 사항
테스트
브라우저에서 정상 동작 확인
기존 기능에 영향 없음 확인
PLIMAP → 핀 등록 장소 목록 → 지도 선택 전환에서 등록 지도가 재마운트되거나 로딩 화면을 노출하지 않는지 실제 Google Maps로 확인
핀 등록 진입·복귀 시 현재 위치와 메인 지도 카메라 상태가 유지되는지 확인
npm run lint통과 (오류 0건, 기존 Fast Refresh 경고 2건)npm run build통과 (기존 Lottie direct-eval 및 청크 크기 경고)git diff --check통과clean-context adversarial review에서 P0–P3 지적 사항 없음
스크린샷 (UI 변경시)
체크리스트
pnpm format)pnpm lint:fix)코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:
Summary by CodeRabbit