Fix: 백엔드 타입 수정 업데이트

[DreamPaste]

Summary

• 투표 게시판 API 타입 및 엔드포인트 이름 통일 (Freeboard와 일관성 확보)
• 모든 응답 타입명 변경: VotePost* → Voteboard* (Breaking Change)
• 응답 필드명 변경: id, votesboardId → postId (Breaking Change)
• 투표 참여 여부 확인 필드 추가: hasVoted (신규 기능)
• 목록 조회 응답에 썸네일 및 투표 옵션 미리보기 추가 (신규 기능)
• 정렬 옵션 추가: sort 파라미터 지원 (LATEST, LIKE, COMMENT, VIEW)

---

🚨 Breaking Changes - 즉시 확인 필요

1. 타입 이름 변경 (orval 재생성 필수)

기존에 사용하던 모든 투표 게시판 타입명이 변경되었습니다. orval을 재생성한 후 아래 매핑을 참고하여 코드를 수정해주세요.

변경된 타입 매핑표

기존 타입 (Old)	새 타입 (New)	용도
VotePostSummaryResponse	VoteboardSummary	목록 조회 시 게시글 요약 정보
VotePostListResponse	VoteboardCursorResponse	커서 기반 목록 조회 응답
VotePostDetailResponse	VoteboardDetailResponse	게시글 상세 조회 응답
VotePostIdResponse	VoteboardCreateResponse	게시글 생성 응답
VotePostCreateRequest	VoteboardCreateRequest	게시글 생성 요청
VotePostUpdateRequest	VoteboardUpdateRequest	게시글 수정 요청

마이그레이션 예시

// ❌ Before (기존 코드)
import { VotePostSummaryResponse, VotePostListResponse } from '@/generated/api/models';

const { data } = useGetVotePostsByCursor({
  sort: 'LATEST',
  size: 20
});

const posts: VotePostSummaryResponse[] = data?.posts || [];
const firstPostId = posts[0]?.id; // ❌ 'id' 필드 사용

// ✅ After (수정된 코드)
import { VoteboardSummary, VoteboardCursorResponse } from '@/generated/api/models';

const { data } = useGetVotePostsByCursor({
  sort: 'LATEST',
  size: 20
});

const posts: VoteboardSummary[] = data?.posts || [];
const firstPostId = posts[0]?.postId; // ✅ 'postId' 필드 사용

---

2. 응답 필드명 변경

게시글 ID를 나타내는 필드명이 통일되었습니다.

변경된 필드

타입	기존 필드명	새 필드명
VoteboardSummary	id	postId
VoteboardDetailResponse	id	postId
VoteboardCreateResponse	votesboardId	postId

수정이 필요한 코드 패턴

// ❌ Before
const postId = response.data.id;
const voteboardId = createResponse.data.votesboardId;

// ✅ After
const postId = response.data.postId;
const voteboardId = createResponse.data.postId;

검색해야 할 패턴:

• response.data.id → response.data.postId
• post.id → post.postId
• votesboardId → postId

---

✨ 신규 기능 추가

1. 투표 참여 여부 확인 (hasVoted)

관련 커밋: 50ff03a

이제 목록 조회 및 상세 조회 시 현재 사용자의 투표 참여 여부를 확인할 수 있습니다.

추가된 필드

interface VoteboardSummary {
  // ... 기존 필드
  hasVoted: boolean; // 투표 참여 여부 (비인증 시 null)
}

interface VoteboardDetailResponse {
  // ... 기존 필드
  hasVoted: boolean; // 투표 참여 여부 (비인증 시 null)
}

사용 예시

// 목록에서 투표 참여 여부 표시
{posts.map(post => (
  <VoteboardCard key={post.postId}>
    <h3>{post.title}</h3>
    {post.hasVoted && (
      <Badge variant="success">투표 완료</Badge>
    )}
  </VoteboardCard>
))}

주의사항

• 비인증 사용자: hasVoted는 null 값입니다
• 인증 사용자: true (투표함) 또는 false (투표 안 함)
• 타입 가드 사용 권장: if (post.hasVoted !== null)

---

2. 목록 조회 응답 개선

관련 커밋: 7bed33e

목록 조회 시 더 많은 정보를 제공하여 상세 조회 없이도 미리보기가 가능합니다.

추가된 필드

interface VoteboardSummary {
  // ... 기존 필드
  thumbnailUrl?: string;              // 첫 번째 이미지 URL (썸네일용)
  voteOptions: VoteOptionResponse[];  // 투표 옵션 미리보기 (최대 3개)
}

사용 예시

