fix: iOS 앱 내 웹뷰인 경우 커뮤니티 상세페이지 이전 버튼 제거 #2012
Conversation
Summary by CodeRabbit버그 수정
안내WalkthroughiOS WebView 환경을 감지하는 런타임 체크를 추가하여 DetailFeedCard의 Header 컴포넌트에서 왼쪽 요소의 조건부 렌더링을 구현했습니다. iOS 앱에서는 왼쪽 요소를 표시하지 않고 다른 플랫폼에서는 기존 동작을 유지합니다. Changes
Sequence DiagramsequenceDiagram
participant Browser/App
participant Header Component
participant Render Logic
alt iOS WebView
Browser/App->>Header Component: userAgent contains SOPT-iOS
Header Component->>Header Component: isIOSApp = true
Header Component->>Render Logic: Skip left element
Render Logic-->>Browser/App: Render without left button
else Other Platforms
Browser/App->>Header Component: userAgent without SOPT-iOS
Header Component->>Header Component: isIOSApp = false
Header Component->>Render Logic: Render left element
Render Logic-->>Browser/App: Render with 24x24 left area
end
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~8분 Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 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 |
|
🚀 프리뷰 배포 확인하기 🚀 |
![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
🧹 Nitpick comments (1)
src/components/feed/detail/DetailFeedCard.tsx (1)
79-79: 더 명확한 조건부 렌더링 패턴을 사용하세요.현재
{isIOSApp || <div>...</div>}구문은 동작하지만 일반적이지 않은 패턴입니다. React에서는 요소를 숨기려는 의도를 명확히 표현하기 위해{!condition && <element>}패턴을 사용하는 것이 더 일반적입니다.다음과 같이 수정하면 가독성이 향상됩니다:
- {isIOSApp || <div css={{ width: '24px', height: '24px' }}>{left}</div>} + {!isIOSApp && <div css={{ width: '24px', height: '24px' }}>{left}</div>}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/feed/detail/DetailFeedCard.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build-app / build
- GitHub Check: chromatic-deploy
| const isIOSApp = /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부 | ||
|
|
There was a problem hiding this comment.
SSR 환경에서 런타임 에러가 발생합니다.
Next.js는 서버 사이드 렌더링을 지원하는데, navigator 객체는 브라우저에서만 사용 가능합니다. 서버에서 이 코드가 실행되면 ReferenceError: navigator is not defined 에러가 발생합니다.
다음 중 한 가지 방법으로 수정하세요:
방법 1 (권장): typeof 체크로 안전하게 접근
- const isIOSApp = /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부
+ const isIOSApp = typeof navigator !== 'undefined' && /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부방법 2: useEffect를 사용하여 클라이언트에서만 실행
+ const [isIOSApp, setIsIOSApp] = useState(false);
+
+ useEffect(() => {
+ setIsIOSApp(/SOPT-iOS/.test(navigator.userAgent));
+ }, []);
- const isIOSApp = /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부방법 1이 더 간단하고 hydration mismatch 없이 즉시 올바른 UI를 렌더링할 수 있어 권장됩니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const isIOSApp = /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부 | |
| const isIOSApp = typeof navigator !== 'undefined' && /SOPT-iOS/.test(navigator.userAgent); // iOS 앱 내 웹뷰 여부 |
🤖 Prompt for AI Agents
In src/components/feed/detail/DetailFeedCard.tsx around lines 74-75, the code
directly accesses navigator.userAgent causing a ReferenceError during SSR; guard
the access by checking typeof navigator !== 'undefined' (or typeof window !==
'undefined') before testing the userAgent and default to false on the server so
the expression becomes safe in Node rendering; update the isIOSApp assignment to
perform this typeof check and return a boolean fallback when navigator is
unavailable.
1 participant
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
iOS 웹뷰인 경우 user agent 값을 기준으로 예외처리 했습니다.
🤔 그렇다면, 어떻게 구현했어요~?
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?
[user agent를 SOPT-iOS로 지정한 경우]
[Safari로 iOS로 접속한 경우]