[Feature/#19] API 연결을 위한 기본 세팅

[yeonjin719]

🔗 관련 이슈

• closes ✨ [Feature] API 연결을 위한 기본 세팅 #19
• 참고: ✨ [Feature] API 연결을 위한 기본 세팅 #19

---

🧩 작업 요약 (TL;DR)

이 PR에서 무엇을 왜 했는지 한 줄로 요약해주세요.

• axiosInstance 세팅
• 에러 페이지 세팅
• Suspense 처리를 위한 fallback과 loading 생성
• 라우터에 404 페이지 추가

---

🔄 변경 유형

해당되는 항목에 체크해주세요.

• ✨ Feature
• 🐞 Bug Fix
• 🔨 Refactor (기능 변화 없음)
• 🎨 UI / UX
• ⚙️ Setting / Infra
• 🧪 Test
• 📄 Docs

---

📌 주요 변경 사항

리뷰어가 집중해서 봐야 할 포인트

• axiosInterceptor는 뼈대만 만들어둬서 추가 부탁드립니다
• 에러페이지나 로딩등에 디자인은 대충 AI 시킨거라.. 나중에 디자인 요청 후 반영이 필요합니다.

🖼️ 스크린샷 / 영상 (선택)

UI 변경이 있다면 꼭 첨부해주세요.

Before	After

---

🧠 리뷰 요청 포인트

리뷰어에게 특히 봐줬으면 하는 부분

• 로직 설계
• 상태 관리 방식
• 네이밍
• 성능 / 렌더링
• 기타: ___

---

⚠️ 체크리스트 (PR 올리기 전)

• 로컬에서 정상 동작 확인
• 기존 기능에 영향 없음
• 불필요한 console.log 제거
• 린트 / 타입 에러 없음
• 관련 이슈 연결 완료

---

🚧 미완 / 후속 작업

이 PR에서 다루지 않은 내용이나 추후 작업

• 로딩, 에러 디자인
• axios interceptor

---

💬 기타 참고 사항

리뷰어가 알면 좋은 맥락, 트레이드오프, 고민 지점
@copilot 이 PR을 아래 기준으로 검토해주세요:

.github/instructions/capstone.instructions.md 파일을 지침으로 삼으세요.
폴더/파일 위치가 프로젝트 구조 규칙과 일치하는지
컴포넌트가 단일 책임 원칙(SRP)을 지키는지
import 방향이 올바른지 (shared → features 역방향 없음)
명명/케이스가 일관적인지 (PascalCase vs camelCase)
배럴(index.ts) 사용이 현 패턴을 따르는지
응답은 한국어로, 발견된 위반 항목과 추천 구조를 포함해주세요.
리뷰를 달아주세요

[Copilot]

Pull request overview

이 PR은 API 연결을 위한 기본 인프라를 구축하는 작업입니다. Axios 인스턴스 설정, React Query 커스텀 훅, 비동기 처리를 위한 에러/로딩 UI 컴포넌트, 그리고 404 에러 페이지를 추가했습니다.

Changes:

• Axios 인스턴스와 인터셉터 뼈대 구축
• React Query 래퍼 훅 구현 (useCustomQuery, useCustomSuspenseQuery, useCustomInfiniteQuery, useCustomMutation)
• 비동기 에러/로딩 처리를 위한 AsyncBoundary 및 SuspenseFallback 컴포넌트 추가
• 404 및 에러 페이지 구현 및 라우터 설정

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/shared/api/axios.ts	Axios 인스턴스 생성 및 기본 설정 (baseURL, headers, credentials), 응답 인터셉터 뼈대 추가
src/shared/hooks/customQuery.ts	React Query 훅들의 기본값(staleTime, retry, refetchOnWindowFocus) 통일을 위한 커스텀 래퍼 훅 구현
src/shared/ui/common/SuspenseFallback/SuspenseFallback.tsx	Suspense의 fallback으로 사용될 로딩 UI 컴포넌트
src/shared/ui/common/AsyncBoundary/AsyncBoundary.tsx	ErrorBoundary와 Suspense를 결합한 비동기 처리 래퍼 컴포넌트
src/shared/ui/common/AsyncBoundary/AsyncBoundaryFallback.tsx	에러 발생 시 표시될 fallback UI 컴포넌트
src/shared/ui/common/AsyncBoundary/AsyncBoundaryFallback.styles.ts	AsyncBoundaryFallback의 스타일 정의
src/pages/common/ErrorPage/ErrorPage.tsx	404 및 라우팅 에러를 처리하는 페이지 컴포넌트
src/pages/common/ErrorPage/ErrorPage.styles.ts	ErrorPage의 스타일 정의
src/routes/Router.tsx	404 에러 페이지를 위한 와일드카드 라우트 추가