// 썸네일 이미지 표시
{post.thumbnailUrl && (
  <img src={post.thumbnailUrl} alt={post.title} />
)}

// 투표 옵션 미리보기
<div className="vote-preview">
  {post.voteOptions.slice(0, 3).map(option => (
    <div key={option.id}>
      {option.content}: {option.percentage}%
    </div>
  ))}
</div>

---

3. 정렬 옵션 추가

관련 커밋: 3efec1b

목록 조회 시 다양한 정렬 기준을 사용할 수 있습니다.

정렬 옵션

type VoteboardSortType = 'LATEST' | 'LIKE' | 'COMMENT' | 'VIEW';

옵션	설명	사용 시점
LATEST	최신순 (기본값)	기본 목록
LIKE	투표순 (투표 인원 많은 순)	인기 투표
COMMENT	댓글순	토론 많은 투표
VIEW	조회순	인기 투표

사용 예시

// 정렬 옵션과 함께 목록 조회
const { data } = useGetVotePostsByCursor({
  sort: 'LIKE',  // 투표 인원 많은 순
  size: 20
});

// 정렬 탭 구현
const [sortType, setSortType] = useState<VoteboardSortType>('LATEST');

<Tabs value={sortType} onValueChange={setSortType}>
  <TabsList>
    <TabsTrigger value="LATEST">최신순</TabsTrigger>
    <TabsTrigger value="LIKE">투표순</TabsTrigger>
    <TabsTrigger value="COMMENT">댓글순</TabsTrigger>
    <TabsTrigger value="VIEW">조회순</TabsTrigger>
  </TabsList>
</Tabs>

---

📋 마이그레이션 체크리스트

즉시 수행

• orval 재생성: npm run orval 또는 yarn orval
• 타입 import 수정: VotePost* → Voteboard*
• 필드명 수정: .id → .postId, votesboardId → postId
• 타입 에러 수정: TypeScript 컴파일 에러 모두 해결

선택적 개선

• 투표 참여 여부 표시: hasVoted 필드 활용
• 썸네일 이미지 표시: thumbnailUrl 활용
• 투표 옵션 미리보기: voteOptions 배열 활용
• 정렬 기능 추가: sort 파라미터 활용

---

🔍 영향받는 컴포넌트 찾기

다음 검색어로 수정이 필요한 코드를 찾을 수 있습니다:

# 기존 타입 사용하는 곳 찾기
grep -r "VotePostSummaryResponse" src/
grep -r "VotePostListResponse" src/
grep -r "VotePostDetailResponse" src/

# 기존 필드명 사용하는 곳 찾기
grep -r "\.id" src/ | grep -i vote
grep -r "votesboardId" src/

---

🆘 문제 해결 가이드

Q1. orval 재생성 후에도 타입이 안 바뀌어요

# 캐시 삭제 후 재생성
rm -rf src/generated/api
npm run orval

Q2. postId를 찾을 수 없다는 에러가 나요

기존 응답 객체를 그대로 사용하고 있을 가능성이 높습니다. 타입을 명시적으로 지정해주세요:

// ✅ 타입 명시
const post: VoteboardSummary = response.data.posts[0];
console.log(post.postId); // OK

Q3. hasVoted가 null이에요

비인증 사용자이거나 로그인이 필요한 기능입니다. 인증 상태를 확인하세요:

if (post.hasVoted !== null) {
  // 인증된 사용자만 처리
}

---

📚 참고 자료

• OpenAPI Spec
• Swagger UI

---

🔄 변경 이력

날짜	커밋	변경 내용
2025-12-09	a630249	타입 이름 및 필드명 통일 (Breaking Change)
2025-12-08	50ff03a	hasVoted 필드 추가
2025-12-08	7bed33e	목록 조회 응답 개선 (썸네일, 옵션 미리보기)
2025-12-08	3efec1b	정렬 옵션 추가

---

마이그레이션 관련 문의사항은 백엔드 팀에게 문의해주세요.

[linear]

SOS-53 [FIX] 투표 게시판 백엔드 수정

[github-actions]

✅ PREVIEW https://soso-front-end-q8hfzsqjg-dreampastes-projects.vercel.app

[Copilot]

Pull request overview

이 PR은 투표 게시판 API의 타입 이름과 필드명을 Freeboard와 일관성 있게 통일하는 Breaking Change 업데이트입니다. 주요 변경사항으로는 타입명을 VotePost*에서 Voteboard*로 변경하고, 응답 필드명을 id/votesboardId에서 postId로 통일했습니다. 또한 투표 참여 여부(hasVoted), 썸네일, 투표 옵션 미리보기, 정렬 옵션 등의 신규 기능이 추가되었습니다.

