feat: 웹/웹뷰 통합 + 웹 바텀 네비게이션 마이그레이션 (MOA-942)#1643
Conversation
앱 네이티브 바텀탭(홈/구독/메뉴)을 웹으로 이식. - RN app/(tabs)/_layout.tsx 스펙 1:1 재현 (배경 #FFFFFF, 아이콘 28px, active #FF5414 / inactive #C5C5C5, height 56+safe-area) - svgr 미사용 환경이라 홈/메뉴 SVG는 CSS mask로 틴팅 (배경 rect 제거) - 구독 아이콘은 PNG 2-state 교체 - Z_INDEX.bottomNav, USER_EVENT.BOTTOM_TAB_CLICKED 추가 - 아직 레이아웃 미마운트 (독립 컴포넌트 + Storybook)
viteFinal plugins에 vite-plugin-svgr 추가. 기존엔 svgr가 없어 ?react SVG import가 컴포넌트가 아닌 URL 문자열로 처리되어 해당 스토리에서 "Invalid element name" 렌더 오류가 발생했다.
프로젝트 컨벤션(vite-plugin-svgr)에 맞춰 홈/메뉴 아이콘을 svg?react 컴포넌트로 import하고 부모 Tab의 color(currentColor)를 상속해 active/inactive 틴팅. 기존 mask 방식 제거.
- 구독 페이지(/subscriptions): 웹뷰=구독 동아리 목록(브릿지), 순수 웹=앱 다운로드 CTA - 메뉴 페이지(/menu): 서비스 소개·총 동아리 연합회·개인정보 처리방침 (RN 더보기 이식) - PAGE_VIEW/PAGE_NAME 상수, /subscriptions·/menu 라우트 추가
- src/layouts/AppLayout: Outlet + BottomNavigation + 하단 여백(safe-area 반영) - /, /introduce, /club-union, /promotions, /subscriptions, /menu 6개를 중첩 라우트 레이아웃으로 묶어 바텀네비 노출 - 상세/홍보상세/지원폼/게임/관리자/콜백/웹뷰는 그룹 밖(미노출) - 헤더는 미변경 (로고+검색 통일은 별도 단계)
- nav 메뉴 링크 3개 + 햄버거/모바일 드롭다운 제거 (메뉴는 바텀네비/메뉴페이지로 이동) - Nav/NavLink/MenuBar/MenuButton 스타일 및 useHeaderNavigation 햄버거 핸들러 제거 - 검색창이 우측에 몰리던 문제 수정: 로고 옆에서 공간 채우도록 (데스크톱 480px 상한)
- webviewRoutes를 /webview/* → 웹 경로 리다이렉트로 전환 (구버전 앱 진입 URL 보호) - WebviewMainPage를 MainPage로 병합 (웹뷰: 카드 구독 버튼·APP_HOME 배너·웹뷰 페이지뷰, Popup/Footer는 웹 전용) - SubscribeButton을 MainPage/components로 이전 - Filter/SearchBox/usePromotionNotification: /webview 문자열 → isInAppWebView() - WebviewGlobalStyles를 App에서 웹뷰 전역 주입, WebviewLayout/webviewFilterConfig 삭제
헤더 간소화로 nav가 빠진 뒤 검색창이 한쪽으로 쏠리던 문제 수정. - 데스크톱·랩탑(>700px): width 345px + margin-left auto로 우측 정렬 - 태블릿·모바일·웹뷰(≤700px): flex:1로 꽉 채움
경로 통합으로 웹뷰가 웹 라우트를 사용하게 되어, IntroducePage·ClubUnionPage의
hideOn={['webview']} 제거 → 웹뷰에서도 로고+검색 헤더가 보이도록.
- PromotionListPage의 웹뷰 SearchBarArea 분기 제거 → 통일 헤더 단일 렌더 - Filter margin-top을 56px로 고정 → 경로 통합으로 웹뷰에 생긴 fixed 헤더를 Filter가 클리어하도록 (MainPage·홍보목록의 헤더 가림 수정) - SearchBarArea/LogoImage/$isWebview 스타일 정리
webviewFilterConfig 삭제·경로 통합을 반영 — isInAppWebView 기반 분기, AppLayout/바텀네비, /webview 리다이렉트 호환 설명으로 교체.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 26 minutes and 37 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 ignored due to path filters (8)
📒 Files selected for processing (37)
Warning
|
🎨 UI 변경사항을 확인해주세요
4개 스토리 변경 · 전체 60개 스토리 · 23개 컴포넌트 |
![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 unifies the web and in-app webview routing by introducing a shared layout with a bottom navigation bar (BottomNavigation), a new MenuPage, and a SubscriptionsPage, while removing redundant webview-specific pages and adding backward-compatible redirects. The review feedback highlights several important improvements, including resolving a UX issue where sub-pages do not correctly keep their parent navigation tabs active, preventing potential runtime crashes by safely handling cases where subscribedClubIds might be undefined, and restricting the maximum width of the bottom navigation bar on desktop screens to maintain a clean layout.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
- isTabActive: /promotions→홈, /introduce·/club-union→메뉴 활성 유지 - 데스크톱에서 바는 풀폭 유지하되 탭 묶음을 max-width 500px 가운데 정렬 (PR #1643 Gemini 리뷰 반영)
1 participant
개요
앱의 네이티브 크롬을 제거하고 웹/웹뷰를 하나의 웹으로 통합합니다.
헤더는 로고+검색으로 통일, 네이티브 바텀탭은 웹 바텀 네비게이션으로 대체,
/webview/*경로 의존을isInAppWebView()(UAMoadongApp) 한 갈래로 일원화했습니다.변경 사항 (기능 단위)
웹 바텀 네비게이션
feat(components)웹 바텀 네비게이션 컴포넌트 추가 — RNapp/(tabs)스펙 이식(홈/구독/메뉴) ·49118d7bfix(storybook)svg?reactimport 지원 추가 (스토리 렌더 오류 수정) ·3804dbfbrefactor(components)바텀네비 아이콘 CSS mask →svg?react틴팅 전환 ·e5314c68신규 페이지
feat메뉴(/menu)·구독(/subscriptions) 페이지 추가 ·075f614e레이아웃 셸
feat(layout)AppLayout도입 → 핵심 네비 페이지에 바텀네비 마운트 ·26363a49헤더 통일
refactor(header)헤더를 로고+검색만으로 간소화 (메뉴 링크 → 메뉴 페이지) ·49f1c57afix(header)검색창 반응형 정렬 (데스크톱 우측 / 태블릿 이하 꽉 채움) ·f791af51refactor(header)소개·연합회 페이지 웹뷰에서도 통일 헤더 노출 ·309c4444경로 통합
refactor(webview)웹뷰를 웹 라우트로 통합 —/webview/*리다이렉트화 +MainPage병합(웹뷰 구독 버튼·APP_HOME 배너) ·114cfd17refactor(webview)홍보목록 웹뷰 분기 제거 + Filter 헤더 여백 정렬 ·5fa1a7e2문서
docs(features)웹/웹뷰 통합 라우팅으로 WebView 섹션 갱신 ·2379e165검증
typecheck·lint·build·build-storybook통과useHeaderNavigation테스트 17/17 통과런타임 검증 (RN preview)
이 PR의 Vercel preview URL을 RN 앱
EXPO_PUBLIC_WEBVIEW_URL에 넣어 실기기/시뮬레이터에서 확인:/·/promotions— fixed 헤더 아래 콘텐츠/Filter 안 가림, 바텀네비 3탭/webview/main→/,/webview/club/:id→/clubDetail/:id리다이렉트/clubDetail) · 뒤로가기구버전 앱 호환
src/routes/webviewRoutes.tsx를/webview/* → 웹 경로리다이렉트(상대 경로)로 유지. 구버전 앱 진입 URL 보호용이라 제거 금지.RN 연동 — Moadong/moadong-react-native#21
/webview/main로드 → 본 PR 리다이렉트로/진입 ✓session_id는 FE 부트스트랩(index.tsx)에서 캡처돼 리다이렉트 전에 보존 ✓APP_VERSION브릿지는 미사용으로 잔존(무해)