[fix] WebView 레이아웃 최적화를 위한 Safe Area Insets 주입 기능 구현 #11
Conversation
Walkthrough웹뷰에 기기 안전 영역(insets)을 반영하도록 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@ui/club-detail/club-detail-screen.tsx`:
- Around line 144-150: The injectedJavaScript string (injectJS) runs only at
WebView load so CSS vars --rn-safe-top/--rn-safe-bottom stay stale after
rotations/multi-window; create a WebView ref (e.g., webviewRef) and add a
useEffect that watches useSafeAreaInsets() values and calls
webviewRef.current.injectJavaScript(injectJS) whenever insets change, and/or
attach an onLayout handler on the WebView to re-inject when layout changes;
update references in club-detail-screen.tsx to use the WebView ref, the
injectJavaScript() method, and the existing injectJS constant so the CSS
variables are updated dynamically.
🧹 Nitpick comments (1)
ui/club-detail/club-detail-screen.tsx (1)
183-185: 초기 레이아웃 점프 방지용 사전 주입 검토
CSS 변수가 초기 레이아웃에 쓰이면 현재 방식은 로드 이후 주입되어 첫 렌더가 흔들릴 수 있습니다. RN WebView 13.15.0에서injectedJavaScriptBeforeContentLoaded지원 여부를 확인한 뒤 필요하면 사전 주입으로 옮기는 것을 고려하세요.🔧 적용 예시
- injectedJavaScript={injectJS} + injectedJavaScriptBeforeContentLoaded={injectJS}
| const injectJS = ` | ||
| (function() { | ||
| document.documentElement.style.setProperty('--rn-safe-top', '${insets.top}px'); | ||
| document.documentElement.style.setProperty('--rn-safe-bottom', '${insets.bottom}px'); | ||
| })(); | ||
| true; | ||
| `; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
fd "club-detail-screen.tsx" --type fRepository: Moadong/moadong-react-native
Length of output: 109
🏁 Script executed:
wc -l ui/club-detail/club-detail-screen.tsxRepository: Moadong/moadong-react-native
Length of output: 113
🏁 Script executed:
cat -n ui/club-detail/club-detail-screen.tsx | sed -n '1,160p'Repository: Moadong/moadong-react-native
Length of output: 6110
🏁 Script executed:
cat -n ui/club-detail/club-detail-screen.tsx | sed -n '160,262p'Repository: Moadong/moadong-react-native
Length of output: 3376
🏁 Script executed:
rg "useEffect|injectJavaScript|insets" ui/club-detail/club-detail-screen.tsx -A 3 -B 1Repository: Moadong/moadong-react-native
Length of output: 434
🏁 Script executed:
rg "injectedJavaScript|injectJavaScript|webviewRef" --type tsx --type ts -B 2 -A 2Repository: Moadong/moadong-react-native
Length of output: 99
🏁 Script executed:
rg "injectedJavaScript|injectJavaScript|webviewRef" -B 2 -A 2Repository: Moadong/moadong-react-native
Length of output: 469
🏁 Script executed:
rg "onLayout|onOrientationChange|useEffect|useCallback" ui/club-detail/club-detail-screen.tsxRepository: Moadong/moadong-react-native
Length of output: 54
🏁 Script executed:
rg "useSafeAreaInsets|useWindowDimensions|Dimensions.addEventListener" -B 2 -A 2Repository: Moadong/moadong-react-native
Length of output: 2820
기기 회전 및 멀티윈도우 시 인셋 값이 업데이트되지 않음
injectedJavaScript는 WebView 로드 시점에 한 번만 실행되므로, 기기 회전이나 멀티윈도우 진입 시 useSafeAreaInsets()에서 반환하는 값이 변경되어도 WebView 내 CSS 변수(--rn-safe-top, --rn-safe-bottom)는 초기값으로 유지됩니다. WebView ref를 생성하고 useEffect에서 insets 변경을 감지하여 injectJavaScript() 메서드로 재주입하거나, WebView의 onLayout 핸들러를 통해 적절히 대응해야 합니다.
🤖 Prompt for AI Agents
In `@ui/club-detail/club-detail-screen.tsx` around lines 144 - 150, The
injectedJavaScript string (injectJS) runs only at WebView load so CSS vars
--rn-safe-top/--rn-safe-bottom stay stale after rotations/multi-window; create a
WebView ref (e.g., webviewRef) and add a useEffect that watches
useSafeAreaInsets() values and calls
webviewRef.current.injectJavaScript(injectJS) whenever insets change, and/or
attach an onLayout handler on the WebView to re-inject when layout changes;
update references in club-detail-screen.tsx to use the WebView ref, the
injectJavaScript() method, and the existing injectJS constant so the CSS
variables are updated dynamically.
oesnuj
changed the title
작업 내용
단말기의 노치, 상태바 등 물리적 안전 영역 정보를 웹뷰가 정확히 인지하지 못하는 문제를 해결하기 위해, 앱 네이티브 단에서 측정한 인셋 값을 웹뷰의 스타일 시스템에 직접 주입합니다.
Summary by CodeRabbit
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.