주요 변경사항:

• 타입 이름 통일: VotePostSummaryResponse → VoteboardSummary, VotePostDetailResponse → VoteboardDetailResponse 등
• 응답 필드명 통일: id, votesboardId → postId로 일관성 확보
• 신규 기능: hasVoted (투표 참여 여부), thumbnailUrl (썸네일), voteOptions 미리보기, 정렬 옵션 (LATEST, LIKE, COMMENT, VIEW) 추가

Reviewed changes

Copilot reviewed 1 out of 17 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
voteboardSummary.ts	투표 게시글 목록 요약 정보 타입 정의 추가 (thumbnailUrl, hasVoted, voteOptions 필드 포함)
voteboardDetailResponse.ts	투표 게시글 상세 정보 타입 정의 추가 (hasVoted, canEdit, canDelete 필드 포함)
voteboardCursorResponse.ts	커서 기반 목록 조회 응답 타입 정의 추가
voteboardCreateResponse.ts	게시글 생성 응답 타입 정의 추가 (postId 필드 사용)
voteboardCreateRequest.ts	게시글 생성 요청 타입 정의 추가
voteboardUpdateRequest.ts	게시글 수정 요청 타입 정의 추가
voteboardSummaryVoteStatus.ts	투표 상태 enum 타입 정의 추가
voteboardSummaryCategory.ts	카테고리 enum 타입 정의 추가
voteboardDetailResponseVoteStatus.ts	투표 상태 enum 타입 정의 추가
voteboardDetailResponseCategory.ts	카테고리 enum 타입 정의 추가
voteboardCreateRequestCategory.ts	카테고리 enum 타입 정의 추가
voteboardUpdateRequestCategory.ts	카테고리 enum 타입 정의 추가
getVotePostsByCursorSort.ts	정렬 옵션 파라미터 타입 정의 추가
getVotePostsByCursorParams.ts	목록 조회 파라미터에 sort 옵션 추가
index.ts	새로운 Voteboard 타입들을 export 목록에 추가
voteboard.ts	API 엔드포인트 함수들의 타입을 VotePost에서 Voteboard로 변경, 문서 업데이트
VoteboardForm.tsx	컴포넌트 props 타입을 VotePostDetailResponse에서 VoteboardDetailResponse로 변경

[github-actions]

📦 번들 분석 결과

📊 번들 크기 요약

항목	값
📦 전체 번들 크기	3.7M
📄 JavaScript 크기	1.6M
🗂️ JavaScript 파일 수	61개

🔍 주요 청크 파일 (크기순)

fe98bb7c-75056deddb8826d9.js - 169K
framework-69e0f7d37422957b.js - 137K
main-448b0e12e0910adc.js - 130K
7147-4b792b1c613a0a9e.js - 122K
1762-0e7232d83dcb3887.js - 121K
polyfills-42372ed130431b0a.js - 110K
2877-2422cd6c39a97d65.js - 90K
6086-65069d4634f32053.js - 76K
page-3026af1cfd56a766.js - 31K
2906-7f73a91282e5669e.js - 28K

---

🤖 자동 생성된 번들 분석 리포트

[github-actions]

⚡ Lighthouse 성능 분석 결과

📊 전체 평균 점수

지표	점수
🚀 Performance	74점
♿ Accessibility	86점
✅ Best Practices	100점
🔍 SEO	100점

📈 측정 현황

• 측정 성공: 15/16 페이지
• 상태: success

📄 페이지별 상세 분석

🏠 커뮤니티 페이지: /main/community

지표	점수
🚀 Performance	70점
♿ Accessibility	78점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👥 창업자 페이지: /main/founder

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🏡 홈 페이지: /main/home

지표	점수
🚀 Performance	75점
♿ Accessibility	91점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🗺️ 지도 페이지: /main/maps

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👤 프로필 페이지: /main/profile

지표	점수
🚀 Performance	75점
♿ Accessibility	88점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🔗 전체 상세 분석 결과

📊 전체 상세 Lighthouse 분석 결과 보기

📄 측정된 페이지

• /main/community
• /main/founder
• /main/home
• /main/maps
• /main/profile

모든 페이지에서 성능 측정이 완료되었습니다.

---

🤖 자동 생성된 Lighthouse 성능 리포트

[youdaeng2]

백엔드 수정사항을 따로 올리니 확인하기 훨씬 편하네요.
머지 후 참고하여 코드 수정하도록 하겠습니다 감사합니다.

[github-actions]

✅ PREVIEW https://soso-front-end-h8t4l27mb-dreampastes-projects.vercel.app