perf: PR Detail 헤더 렌더링과 files 로딩 분리

[phnml1]

작업 유형

• 새로운 기능 (feat)
• 버그 수정 (fix)
• 리팩토링 (refactor)
• 스타일/UI (style)
• 테스트 (test)
• 문서 (docs)
• 설정/환경 (chore)

관련 마일스톤

• Week 1-2: 프로젝트 기반 & 인증
• Week 3-4: GitHub 연동
• Week 5-6: AI 코드 리뷰
• Week 7-8: 실시간 작업
• Week 9-10: 대시보드 & 배포

개요

Closes #156

PR Detail 진입 시 변경 파일 목록(usePRFiles) 로딩이 PR title/header 렌더링까지 막지 않도록 loading 책임을 분리했습니다. PR 기본 정보는 usePRDetail이 준비되는 즉시 렌더링하고, file sidebar / mobile dropdown / diff 영역은 각 영역에서 files loading/error 상태를 처리합니다.

변경 사항

• PRDetailContainer의 full-page loading/error gate를 PR detail 데이터 기준으로 축소했습니다.
• usePRFiles(id)는 계속 실행해서 React Query cache를 채우되, 전체 페이지 skeleton 조건에서는 제거했습니다.
• PRFileList에서 파일 목록 loading skeleton과 error state를 지역적으로 처리하도록 변경했습니다.
• PRDiffSection에서 diff 영역 전용 loading skeleton과 error state를 추가했습니다.
• MobileFileDropdown에서 files loading/error 상태를 표시하도록 변경했습니다.
• pr-detail-header-loading-before.md에 before/after Lighthouse 지표, 개선 내용, 남은 병목, 다음 최적화 계획을 기록했습니다.

스크린샷 (선택)

• 해당 없음. UI 디자인 변경이 아니라 loading 책임 분리와 상태 처리 위치 조정입니다.

테스트

• 로컬 개발 서버에서 정상 동작 확인
• 기존 기능에 영향 없음 확인
• 타입 에러 없음 (tsc --noEmit)
• ESLint 경고/에러 없음

검증 결과:

• npm.cmd run lint: 통과. 단, 기존 hooks/useRealtimeComments.ts의 appendComment unused warning 1건이 남아 있습니다.
• npm.cmd test -- --runInBand: 통과. 22 suites / 131 tests passed.
• npx.cmd tsc --noEmit: 실패. 기존 Prisma/generated 타입 불일치로 실패했습니다.
  • BaseNotification.reviewStatus 누락 관련 오류
  • Prisma Review.stage / Notification.reviewStatus generated type 불일치
  • 이번 PR에서 수정한 PR Detail loading 분리 파일과는 직접 관련 없는 기존 타입 이슈입니다.

참고 사항

Lighthouse after 측정 기준으로 TTFB와 critical path는 개선됐지만, TBT와 JS execution 병목은 여전히 남아 있습니다. 다음 최적화 후보는 react-syntax-highlighter/refractor lazy loading, IssueDetailModal 중복 mount 정리, true polling mode 측정 검증, shared app shell hydration 비용 감소입니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
code-mate	Ready	Preview, Comment	Apr 29, 2026 8:53am