[24.12.06 / TASK-48] Refactor - 커스텀 에러 핸들링 추가 #3
Conversation
놀랍게도 현재 Next 15는 RC가 아니라는거~
+ 로그인 테스트 추가 (엣지케이스만)
괄호가 붙으면 URL로써 인식되지 않는데, 이 때문에 첫 페이지가 두개인 오류 발생
버튼과 입력 추가
+ ToastContainer 추가
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/app/(login)/Content.tsx (3)
25-30: 에러 처리 개선을 위한 제안커스텀 에러 처리가 잘 구현되어 있으나, 타입 안정성을 더욱 강화할 수 있습니다.
다음과 같이 에러 타입을 명시적으로 처리하는 것을 고려해보세요:
- mutationFn: async (body: FormVo) => + mutationFn: async (body: FormVo): Promise<void> => await instance( '/login', { method: 'POST', body }, - { '404': new NotFoundError('일치하는 계정을 찾을 수 없습니다') }, + { '404': new NotFoundError('일치하는 계정을 찾을 수 없습니다') } as const, ),
34-36: 에러 처리 추가 제안현재 구현은 깔끔하지만, 사용자 경험 향상을 위해 에러 처리를 추가하는 것이 좋을 것 같습니다.
다음과 같은 에러 처리 추가를 고려해보세요:
const onSubmit = (data: FormVo) => { - mutate(data); + try { + mutate(data); + } catch (error) { + console.error('로그인 중 오류가 발생했습니다:', error); + // 사용자에게 에러 메시지 표시 로직 추가 + } };
48-67: 접근성 개선을 위한 제안ID 속성 추가로 접근성이 개선되었으나, 추가적인 ARIA 속성을 통해 더욱 향상될 수 있습니다.
다음과 같은 접근성 개선을 제안드립니다:
<Input id="access" + aria-label="액세스 토큰 입력" + aria-required="true" size="large" type="password" placeholder="Access Token을 입력하세요" {...register('access_token', { required: true })} /> <Button size="large" form="large" type="submit" disabled={!isValid} id="login" + aria-label="로그인 버튼" > 로그인 </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/app/(login)/Content.tsx(2 hunks)
🔇 Additional comments (2)
src/app/(login)/Content.tsx (2)
4-4: 인터페이스 네이밍 컨벤션 개선을 확인했습니다.
formVo에서 FormVo로의 변경은 TypeScript 네이밍 컨벤션을 더 잘 준수하게 되었습니다. 또한 에러 처리를 위한 의존성 추가도 적절합니다.
Also applies to: 6-8, 10-13
22-22: 폼 유효성 검사 설정이 적절합니다.
onChange 모드를 사용한 실시간 유효성 검사와 제네릭 타입 적용이 잘 되어있습니다.
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
.env.sample(1 hunks)src/api/index.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/api/index.ts
[error] 58-59: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 7-7: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
[error] 12-12: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
🔇 Additional comments (1)
src/api/index.ts (1)
17-21: AbortController.abort()는 인수를 받지 않습니다
AbortController의 abort() 메서드는 인수를 받지 않습니다. 현재 코드에서 new DOMException('TimeoutError')를 전달하고 있는데, 이는 예상치 못한 동작을 야기할 수 있습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (6)
src/app/main/page.tsx (1)
Line range hint
9-11: 타입 안전성 개선을 위한 제안Home 컴포넌트의 반환 타입을 명시적으로 지정하면 좋을 것 같습니다.
-export default function Home() { +export default function Home(): JSX.Element { return <Content />; }src/utils/test-util.tsx (2)
5-5: QueryClient 설정 개선을 고려해보세요테스트 환경에 맞는 QueryClient 설정을 추가하면 좋을 것 같습니다. 예를 들어, 재시도 비활성화나 캐시 동작 조정 등을 고려해볼 수 있습니다.
-const newQueryClient = () => new QueryClient(); +const newQueryClient = () => new QueryClient({ + defaultOptions: { + queries: { + retry: false, + cacheTime: 0, + }, + }, +});
Line range hint
7-13: 테스트 유틸리티 확장성 고려사항현재 구현은 잘 되어있지만, 앱이 성장함에 따라 다른 Provider들(예: Theme, Router, Store 등)도 필요할 수 있습니다. 이를 위한 확장 가능한 구조를 고려해보시면 좋을 것 같습니다.
예시 구조:
type TestWrapperProps = { children: ReactElement; withRouter?: boolean; withTheme?: boolean; }; const TestWrapper = ({ children, withRouter, withTheme }: TestWrapperProps) => { const element = ( <QueryClientProvider client={newQueryClient()}> {children} </QueryClientProvider> ); // 필요한 Provider들을 조건부로 추가할 수 있는 구조 return element; }; export const renderWithProviders = ( ui: ReactElement, options: { withRouter?: boolean; withTheme?: boolean } = {} ): RenderResult => { return render( <TestWrapper {...options}> {ui} </TestWrapper> ); };src/errors/instance.ts (1)
8-18: JSDoc 문서화 추가를 제안드립니다.클래스와 생성자에 대한 설명을 JSDoc으로 추가하면 더 좋을 것 같습니다.
예시:
+/** + * 커스텀 에러 처리를 위한 기본 클래스 + * @extends Error + */ export class CustomError extends Error implements ICustomError { code: string; statusCode?: number; + /** + * @param message - 에러 메시지 + * @param code - 에러 코드 + * @param statusCode - HTTP 상태 코드 (선택사항) + */ constructor(message: string, code: string, statusCode?: number) {src/errors/fetchErrors.ts (1)
3-7: 에러 메시지 언어를 통일하는 것이 좋겠습니다.
TimeoutError의 메시지가 영어로 되어있는 반면,ServerNotRespondingError는 한글로 되어있습니다. 일관성을 위해 한글로 통일하는 것을 제안드립니다.export class TimeoutError extends CustomError { constructor() { - super('Request Timed Out', 'RequestTimedOut'); + super('요청 시간이 초과되었습니다', 'RequestTimedOut'); } }src/api/index.ts (1)
23-37: 응답 인터셉터에 Content-Type 헤더 추가가 필요합니다.JSON 요청임을 명시하기 위해 Content-Type 헤더를 추가하는 것이 좋겠습니다.
const fetch = returnFetch({ baseUrl: BASE_URL, - headers: { Accept: 'application/json' }, + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, interceptors: {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (14)
.env.sample(1 hunks)src/__test__/login.test.tsx(3 hunks)src/api/index.ts(1 hunks)src/app/(login)/Content.tsx(2 hunks)src/app/(login)/page.tsx(1 hunks)src/app/layout.tsx(1 hunks)src/app/main/page.tsx(1 hunks)src/components/Input.tsx(2 hunks)src/components/QueryProvider.tsx(1 hunks)src/components/index.ts(1 hunks)src/errors/fetchErrors.ts(1 hunks)src/errors/instance.ts(1 hunks)src/utils/index.ts(1 hunks)src/utils/test-util.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- src/utils/index.ts
- src/components/QueryProvider.tsx
- .env.sample
- src/components/index.ts
- src/test/login.test.tsx
- src/app/layout.tsx
- src/components/Input.tsx
- src/app/(login)/Content.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/api/index.ts
[error] 58-59: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (6)
src/app/(login)/page.tsx (1)
2-2: 코드가 깔끔하고 Next.js 컨벤션을 잘 따르고 있습니다!
Content 컴포넌트의 import 구문이 명확하게 추가되었습니다.
src/app/main/page.tsx (1)
2-2: 코드가 잘 작성되었습니다!
Content 컴포넌트의 import 구문이 명확하게 추가되었습니다.
src/utils/test-util.tsx (1)
1-3: 깔끔한 import 구문 구성입니다!
필요한 의존성들이 잘 정리되어 있고, 기능별로 적절히 그룹화되어 있습니다.
src/errors/instance.ts (1)
1-6: 인터페이스 구현이 깔끔합니다!
에러 객체의 구조가 명확하게 정의되어 있습니다.
src/errors/fetchErrors.ts (1)
15-19: NotFoundError 구현이 유연하게 잘 되었습니다!
메시지와 코드를 파라미터로 받아 다양한 상황에서 재사용할 수 있도록 구현되었습니다.
src/api/index.ts (1)
17-21: AbortSignal 폴리필 구현이 깔끔합니다!
브라우저 호환성을 고려한 폴리필 구현이 잘 되어있습니다.
커스텀 에러 추가와 기타 리팩토링 요소들을 리팩토링하였습니다!
Summary by CodeRabbit
릴리스 노트
새로운 기능
QueryProvider컴포넌트 추가로 서버 상태 관리 기능 제공.sizeStyle객체의 키를 대문자로 변경하여 타입 안전성 향상.버그 수정
문서화
스타일
테스트
renderWithQueryClient추가로 테스트 용이성 향상.기타