요약해서 설명했습니다.

작업 배경

외부 API가 accessToken, refreshToken을 JSON body로 내려주는 구조라서, 브라우저가 토큰을 직접 받으면 XSS 공격에 노출됩니다. 이를 막기 위해 Next.js Route Handler를 BFF로 두고, 토큰을 httpOnly 쿠키로 셋팅하는 구조로 변경했습니다.

흐름 변경:

기존: 브라우저 → 외부 백엔드 직접 호출
변경: 브라우저 → /api/* (Route Handler) → 외부 백엔드

변경된 파일

1. fetchApi.ts → fetchApi.server.ts (rename)

파일명을 바꿔서 서버 전용임을 명시했습니다. 함수명도 fetchApi → fetchApiServer로 변경됐습니다.

단, 현재 groups/http.ts와 user/userApi.ts가 fetchApi라는 이름으로 import 중이라 호환용 alias를 임시로 추가해뒀습니다.

// fetchApi.server.ts 하단
// TODO: 팀원 BFF 마이그레이션 완료 후 제거
export const fetchApi = fetchApiServer;

각자 담당 코드 마이그레이션 완료 후 이 alias는 제거됩니다.

2. config.ts

NEXT_PUBLIC_API_BASE_URL, NEXT_PUBLIC_API_TEAM_ID → API_BASE_URL, API_TEAM_ID로 변경했습니다. BFF 도입 후 클라이언트가 백엔드 주소를 알 필요가 없어졌기 때문입니다.

현재 server-only import는 마이그레이션 완료 전까지 임시 주석 처리 상태입니다.

// TODO: 팀원 코드 BFF 마이그레이션 완료 후 주석 해제
// import 'server-only';

3. .env.local 또는.env 변수명 변경 필요

각자 로컬 .env.local 또는.env 파일을 아래처럼 수정해주세요.