문제 상황

홈은 비로그인 상태에서도 접근 가능한 페이지입니다.

총 투표 수를 표시하기 위해 투표 결과 API 3개 (데모데이, FE, BE)를 Promise.all로 병렬 호출한 뒤 각 득표 수를 합산하는 방식을 사용했습니다.

그런데 이 결과 조회 API들은 인증이 필요한 엔드포인트였기 때문에, 비로그인 상태에서 홈에 접근 or 로그아웃 후 새로고침하면 세 API 모두 401을 반환해 총 투표 수가 전혀 표시되지 않았습니다.

파트장 (FE/BE) 투표 결과 → 인증 필요

팀 투표 결과 → 인증 필요

원인 코드

// lib/utils/vote.ts

export const getTotalVoteCount = async (): Promise<number> => {
  const [teamResult, feResult, beResult] = await Promise.all([
    getTeamVoteResults(),       // 인증 필요
    getCandidateVoteResults("FE"),  // 인증 필요
    getCandidateVoteResults("BE"),  // 인증 필요
  ]);

  const teamTotal = teamResult.result?.teams.reduce((sum, t) => sum + t.voteCount, 0) ?? 0;
  const feTotal = feResult.result?.candidates.reduce((sum, c) => sum + c.voteCount, 0) ?? 0;
  const beTotal = beResult.result?.candidates.reduce((sum, c) => sum + c.voteCount, 0) ?? 0;

  return teamTotal + feTotal + beTotal;
};

해결

백엔드에서 인증 없이 호출 가능한 전용 집계 API (GET /api/v1/votes/count)를 별도로 제공 받았습니다.

기존의 3개 API 병렬 호출 + 직접 합산 로직을 제거하고, 단일 API 호출로 교체했습니다.

// lib/apis/vote.ts

export const getVoteCount = async (): Promise<GetVoteCountResponse> => {
  return (await api.get("/api/v1/votes/count").json()) as GetVoteCountResponse;
};

// app/page.tsx
useEffect(() => {
  getVoteCount()
    .then(res => setTotalVoteCount(res.result?.totalCount ?? null))
    .catch(() => {});
}, []);

배운 점

API 연동 시 인증 여부와 접근 가능한 사용자 범위를 함께 고려해야 한다는 것을 배웠습니다. 비로그인 사용자에게도 보여줘야 하는 데이터는 인증 없이 호출 가능한 별도 엔드포인트로 분리하는 것이 중요합니다. 또한 작업 전에 미리 파악해서 백엔드 팀원들의 수고를 덜어주는 센스있는 프론트 팀원이 되어야겠다고 생각했습니다. 😉