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

yeonjin719 · 2026-02-03T11:18:18Z

🔗 관련 이슈

🧩 작업 요약 (TL;DR)

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

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

🔄 변경 유형

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

📌 주요 변경 사항

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

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 에러 페이지를 위한 와일드카드 라우트 추가

src/shared/ui/common/AsyncBoundary/AsyncBoundary.tsx

Copilot · 2026-02-03T11:23:36Z

src/shared/hooks/customQuery.ts

+    refetchOnWindowFocus,
+    queryKey: ignoredQueryKey,
+    queryFn: ignoredQueryFn,
+    ...restOptions
+  } = safeOptions
+  void refetchOnWindowFocus
+  void ignoredQueryKey
+  void ignoredQueryFn


refetchOnWindowFocus, ignoredQueryKey, ignoredQueryFn을 구조 분해한 뒤 void 문으로 무시하는 패턴은 불필요한 코드입니다. 이미 restOptions에서 제외했으므로 void 문을 사용할 필요가 없습니다. 구조 분해 시 각 변수 앞에 언더스코어를 붙이거나, ESLint 설정에서 unused vars를 허용하는 것이 더 명확합니다.

Suggested change

refetchOnWindowFocus,

queryKey: ignoredQueryKey,

queryFn: ignoredQueryFn,

...restOptions

} = safeOptions

void refetchOnWindowFocus

void ignoredQueryKey

void ignoredQueryFn

refetchOnWindowFocus: _refetchOnWindowFocus,

queryKey: _ignoredQueryKey,

queryFn: _ignoredQueryFn,

...restOptions

} = safeOptions

Copilot · 2026-02-03T11:23:36Z

src/shared/ui/common/SuspenseFallback/SuspenseFallback.tsx

+  const combinedStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap,
+    ...style,
+  }


매 렌더링마다 combinedStyle 객체를 새로 생성하면 불필요한 리렌더링을 유발할 수 있습니다. style prop이 변경될 때만 새 객체를 생성하도록 useMemo를 사용하거나, 인라인 스타일 대신 CSS-in-JS 라이브러리(예: @emotion/styled)를 활용하는 것이 성능상 더 유리합니다.

Copilot · 2026-02-03T11:23:36Z

src/shared/ui/common/AsyncBoundary/AsyncBoundaryFallback.styles.ts

+  font-size: 14px;
+  cursor: pointer;
+  background: ${theme.colors.primary};
+  color: ${theme.colors.white};


버튼에 키보드 접근성을 위한 추가 속성이 필요합니다. "다시 시도" 버튼은 에러 복구의 핵심 기능이므로, 키보드 포커스 시 시각적 피드백을 제공하도록 :focus-visible 스타일을 추가하고, Enter와 Space 키로 활성화될 수 있도록 보장해야 합니다. 현재 <button> 요소를 사용하고 있어 기본 키보드 접근성은 확보되지만, 포커스 스타일을 명시적으로 추가하는 것이 좋습니다.

Suggested change

color: ${theme.colors.white};

color: ${theme.colors.white};

&:focus-visible {

outline: 2px solid ${theme.colors.primary};

outline-offset: 2px;

}

Copilot · 2026-02-03T11:23:37Z

src/shared/ui/common/SuspenseFallback/SuspenseFallback.tsx

