[PR] 백엔드 api 응답구조 변경에 맞춰 수정

[TTOCHIwas]

📝 요약 (Summary)

• 백엔드 API 응답 구조 변경에 마춰 프론트 타입과 상세 조회 응답 매핑 정리했습니다.
• 프로젝트 상세 조회 응답에서 summary가 추가가 되었는데 이걸 api 레이어에서 flat하게 변환하여 기존 화면 사용 방식을 유지하는 방향으로 진행했습니다.

✅ 주요 변경 사항 (Key Changes)

• 프로젝트 step api 응답 타입에 createdAt, updatedAt 필드를 추가했습니다.
• 프로젝트 상세 조회 api 응답의 { summary, stepResponses } 구조를 flat 구조로 매핑했습니다.
• 프로젝트 생성 api 응답 타입을 Project 기준으로 수정했습니다.

💻 상세 구현 내용 (Implementation Details)

프로젝트 상세 조회 api 응답 매핑

백엔드 상세 응답은 아래처럼 변경되었습니다.

{
  summary: Project;
  stepResponses: ProjectStepResponse[];
}

프론트에서는 기존처럼 project.title, project.roadmapType, project.stepResponses 형태로 사용할 수 있도록 project-detail.api.ts에서 응답을 flat하게 매핑했습니다.

return {
  ...data.summary,
  stepResponses: data.stepResponses,
};

프로젝트 생성 응답 타입 갱신

POST /api/projects 응답이 프로젝트 요약 전체를 반환하도록 변경되어, 기존 { projectId } 타입을 Project 타입으로 정리했습니다.

export type CreateProjectResponse = Project;

Step 응답 타입 갱신

백엔드 ProjectPromptStepResponse에 추가된 createdAt, updatedAt 필드를 ProjectStepResponse에 optional 필드로 반영했습니다.

createdAt?: string;
updatedAt?: string;

🚀 트러블 슈팅 (Trouble Shooting)

왜 API 레이어에서 매핑했는가

• 상세 응답을 백엔드 raw 구조 그대로 사용할지, API 경계에서 flat하게 매핑할지 검토했습니다.
• 백엔드의 summary 래퍼는 전송 포맷에 가까우므로, 화면/훅에 퍼뜨리지 않고 API 경계에서 flat 모델로 변환하는 방식으로 결정했습니다.
• 프로젝트 목록과 생성 api 응답에서 사용되는 프로젝트 기본 정보는 여전히 flat한 구조

{
  projectId,
  title,
  roadmapType,
  status,
  createdAt,
  stepResponses
}

• 하지만 프로젝트 상세 조회에서만 다음과 같은 구조

{
  summary: Project;
  stepResponses: ProjectStepResponse[];
}

같은 Project 기본 정보를 다루는데 목록/생성 에서는 flat하게 내려오고, 상세 조회만 summary 래퍼가 추가되어서 이를 처리할 때 동일하게 flat하게 처리하는 게 맞다고 판단했습니다.

캐싱 관점에서 보면

• useGetProjectDetail(projectId)는 기존처럼 동일한 query key를 사용함

   projectKeys.detail(projectId)

• api 레이어에서 flat하게 매핑해도 캐시는 여전히 한 덩어리로 유지됨

{
  projectId,
  title,
  roadmapType,
  status,
  createdAt,
  stepResponses
}

• summary와 stepResponses를 별로 query로 나누지 않음
• 별도 useState나 zustand 상태를 만들진 않음
• 캐시 메모리 사용량을 의미있게 늘리지 않음
• 동일 화면/다른 화면에서 useGetProjectDetail(projectId)를 호출하면 기존처럼 React Query 캐시를 공유함

반대로

백엔드의 응답 구조를 그대로 노출해도 캐시 단위는 동일하게 하나.

{
  summary,
  stepResponses
}

⚠️ 알려진 이슈 및 참고 사항 (Known Issues & Notes)

해당 없음

📸 스크린샷 (Screenshots)

해당 없음

#️⃣ 관련 이슈 (Related Issues)

• 백엔드 api 응답구조 변경에 맞춰 수정 #81

[gemini-code-assist]

Code Review

This pull request updates the project creation and detail APIs to align with backend response changes, including refactoring CreateProjectResponse to return a full Project object and flattening the nested structure in the project detail API. Additionally, createdAt and updatedAt fields were added to ProjectStepResponse. Feedback was provided regarding the use of the spread operator when flattening the API response, as it may lead to field collisions if the Project type is modified in the future.