[feature] 메뉴 페이지#1633
Conversation
- WebviewBottomNav(홈/구독/메뉴) 신규, 상단 필터칩(동아리/홍보)과 별개 config - WebviewLayout에 영구 바텀바 장착 + 콘텐츠 하단 패딩 - /webview/subscribed, /webview/menu 라우트 추가 (페이지는 placeholder, 후속 구현) - 동아리 상세에서 바텀바 숨김, 홈 탭은 main/promotions에서 활성
- /webview/menu: 서비스 소개/총동아리연합회/개인정보 처리방침 + 앱 버전 - useNavigator로 인앱/웹 네비게이션 분기 재사용 - webviewBridge APP_VERSION 메시지 + requestAppVersion, useAppVersion 훅 추가 - PAGE_VIEW.WEBVIEW_MENU_PAGE, USER_EVENT.WEBVIEW_MENU_CLICKED 추가
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 7 minutes and 59 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
Warning
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a webview bottom navigation bar, layout adjustments, and a new menu page that displays the app version using a custom hook and webview bridge. The review feedback highlights a potential runtime error in the message handler of useAppVersion when processing unexpected event data, and suggests safer parsing. Additionally, the reviewer recommends dynamically adjusting the layout's bottom padding so that pages without the bottom navigation bar do not display unnecessary empty space.
| const handleMessage = (event: MessageEvent) => { | ||
| let data: AppToWebMessage; | ||
| try { | ||
| data = | ||
| typeof event.data === 'string' ? JSON.parse(event.data) : event.data; | ||
| } catch { | ||
| return; | ||
| } | ||
| if (data.type === 'APP_VERSION') { | ||
| setVersion(data.payload.version); | ||
| } | ||
| }; |
There was a problem hiding this comment.
외부 스크립트, 브라우저 확장 프로그램, 또는 개발 서버(Webpack Dev Server 등)에서 전송되는 message 이벤트의 event.data가 null이거나 예상치 못한 형식일 경우, try-catch 블록 외부에서 data.type에 접근하면서 TypeError가 발생하여 스크립트가 크래시될 수 있습니다.
안전한 예외 처리를 위해 메시지 파싱과 타입 검사, 상태 업데이트 로직 전체를 try-catch 블록 내부로 포함하고, data가 유효한 객체인지 검증하는 방어 코드를 추가하는 것이 좋습니다.
const handleMessage = (event: MessageEvent) => {
try {
const data = (typeof event.data === 'string' ? JSON.parse(event.data) : event.data) as AppToWebMessage | null;
if (data && typeof data === 'object' && data.type === 'APP_VERSION') {
setVersion(data.payload.version);
}
} catch {
return;
}
};| import { Outlet } from 'react-router-dom'; | ||
| import WebviewBottomNav from '@/components/common/WebviewBottomNav/WebviewBottomNav'; | ||
| import WebviewGlobalStyles from '@/styles/WebviewGlobal.styles'; | ||
| import * as Styled from './WebviewLayout.styles'; | ||
|
|
||
| const WebviewLayout = () => { | ||
| return ( | ||
| <> | ||
| <WebviewGlobalStyles /> | ||
| <Outlet /> | ||
| <Styled.ContentArea> | ||
| <Outlet /> | ||
| </Styled.ContentArea> | ||
| <WebviewBottomNav /> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
WebviewBottomNav 컴포넌트 내부에서 /webview/club으로 시작하는 경로(동아리 상세 등)일 때는 바텀바를 렌더링하지 않도록 처리되어 있습니다. 하지만 WebviewLayout의 ContentArea는 항상 고정된 padding-bottom을 가지고 있어, 바텀바가 없는 풀스크린 페이지에서도 하단에 불필요한 여백이 생기게 됩니다.
현재 경로에 따라 ContentArea에 $hasBottomNav와 같은 transient prop을 전달하여 조건부로 padding-bottom을 적용하도록 개선하는 것이 좋습니다.
| import { Outlet } from 'react-router-dom'; | |
| import WebviewBottomNav from '@/components/common/WebviewBottomNav/WebviewBottomNav'; | |
| import WebviewGlobalStyles from '@/styles/WebviewGlobal.styles'; | |
| import * as Styled from './WebviewLayout.styles'; | |
| const WebviewLayout = () => { | |
| return ( | |
| <> | |
| <WebviewGlobalStyles /> | |
| <Outlet /> | |
| <Styled.ContentArea> | |
| <Outlet /> | |
| </Styled.ContentArea> | |
| <WebviewBottomNav /> | |
| </> | |
| ); | |
| }; | |
| import { Outlet, useLocation } from 'react-router-dom'; | |
| import WebviewBottomNav from '@/components/common/WebviewBottomNav/WebviewBottomNav'; | |
| import WebviewGlobalStyles from '@/styles/WebviewGlobal.styles'; | |
| import * as Styled from './WebviewLayout.styles'; | |
| const WebviewLayout = () => { | |
| const { pathname } = useLocation(); | |
| const hasBottomNav = !pathname.startsWith('/webview/club'); | |
| return ( | |
| <> | |
| <WebviewGlobalStyles /> | |
| <Styled.ContentArea $hasBottomNav={hasBottomNav}> | |
| <Outlet /> | |
| </Styled.ContentArea> | |
| <WebviewBottomNav /> | |
| </> | |
| ); | |
| }; |
| export const ContentArea = styled.div` | ||
| padding-bottom: calc( | ||
| ${WEBVIEW_BOTTOM_NAV_HEIGHT}px + env(safe-area-inset-bottom) | ||
| ); | ||
| `; |
There was a problem hiding this comment.
WebviewLayout에서 전달받은 $hasBottomNav prop에 따라 조건부로 하단 패딩을 적용하도록 스타일을 수정합니다.
| export const ContentArea = styled.div` | |
| padding-bottom: calc( | |
| ${WEBVIEW_BOTTOM_NAV_HEIGHT}px + env(safe-area-inset-bottom) | |
| ); | |
| `; | |
| export const ContentArea = styled.div<{ $hasBottomNav: boolean }>(({ $hasBottomNav }) => ({ | |
| paddingBottom: $hasBottomNav | |
| ? "calc(" + WEBVIEW_BOTTOM_NAV_HEIGHT + "px + env(safe-area-inset-bottom))" | |
| : "0", | |
| })); |
- 동아리 상세에서 바텀바 숨김 + 하단 패딩 제거를 WebviewLayout에서 일괄 제어 - WebviewBottomNav 중복 경로 체크 제거, isActive 타입을 WebviewBottomNavPath로 - NavButton에 aria-current 추가, 스타일 theme를 ThemeProvider accessor로
…ure/#1624-add-menu-page-MOA-927
- 파싱/타입검사/상태업데이트를 try 블록 내부로 이동 - data 객체 유효성 가드로 예기치 못한 message 이벤트의 TypeError 방지
1 participant
요약
바텀 네비 웹뷰 이관(MOA-923)의 메뉴 탭 구현.
/webview/menu에서 서비스 소개·총동아리연합회·개인정보 처리방침과 앱 버전을 보여준다.변경
WebviewMenuPage— 메뉴 항목 3개 + 앱 버전useNavigator(handleLink)로 인앱(requestNavigateWebview)/웹(navigate)/외부 URL 분기 재사용webviewBridge에REQUEST_APP_VERSION/APP_VERSION메시지 +requestAppVersion()추가useAppVersion훅 신규 (브릿지로 앱 버전 수신, 웹에서는 미표시)PAGE_VIEW.WEBVIEW_MENU_PAGE,USER_EVENT.WEBVIEW_MENU_CLICKED추가의존성
REQUEST_APP_VERSION핸들러([feature] MOA-929 RN 네이티브 탭바 제거 → 단일 웹뷰 호스트 #1626, 별도 레포) 필요 — 미구현 시 버전 표시만 생략(그 외 정상)