refactor: /presentations DTO 구현 및 API 연동 (#111)

src/api/client.ts

@@ -19,12 +19,21 @@ import { useAuthStore } from '@/stores/authStore';
 export const API_TIMEOUT_MS = 10000;
 
 /**
- * API 에러 응답 타입
+ * API 에러 응답 타입 (FAILURE 응답의 error 필드)
  */
-export interface ApiError {
-  message: string;
-  code?: string;
-  status?: number;
+export interface ApiErrorResponse {
+  errorCode: string;
+  reason: string;
+  data?: unknown;
+}
+
+/**
+ * API FAILURE 응답 구조
+ */
+export interface ApiFailureResponse {
+  resultType: 'FAILURE';
+  error: ApiErrorResponse;
+  success: null;
 }
 
 /**
@@ -69,14 +78,15 @@ apiClient.interceptors.request.use(
  */
 apiClient.interceptors.response.use(
   (response) => response,
-  (error: AxiosError<ApiError>) => {
+  (error: AxiosError<ApiFailureResponse>) => {
     const status = error.response?.status;
-    const message = error.response?.data?.message || '알 수 없는 오류가 발생했습니다';
+    const errorData = error.response?.data?.error;
+    const reason = errorData?.reason || '알 수 없는 오류가 발생했습니다';
 
     // [하이브리드 전략]
     // 시스템 에러 (401 인증, 500 서버 장애)는 Axios가 즉시 처리
     if (status === 401 || (status && status >= 500)) {
-      handleApiError(status, message);
+      handleApiError(status, reason);
       // 다운스트림(React Query 등)에서 중복 처리하지 않도록 플래그 설정
       error.isHandled = true;
     }

src/api/dto/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file index.ts
+ * @description DTO 배럴 export
+ */
+
+export type { CreateProjectDto, UpdateProjectDto } from './projects.dto';
+export type { CreateSlideDto, UpdateSlideDto } from './slides.dto';
+export type { UpdateScriptDto, RestoreScriptDto } from './scripts.dto';
+export type { CreateOpinionDto } from './opinions.dto';
+export type { ToggleSlideReactionDto } from './reactions.dto';

src/api/dto/opinions.dto.ts

@@ -0,0 +1,8 @@
+/**
+ * 의견(댓글) 생성 요청 DTO
+ */
+export interface CreateOpinionDto {
+  content: string;
+  /** 답글인 경우 부모 의견 ID */
+  parentId?: string;
+}

src/api/dto/projects.dto.ts

@@ -0,0 +1,14 @@
+/**
+ * 프로젝트 수정 요청 DTO
+ */
+export interface UpdateProjectDto {
+  title: string;
+}
+
+/**
+ * 프로젝트 생성 요청 DTO
+ */
+export interface CreateProjectDto {
+  title: string;
+  uploadFileId: string;
+}

src/api/dto/reactions.dto.ts

@@ -0,0 +1,8 @@
+import type { ReactionType } from '@/types/script';
+
+/**
+ * 슬라이드 리액션 토글 요청 DTO
+ */
+export interface ToggleSlideReactionDto {
+  type: ReactionType;
+}

src/api/dto/scripts.dto.ts

@@ -0,0 +1,13 @@
+/**
+ * 대본 저장 요청 DTO
+ */
+export interface UpdateScriptDto {
+  script: string;
+}
+
+/**
+ * 대본 복원 요청 DTO
+ */
+export interface RestoreScriptDto {
+  version: number;
+}

src/api/dto/slides.dto.ts

@@ -0,0 +1,14 @@
+/**
+ * 슬라이드 제목 수정 요청 DTO
+ */
+export interface UpdateSlideDto {
+  title?: string;
+}
+
+/**
+ * 슬라이드 생성 요청 DTO
+ */
+export interface CreateSlideDto {
+  title: string;
+  script?: string;
+}

src/api/endpoints/comments.ts

@@ -0,0 +1,123 @@
+/**
+ * @file comments.ts
+ * @description 댓글 관련 API 엔드포인트
+ */
+import { apiClient } from '@/api/client';
+import type { ApiResponse } from '@/types/api';
+import type { CommentListResponse, CommentResponse, ReplyListResponse } from '@/types/comment';
+
+/**
+ * 슬라이드 댓글 목록 조회
+ *
+ * @param slideId - 슬라이드 ID
+ * @param page - 페이지 번호 (기본값: 1)
+ * @param limit - 페이지당 개수 (기본값: 20)
+ * @returns 댓글 목록 및 페이지네이션 정보
+ */
+export async function getSlideComments(
+  slideId: string,
+  page = 1,
+  limit = 20,
+): Promise<CommentListResponse> {
+  const response = await apiClient.get<ApiResponse<CommentListResponse>>(
+    `/slides/${slideId}/comments`,
+    {
+      params: { page, limit },
+    },
+  );
+
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
+  }
+  throw new Error(response.data.error.reason);
+}
+
+/**
+ * 슬라이드에 댓글 작성
+ *
+ * @param slideId - 슬라이드 ID
+ * @param data - 댓글 내용
+ * @returns 생성된 댓글 정보
+ */
+export async function createSlideComment(
+  slideId: string,
+  data: { content: string },
+): Promise<CommentResponse> {
+  const response = await apiClient.post<ApiResponse<CommentResponse>>(
+    `/slides/${slideId}/comments`,
+    data,
+  );
+
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
+  }
+  throw new Error(response.data.error.reason);
+}
+
+/**
+ * 댓글에 답글 작성
+ *
+ * @param commentId - 부모 댓글 ID
+ * @param data - 답글 내용
+ * @returns 생성된 답글 정보
+ */
+export async function createReply(
+  commentId: string,
+  data: { content: string },
+): Promise<CommentResponse> {
+  const response = await apiClient.post<ApiResponse<CommentResponse>>(
+    `/comments/${commentId}/replies`,
+    data,
+  );
+
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
+  }
+  throw new Error(response.data.error.reason);
+}
+
+/**
+ * 댓글의 답글 목록 조회
+ *
+ * @param commentId - 댓글 ID
+ * @returns 답글 목록
+ */
+export async function getReplies(commentId: string): Promise<ReplyListResponse> {
+  const response = await apiClient.get<ReplyListResponse>(`/comments/${commentId}/replies`);
+  return response.data;
+}
+
+/**
+ * 댓글 수정
+ *
+ * @param commentId - 댓글 ID
+ * @param data - 수정할 내용
+ * @returns 수정된 댓글 정보
+ */
+export async function updateComment(
+  commentId: string,
+  data: { content: string },
+): Promise<CommentResponse> {
+  const response = await apiClient.patch<ApiResponse<CommentResponse>>(
+    `/comments/${commentId}`,
+    data,
+  );
+
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
+  }
+  throw new Error(response.data.error.reason);
+}
+
+/**
+ * 댓글 삭제
+ *
+ * @param commentId - 댓글 ID
+ */
+export async function deleteComment(commentId: string): Promise<void> {
+  const response = await apiClient.delete<ApiResponse<null>>(`/comments/${commentId}`);
+
+  if (response.data.resultType === 'FAILURE') {
+    throw new Error(response.data.error.reason);
+  }
+}

src/api/endpoints/opinions.ts

@@ -3,16 +3,15 @@
  * @description 의견(댓글) 관련 API 엔드포인트
  */
 import { apiClient } from '@/api';
+import type { CreateOpinionDto } from '@/api/dto';
+import type { ApiResponse } from '@/types/api';
 import type { Comment } from '@/types/comment';
 
 /**
- * 의견 생성 요청 타입
+ * 의견 생성 요청 타입 (하위 호환성)
+ * @deprecated CreateOpinionDto 사용 권장
  */
-export interface CreateOpinionRequest {
-  content: string;
-  /** 답글인 경우 부모 의견 ID */
-  parentId?: string;
-}
+export type CreateOpinionRequest = CreateOpinionDto;
 
 /**
  * 의견 추가
@@ -21,9 +20,13 @@ export interface CreateOpinionRequest {
  * @param data - 의견 데이터
  * @returns 생성된 의견
  */
-export async function createOpinion(slideId: string, data: CreateOpinionRequest): Promise<Comment> {
-  const response = await apiClient.post<Comment>(`/slides/${slideId}/opinions`, data);
-  return response.data;
+export async function createOpinion(slideId: string, data: CreateOpinionDto): Promise<Comment> {
+  const response = await apiClient.post<ApiResponse<Comment>>(`/slides/${slideId}/opinions`, data);
+
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
+  }
+  throw new Error(response.data.error.reason);
 }
 
 /**
@@ -32,5 +35,9 @@ export async function createOpinion(slideId: string, data: CreateOpinionRequest)
  * @param opinionId - 삭제할 의견 ID
  */
 export async function deleteOpinion(opinionId: string): Promise<void> {
-  await apiClient.delete(`/opinions/${opinionId}`);
+  const response = await apiClient.delete<ApiResponse<null>>(`/opinions/${opinionId}`);
+
+  if (response.data.resultType === 'FAILURE') {
+    throw new Error(response.data.error.reason);
+  }
 }