refactor: 타입 마이그레이션 (#122)

src/api/dto/index.ts

@@ -20,13 +20,19 @@ export type {
   GetScriptVersionHistoryResponseDto,
   RestoreScriptResponseDto,
 } from './scripts.dto';
-export type { ToggleSlideReactionDto } from './reactions.dto';
+export type {
+  ReactionCountDto,
+  ToggleSlideReactionDto,
+  ToggleSlideReactionResponseDto,
+  ToggleVideoReactionDto,
+  ToggleVideoReactionResponseDto,
+} from './reactions.dto';
 export type { RestoreScriptRequestDto } from './analytics.dto';
 export type { UpdateProjectDto } from './presentations.dto';
 // export type { UploadFileResponseDto } from './files.dto';
 export type {
   ChunkUploadResponseDto,
-  CreateOpinionDto,
+  CreateCommentDto,
   FinishVideoRequestDto,
   FinishVideoResponseDto,
   StartVideoRequestDto,

src/api/dto/reactions.dto.ts

@@ -2,21 +2,43 @@ import type { ReactionType } from '@/types/script';
 
 /**
  * 슬라이드 리액션 토글 요청 DTO
+ *
+ * TODO: 백엔드 확정 시 필드명 `type` → `emojiType`으로 변경 필요
  */
 export interface ToggleSlideReactionDto {
   type: ReactionType;
 }
 
+/**
+ * 슬라이드 리액션 토글 응답 DTO
+ */
+export interface ToggleSlideReactionResponseDto {
+  active: boolean;
+}
+
+/**
+ * 영상 리액션 토글 요청 DTO
+ *
+ * TODO: 백엔드 확정 시 필드명 `type` → `emojiType`, `timestamp` → `timestampMs`(밀리초)로 변경 필요
+ */
+export interface ToggleVideoReactionDto {
+  type: ReactionType;
+  timestamp: number;
+}
+
+/**
+ * 영상 리액션 토글 응답 DTO
+ */
+export interface ToggleVideoReactionResponseDto {
+  active: boolean;
+}
+
 /**
  * 특정 슬라이드에 달린 모든 이모지 리액션을 집계하여 반환 Dto
+ *
+ * TODO: 백엔드 emojiType 확정 후 키 이름 변경 필요
  */
 export interface ReactionCountDto {
   slideId: string;
-  reactions: {
-    fire: number;
-    good: number;
-    bad: number;
-    sleepy: number;
-    confused: number;
-  };
+  reactions: Record<ReactionType, number>;
 }

src/api/dto/video.dto.ts

@@ -1,9 +1,9 @@
 /**
  * 영상 타임스탬프 댓글 생성
  */
-export interface CreateOpinionDto {
+export interface CreateCommentDto {
   content: string;
-  /** 답글인 경우 부모 의견 내용 고쳐라이D */
+  /** 답글인 경우 부모 댓글 ID */
   parentId?: string;
 }
 

src/api/endpoints/analytics.ts

@@ -2,7 +2,7 @@
  * @file analytics.ts
  * @description 인사이트 페이지 관련 API 엔드포인트
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type {
   ProjectAnalyticsSummaryDto,
   SlideAnalyticsResponseDto,

src/api/endpoints/auth.ts

@@ -2,7 +2,7 @@
  * @file auth.ts
  * @description 인증 관련 API 엔드포인트
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type { SocialLoginSuccessResponseDto } from '@/api/dto';
 import type { ApiResponse } from '@/types/api';
 

src/api/endpoints/comments.ts

@@ -2,7 +2,7 @@
  * @file comments.ts
  * @description 댓글 관련 API 엔드포인트
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type {
   CommentResponseDto,
   GetReplyListResponseDto,

src/api/endpoints/presentations.ts

@@ -5,7 +5,7 @@
  * 서버와 통신하는 함수들을 정의합니다.
  * 이 함수들은 직접 호출하지 않고, hooks/queries에서 사용합니다.
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type { UpdateProjectDto } from '@/api/dto';
 import type { ApiResponse, ConversionStatusResponse } from '@/types/api';
 import type {

src/api/endpoints/reactions.ts

@@ -1,39 +1,47 @@
-/**
- * @file reactions.ts * @description Slide reaction APIs.
+/**
+ * @file reactions.ts
+ * @description 슬라이드 리액션 관련 API 엔드포인트
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type { ToggleSlideReactionDto } from '@/api/dto';
-import type { ReactionCountDto } from '@/api/dto/reactions.dto';
-import type { ApiResponse } from '@/api/handlers';
-import type { Reaction } from '@/types/script';
+import type { ReactionCountDto, ToggleSlideReactionResponseDto } from '@/api/dto/reactions.dto';
+import type { ApiResponse } from '@/types/api';
 
 /**
- * Toggle a reaction for a slide.
  * 슬라이드 리액션 토글
  *
  * @param slideId - 슬라이드 ID
  * @param data - 리액션 데이터
- * @returns 업데이트된 리액션 배열
+ * @returns { active: boolean } - 토글 후 활성 상태
  */
 export async function toggleReaction(
   slideId: string,
   data: ToggleSlideReactionDto,
-): Promise<Reaction[]> {
-  const { data: response } = await apiClient.post<ApiResponse<Reaction[]>>(
+): Promise<ToggleSlideReactionResponseDto> {
+  const { data: response } = await apiClient.post<ApiResponse<ToggleSlideReactionResponseDto>>(
     `/slides/${slideId}/reactions/toggle`,
     data,
   );
-  return response.success;
+
+  if (response.resultType === 'SUCCESS') {
+    return response.success;
+  }
+  throw new Error(response.error.reason);
 }
 
 /**
- * Get reaction summary counts for a slide.
+ * 슬라이드 리액션 집계 조회
+ *
+ * @param slideId - 슬라이드 ID
+ * @returns Record<ReactionType, number> - 이모지별 카운트
  */
 export async function getSlideReactionSummary(slideId: string) {
   const { data } = await apiClient.get<ApiResponse<ReactionCountDto>>(
     `/slides/${slideId}/reactions/summary`,
   );
 
-  // ⚠️ 핵심: success 안에 있는 reactions 객체만 리턴! (없으면 빈 객체)
-  return data.success?.reactions ?? {};
+  if (data.resultType === 'SUCCESS') {
+    return data.success.reactions;
+  }
+  throw new Error(data.error.reason);
 }

src/api/endpoints/scripts.ts

@@ -2,7 +2,7 @@
  * @file scripts.ts
  * @description 대본 관련 API 엔드포인트
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type {
   GetScriptResponseDto,
   GetScriptVersionHistoryResponseDto,

src/api/endpoints/slides.ts

@@ -5,7 +5,7 @@
  * 서버와 통신하는 함수들을 정의합니다.
  * 이 함수들은 직접 호출하지 않고, hooks/queries에서 사용합니다.
  */
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type {
   GetSlideResponseDto,
   UpdateSlideResponseDto,

src/api/endpoints/videoReactions.ts

@@ -1,20 +1,34 @@
-import { apiClient } from '@/api';
-import type { Reaction, ReactionType } from '@/types/script';
+/**
+ * @file videoReactions.ts
+ * @description 영상 리액션 관련 API 엔드포인트
+ */
+import { apiClient } from '@/api/client';
+import type {
+  ToggleVideoReactionDto,
+  ToggleVideoReactionResponseDto,
+} from '@/api/dto/reactions.dto';
+import type { ApiResponse } from '@/types/api';
 
-export interface ToggleVideoReactionRequest {
-  type: ReactionType;
-  timestamp: number;
-}
-
-export interface ToggleVideoReactionResponse {
-  timestamp: number;
-  reactions: Reaction[];
-}
+export type { ToggleVideoReactionDto as ToggleVideoReactionRequest };
 
-export const toggleVideoReaction = async (videoId: string, data: ToggleVideoReactionRequest) => {
-  const { data: response } = await apiClient.post<ToggleVideoReactionResponse>(
+/**
+ * 영상 리액션 토글
+ *
+ * @param videoId - 영상 ID
+ * @param data - 리액션 데이터 (type + timestamp)
+ * @returns { active: boolean } - 토글 후 활성 상태
+ */
+export async function toggleVideoReaction(
+  videoId: string,
+  data: ToggleVideoReactionDto,
+): Promise<ToggleVideoReactionResponseDto> {
+  const { data: response } = await apiClient.post<ApiResponse<ToggleVideoReactionResponseDto>>(
     `/videos/${videoId}/reactions`,
     data,
   );
-  return response;
-};
+
+  if (response.resultType === 'SUCCESS') {
+    return response.success;
+  }
+  throw new Error(response.error.reason);
+}

src/api/endpoints/videos.ts

@@ -1,4 +1,4 @@
-import { apiClient } from '@/api';
+import { apiClient } from '@/api/client';
 import type {
   ChunkUploadResponseDto,
   FinishVideoRequestDto,

src/api/index.ts

@@ -1,7 +1,6 @@
 /**
  * API 모듈 배럴 파일
  */
-export { apiClient } from './client';
 export { queryClient, queryKeys } from './queryClient';
 export * from './endpoints/auth';
 export * from './endpoints/videos';

src/components/comment/CommentPopover.tsx

@@ -10,14 +10,14 @@ import { useCallback, useMemo, useState } from 'react';
 import clsx from 'clsx';
 
 import { Popover } from '@/components/common';
-import { useSlideActions, useSlideOpinions } from '@/hooks';
+import { useSlideActions, useSlideComments } from '@/hooks';
 
 import Comment from './Comment';
 import { CommentProvider } from './CommentContext';
 
 export default function CommentPopover() {
-  const opinions = useSlideOpinions();
-  const { deleteOpinion, addReply } = useSlideActions();
+  const comments = useSlideComments();
+  const { deleteComment, addReply } = useSlideActions();
   const [replyingToId, setReplyingToId] = useState<string | null>(null);
   const [replyDraft, setReplyDraft] = useState('');
 
@@ -50,18 +50,18 @@ export default function CommentPopover() {
       toggleReply,
       submitReply,
       cancelReply,
-      deleteComment: deleteOpinion,
+      deleteComment,
       goToRef: () => {}, // 슬라이드 페이지에서는 ref 이동 불필요
     }),
-    [replyingToId, replyDraft, toggleReply, submitReply, cancelReply, deleteOpinion],
+    [replyingToId, replyDraft, toggleReply, submitReply, cancelReply, deleteComment],
   );
 
   return (
     <Popover
       trigger={({ isOpen }) => (
         <button
           type="button"
-          aria-label={`의견 ${opinions.length}개 보기`}
+          aria-label={`의견 ${comments.length}개 보기`}
           className={clsx(
             'inline-flex h-7 items-center gap-1 rounded px-2',
             'outline-1 -outline-offset-1',
@@ -84,7 +84,7 @@ export default function CommentPopover() {
               isOpen ? 'text-main-variant1' : 'text-gray-600',
             )}
           >
-            {opinions.length}
+            {comments.length}
           </span>
         </button>
       )}
@@ -101,8 +101,8 @@ export default function CommentPopover() {
       {/* 의견 목록 */}
       <CommentProvider value={contextValue}>
         <div className="h-80 overflow-y-auto">
-          {opinions.map((opinion) => (
-            <Comment key={opinion.id} comment={opinion} isIndented={opinion.isReply} />
+          {comments.map((comment) => (
+            <Comment key={comment.id} comment={comment} isIndented={comment.isReply} />
           ))}
         </div>
       </CommentProvider>

src/components/common/ActionButton.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file ActionButton.tsx
+ * @description 하단 영역 주요 액션 버튼
+ */
 interface ActionButtonProps {
   text: string;
   onClick: () => void;

src/components/common/CardView.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file CardView.tsx
+ * @description 제네릭 카드 그리드 뷰 컴포넌트
+ */
 import type { Key, ReactNode } from 'react';
 
 import clsx from 'clsx';

src/components/common/DevFab.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file DevFab.tsx
+ * @description 개발 환경 전용 플로팅 액션 버튼 (DevTestPage 이동)
+ */
 import GanadiIcon from '@/assets/icons/ganadi.webp';
 
 export function DevFab() {

src/components/common/FileDropzone.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file FileDropzone.tsx
+ * @description 드래그 앤 드롭 파일 업로드 컴포넌트
+ */
 import { useEffect, useRef, useState } from 'react';
 
 import clsx from 'clsx';

src/components/common/HighlightText.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file HighlightText.tsx
+ * @description 검색어 일치 부분을 하이라이트 처리하는 텍스트 컴포넌트
+ */
 import { useMemo } from 'react';
 
 type Props = {

src/components/common/ListView.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file ListView.tsx
+ * @description 제네릭 리스트 뷰 컴포넌트
+ */
 import type { Key, ReactNode } from 'react';
 
 import clsx from 'clsx';

src/components/common/Modal.tsx

@@ -178,7 +178,7 @@ export function Modal({
     <div
       ref={backdropRef}
       className={clsx(
-        'fixed inset-0 z-50 flex items-center justify-center bg-[#000000]/65',
+        'fixed inset-0 z-80 flex items-center justify-center bg-[#000000]/65',
         isClosing ? 'animate-fade-out' : 'animate-fade-in',
       )}
       onMouseDown={handleMouseDown}

src/components/common/ProgressBar.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file ProgressBar.tsx
+ * @description 퍼센트 프로그레스 바 컴포넌트 (0~100)
+ */
 type ProgressBarProps = {
   value: number; // 0~100
 };

src/components/common/Skeleton.tsx

@@ -1,3 +1,7 @@
+/**
+ * @file Skeleton.tsx
+ * @description 로딩 스켈레톤 UI 컴포넌트 (Base, Circle, Text)
+ */
 import { type CSSProperties } from 'react';
 
 import clsx from 'clsx';