+  return (
+    <div style={combinedStyle} aria-live="polite" {...rest}>
+      <div>{label}</div>
+      <div>{children}</div>


로딩 메시지를 담는 내부 <div> 요소들이 의미론적으로 불명확합니다. 26번 라인의 label은 <p> 태그로, 27번 라인의 children 컨테이너는 용도에 따라 적절한 시맨틱 태그(예: <section>)로 변경하는 것이 접근성 측면에서 더 나습니다. 또한 로딩 중임을 시각적으로 표현하기 위해 스피너나 애니메이션을 추가하는 것도 고려해야 합니다.

Suggested change

return (

<div style={combinedStyle} aria-live="polite" {...rest}>

<div>{label}</div>

<div>{children}</div>

const spinnerStyle: CSSProperties = {

width: 16,

height: 16,

borderRadius: '50%',

border: '2px solid #ccc',

borderTopColor: '#555',

}

return (

<div style={combinedStyle} aria-live="polite" role="status" {...rest}>

<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>

<div aria-hidden="true" style={spinnerStyle} />

<p style={{ margin: 0 }}>{label}</p>

</div>

<section>{children}</section>

Copilot · 2026-02-03T11:23:37Z

src/shared/hooks/customQuery.ts

+  const { staleTime, retry, refetchOnWindowFocus, ...restOptions } = safeOptions
+  void refetchOnWindowFocus


refetchOnWindowFocus를 구조 분해한 뒤 void refetchOnWindowFocus로 무시하는 패턴은 불필요한 코드입니다. 이미 restOptions에서 제외했으므로 void 문을 사용할 필요가 없습니다. 구조 분해 시 _refetchOnWindowFocus처럼 언더스코어를 붙이거나, ESLint 설정에서 unused vars를 허용하는 것이 더 명확합니다.

Suggested change

const { staleTime, retry, refetchOnWindowFocus, ...restOptions } = safeOptions

void refetchOnWindowFocus

const { staleTime, retry, refetchOnWindowFocus: _refetchOnWindowFocus, ...restOptions } = safeOptions

Copilot · 2026-02-03T11:23:37Z

src/shared/hooks/customQuery.ts

+  const { staleTime, retry, refetchOnWindowFocus, ...restOptions } = safeOptions
+  void refetchOnWindowFocus


refetchOnWindowFocus를 구조 분해한 뒤 void refetchOnWindowFocus로 무시하는 패턴은 불필요한 코드입니다. 이미 restOptions에서 제외했으므로 void 문을 사용할 필요가 없습니다. 구조 분해 시 _refetchOnWindowFocus처럼 언더스코어를 붙이거나, ESLint 설정에서 unused vars를 허용하는 것이 더 명확합니다.

Suggested change

const { staleTime, retry, refetchOnWindowFocus, ...restOptions } = safeOptions

void refetchOnWindowFocus

const { staleTime, retry, refetchOnWindowFocus: _refetchOnWindowFocus, ...restOptions } =

safeOptions

Copilot · 2026-02-03T11:23:37Z

src/shared/ui/common/SuspenseFallback/SuspenseFallback.tsx

+  )
+}
+
+export default SuspenseFallback


프로젝트의 배럴 파일 규칙에 따르면 src/shared/ui/common/*/index.ts 패턴을 따라야 합니다. SuspenseFallback 컴포넌트를 외부에서 import할 수 있도록 src/shared/ui/common/SuspenseFallback/index.ts 파일을 추가하여 export { default } from './SuspenseFallback' 형태로 배럴을 생성해주세요. 이는 다른 공통 UI 컴포넌트들(Checkbox, Modal 등)의 패턴과 일관성을 유지하기 위함입니다.

Copilot · 2026-02-03T11:23:37Z

src/shared/ui/common/AsyncBoundary/AsyncBoundary.tsx

+  )
+}
+
+export default AsyncBoundary


프로젝트의 배럴 파일 규칙에 따르면 src/shared/ui/common/*/index.ts 패턴을 따라야 합니다. AsyncBoundary 컴포넌트를 외부에서 import할 수 있도록 src/shared/ui/common/AsyncBoundary/index.ts 파일을 추가하여 주요 export들을 배럴로 제공해주세요. 이는 다른 공통 UI 컴포넌트들의 패턴과 일관성을 유지하기 위함입니다.

Copilot · 2026-02-03T11:23:38Z

src/pages/common/ErrorPage/ErrorPage.styles.ts

+const BaseButton = styled.button`
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-size: 14px;
+  cursor: pointer;
+`
+
+export const PrimaryButton = styled(BaseButton)`
+  background: ${theme.colors.primary};
+  color: ${theme.colors.white};
+`
+
+export const SecondaryButton = styled(BaseButton)`
+  background: ${theme.colors.lightGray};
+  color: ${theme.colors.textPrimary};
+`


버튼들에 키보드 접근성을 위한 포커스 스타일이 필요합니다. "뒤로가기"와 "홈으로" 버튼은 사용자의 주요 네비게이션 수단이므로, 키보드 사용자가 현재 포커스된 버튼을 명확하게 식별할 수 있도록 :focus-visible 스타일을 추가해야 합니다. 예를 들어 outline 또는 box-shadow를 사용하여 포커스 상태를 시각적으로 표시하세요.

yeonjin719 added 2 commits February 3, 2026 20:01

feat: axios 세팅

f5679c1

feat: 라우터에 404 추가, Suspense위한 준비

c0c2085

yeonjin719 requested review from Copilot and yujin5959 February 3, 2026 11:18

yeonjin719 self-assigned this Feb 3, 2026

yeonjin719 linked an issue Feb 3, 2026 that may be closed by this pull request

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

Open

1 task

Copilot started reviewing on behalf of yeonjin719 February 3, 2026 11:18 View session

Copilot AI reviewed Feb 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Uh oh!

yeonjin719 commented Feb 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Copilot AI Feb 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  color: ${theme.colors.white};
+  color: ${theme.colors.white};
+  &:focus-visible {
+    outline: 2px solid ${theme.colors.primary};
+    outline-offset: 2px;
+  }

-  return (
-    <div style={combinedStyle} aria-live="polite" {...rest}>
-      <div>{label}</div>
-      <div>{children}</div>
+  const spinnerStyle: CSSProperties = {
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    border: '2px solid #ccc',
+    borderTopColor: '#555',
+  }
+  return (
+    <div style={combinedStyle} aria-live="polite" role="status" {...rest}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <div aria-hidden="true" style={spinnerStyle} />
+        <p style={{ margin: 0 }}>{label}</p>
+      </div>
+      <section>{children}</section>

		const { staleTime, retry, refetchOnWindowFocus, ...restOptions } = safeOptions
		void refetchOnWindowFocus

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

yeonjin719 commented Feb 3, 2026

🔗 관련 이슈

🧩 작업 요약 (TL;DR)

🔄 변경 유형

📌 주요 변경 사항

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

🧠 리뷰 요청 포인트

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

🚧 미완 / 후속 작업

💬 기타 참고 사항

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants