[REFACTOR] [HIGH-47] ShortsPage, MyPage 비동기 로딩/에러 처리 개선 및 React.lazy 적용

[neungdong]

User description

✨ PR 세부 내용

ShortsPage, MyPage에 AsyncBoundary를 적용하여 쇼츠 콘텐츠에 대한 로딩 및 에러 처리를 통합하였습니다.
에러 발생 시 500, 502, 503 등의 상태에 대해서는 재시도 버튼이 노출되도록 ErrorFallback 컴포넌트를 개선했습니다.
NotFound 페이지도 추가되어, 유효하지 않은 접근 시 fallback 대응하였습니다.
React.lazy와 Suspense를 사용하여 각 라우트마다 별도 JS chunk 파일 생성하도록 하였습니다.

☑️ 체크리스트

🛠 기본 검사 항목

• ESLint 검사 완료
• Prettier 적용
• 함수, 변수, 파일 네이밍 검토
• 코드 작성 순서 (import, 내부 코드) 점검
• 폴더 구조에 맞는 파일 분리 여부 확인
• 코드 작성 스타일 점검

✍️ 작성자 선택 항목

📸 스크린샷

✅ 리뷰 요구사항

---

PR Type

Enhancement, Bug fix

---

Description

• Add NotFoundPage catch-all route

• Improve ErrorFallback retry logic

• Migrate shorts query to suspense

• Wrap ShortsPage in AsyncBoundary

---

Diagram Walkthrough

flowchart LR
  Router["BrowserRouter"]
  Routes["App Routes"]
  NotFound["NotFoundPage (*)"]
  ShortsPage["ShortsPage"]
  AsyncBoundary["AsyncBoundary"]
  ShortsContent["ShortsContent"]
  ErrorFallback["ErrorFallback"]
  Retry["Retry button (5xx)"]
  Back["Back navigation"]

  Router -- "initializes" --> Routes
  Routes -- "*" path --> NotFound
  Routes -- "shorts path" --> ShortsPage
  ShortsPage -- "wrapped by" --> AsyncBoundary
  AsyncBoundary -- "renders" --> ShortsContent
  ErrorFallback -- "on 5xx errors" --> Retry
  ErrorFallback -- "on link click" --> Back

Loading

File Walkthrough

	Relevant files

---

[netlify]

✅ Deploy Preview for lead-me ready!

Name	Link
🔨 Latest commit	b9e2b47
🔍 Latest deploy log	https://app.netlify.com/projects/lead-me/deploys/68900bacf203470008a6cf96
😎 Deploy Preview	https://deploy-preview-54--lead-me.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Import The hook uses useMemo but there’s no import for it, which will cause a runtime error. const shortsToShow = useMemo(() => { // ID 없으면 기존 리스트 반환 Loading State The ShortsLayout is always passed isLoading={false} and the query hook no longer returns an isLoading flag, so users won’t see a loading indicator. fetchNextPage={fetchNextPage} hasNextPage={hasNextPage} isLoading={false} cardRefs={cardRefs} Hardcoded Path Using the string "/home" for navigation bypasses the centralized PATH constants, risking inconsistency. <Button onClick={() => navigate("/home")} className="bg-custom-point text-black font-bold px-6 py-2 mt-4">

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Add loading and error fallbacks The AsyncBoundary is used without a fallback or errorFallback, so users won’t see a loading indicator or custom error UI. Provide a loading spinner as fallback and your ErrorFallback component as errorFallback. src/pages/ShortsPage.tsx [25-28] return ( - <AsyncBoundary> + <AsyncBoundary + fallback={<Spinner />} + errorFallback={<ErrorFallback resetErrorBoundary={() => queryClient.resetQueries(["shorts"])} />} + > <ShortsContent cardRefs={cardRefs} currentShortsId={currentShortsId} /> </AsyncBoundary> ); Suggestion importance[1-10]: 6 __ Why: Providing a fallback and errorFallback to AsyncBoundary improves UX by handling loading and error states, though the suggestion omits importing the Spinner component.	Low

[0Jaemin0]

React.lazy를 적용해 초기 렌더링 속도를 향상시킨 부분이 좋은 것 같습니다!