Feat: API 호출 구현

[nakyoung98]

📃 관련 이슈

Closes: #10

✨ 작업 내용

• API 호출을 위한 기본 구조 구현
• 토큰 관리를 위한 인터셉터 구현
• 에러 처리를 위한 커스텀 에러 클래스 구현
• API URL 상수 정의
• 로그인 API 구현

1. API 호출 기본 구조 구현

[목표]

• [x] 타입 안정성 보장
• [x] 유연한 API 호출
• [x] Generic을 사용하여 요청 DTO와 응답 DTO의 타입을 지정 가능

const apiCall = <RequestDTO, ResponseDTO>({
  method,
  endpoint,
  data,
  headers,
  params,
  option,
}: {
  method: HTTP_METHOD;
  endpoint: ENDPOINT;
  data?: RequestDTO;
  headers?: AxiosHeaders;
  params?: URLSearchParams;
  option?: OPTIONS<RequestDTO>;
}): Promise<AxiosResponse<ResponseDTO>> =>
  axiosInstance.request<ResponseDTO, AxiosResponse<ResponseDTO>, RequestDTO>({
    method,
    url: endpoint,
    data,
    headers,
    params,
    ...option,
  });

2. 토큰 인터셉터 구현

[목표]

• [x] 모든 요청에 자동으로 인증 토큰 추가
• [ ] Zustand로 상태 관리

export const tokenRequestInterceptor = (config: InternalAxiosRequestConfig) => {
  const accessToken = localStorage.getItem("accessToken");
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
};

3. 에러 처리

[목표]

• [x] 커스텀 에러 클래스 정의 (AxiosError 확장)
• [x] 특정 HTTP 상태 코드나, 데이터 상태 등에 대해 명확한 에러 처리

export class UnauthorizedError extends AxiosError {
  constructor(error: AxiosError) {
    super(error.message, error.code, error.config, error.request, error.response);
    this.name = "UnauthorizedError";
    this.message = "Please log in to access this resource";
  }
}

4. API URL 상수 정의

[목표]

• [x] URL 중앙 관리
• [x] 오타로 인한 오류 방지
• [x] 재사용성 증가

export const API_URLS: API_URL_TYPE = {
  HERO: {},
  SIGN_IN: {
    SIGN_IN: `${API_BASE_URL}/user/sign-in`,
  },
  // ...
} as const;

⚠️ 주의 사항

• 현재 토큰 관리는 하지 않고있습니다. 추후 Zustand로 구현 예정입니다.

📸 스크린샷

📖 참고 자료

개발 기록

📚 문서화 계획

• [ ] API 사용 가이드 작성
• [ ] 에러 처리 방식 문서화

➕ 추가 작업 사항

• Zustand를 이용한 토큰 관리 구현

✔️ 체크리스트

• [x] 코드가 적절히 작성되었는가?
• [x] 적절한 테스트를 수행했는가?
• [ ] 관련 문서를 작성/수정했는가?
• [ ] 잔여 작업 사항이 없는가?

[github-actions[bot]]

올바른 PR 컨벤션

rebase에 대한 PR 컨벤션을 잘 준수하셨군요! 코드 작성하시느라 수고 많으셨습니다 :)