🟡[P2] fix(frontend): no Suspense boundaries for streaming/async UI in App Router segments

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-01, ISS-UI-02 — Async Server Components without Suspense / Missing loading.tsx
Priority	P2 🟡
Scan Date	2026-04-16
Flagged By	main-session verification

요약

• WHAT: 14개 page/layout 중 11개 파일에 Suspense가 사용되지만 stream-friendly 데이터 fetch 패턴 미적용. 또한 라우트 segment별 loading.tsx 부재 — 페이지 전환 시 빈 화면
• WHY: Next.js 15 App Router의 핵심 가치인 progressive streaming + skeleton UX를 활용 못함. 사용자는 데이터 로딩 동안 모든 화면이 멈춘 듯 느낌
• WHERE: frontend/src/app/**/page.tsx (loading.tsx 없음), frontend/src/app/(main)/admin/**/page.tsx (Server Component인데 Suspense 부재 가능)
• SEVERITY: MEDIUM — UX 품질 저하, App Router 베스트 프랙티스 미준수

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/app/(main)/loading.tsx	—	존재 여부 미확인 — 일부 라우트 segment에만 존재	main-session	Medium
2	frontend/src/app/(auth)/loading.tsx	—	존재 여부 미확인	main-session	Medium
3	frontend/src/app/(main)/admin/loading.tsx	—	admin 라우트 그룹에는 loading.tsx 존재 (skeleton 패턴으로 사용됨, code-review에서 확인)	main-session	High
4	frontend/src/app/**/page.tsx	—	11개 파일에 Suspense 사용되나 page 자체에 적용된 곳은 1곳 (login/page.tsx)만	main-session	High

영향 분석

영향 범위

• 모든 라우트 전환 (login → admin, admin → users 등)
• 첫 로드 시 데이터 fetch 동안 빈 화면
• 모바일/저속 네트워크 환경에서 UX 가장 명확

장애 시나리오

1. 사용자가 admin 메뉴에서 "Users" 클릭
2. getUsers() server fetch 시작 (300ms-1s)
3. loading.tsx 없으므로 이전 페이지 그대로 표시 → 사용자는 "클릭 안됐나?" 의심하며 다시 클릭
4. 결국 새 페이지 로드되지만 첫 인상 나쁨

긴급도

• 즉각적 장애 아니지만 sustained UX 저하
• 다른 Next.js 15 App Router 프로젝트 대비 기본기 부족

제안 해결 방안

접근 방법

1. loading.tsx 추가 — 주요 라우트 segment에:

   // frontend/src/app/(main)/admin/users/loading.tsx
   import { TableSkeleton } from \"@/shared/components/skeletons/TableSkeleton\";
   
   export default function Loading() {
     return <TableSkeleton rows={10} />;
   }

2. 데이터 fetch를 Server Component로 이동 + Suspense 활용:

   // page.tsx
   import { Suspense } from \"react\";
   
   export default function UsersPage() {
     return (
       <Suspense fallback={<TableSkeleton />}>
         <UsersList />  {/* 이 컴포넌트가 await fetch */}
       </Suspense>
     );
   }

3. 각 라우트별 적용: (main)/, (auth)/, admin/users/, admin/settings/, admin/approvals/

대안

• Client-side fetch + skeleton: 현재 사용 중일 수 있음 — JS 번들 증가 + slower LCP
• router.events.on("routeChangeStart")로 progress bar: Next.js App Router는 이 API 미지원 → suspense + loading.tsx가 표준

수용 기준

• loading.tsx 파일을 주요 라우트(최소 5개) segment에 추가
• 페이지 전환 시 즉시 스켈레톤 표시 확인
• Lighthouse LCP 측정 — 개선 추세 확인
• 테스트 커맨드: cd frontend && pnpm build && pnpm start

참조

• 관련 파일: frontend/src/app/**/loading.tsx (다수 신규 생성), frontend/src/app/**/page.tsx
• Checklist 항목: ISS-UI-01, ISS-UI-02
• Next.js: Loading UI and Streaming
• 관련 이슈: 없음 (🟠[P1] fix(frontend): no error.tsx error boundaries in any app route #61 error.tsx와 보완적)

재현 방법

사전 조건

• dev/prod 빌드 실행

단계

1. admin 페이지에서 "Users" 메뉴 클릭
2. 페이지 전환 동안 화면 관찰 (특히 Network throttling "Slow 3G")
3. loading skeleton 표시 여부 확인

기대 결과

즉시 skeleton UI 표시, 데이터 도착 후 실제 콘텐츠로 교체

실제 결과

이전 페이지 화면 유지 또는 빈 화면 → UX 부자연스러움

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/app/(main)/admin/loading.tsx	기존 admin loading (참고)	패턴 재사용
frontend/src/app/(main)/admin/users/page.tsx	사용자 목록 페이지	우선 적용 대상
frontend/src/app/(main)/admin/settings/page.tsx	설정 페이지	적용 대상
frontend/src/shared/components/skeletons/	스켈레톤 컴포넌트들	fallback에 활용

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-01,ISS-UI-02`