[feature] 앱 버전 관리를 위해 웹뷰 라우터를 분리한다

[suhyun113]

#️⃣연관된 이슈

ex) #1113

📝작업 내용

앱 버전 관리를 위해 웹뷰 라우트를 분리했습니다.

문제 상황

웹 릴리즈 이후, 앱 화면에서 상세페이지 웹뷰가 앱의 탑바와 겹쳐져 문제가 생겼습니다.

• 앱 업데이트 전 사용자
  -> 기존 /club/:clubId 경로로 진입
  -> 신규 상세페이지 UI 노출되어 신규 UI는 앱 탑바를 고려하지 않은 구조가 되었습니다.
  따라서, 웹에서는 정상적으로 보이지만, 앱에서는 탑바와 콘텐츠가 겹치는 문제가 생겼습니다. 이는 앱 사용자가 업데이트 하지 않았을때 사용자 경험을 저하시키기 때문에 웹뷰 라우트를 분리하기로 했습니다.

개선 방향

1. 기존 상세페이지 UI는 레거시로 유지
2. 신규 UI는 명확하게 분리된 라우트에서만 노출
   -> 앱 버전에 따라서 접근하는 상세페이지를 분리하고자 했습니다.
   • 앱을 업데이트하지 않은 사용자 : 기존 UI 유지
   • 앱을 업데이트한 사용자와 웹 사용자 : 신규 UI 사용
     => 버전별로 사용할 수 있도록 라우트를 분리했습니다.(이후 앱 사용자가 모두 업데이트를 마치면, 기존의 레거시 상세페이지는 제거할 예정입니다.)

변경된 라우트 구성

1️⃣ 레거시 상세페이지 유지

{/*기존 웹 & 안드로이드 url (android: v1.1.0)*/}
<Route
  path='/club/:clubId'
  element={
    <Suspense fallback={null}>
      <LegacyClubDetailPage />
    </Suspense>
  }
/>

=> 기존 웹과 앱(v1.1.0 이하) 에서 사용 중인 라우트
앱 탑바와 충돌 없는 UI로 앱을 업데이트 하지 않은 사용자의 UI를 보호하기 위한 목적입니다.

2️⃣ 웹 전용 신규 상세페이지

{/*웹 유저에게 신규 상세페이지 보유주기 위한 임시 url*/}
<Route
  path='/clubDetail/:clubId'
  element={
    <Suspense fallback={null}>
      <ClubDetailPage />
    </Suspense>
  }
/>

=> 웹에서 신규 상세페이지 UI를 먼저 노출하기 위한 임시 라우트
앱에서는 사용하지 않는 라우트로, 새롭게 변경된 웹 배포하기 위한 목적입니다.

3️⃣ 신규 앱(WebView) 전용 상세페이지

{/*새로 빌드해서 배포할 앱 주소 url*/}
<Route
  path='/webview/club/:clubId'
  element={
    <Suspense fallback={null}>
      <ClubDetailPage />
    </Suspense>
  }
/>

=> 새로 빌드/배포되는 앱에서만 사용하는 WebView 라우트

• 앱 탑바 구조를 고려한 신규 UI로, 앱 업데이트를 완료한 사용자만 접근이 가능하도록 하기 위한 목적입니다.

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

릴리즈 노트

• 새로운 기능

  • 클럽 상세 정보에 탭 기반 인터페이스(소개, 사진) 추가
  • 클럽 상세 페이지 접근을 위한 새로운 라우트 추가

• 개선

  • 클럽 상세 페이지 네비게이션 경로 업데이트
  • 페이지 조회 추적 및 사용자 이벤트 로깅 기능 포함

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 25, 2026 1:26pm

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

이 PR은 웹뷰 버전 관리를 위해 라우팅 구조를 개선합니다. 새로운 레거시 클럽 상세 페이지 컴포넌트를 추가하고, 세 개의 새로운 라우트(/club, /clubDetail, /webview/club)를 도입하며, 네비게이션 대상을 /club에서 /clubDetail로 업데이트합니다.

Changes

Cohort / File(s)	변경 사항
라우팅 설정 frontend/src/App.tsx	세 개의 새로운 라우트 추가: /club/:clubId (LegacyClubDetailPage), /clubDetail/:clubId (ClubDetailPage), /webview/club/:clubId (ClubDetailPage), 모두 Suspense로 래핑
새로운 페이지 컴포넌트 frontend/src/pages/ClubDetailPage/LegacyClubDetailPage.tsx	클럽 상세 정보 페이지 새로 구현: useGetClubDetail 훅으로 데이터 페칭, useTrackPageView와 mixpanel 이벤트 추적, INTRO/PHOTOS 탭 UI 관리, 탭 전환 시 URL 및 사용자 이벤트 처리, 오류 처리 및 데이터 유효성 검사 포함
네비게이션 업데이트 frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx, frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx	네비게이션 대상을 /club/${clubId}에서 /clubDetail/${clubId}로 변경 (2개 위치)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related issues

• [feature] MOA-573 앱 버전 관리를 위해 웹뷰 라우터를 분리한다 #1113: /webview/club/:clubId 라우트 추가로 웹뷰 라우팅 분리 목표 직접 달성

Possibly related PRs

• [HotFix] 동아리 상세페이지 모집 버튼 푸터 삭제 복구 #978: LegacyClubDetailPage와 ClubDetailFooter 및 탭형 클럽 상세 UI 도입으로 동일한 컴포넌트 및 스타일 구조 관련
• [feature] 상세 페이지 모바일 탑바 웹뷰로 이관 및 리액트 네이티브 API 연동 구조 도입 #1090: 동일한 클럽 상세 라우팅 및 UI 영역에서 ClubDetailPage 컴포넌트(상단 바, 웹뷰 브릿지, 스크롤 훅) 변경
• [feature] 지원서 제출 후 메시지 개선 및 리다이렉트 처리 추가 #592: ApplicationFormPage의 제출 후 네비게이션 동작 변경 (다만 다른 라우트로 리다이렉트)

Suggested labels

✨ Feature, 🔨 Refactor, 💻 FE

Suggested reviewers

• seongwon030
• lepitaaar
• oesnuj

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	PR 변경사항들이 웹뷰 라우터 분리라는 목표(MOA-573)를 충족하며, 레거시 클럽 상세 페이지 추가, 라우트 분리, 네비게이션 경로 조정 등이 앱 버전 관리를 위한 구현으로 보임.
Out of Scope Changes check	✅ Passed	모든 변경사항(라우트 분리, 레거시 페이지 추가, 네비게이션 경로 조정)이 웹뷰 라우팅 분리라는 목표와 직접적으로 관련되어 있으며, 범위 외 변경사항은 발견되지 않음.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	PR 제목은 웹뷰 라우터 분리를 통한 앱 버전 관리라는 실제 변경 사항을 정확하게 반영하고 있습니다.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[oesnuj]

짝 프로그래밍 재밌었어요~~
고생했슴니다