fix(frontend): 동적 라우트 코드를 URL 에서 읽기 (정적 export placeholder 대응)

CloudFront 가 동적 경로에 placeholder HTML 을 서빙하면 useParams() 가 빌드 타임
'placeholder' 를 반환 → meeting:join/getRtpCapabilities 에 code='placeholder' 가 실려
validation 실패(8자 초과)·입장 불가. URL pathname 에서 직접 segment 를 읽는
useRouteSegment 훅 도입(window 없으면 useParams 폴백) → meetings/[code], reports/[id] 적용.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: yuchem2

apps/frontend/src/app/meetings/[code]/MeetingPageClient.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useParams } from 'next/navigation';
-
 import { ChatPanel } from '@/feature/meeting/components/ChatPanel';
 import { MeetingScreen } from '@/feature/meeting/components/MeetingScreen';
 import { NicknameGate } from '@/feature/meeting/components/NicknameGate';
@@ -10,11 +8,12 @@ import { useMediasoupViewModel } from '@/feature/meeting/hooks/useMediasoupViewM
 import { useMeetingLayoutViewModel } from '@/feature/meeting/hooks/useMeetingLayoutViewModel';
 import { useMeetingViewModel } from '@/feature/meeting/hooks/useMeetingViewModel';
 import { useNicknameGateViewModel } from '@/feature/meeting/hooks/useNicknameGateViewModel';
+import { useRouteSegment } from '@/shared/hooks/useRouteSegment';
 
 /**
  * `/meetings/[code]` 의 client wrapper.
  *
- * `useParams` 로 동적 segment 를 읽고 세 ViewModel hook 을 합성한다:
+ * URL 에서 회의 코드를 읽고(`useRouteSegment` — 정적 export placeholder 대응) 세 ViewModel hook 을 합성한다:
  *   - `useMeetingViewModel` 이 socket 을 만들고 join/참가자 목록 담당
  *   - `useMediasoupViewModel` 이 그 socket 위에서 RTP capabilities/Transport 준비
  *   - `useChatViewModel` 이 그 socket 을 받아 채팅 emit/수신 담당
@@ -23,8 +22,7 @@ import { useNicknameGateViewModel } from '@/feature/meeting/hooks/useNicknameGat
  * 와 client hook 사용이 동일 파일에서 공존할 수 없기 때문이다.
  */
 export function MeetingPageClient() {
-  const params = useParams<{ code: string }>();
-  const code = typeof params?.code === 'string' ? params.code : '';
+  const code = useRouteSegment('meetings', 'code');
   const meetingVm = useMeetingViewModel(code);
   const mediasoupVm = useMediasoupViewModel(meetingVm.socket, code);
   const chatVm = useChatViewModel(meetingVm.socket, code);

apps/frontend/src/app/reports/[id]/ReportDetailPageClient.tsx

@@ -1,18 +1,17 @@
 'use client';
 
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
 
 import { ReportDetail } from '@/feature/reports/components/ReportDetail';
 import { useReportDetailViewModel } from '@/feature/reports/hooks/useReportDetailViewModel';
+import { useRouteSegment } from '@/shared/hooks/useRouteSegment';
 
 /**
  * `/reports/[id]` 의 client wrapper.
- * useParams 로 dynamic segment 를 읽고 ViewModel + View 를 합성한다.
+ * URL 에서 회의록 id 를 읽고(`useRouteSegment` — 정적 export placeholder 대응) ViewModel + View 를 합성한다.
  */
 export function ReportDetailPageClient() {
-  const params = useParams<{ id: string }>();
-  const id = typeof params?.id === 'string' ? params.id : '';
+  const id = useRouteSegment('reports', 'id');
   const vm = useReportDetailViewModel(id);
   return (
     <main className="min-h-screen bg-bg px-4 py-10">

apps/frontend/src/shared/hooks/useRouteSegment.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+
+/**
+ * 동적 라우트 segment 값을 **브라우저 URL 에서 직접** 읽는다.
+ *
+ * 정적 export(`output: 'export'`)의 동적 라우트는 `generateStaticParams` 의
+ * placeholder HTML 한 장만 빌드되고, 운영에선 CloudFront 가 그 placeholder HTML 을
+ * 실제 코드 경로(`/meetings/{code}`)에 서빙한다. 이때 `useParams()` 는 URL 이 아니라
+ * **빌드 타임 값(`'placeholder'`)** 을 돌려주므로 그대로 쓰면 안 된다.
+ * 따라서 클라이언트에서는 `window.location.pathname` 에서 실제 값을 읽고,
+ * window 가 없는 빌드/SSR/테스트 환경에서는 `useParams()` 로 폴백한다.
+ *
+ * @param parentSegment 동적 segment 바로 앞의 고정 경로 (예: `'meetings'`, `'reports'`)
+ * @param paramKey      `useParams` 폴백 시 쓸 키 (예: `'code'`, `'id'`)
+ */
+export function useRouteSegment(parentSegment: string, paramKey: string): string {
+  const params = useParams<Record<string, string>>();
+
+  if (typeof window !== 'undefined') {
+    const segments = window.location.pathname.split('/').filter(Boolean);
+    const idx = segments.indexOf(parentSegment);
+    if (idx >= 0 && segments[idx + 1]) {
+      return decodeURIComponent(segments[idx + 1]);
+    }
+  }
+
+  const fallback = params?.[paramKey];
+  return typeof fallback === 'string' ? fallback : '';
+}