🧱 RareGo 프론트엔드 API 연동 가이드 (openapi-fetch)

우리 프로젝트는 백엔드와 프론트엔드 간의 **타입 안전성(Type Safety)**을 확보하고, API 변경에 유연하게 대응하기 위해 openapi-fetch를 도입했습니다.

1. 개요

기존의 수동 fetch 방식은 백엔드 DTO가 변경되어도 프론트엔드에서 알기 어려웠습니다. openapi-fetch는 백엔드의 Swagger(OpenAPI) 스펙을 기반으로 TypeScript 타입을 자동 생성하여, 개발 단계에서 에러를 잡고 자동 완성을 지원합니다.

2. 핵심 워크플로우

백엔드 API에 변화가 생기면 다음 순서로 작업합니다.

백엔드 서버 실행: 로컬 서버가 켜져 있어야 최신 스펙을 긁어올 수 있습니다.
타입 갱신: 터미널에서 아래 명령어를 실행합니다.
```
npm run gen
```
- 실행 시 src/api/schema.d.ts 파일이 자동으로 업데이트됩니다.
코드 수정: 타입 에러가 발생하는 곳을 수정하거나 새로운 API를 사용합니다.

3. 기본 사용법

📡 공통 클라이언트 (`client`)

모든 API 호출은 src/api/client.ts에 정의된 client 객체를 사용합니다. 이 클라이언트에는 인증 토큰(JWT) 자동 주입 미들웨어가 포함되어 있습니다.

🔍 GET 요청 (데이터 조회)

경로 파라미터(path)가 있는 경우 중괄호({})를 그대로 사용하며, 타입 추론이 자동으로 이루어집니다.

const { data, error } = await client.GET("/api/v1/auctions/{auctionId}", {
  params: {
    path: { auctionId: 123 },
  },
});

// 백엔드 구조상 data.data가 실제 결과물입니다.
if (data) console.log(data.data.productName);

✍️ POST 요청 (데이터 전송)

body 필드에 데이터를 담아 보냅니다. 스키마에 정의되지 않은 필드를 넣으면 컴파일 에러가 발생합니다.

const { error } = await client.POST("/api/v1/auctions/{auctionId}/bids", {
  params: {
    path: { auctionId: 45 },
  },
  body: {
    bidAmount: 50000,
  },
});