[복덕방/Hotfix] Naver Maps SDK destroy 시 TypeError 수정

[ff1451]

Summary

• useNaverMap 훅의 effect를 생성/파괴용과 좌표 업데이트용으로 분리
• destroy() 호출을 try-catch로 감싸 Naver Maps SDK 내부 _clearSwipe 타이밍 이슈 방어

관련 이슈

• closes [복덕방/Hotfix] Naver Maps SDK destroy 시 TypeError 발생 버그 수정 #1220
• Sentry: KOIN-PROD-6

원인

• cleanup 함수가 if (!mapRef.current) 블록 안에서만 반환되어 항상 보장되지 않음
• Naver Maps SDK destroy() 내부에서 setTimeout으로 예약된 _clearSwipe가 DOM 제거 후 실행되면서 releaseCapture 접근 시 TypeError 발생
• 카카오톡 인앱 브라우저(Android)에서 재현됨

Summary by CodeRabbit

• 버그 수정

  • Naver Map 인스턴스 정리 시 발생할 수 있는 타이밍 이슈를 개선했습니다.

• 개선사항

  • 지도 초기화 프로세스와 중심 위치 업데이트 로직을 최적화했습니다.

[coderabbitai]

Walkthrough

useNaverMap 훅에서 Naver Maps SDK 파괴 시 발생하는 타이밍 이슈를 해결하기 위해 맵 인스턴스 생성/파괴 로직을 수정하고, cleanup 함수에 try-catch 방어 처리를 추가했으며, 좌표 업데이트를 별도 useEffect로 분리했습니다.

Changes

Cohort / File(s)	Summary
Naver Map 생성/파괴 로직 개선 src/components/Room/RoomPage/hooks/useNaverMap.ts	맵 인스턴스 생성 시 조건부 가드 제거하여 무조건 생성, cleanup 함수의 destroy() 호출을 try-catch로 감싸 SDK 내부 타이밍 이슈 방어, 항상 mapRef.current null 처리. 좌표 변경 시 맵 센터 업데이트를 별도 useEffect로 분리하여 관심사 분리.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 PR의 주요 변경 사항인 Naver Maps SDK destroy 시 TypeError 수정을 명확하게 설명하고 있습니다.
Linked Issues check	✅ Passed	코드 변경이 #1220의 요구사항을 충족합니다: useEffect 분리, destroy() 호출의 try-catch 래핑, cleanup 로직 보장.
Out of Scope Changes check	✅ Passed	모든 변경사항이 #1220의 Naver Maps SDK TypeError 해결과 직접적으로 관련되어 있으며 범위 내입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hotfix/fix-naver-map-destroy-error

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ff1451]

@CodeRabbit

[coderabbitai]

@ff1451 안녕하세요! PR을 검토하겠습니다.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/Room/RoomPage/hooks/useNaverMap.ts (1)

6-8: ⚠️ Potential issue | 🟠 Major

try/catch는 비동기 SDK 에러를 처리하지 못할 수 있습니다.

PR 설명처럼 Naver Maps의 destroy()가 내부적으로 setTimeout을 통해 _clearSwipe를 실행한다면, 그 콜백에서 발생하는 예외는 Line 23-25의 catch 블록에 포착되지 않습니다. JavaScript의 try/catch는 동기 코드만 처리하며, 비동기 콜백의 예외는 다른 실행 컨텍스트에서 발생하기 때문입니다.

추가로 현재 코드는 useEffect의 cleanup 함수를 사용하는데, React에서 useEffect cleanup은 DOM이 제거된 이후에 실행됩니다. 만약 SDK가 cleanup 중에 이미 제거된 DOM 요소에 접근한다면 같은 문제가 반복될 수 있습니다.

권장 사항:

• useLayoutEffect로 변경하여 cleanup을 DOM 제거 이전에 실행하거나
• Naver Maps API 문서를 확인하여 destroy() 호출 후 SDK 정리 작업이 완료될 때까지의 시간을 파악하고, 필요시 컨테이너 DOM을 제거 전까지 유지하세요.

현재 try/catch만으로는 근본적인 해결책이 아닐 가능성이 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/Room/RoomPage/hooks/useNaverMap.ts` around lines 6 - 8, The
current useNaverMap effect uses try/catch around synchronous calls but that
won't catch exceptions thrown asynchronously by the Naver Maps SDK (e.g., inside
destroy()'s setTimeout or _clearSwipe), and React's useEffect cleanup runs after
DOM removal; change the effect to useLayoutEffect (replace useEffect with
useLayoutEffect in useNaverMap) so cleanup runs before DOM removal, and ensure
destroy() is invoked from that layout-effect cleanup; additionally, verify or
delay DOM removal until the SDK finishes its async cleanup (consult Naver Maps
docs) rather than relying solely on try/catch around naver.maps.Map.destroy to
prevent asynchronous exceptions from accessing removed DOM.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Room/RoomPage/hooks/useNaverMap.ts`:
- Around line 10-20: The map is being recreated whenever latitude/longitude
change because the map-creation effect depends on them; change the
creation/cleanup of the map (the code that constructs mapInstance, assigns
mapRef.current and calls mapInstance.destroy()) to only depend on isLoaded so
creation/destruction happens only when isLoaded toggles, not on coordinate
updates; to satisfy exhaustive-deps, capture the initial latitude/longitude in
refs (e.g., initialLatRef/initialLngRef) and use those refs when constructing
the Map instead of latitude/longitude in the dependency array; keep a separate
effect that watches latitude and longitude and calls
mapRef.current.setCenter(new naver.maps.LatLng(latitude, longitude)) (no
destroy/recreate) so center updates don't trigger map reconstruction.

---

Outside diff comments:
In `@src/components/Room/RoomPage/hooks/useNaverMap.ts`:
- Around line 6-8: The current useNaverMap effect uses try/catch around
synchronous calls but that won't catch exceptions thrown asynchronously by the
Naver Maps SDK (e.g., inside destroy()'s setTimeout or _clearSwipe), and React's
useEffect cleanup runs after DOM removal; change the effect to useLayoutEffect
(replace useEffect with useLayoutEffect in useNaverMap) so cleanup runs before
DOM removal, and ensure destroy() is invoked from that layout-effect cleanup;
additionally, verify or delay DOM removal until the SDK finishes its async
cleanup (consult Naver Maps docs) rather than relying solely on try/catch around
naver.maps.Map.destroy to prevent asynchronous exceptions from accessing removed
DOM.

🪄 Autofix (Beta)

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

Run ID: f283e367-86d4-41f2-af6c-8709b884d190

📥 Commits

Reviewing files that changed from the base of the PR and between 44eeab9 and 735d557.

📒 Files selected for processing (1)

• src/components/Room/RoomPage/hooks/useNaverMap.ts

[dh2906]

냠냠