diff --git a/src/api/dto/comments.dto.ts b/src/api/dto/comments.dto.ts
index 0b396998..de4f092c 100644
--- a/src/api/dto/comments.dto.ts
+++ b/src/api/dto/comments.dto.ts
@@ -1,48 +1,3 @@
-/**
- * 답글작성
- */
-export interface CreateReplyCommentRequestDto {
-  commentId: string;
-}
-
-/**
- * 답글작성 response DTO
- */
-export interface CreateReplyCommentResponseDto {
-  id: string;
-  content: string;
-  parentId: string;
-  userId: string;
-  createdAt: string;
-}
-
-/**
- * 답글 목록 조회 DTO
- */
-export interface GetRepliesResponseDto {
-  comments: Array<{
-    id: string;
-    content: string;
-    parentId: string | null;
-    userId: string;
-    createdAt: string;
-  }>;
-}
-/**
- * 슬라이드 댓글 작성
- */
-export interface CreateCommentRequestDto {
-  slideId: string;
-}
-/**
- * 슬라이드 댓글 작성 response DTO
- */
-export interface CreateCommentResponseDto {
-  id: string;
-  content: string;
-  userId: string;
-  createdAt: string;
-}
 /**
  * 댓글 작성자 정보
  */
@@ -76,37 +31,86 @@ export interface GetSlideCommentsResponseDto {
 }
 
 /**
- * 댓글 생성/수정 응답
+ * 답글 목록 조회 응답
+ */
+export interface GetReplyListResponseDto {
+  comments: CommentWithUserDto[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+/**
+ * 슬라이드 댓글 생성 요청
  */
-export interface CommentResponseDto {
+export interface CreateCommentRequestDto {
+  content: string;
+}
+
+/**
+ * 슬라이드 댓글 생성 응답
+ */
+export interface CreateCommentResponseDto {
   commentId: string;
   content: string;
-  parentId?: string;
   userId: string;
   createdAt: string;
 }
 
 /**
- * 답글 목록 조회 응답
+ * 답글 생성 요청
+ */
+export interface CreateReplyCommentRequestDto {
+  content: string;
+}
+
+/**
+ * 답글 생성 응답
  */
-export type GetReplyListResponseDto = CommentResponseDto[];
+export interface CreateReplyCommentResponseDto {
+  parentCommentId: string;
+  replyId: string;
+  content: string;
+  userId: string;
+  createdAt: string;
+}
+
 /**
- * 댓글 수정
+ * 댓글/답글 수정 응답
  */
 export interface UpdateCommentResponseDto {
-  commentId: string;
+  updatedTargetType: 'comment' | 'reply';
+  commentId?: string;
+  replyId?: string;
+  parentCommentId?: string;
   content: string;
   userId: string;
   createdAt: string;
+  updatedAt: string;
 }
+
 /**
- * 댓글 및, 답글 삭제
+ * 댓글/답글 삭제 요청
  */
 export interface DeleteCommentRequestDto {
   commentId: string;
 }
+
+/**
+ * 댓글/답글 삭제 응답
+ */
+export interface DeleteCommentResponseDto {
+  deletedTargetType: 'comment' | 'reply';
+  commentId?: string;
+  replyId?: string;
+  parentCommentId?: string;
+}
+
 /**
- * 영상 타임스탬프 댓글 생성
+ * 영상 타임스탬프 댓글 생성 요청
  */
 export interface CreateVideoCommentRequestDto {
   content: string;
diff --git a/src/api/dto/index.ts b/src/api/dto/index.ts
index ff2c0dde..d5cc323c 100644
--- a/src/api/dto/index.ts
+++ b/src/api/dto/index.ts
@@ -22,24 +22,41 @@ export type {
 } from './scripts.dto';
 export type {
   ReadReactionCountDto,
+  ReadVideoReactionSummaryItemDto,
+  ReadVideoReactionTimelineResponseDto,
+  ReadVideoReactionTimelineMarkerDto,
   ToggleSlideReactionDto,
   ToggleSlideReactionResponseDto,
   ToggleVideoReactionDto,
   ToggleVideoReactionResponseDto,
 } from './reactions.dto';
 export type { RestoreScriptRequestDto } from './analytics.dto';
-export type { UpdateProjectDto } from './presentations.dto';
+export type {
+  DeleteProjectResponseDto,
+  GetPresentationsRequestDto,
+  UpdateProjectRequestDto,
+  UpdateProjectResponseDto,
+} from './presentations.dto';
 // export type { UploadFileResponseDto } from './files.dto';
 export type {
   ChunkUploadResponseDto,
-  CreateCommentDto,
   FinishVideoRequestDto,
   FinishVideoResponseDto,
+  GetProjectVideosResponseDto,
+  GetVideoDetailResponseDto,
+  GetVideoSlidesResponseDto,
   StartVideoRequestDto,
   StartVideoResponseDto,
+  VideoDetailDto,
+  VideoListItemDto,
+  VideoSlideTimelineItemDto,
+  VideoStatus,
+  VideoTimelineCommentDto,
+  VideoTimelineCommentUserDto,
+  VideoTimelineDto,
+  VideoTimelineReactionDto,
 } from './video.dto';
 export type {
-  CommentResponseDto,
   CommentUserDto,
   CommentWithUserDto,
   CreateCommentRequestDto,
@@ -48,7 +65,7 @@ export type {
   CreateReplyCommentResponseDto,
   CreateVideoCommentRequestDto,
   DeleteCommentRequestDto,
-  GetRepliesResponseDto,
+  DeleteCommentResponseDto,
   GetReplyListResponseDto,
   GetSlideCommentsResponseDto,
   UpdateCommentResponseDto,
diff --git a/src/api/dto/presentations.dto.ts b/src/api/dto/presentations.dto.ts
index 1819cbe4..a9cffbf8 100644
--- a/src/api/dto/presentations.dto.ts
+++ b/src/api/dto/presentations.dto.ts
@@ -1,6 +1,33 @@
 /**
  * 프로젝트 제목 수정 요청 DTO
  */
-export interface UpdateProjectDto {
+export interface UpdateProjectRequestDto {
   title?: string;
 }
+
+/**
+ * 프로젝트 제목 수정 응답 DTO
+ */
+export interface UpdateProjectResponseDto {
+  projectId: string;
+  title: string;
+  updatedAt: string;
+}
+
+/**
+ * 프로젝트 목록 조회 요청 DTO
+ */
+export interface GetPresentationsRequestDto {
+  page?: number;
+  limit?: number;
+  search?: string;
+  maxDuration?: number;
+  sort?: string;
+}
+
+/**
+ * 프로젝트 삭제 응답 DTO
+ */
+export interface DeleteProjectResponseDto {
+  message: string;
+}
diff --git a/src/api/dto/reactions.dto.ts b/src/api/dto/reactions.dto.ts
index 5a2f81d6..35a369e2 100644
--- a/src/api/dto/reactions.dto.ts
+++ b/src/api/dto/reactions.dto.ts
@@ -26,6 +26,8 @@ export interface ToggleVideoReactionDto {
  * 영상 리액션 토글 응답 DTO
  */
 export interface ToggleVideoReactionResponseDto {
+  reactionId: string;
+  videoId: string;
   active: boolean;
 }
 
@@ -37,6 +39,31 @@ export interface ReadReactionCountDto {
   reactions: Record<ReactionType, number>;
 }
 
+/**
+ * 영상 리액션 구간 집계 항목 Dto
+ */
+export interface ReadVideoReactionSummaryItemDto {
+  emojiType: ReactionType;
+  count: number;
+}
+
+/**
+ * 영상 리액션 타임라인 마커 Dto
+ */
+export interface ReadVideoReactionTimelineMarkerDto {
+  timestampMs: number;
+  emojiType: ReactionType;
+  count: number;
+}
+
+/**
+ * 영상 리액션 타임라인 응답 Dto
+ */
+export interface ReadVideoReactionTimelineResponseDto {
+  intervalMs: number;
+  markers: ReadVideoReactionTimelineMarkerDto[];
+}
+
 /**
  * 프로젝트 전체 슬라이드 리액션 집계 조회 Dto
  */
diff --git a/src/api/dto/video.dto.ts b/src/api/dto/video.dto.ts
index 22f60a01..02ebccfb 100644
--- a/src/api/dto/video.dto.ts
+++ b/src/api/dto/video.dto.ts
@@ -1,11 +1,8 @@
-/**
- * 영상 타임스탬프 댓글 생성
- */
-export interface CreateCommentDto {
-  content: string;
-  /** 답글인 경우 부모 댓글 ID */
-  parentId?: string;
-}
+import type { ReactionType } from '@/types/script';
+
+// ============================================================================
+// 영상 녹화 관련 DTO
+// ============================================================================
 
 /**
  * 영상 녹화 시작 요청 DTO
@@ -19,7 +16,7 @@ export interface StartVideoRequestDto {
  * 영상 녹화 시작 응답 DTO (success 데이터)
  */
 export interface StartVideoResponseDto {
-  videoId: number;
+  videoId: string;
 }
 
 /**
@@ -51,3 +48,111 @@ export interface FinishVideoResponseDto {
 export interface ChunkUploadResponseDto {
   ok: boolean;
 }
+
+// ============================================================================
+// 영상 상세 조회 DTO — GET /videos/:videoId
+// ============================================================================
+
+export type VideoStatus = 'processing' | 'ready' | 'failed';
+
+/**
+ * 영상 상세 정보
+ */
+export interface VideoDetailDto {
+  videoId: string;
+  title: string;
+  status: VideoStatus;
+  durationSeconds: number;
+  width: number;
+  height: number;
+  fps: number;
+  hlsMasterUrl: string;
+  thumbnailUrl: string | null;
+  createdAt: string;
+}
+
+/**
+ * 타임라인 리액션 항목
+ */
+export interface VideoTimelineReactionDto {
+  timestampMs: number;
+  emojiType: ReactionType;
+  count: number;
+}
+
+/**
+ * 타임라인 댓글 작성자
+ */
+export interface VideoTimelineCommentUserDto {
+  userId: string;
+  name: string;
+}
+
+/**
+ * 타임라인 댓글 항목
+ */
+export interface VideoTimelineCommentDto {
+  commentId: string;
+  timestampMs: number;
+  content: string;
+  createdAt: string;
+  user: VideoTimelineCommentUserDto;
+}
+
+/**
+ * 영상 타임라인 (리액션 + 댓글)
+ */
+export interface VideoTimelineDto {
+  reactions: VideoTimelineReactionDto[];
+  comments: VideoTimelineCommentDto[];
+}
+
+/**
+ * GET /videos/:videoId 응답 DTO
+ */
+export interface GetVideoDetailResponseDto {
+  video: VideoDetailDto;
+  timeline: VideoTimelineDto;
+}
+
+// ============================================================================
+// 영상 목록 조회 DTO — GET /presentations/:projectId/videos
+// ============================================================================
+
+/**
+ * 영상 목록 항목
+ */
+export interface VideoListItemDto {
+  videoId: string;
+  title: string;
+  status: VideoStatus;
+  durationSeconds: number;
+  thumbnailUrl: string | null;
+  createdAt: string;
+}
+
+/**
+ * GET /presentations/:projectId/videos 응답 DTO
+ */
+export interface GetProjectVideosResponseDto {
+  videos: VideoListItemDto[];
+}
+
+// ============================================================================
+// 영상-슬라이드 타임라인 DTO — GET /videos/:videoId/slides
+// ============================================================================
+
+/**
+ * 영상-슬라이드 타임라인 항목
+ */
+export interface VideoSlideTimelineItemDto {
+  slideId: string;
+  timestampMs: number;
+}
+
+/**
+ * GET /videos/:videoId/slides 응답 DTO
+ */
+export interface GetVideoSlidesResponseDto {
+  slides: VideoSlideTimelineItemDto[];
+}
diff --git a/src/api/endpoints/comments.ts b/src/api/endpoints/comments.ts
index 718d4fe2..c81d0ca9 100644
--- a/src/api/endpoints/comments.ts
+++ b/src/api/endpoints/comments.ts
@@ -4,9 +4,15 @@
  */
 import { apiClient } from '@/api/client';
 import type {
-  CommentResponseDto,
+  CreateCommentRequestDto,
+  CreateCommentResponseDto,
+  CreateReplyCommentRequestDto,
+  CreateReplyCommentResponseDto,
+  DeleteCommentRequestDto,
+  DeleteCommentResponseDto,
   GetReplyListResponseDto,
   GetSlideCommentsResponseDto,
+  UpdateCommentResponseDto,
 } from '@/api/dto';
 import type { ApiResponse } from '@/types/api';
 
@@ -45,9 +51,9 @@ export async function getSlideComments(
  */
 export async function createSlideComment(
   slideId: string,
-  data: { content: string },
-): Promise<CommentResponseDto> {
-  const response = await apiClient.post<ApiResponse<CommentResponseDto>>(
+  data: CreateCommentRequestDto,
+): Promise<CreateCommentResponseDto> {
+  const response = await apiClient.post<ApiResponse<CreateCommentResponseDto>>(
     `/slides/${slideId}/comments`,
     data,
   );
@@ -67,9 +73,9 @@ export async function createSlideComment(
  */
 export async function createReply(
   commentId: string,
-  data: { content: string },
-): Promise<CommentResponseDto> {
-  const response = await apiClient.post<ApiResponse<CommentResponseDto>>(
+  data: CreateReplyCommentRequestDto,
+): Promise<CreateReplyCommentResponseDto> {
+  const response = await apiClient.post<ApiResponse<CreateReplyCommentResponseDto>>(
     `/comments/${commentId}/replies`,
     data,
   );
@@ -86,9 +92,16 @@ export async function createReply(
  * @param commentId - 댓글 ID
  * @returns 답글 목록
  */
-export async function getReplies(commentId: string): Promise<GetReplyListResponseDto> {
+export async function getReplies(
+  commentId: string,
+  page = 1,
+  limit = 20,
+): Promise<GetReplyListResponseDto> {
   const response = await apiClient.get<ApiResponse<GetReplyListResponseDto>>(
     `/comments/${commentId}/replies`,
+    {
+      params: { page, limit },
+    },
   );
 
   if (response.data.resultType === 'SUCCESS') {
@@ -107,8 +120,8 @@ export async function getReplies(commentId: string): Promise<GetReplyListRespons
 export async function updateComment(
   commentId: string,
   data: { content: string },
-): Promise<CommentResponseDto> {
-  const response = await apiClient.patch<ApiResponse<CommentResponseDto>>(
+): Promise<UpdateCommentResponseDto> {
+  const response = await apiClient.patch<ApiResponse<UpdateCommentResponseDto>>(
     `/comments/${commentId}`,
     data,
   );
@@ -122,12 +135,18 @@ export async function updateComment(
 /**
  * 댓글 삭제
  *
- * @param commentId - 댓글 ID
+ * @param data - 삭제 대상 정보
+ * @returns 삭제 결과
  */
-export async function deleteComment(commentId: string): Promise<void> {
-  const response = await apiClient.delete<ApiResponse<null>>(`/comments/${commentId}`);
+export async function deleteComment(
+  data: DeleteCommentRequestDto,
+): Promise<DeleteCommentResponseDto> {
+  const response = await apiClient.delete<ApiResponse<DeleteCommentResponseDto>>(
+    `/comments/${data.commentId}`,
+  );
 
-  if (response.data.resultType === 'FAILURE') {
-    throw new Error(response.data.error.reason);
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
   }
+  throw new Error(response.data.error.reason);
 }
diff --git a/src/api/endpoints/presentations.ts b/src/api/endpoints/presentations.ts
index 7556b0ee..ba46f252 100644
--- a/src/api/endpoints/presentations.ts
+++ b/src/api/endpoints/presentations.ts
@@ -6,24 +6,29 @@
  * 이 함수들은 직접 호출하지 않고, hooks/queries에서 사용합니다.
  */
 import { apiClient } from '@/api/client';
-import type { UpdateProjectDto } from '@/api/dto';
-import type { ApiResponse, ConversionStatusResponse } from '@/types/api';
 import type {
-  Presentation,
-  PresentationListResponse,
-  ProjectUpdateResponse,
-} from '@/types/presentation';
+  DeleteProjectResponseDto,
+  GetPresentationsRequestDto,
+  UpdateProjectRequestDto,
+  UpdateProjectResponseDto,
+} from '@/api/dto';
+import type { ApiResponse, ConversionStatusResponse } from '@/types/api';
+import type { Presentation, PresentationListResponse } from '@/types/presentation';
 
 /**
  * 프로젝트 목록 조회 (GET)
  *
  * @returns Presentation[]
  */
-export async function getPresentations(): Promise<Presentation[]> {
-  const response = await apiClient.get<ApiResponse<PresentationListResponse>>(`/presentations`);
+export async function getPresentations(
+  params?: GetPresentationsRequestDto,
+): Promise<PresentationListResponse> {
+  const response = await apiClient.get<ApiResponse<PresentationListResponse>>(`/presentations`, {
+    params,
+  });
 
   if (response.data.resultType === 'SUCCESS') {
-    return response.data.success.presentations;
+    return response.data.success;
   }
   throw new Error(response.data.error.reason);
 }
@@ -48,13 +53,13 @@ export async function getPresentation(projectId: string): Promise<Presentation>
  *
  * @param projectId
  * @param data - 수정할 프로젝트 데이터
- * @returns ProjectUpdateResponse - 수정된 프로젝트 정보
+ * @returns UpdateProjectResponseDto - 수정된 프로젝트 정보
  */
 export async function updatePresentation(
   projectId: string,
-  data: UpdateProjectDto,
-): Promise<ProjectUpdateResponse> {
-  const response = await apiClient.patch<ApiResponse<ProjectUpdateResponse>>(
+  data: UpdateProjectRequestDto,
+): Promise<UpdateProjectResponseDto> {
+  const response = await apiClient.patch<ApiResponse<UpdateProjectResponseDto>>(
     `/presentations/${projectId}`,
     data,
   );
@@ -70,12 +75,15 @@ export async function updatePresentation(
  *
  * @param projectId
  */
-export async function deletePresentation(projectId: string): Promise<void> {
-  const response = await apiClient.delete<ApiResponse<null>>(`/presentations/${projectId}`);
+export async function deletePresentation(projectId: string): Promise<DeleteProjectResponseDto> {
+  const response = await apiClient.delete<ApiResponse<DeleteProjectResponseDto>>(
+    `/presentations/${projectId}`,
+  );
 
-  if (response.data.resultType === 'FAILURE') {
-    throw new Error(response.data.error.reason);
+  if (response.data.resultType === 'SUCCESS') {
+    return response.data.success;
   }
+  throw new Error(response.data.error.reason);
 }
 
 /**
diff --git a/src/api/endpoints/videoReactions.ts b/src/api/endpoints/videoReactions.ts
index c13df6d4..0165d127 100644
--- a/src/api/endpoints/videoReactions.ts
+++ b/src/api/endpoints/videoReactions.ts
@@ -4,6 +4,8 @@
  */
 import { apiClient } from '@/api/client';
 import type {
+  ReadVideoReactionSummaryItemDto,
+  ReadVideoReactionTimelineResponseDto,
   ToggleVideoReactionDto,
   ToggleVideoReactionResponseDto,
 } from '@/api/dto/reactions.dto';
@@ -32,3 +34,47 @@ export async function toggleVideoReaction(
   }
   throw new Error(response.error.reason);
 }
+
+/**
+ * 영상 리액션 (특정 시점) 조회
+ *
+ * @param videoId - 영상 ID
+ * @param params - timestampMs (필수), windowMs (선택)
+ * @returns 이모지 타입별 집계 배열
+ */
+export async function getVideoReactions(
+  videoId: string,
+  params: { timestampMs: number; windowMs?: number },
+): Promise<ReadVideoReactionSummaryItemDto[]> {
+  const { data } = await apiClient.get<ApiResponse<ReadVideoReactionSummaryItemDto[]>>(
+    `/videos/${videoId}/reactions`,
+    { params },
+  );
+
+  if (data.resultType === 'SUCCESS') {
+    return data.success;
+  }
+  throw new Error(data.error.reason);
+}
+
+/**
+ * 영상 리액션 타임라인 조회
+ *
+ * @param videoId - 영상 ID
+ * @param params - intervalMs (선택)
+ * @returns 타임라인 마커
+ */
+export async function getVideoReactionTimeline(
+  videoId: string,
+  params?: { intervalMs?: number },
+): Promise<ReadVideoReactionTimelineResponseDto> {
+  const { data } = await apiClient.get<ApiResponse<ReadVideoReactionTimelineResponseDto>>(
+    `/videos/${videoId}/reactions/timeline`,
+    { params },
+  );
+
+  if (data.resultType === 'SUCCESS') {
+    return data.success;
+  }
+  throw new Error(data.error.reason);
+}
diff --git a/src/api/endpoints/videos.ts b/src/api/endpoints/videos.ts
index 5b0dec13..2911c30c 100644
--- a/src/api/endpoints/videos.ts
+++ b/src/api/endpoints/videos.ts
@@ -1,27 +1,17 @@
 import { apiClient } from '@/api/client';
 import type {
   ChunkUploadResponseDto,
-  CommentResponseDto,
+  CreateCommentResponseDto,
+  CreateReplyCommentResponseDto,
   FinishVideoRequestDto,
   FinishVideoResponseDto,
+  GetVideoDetailResponseDto,
+  GetVideoSlidesResponseDto,
   StartVideoRequestDto,
   StartVideoResponseDto,
 } from '@/api/dto';
 import type { ApiResponse } from '@/types/api';
 
-/**
- * DTO → Model 변환: CommentResponseDto를 앱 내부용 Model로 변환
- */
-function commentDtoToModel(dto: CommentResponseDto): {
-  serverId: string;
-  content: string;
-} {
-  return {
-    serverId: dto.commentId,
-    content: dto.content,
-  };
-}
-
 // ============================================================================
 // 레거시 videosApi 객체 (하위 호환성 유지)
 // useVideoUpload 등 기존 코드에서 사용 중
@@ -32,7 +22,7 @@ export const videosApi = {
     apiClient.post<ApiResponse<StartVideoResponseDto>>('/videos/start', data),
 
   // POST /videos/{videoId}/chunks/{chunkIndex} - 청크 업로드
-  uploadChunk: (videoId: number, chunkIndex: number, file: Blob) => {
+  uploadChunk: (videoId: string, chunkIndex: number, file: Blob) => {
     const formData = new FormData();
     formData.append('file', file);
 
@@ -48,14 +38,16 @@ export const videosApi = {
   },
 
   // POST /videos/{videoId}/finish - 녹화 종료 및 영상 처리 시작
-  finishVideo: (videoId: number, data: FinishVideoRequestDto) =>
+  finishVideo: (videoId: string, data: FinishVideoRequestDto) =>
     apiClient.post<ApiResponse<FinishVideoResponseDto>>(`/videos/${videoId}/finish`, data),
 
   // GET /videos/{videoId} - 영상 상세 조회
-  getVideoDetail: (videoId: number) => apiClient.get(`/videos/${videoId}`),
+  getVideoDetail: (videoId: string) =>
+    apiClient.get<ApiResponse<GetVideoDetailResponseDto>>(`/videos/${videoId}`),
 
   // GET /videos/{videoId}/slides - 슬라이드 타임라인 조회
-  getVideoSlides: (videoId: number) => apiClient.get(`/videos/${videoId}/slides`),
+  getVideoSlides: (videoId: string) =>
+    apiClient.get<ApiResponse<GetVideoSlidesResponseDto>>(`/videos/${videoId}/slides`),
 };
 
 // ============================================================================
@@ -71,17 +63,19 @@ export const videosApi = {
  * @returns Model - serverId와 content
  */
 export async function createVideoComment(
-  videoId: number,
+  videoId: string,
   data: { content: string; timestampMs?: number },
 ): Promise<{ serverId: string; content: string }> {
-  const response = await apiClient.post<ApiResponse<CommentResponseDto>>(
+  const response = await apiClient.post<ApiResponse<CreateCommentResponseDto>>(
     `/videos/${videoId}/comments`,
     data,
   );
 
   if (response.data.resultType === 'SUCCESS') {
-    // DTO → Model 변환
-    return commentDtoToModel(response.data.success);
+    return {
+      serverId: response.data.success.commentId,
+      content: response.data.success.content,
+    };
   }
   throw new Error(response.data.error.reason);
 }
@@ -94,17 +88,19 @@ export async function createVideoComment(
  * @returns Model - serverId와 content
  */
 export async function createCommentReply(
-  commentId: number,
+  commentId: string,
   data: { content: string },
 ): Promise<{ serverId: string; content: string }> {
-  const response = await apiClient.post<ApiResponse<CommentResponseDto>>(
+  const response = await apiClient.post<ApiResponse<CreateReplyCommentResponseDto>>(
     `/comments/${commentId}/replies`,
     data,
   );
 
   if (response.data.resultType === 'SUCCESS') {
-    // DTO → Model 변환
-    return commentDtoToModel(response.data.success);
+    return {
+      serverId: response.data.success.replyId,
+      content: response.data.success.content,
+    };
   }
   throw new Error(response.data.error.reason);
 }
@@ -114,7 +110,7 @@ export async function createCommentReply(
  *
  * @param commentId - 댓글 ID
  */
-export async function deleteVideoComment(commentId: number): Promise<void> {
+export async function deleteVideoComment(commentId: string): Promise<void> {
   const response = await apiClient.delete<ApiResponse<null>>(`/comments/${commentId}`);
 
   if (response.data.resultType === 'FAILURE') {
diff --git a/src/api/queryClient.ts b/src/api/queryClient.ts
index 3b8be482..56b9fdd7 100644
--- a/src/api/queryClient.ts
+++ b/src/api/queryClient.ts
@@ -68,7 +68,13 @@ export const queryKeys = {
   presentations: {
     all: ['presentations'] as const,
     lists: () => [...queryKeys.presentations.all, 'list'] as const,
-    list: () => [...queryKeys.presentations.lists()] as const,
+    list: (params?: {
+      page?: number;
+      limit?: number;
+      search?: string;
+      maxDuration?: number;
+      sort?: string;
+    }) => [...queryKeys.presentations.lists(), params ?? {}] as const,
     details: () => [...queryKeys.presentations.all, 'detail'] as const,
     detail: (projectId: string) => [...queryKeys.presentations.details(), projectId] as const,
   },
@@ -106,6 +112,13 @@ export const queryKeys = {
     summary: (slideId: string) => [...queryKeys.reactions.summaries(), slideId] as const,
     totals: () => [...queryKeys.reactions.all, 'total'] as const,
     total: (projectId: string) => [...queryKeys.reactions.totals(), projectId] as const,
+    video: {
+      all: (videoId: string) => [...queryKeys.reactions.all, 'video', videoId] as const,
+      window: (videoId: string, timestampMs: number, windowMs = 2000) =>
+        [...queryKeys.reactions.video.all(videoId), 'window', timestampMs, windowMs] as const,
+      timeline: (videoId: string, intervalMs = 5000) =>
+        [...queryKeys.reactions.video.all(videoId), 'timeline', intervalMs] as const,
+    },
   },
 } as const;
 
diff --git a/src/components/comment/Comment.tsx b/src/components/comment/Comment.tsx
index 88d045dd..7d9bc4fa 100644
--- a/src/components/comment/Comment.tsx
+++ b/src/components/comment/Comment.tsx
@@ -38,7 +38,7 @@ interface CommentProps {
  */
 function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
   // rootCommentId가 없으면 자기 자신이 최상위 댓글
-  const resolvedRootId = rootCommentId ?? comment.id;
+  const resolvedRootId = rootCommentId ?? comment.commentId;
   const {
     replyingToId,
     replyDraft,
@@ -46,13 +46,13 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
     toggleReply,
     submitReply,
     cancelReply,
+    deleteComment,
     editingId,
     editDraft,
     setEditDraft,
     startEdit,
     cancelEdit,
     submitEdit,
-    deleteComment,
     goToRef,
   } = useCommentContext();
 
@@ -64,21 +64,21 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
   const authorName = user?.name ?? '알 수 없음';
   const authorProfileImage = user?.profileImage;
 
-  const isActive = replyingToId === comment.id;
-  const isEditing = editingId === comment.id;
+  const isActive = replyingToId === comment.commentId;
+  const isEditing = editingId === comment.commentId;
 
   const handleStartEdit = useCallback(() => {
-    if (editingId === comment.id) return;
-    startEdit(comment.id, comment.content);
-  }, [startEdit, editingId, comment.id, comment.content]);
+    if (editingId === comment.commentId) return;
+    startEdit(comment.commentId, comment.content);
+  }, [startEdit, editingId, comment.commentId, comment.content]);
 
   const handleSubmitEdit = useCallback(() => {
-    submitEdit(comment.id);
-  }, [submitEdit, comment.id]);
+    submitEdit(comment.commentId);
+  }, [submitEdit, comment.commentId]);
 
   const handleToggleReply = useCallback(() => {
-    toggleReply(comment.id);
-  }, [toggleReply, comment.id]);
+    toggleReply(comment.commentId);
+  }, [toggleReply, comment.commentId]);
 
   const handleSubmitReply = useCallback(() => {
     // 항상 최상위 부모 댓글 ID로 답글 제출 (서버는 root에만 답글 허용)
@@ -86,8 +86,8 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
   }, [submitReply, resolvedRootId]);
 
   const handleDelete = useCallback(() => {
-    deleteComment?.(comment.id);
-  }, [deleteComment, comment.id]);
+    deleteComment?.(comment.commentId);
+  }, [deleteComment, comment.commentId]);
 
   const handleGoToRef = useCallback(() => {
     if (comment.ref) {
@@ -140,10 +140,8 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
                     onClick={handleStartEdit}
                     aria-label="댓글 수정"
                     className={clsx(
-                      'flex items-center gap-1 rounded text-caption-bold active:opacity-80 focus-visible:outline-2 focus-visible:outline-gray-400',
-                      isEditing
-                        ? 'text-gray-400'
-                        : 'text-[#FFFFFF] hover:text-[rgba(255,255,255,0.8)]',
+                      'flex items-center gap-1 rounded text-caption-bold active:opacity-80 focus-visible:outline-2 focus-visible:outline-main',
+                      isEditing ? 'text-gray-400' : 'text-black',
                     )}
                   >
                     수정
@@ -154,7 +152,7 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
                       type="button"
                       onClick={handleDelete}
                       aria-label="댓글 삭제"
-                      className="flex items-center gap-1 rounded text-caption-bold text-error hover:text-red-400 active:opacity-80 focus-visible:outline-2 focus-visible:outline-error"
+                      className="flex items-center gap-1 rounded text-caption-bold text-error active:opacity-80 focus-visible:outline-2 focus-visible:outline-error"
                     >
                       삭제
                       <RemoveIcon className="h-4 w-4" aria-hidden="true" />
@@ -223,7 +221,7 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
         </div>
       </div>
 
-      {replyingToId === comment.id && (
+      {replyingToId === comment.commentId && (
         <CommentInput
           value={replyDraft}
           onChange={setReplyDraft}
@@ -239,7 +237,7 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
         <div>
           {comment.replies.map((reply, index) => (
             <Comment
-              key={reply.id ?? `reply-${comment.id}-${index}`}
+              key={reply.commentId ?? `reply-${comment.commentId}-${index}`}
               comment={reply}
               isIndented
               rootCommentId={resolvedRootId}
diff --git a/src/components/comment/CommentList.tsx b/src/components/comment/CommentList.tsx
index 2fb697df..50012726 100644
--- a/src/components/comment/CommentList.tsx
+++ b/src/components/comment/CommentList.tsx
@@ -151,7 +151,7 @@ export default function CommentList({
     <CommentProvider value={contextValue}>
       <div className="mt-2 flex-1 space-y-2 overflow-y-auto">
         {comments.map((comment) => (
-          <Comment key={comment.id} comment={comment} rootCommentId={comment.id} />
+          <Comment key={comment.commentId} comment={comment} />
         ))}
       </div>
     </CommentProvider>
diff --git a/src/components/comment/CommentPopover.tsx b/src/components/comment/CommentPopover.tsx
index 80742996..af826367 100644
--- a/src/components/comment/CommentPopover.tsx
+++ b/src/components/comment/CommentPopover.tsx
@@ -143,7 +143,7 @@ export default function CommentPopover() {
       <CommentProvider value={contextValue}>
         <div className="h-80 overflow-y-auto">
           {comments.map((comment) => (
-            <Comment key={comment.id} comment={comment} isIndented={comment.isReply} />
+            <Comment key={comment.commentId} comment={comment} isIndented={comment.isReply} />
           ))}
         </div>
       </CommentProvider>
diff --git a/src/components/common/TitleEditorPopover.tsx b/src/components/common/TitleEditorPopover.tsx
index 5213132c..4491cf74 100644
--- a/src/components/common/TitleEditorPopover.tsx
+++ b/src/components/common/TitleEditorPopover.tsx
@@ -22,6 +22,7 @@ interface TitleEditorPopoverProps {
   isCollapsed?: boolean;
   ariaLabel: string;
   isPending?: boolean;
+  titleClassName?: string;
 }
 
 export function TitleEditorPopover({
@@ -31,6 +32,7 @@ export function TitleEditorPopover({
   isCollapsed = false,
   ariaLabel,
   isPending = false,
+  titleClassName = 'max-w-60 truncate',
 }: TitleEditorPopoverProps) {
   const [editTitle, setEditTitle] = useState(title);
 
@@ -45,9 +47,9 @@ export function TitleEditorPopover({
           <button
             type="button"
             aria-label={ariaLabel}
-            className="hidden md:inline-flex h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main"
+            className="hidden md:inline-flex h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main min-w-0"
           >
-            <span className="whitespace-normal break-words">{title}</span>
+            <span className={titleClassName}>{title}</span>
             <InfoIcon className="h-4 w-4" aria-hidden="true" />
           </button>
         }
@@ -67,9 +69,9 @@ export function TitleEditorPopover({
         <button
           type="button"
           aria-label={ariaLabel}
-          className="hidden md:inline-flex h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main"
+          className="hidden md:inline-flex h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main min-w-0"
         >
-          <span className="whitespace-normal break-words">{title}</span>
+          <span className={titleClassName}>{title}</span>
           <ArrowDownIcon
             className={clsx(
               'h-4 w-4 transition-transform duration-300',
diff --git a/src/components/feedback/ProgressBar.tsx b/src/components/feedback/ProgressBar.tsx
index d09bf12d..ad957327 100644
--- a/src/components/feedback/ProgressBar.tsx
+++ b/src/components/feedback/ProgressBar.tsx
@@ -156,11 +156,11 @@ export default function ProgressBar({
       className="group relative h-1 w-full cursor-pointer rounded-full bg-[rgba(26,26,26,0.66)] transition-all duration-150 hover:h-1.5 hover:ring-2 hover:ring-[#4F5BFF]/30 select-none before:content-[''] before:absolute before:-inset-y-3 before:inset-x-0"
     >
       {/* 프로그레스바 위 흰색 마커 */}
-      {segmentHighlights?.map((segment) => {
+      {segmentHighlights?.map((segment, index) => {
         const percent = max > 0 ? (segment.startTime / max) * 100 : 0;
         return (
           <div
-            key={`marker-${segment.startTime}`}
+            key={`marker-${segment.startTime}-${index}`}
             className="absolute top-1/2 -translate-y-1/2 z-10 h-1.5 w-0.5 rounded-full bg-[#FFFFFF]/70"
             style={{ left: `${percent}%`, transform: 'translateX(-50%)' }}
           />
@@ -168,11 +168,11 @@ export default function ProgressBar({
       })}
 
       {/* 세그먼트 하이라이트 (5초 버킷별 대표 리액션) */}
-      {segmentHighlights?.map((segment) => {
+      {segmentHighlights?.map((segment, index) => {
         const percent = max > 0 ? (segment.startTime / max) * 100 : 0;
         return (
           <div
-            key={`segment-${segment.startTime}`}
+            key={`segment-${segment.startTime}-${segment.topReactionType}-${index}`}
             className="absolute -top-7 z-10 flex flex-col gap-1 items-center cursor-pointer"
             style={{ left: `${percent}%`, transform: 'translateX(-50%)' }}
             title={`${REACTION_CONFIG[segment.topReactionType].label} (${segment.count})`}
diff --git a/src/components/feedback/ScriptSection.tsx b/src/components/feedback/ScriptSection.tsx
index 565ac4ec..f2d9da10 100644
--- a/src/components/feedback/ScriptSection.tsx
+++ b/src/components/feedback/ScriptSection.tsx
@@ -8,12 +8,12 @@
 import { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Skeleton } from '@/components/common';
-import type { SlideListItem } from '@/types/slide';
+import type { SlideDetail } from '@/types/slide';
 import { formatVideoTimestamp } from '@/utils/format';
 import { getSlideIndexFromTime } from '@/utils/video';
 
 interface ScriptSectionProps {
-  slides: SlideListItem[];
+  slides: SlideDetail[];
   slideChangeTimes: number[];
   currentTime: number;
   onSeek?: (time: number) => void;
diff --git a/src/components/feedback/SlideViewer.tsx b/src/components/feedback/SlideViewer.tsx
index 05babcbe..a00bfede 100644
--- a/src/components/feedback/SlideViewer.tsx
+++ b/src/components/feedback/SlideViewer.tsx
@@ -8,6 +8,7 @@ import SlideInfoPanel from './slide/SlideInfoPanel';
 
 interface SlideViewerProps {
   slide: SlideListItem | undefined;
+  script?: string;
   slideIndex: number;
   totalSlides: number;
   isFirst: boolean;
@@ -18,6 +19,7 @@ interface SlideViewerProps {
 
 export default function SlideViewer({
   slide,
+  script,
   slideIndex,
   totalSlides,
   isFirst,
@@ -40,7 +42,7 @@ export default function SlideViewer({
       </div>
 
       <SlideInfoPanel
-        slide={slide}
+        script={script}
         slideIndex={slideIndex}
         totalSlides={totalSlides}
         isFirst={isFirst}
diff --git a/src/components/feedback/slide/SlideInfoPanel.tsx b/src/components/feedback/slide/SlideInfoPanel.tsx
index df761fb1..26aef70f 100644
--- a/src/components/feedback/slide/SlideInfoPanel.tsx
+++ b/src/components/feedback/slide/SlideInfoPanel.tsx
@@ -3,12 +3,11 @@
  * @description 슬라이드 제목과 대본을 표시하는 패널
  */
 import SlideTitle from '@/components/slide/script/SlideTitle';
-import type { SlideListItem } from '@/types/slide';
 
 import SlideNavigation from '../SlideNavigation';
 
 interface SlideInfoPanelProps {
-  slide: SlideListItem;
+  script?: string;
   slideIndex: number;
   totalSlides: number;
   isFirst: boolean;
@@ -18,7 +17,7 @@ interface SlideInfoPanelProps {
 }
 
 export default function SlideInfoPanel({
-  slide,
+  script,
   slideIndex,
   totalSlides,
   isFirst,
@@ -45,10 +44,10 @@ export default function SlideInfoPanel({
 
       <div className="bg-gray-200 rounded-t-lg px-4 py-3 h-48 overflow-y-auto">
         <p
-          className={`text-body-s ${slide.script ? 'text-black' : 'text-gray-600'}`}
+          className={`text-body-s ${script ? 'text-black' : 'text-gray-600'}`}
           style={{ whiteSpace: 'pre-line' }}
         >
-          {slide.script || '대본이 없습니다.'}
+          {script || '대본이 없습니다.'}
         </p>
       </div>
     </div>
diff --git a/src/components/feedback/video/VideoPlaybackBar.tsx b/src/components/feedback/video/VideoPlaybackBar.tsx
index 4d36ec84..24120a25 100644
--- a/src/components/feedback/video/VideoPlaybackBar.tsx
+++ b/src/components/feedback/video/VideoPlaybackBar.tsx
@@ -13,10 +13,46 @@ import playIcon from '@/assets/playbackBar-icons/play-icon.webp';
 import fullscreenIcon from '@/assets/playbackBar-icons/sizeupdown-icon.webp';
 import ProgressBar from '@/components/feedback/ProgressBar';
 import VolumeControl from '@/components/feedback/video/VolumeControl';
+import { useVideoReactionTimeline } from '@/hooks/queries/useVideoReactionQueries';
 import { useVideoFeedbackStore } from '@/stores/videoFeedbackStore';
+import type { ReactionType } from '@/types/script';
 import type { SlideListItem } from '@/types/slide';
+import type { SegmentHighlight } from '@/types/video';
 import { computeSegmentHighlightsFromFeedbacks } from '@/utils/video';
 
+const DEFAULT_TIMELINE_INTERVAL_MS = 5000;
+const MAX_HIGHLIGHTS = 10;
+
+const buildHighlightsFromTimeline = (
+  timeline: {
+    intervalMs: number;
+    markers: Array<{ timestampMs: number; emojiType: ReactionType; count: number }>;
+  },
+  duration: number,
+  topN: number,
+): SegmentHighlight[] => {
+  const intervalSec = timeline.intervalMs / 1000;
+  const highlights = timeline.markers
+    .map((marker) => {
+      const startTime = marker.timestampMs / 1000;
+      const endTime = Math.min(startTime + intervalSec, duration);
+      return {
+        startTime,
+        endTime,
+        topReactionType: marker.emojiType,
+        count: marker.count,
+        totalCount: marker.count,
+      } as SegmentHighlight;
+    })
+    .filter((item) => item.totalCount > 0);
+
+  return highlights
+    .slice()
+    .sort((a, b) => b.totalCount - a.totalCount)
+    .slice(0, topN)
+    .sort((a, b) => a.startTime - b.startTime);
+};
+
 interface VideoPlaybackBarProps {
   videoElement: HTMLVideoElement | null;
   duration: number;
@@ -40,6 +76,7 @@ export default function VideoPlaybackBar({
   const currentTime = useVideoFeedbackStore((s) => s.currentTime);
   const updateCurrentTime = useVideoFeedbackStore((s) => s.updateCurrentTime);
   const video = useVideoFeedbackStore((s) => s.video);
+  const { data: timeline } = useVideoReactionTimeline(video?.videoId, DEFAULT_TIMELINE_INTERVAL_MS);
 
   const [isPlaying, setIsPlaying] = useState(false);
   const [volume, setVolume] = useState(1);
@@ -47,8 +84,11 @@ export default function VideoPlaybackBar({
   // 5초 버킷별 세그먼트 하이라이트 계산 (최다 리액션 기반)
   const segmentHighlights = useMemo(() => {
     if (!video) return [];
-    return computeSegmentHighlightsFromFeedbacks(video.feedbacks, video.duration);
-  }, [video]);
+    if (timeline) {
+      return buildHighlightsFromTimeline(timeline, video.duration, MAX_HIGHLIGHTS);
+    }
+    return computeSegmentHighlightsFromFeedbacks(video.feedbacks, video.duration, MAX_HIGHLIGHTS);
+  }, [video, timeline]);
 
   // 비디오 play/pause 이벤트 구독
   useEffect(() => {
diff --git a/src/components/insight/FeedbackDistributionSection.tsx b/src/components/insight/FeedbackDistributionSection.tsx
index 980172ee..51578ae8 100644
--- a/src/components/insight/FeedbackDistributionSection.tsx
+++ b/src/components/insight/FeedbackDistributionSection.tsx
@@ -1,5 +1,5 @@
 import { REACTION_CONFIG, createDefaultReactions } from '@/constants/reaction';
-import { useSlideReactionsTotal } from '@/hooks/useReactions';
+import { useSlideReactionsTotal } from '@/hooks/useSlideReactions';
 import type { Reaction } from '@/types/script';
 
 interface FeedbackDistributionSectionProps {
diff --git a/src/components/slide/SlideWorkspace.tsx b/src/components/slide/SlideWorkspace.tsx
index 1a64168f..ddfc0c0e 100644
--- a/src/components/slide/SlideWorkspace.tsx
+++ b/src/components/slide/SlideWorkspace.tsx
@@ -11,7 +11,8 @@ import { useEffect, useState } from 'react';
 
 import { SLIDE_MAX_WIDTH } from '@/constants/layout';
 import { useSlideActions, useSlideId } from '@/hooks';
-import { useSlideCommentsQuery } from '@/hooks/queries/useCommentQueries';
+import { useScript } from '@/hooks/queries/useScript';
+import { useSlideCommentsLoader } from '@/hooks/useSlideCommentsLoader';
 import type { SlideListItem } from '@/types/slide';
 
 import SlideViewer from './SlideViewer';
@@ -24,22 +25,30 @@ interface SlideWorkspaceProps {
 
 export default function SlideWorkspace({ slide, isLoading }: SlideWorkspaceProps) {
   const [isScriptCollapsed, setIsScriptCollapsed] = useState(false);
-  const { initSlide, setComments } = useSlideActions();
+  const { initSlide, updateScript, updateSlide } = useSlideActions();
   const slideId = useSlideId();
-  const { data: fetchedComments } = useSlideCommentsQuery(slideId);
+  const { data: scriptData } = useScript(slideId);
 
   useEffect(() => {
-    if (slide) {
-      initSlide(slide);
-      setComments([]);
+    if (!slide) return;
+
+    const isSameSlide = slide.slideId === slideId;
+    if (isSameSlide) {
+      updateSlide(slide);
+      return;
     }
-  }, [slide, initSlide, setComments]);
+
+    initSlide(slide);
+    updateScript('');
+  }, [slide, slideId, initSlide, updateScript, updateSlide]);
+
+  useSlideCommentsLoader(slide?.slideId);
 
   useEffect(() => {
-    if (fetchedComments) {
-      setComments(fetchedComments);
+    if (scriptData) {
+      updateScript(scriptData.scriptText);
     }
-  }, [fetchedComments, setComments]);
+  }, [scriptData, updateScript]);
 
   return (
     <div className="h-full min-h-0 flex flex-col">
diff --git a/src/components/slide/script/CommentPopover.tsx b/src/components/slide/script/CommentPopover.tsx
index 68f34679..d0b94f63 100644
--- a/src/components/slide/script/CommentPopover.tsx
+++ b/src/components/slide/script/CommentPopover.tsx
@@ -3,7 +3,7 @@
  * @description 의견 목록 팝오버
  *
  * 대본에 대한 팀원들의 의견을 보여주고, 답글을 달 수 있습니다.
- * useComments 훅을 통해 API와 동기화합니다.
+ * useSlideCommentsActions 훅을 통해 API와 동기화합니다.
  */
 import { useCallback, useMemo, useState } from 'react';
 
@@ -13,7 +13,7 @@ import Comment from '@/components/comment/Comment';
 import { CommentProvider } from '@/components/comment/CommentContext';
 import { Popover, Skeleton } from '@/components/common';
 import { useSlideComments } from '@/hooks';
-import { useComments } from '@/hooks/useComments';
+import { useSlideCommentsActions } from '@/hooks/useSlideCommentsActions';
 
 interface CommentPopoverProps {
   isLoading?: boolean;
@@ -21,7 +21,12 @@ interface CommentPopoverProps {
 
 export default function CommentPopover({ isLoading }: CommentPopoverProps) {
   const slideComments = useSlideComments();
-  const { comments: treeComments, addReply, deleteComment, updateComment } = useComments();
+  const {
+    comments: treeComments,
+    addReply,
+    deleteComment,
+    updateComment,
+  } = useSlideCommentsActions();
 
   const [replyingToId, setReplyingToId] = useState<string | null>(null);
   const [replyDraft, setReplyDraft] = useState('');
@@ -152,7 +157,7 @@ export default function CommentPopover({ isLoading }: CommentPopoverProps) {
       <CommentProvider value={contextValue}>
         <div className="h-80 overflow-y-auto">
           {treeComments.map((comment) => (
-            <Comment key={comment.id} comment={comment} />
+            <Comment key={comment.commentId} comment={comment} />
           ))}
         </div>
       </CommentProvider>
diff --git a/src/components/slide/script/SlideTitle.tsx b/src/components/slide/script/SlideTitle.tsx
index 32ed0d27..831ff506 100644
--- a/src/components/slide/script/SlideTitle.tsx
+++ b/src/components/slide/script/SlideTitle.tsx
@@ -26,8 +26,8 @@ export default function SlideTitle({
 
   if (readOnly) {
     return (
-      <span className="inline-flex h-7 items-center px-2 text-sm font-semibold text-gray-800">
-        <span className="whitespace-normal wrap-break-word">{resolvedTitle}</span>
+      <span className="inline-flex h-7 items-center px-2 text-sm font-semibold text-gray-800 min-w-0">
+        <span className="max-w-40 truncate">{resolvedTitle}</span>
       </span>
     );
   }
@@ -56,7 +56,8 @@ function SlideTitleEditable({
   const { mutate: updateSlideApi } = useUpdateSlide();
 
   const handleSave = (newTitle: string, close: () => void) => {
-    const nextTitle = newTitle.trim() || storeTitle || fallbackTitle;
+    const trimmedTitle = newTitle.trim();
+    const nextTitle = trimmedTitle || storeTitle || fallbackTitle;
     if (!nextTitle) return;
 
     updateSlide({ title: nextTitle });
@@ -74,6 +75,7 @@ function SlideTitleEditable({
       onSave={handleSave}
       isCollapsed={isCollapsed}
       ariaLabel="슬라이드 이름 변경"
+      titleClassName="max-w-40 truncate"
     />
   );
 }
diff --git a/src/components/video/RecordingSection.tsx b/src/components/video/RecordingSection.tsx
index 69f9f76b..d318f900 100644
--- a/src/components/video/RecordingSection.tsx
+++ b/src/components/video/RecordingSection.tsx
@@ -4,7 +4,9 @@ import IconArrowLeft from '@/assets/icons/icon-arrow-left.svg?react';
 import IconArrowRight from '@/assets/icons/icon-arrow-right.svg?react';
 import { Logo, SlideImage } from '@/components/common';
 import { usePresentation } from '@/hooks/queries/usePresentations';
+import { useScript } from '@/hooks/queries/useScript';
 import { useSlides } from '@/hooks/queries/useSlides';
+import type { SlideDetail } from '@/types/slide';
 
 import { useRecorder } from '../../hooks/useRecorder';
 import StopButton from './StopButton';
@@ -35,7 +37,7 @@ export const RecordingSection = ({
 
   const { data: presentation } = usePresentation(projectId);
   const { data: slidesData } = useSlides(projectId);
-  const slidesList = slidesData || [];
+  const slidesList = (slidesData || []) as SlideDetail[];
   const totalPages = slidesList.length > 0 ? slidesList.length : 1;
 
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -57,6 +59,9 @@ export const RecordingSection = ({
     [slidesList],
   );
 
+  const currentSlideId = slidesList[currentPage - 1]?.slideId;
+  const { data: scriptData } = useScript(currentSlideId ?? '');
+
   useEffect(() => {
     setSlideImageLoaded(false);
     const imgUrl = getSlideImgUrl(currentPage);
@@ -169,8 +174,8 @@ export const RecordingSection = ({
         <div className="flex items-center gap-6">
           <div className="flex items-center gap-6">
             <Logo onClick={onExitClick} />
-            <span className="hidden md:inline-flex h-7 items-center px-2 text-sm font-semibold text-gray-800">
-              {presentation?.title || '내 발표'}
+            <span className="hidden md:inline-flex h-7 items-center px-2 text-sm font-semibold text-gray-800 min-w-0">
+              <span className="max-w-60 truncate">{presentation?.title || '내 발표'}</span>
             </span>
           </div>
           <div className="flex items-center gap-2">
@@ -279,7 +284,7 @@ export const RecordingSection = ({
               <h3 className="text-body-s-bold text-gray-800">발표 대본</h3>
             </div>
             <div className="scrollbar-hide flex-1 overflow-y-auto text-body-m leading-normal text-black whitespace-pre-wrap">
-              {slidesList[currentPage - 1]?.script || '대본이 없습니다.'}
+              {scriptData?.scriptText || '대본이 없습니다.'}
             </div>
           </div>
 
diff --git a/src/constants/video.ts b/src/constants/video.ts
index 8d157b89..62ab4a70 100644
--- a/src/constants/video.ts
+++ b/src/constants/video.ts
@@ -7,7 +7,7 @@
  * 리액션/댓글의 타임스탬프 그룹화 윈도우 (초)
  * - 현재 시간 ± FEEDBACK_WINDOW 범위의 피드백을 하나의 그룹으로 처리
  */
-export const FEEDBACK_WINDOW = 5;
+export const FEEDBACK_WINDOW = 2;
 
 /**
  * 리액션 토글 타임스탬프 잠금 윈도우 (ms)
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 223a56cd..dde4d824 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -9,7 +9,10 @@ export * from './useHotkey';
 export * from './useMediaQuery';
 export * from './useSlideNavigation';
 export * from './useSlideSelectors';
-export * from './useComments';
+export * from './useSlideCommentsActions';
+export * from './useSlideCommentsLoader';
+export * from './useSlideReactions';
 export * from './queries/usePresentations';
+export * from './queries/useScript';
 export * from './queries/useSlides';
 export * from './useRename';
diff --git a/src/hooks/useAnalytics.ts b/src/hooks/queries/useAnalytics.ts
similarity index 74%
rename from src/hooks/useAnalytics.ts
rename to src/hooks/queries/useAnalytics.ts
index 66033555..cc79442d 100644
--- a/src/hooks/useAnalytics.ts
+++ b/src/hooks/queries/useAnalytics.ts
@@ -13,7 +13,9 @@ import {
 import { queryKeys } from '@/api/queryClient';
 
 /**
- * 이탈 기록 (mutation) unload 시 이탈 기록 (fetch keepalive)
+ * 이탈 기록 Mutation 훅
+ *
+ * 페이지 이탈 시 분석 데이터를 서버에 전송합니다.
  */
 export function useRecordExit() {
   return useMutation({
@@ -22,7 +24,9 @@ export function useRecordExit() {
 }
 
 /**
- * 슬라이드별 분석
+ * 슬라이드별 분석 데이터 조회
+ *
+ * @param projectId - 프로젝트 ID
  */
 export function useSlideAnalytics(projectId: number) {
   return useQuery({
@@ -33,8 +37,9 @@ export function useSlideAnalytics(projectId: number) {
 }
 
 /**
- * 영상 타임라인 분석(= video analytics)
- * - 기존 useVideoExitAnalytics / getVideoExitAnalytics 대신
+ * 영상 타임라인 분석 데이터 조회
+ *
+ * @param videoId - 영상 ID
  */
 export function useVideoAnalytics(videoId: number) {
   return useQuery({
@@ -45,8 +50,9 @@ export function useVideoAnalytics(videoId: number) {
 }
 
 /**
- * 프로젝트 요약 분석 (상단 카드 4개 + videoIds)
- * - 기존 useSummaryAnalytics / getSummaryAnalytics 대신
+ * 프로젝트 요약 분석 조회 (상단 카드 4개 + videoIds)
+ *
+ * @param projectId - 프로젝트 ID
  */
 export function useProjectAnalyticsSummary(projectId: number) {
   return useQuery({
@@ -57,7 +63,9 @@ export function useProjectAnalyticsSummary(projectId: number) {
 }
 
 /**
- * 슬라이드별 청중 잔존률
+ * 슬라이드별 청중 잔존률 조회
+ *
+ * @param projectId - 프로젝트 ID
  */
 export function useSlideRetention(projectId: number) {
   return useQuery({
@@ -68,7 +76,9 @@ export function useSlideRetention(projectId: number) {
 }
 
 /**
- * 영상별 시청 잔존률
+ * 영상별 시청 잔존률 조회
+ *
+ * @param videoId - 영상 ID
  */
 export function useVideoRetention(videoId: number) {
   return useQuery({
@@ -79,7 +89,9 @@ export function useVideoRetention(videoId: number) {
 }
 
 /**
- * 최근 댓글 피드백
+ * 최근 댓글 피드백 조회
+ *
+ * @param projectId - 프로젝트 ID
  */
 export function useRecentComments(projectId: number) {
   return useQuery({
diff --git a/src/hooks/queries/useCommentQueries.ts b/src/hooks/queries/useCommentQueries.ts
deleted file mode 100644
index a4c5b5da..00000000
--- a/src/hooks/queries/useCommentQueries.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * 댓글 관련 TanStack Query 훅
- */
-import { useQuery } from '@tanstack/react-query';
-
-import type { CommentWithUserDto, GetSlideCommentsResponseDto } from '@/api/dto';
-import { getSlideComments } from '@/api/endpoints/comments';
-import { queryKeys } from '@/api/queryClient';
-import { useAuthStore } from '@/stores/authStore';
-import type { Comment } from '@/types/comment';
-
-function mapDtoToComment(dto: CommentWithUserDto, currentUserId?: string): Comment {
-  return {
-    id: dto.commentId,
-    serverId: dto.commentId,
-    userId: dto.user.userId,
-    content: dto.content,
-    createdAt: dto.createdAt,
-    isMine: currentUserId ? dto.user.userId === currentUserId : false,
-  };
-}
-
-/** 슬라이드 댓글 목록 조회 */
-export function useSlideCommentsQuery(slideId?: string) {
-  const userId = useAuthStore((state) => state.user?.id);
-
-  return useQuery<GetSlideCommentsResponseDto, Error, Comment[]>({
-    queryKey: queryKeys.comments.list(slideId ?? ''),
-    queryFn: () => getSlideComments(slideId!),
-    enabled: !!slideId,
-    select: (data) => data.comments.map((dto) => mapDtoToComment(dto, userId)),
-  });
-}
diff --git a/src/hooks/queries/useOpinions.ts b/src/hooks/queries/useOpinions.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/hooks/queries/usePresentations.ts b/src/hooks/queries/usePresentations.ts
index 234bf9d1..f5fe9b2e 100644
--- a/src/hooks/queries/usePresentations.ts
+++ b/src/hooks/queries/usePresentations.ts
@@ -1,31 +1,44 @@
-/**
- * 프로젝트 관련 TanStack Query 훅
- *
- * @file usePresentation.ts
- * @description 프로젝트 조회 훅
- */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { queryKeys } from '@/api';
-import type { UpdateProjectDto } from '@/api/dto';
+import type { GetPresentationsRequestDto, UpdateProjectRequestDto } from '@/api/dto';
 import { getPresentations } from '@/api/endpoints/presentations';
 import {
   deletePresentation,
   getPresentation,
   updatePresentation,
 } from '@/api/endpoints/presentations';
-import type { Presentation } from '@/types/presentation';
+import type { Presentation, PresentationListResponse } from '@/types/presentation';
 import { showToast } from '@/utils/toast';
 
-/** 프로젝트 목록 조회 */
-export function usePresentations() {
+/**
+ * 프로젝트 목록 조회
+ *
+ * 전체 프로젝트 목록을 가져옵니다.
+ */
+export function usePresentations(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: queryKeys.presentations.list(),
+    queryFn: () => getPresentations(),
+    enabled: options?.enabled ?? true,
+  });
+}
+
+/**
+ * 프로젝트 목록 조회 (필터/검색/정렬 지원)
+ */
+export function usePresentationsWithFilters(params: GetPresentationsRequestDto) {
   return useQuery({
-    queryKey: queryKeys.presentations.lists(),
-    queryFn: getPresentations,
+    queryKey: queryKeys.presentations.list(params),
+    queryFn: () => getPresentations(params),
   });
 }
 
-/** 특정 프로젝트 조회 */
+/**
+ * 특정 프로젝트 조회
+ *
+ * @param projectId - 프로젝트 ID
+ */
 export function usePresentation(projectId: string) {
   return useQuery({
     queryKey: queryKeys.presentations.detail(projectId),
@@ -34,18 +47,25 @@ export function usePresentation(projectId: string) {
   });
 }
 
-/** 프로젝트 수정 */
+/**
+ * 프로젝트 수정 Mutation 훅
+ *
+ * 성공 시 상세 캐시를 응답으로 직접 업데이트하고, 목록 캐시를 무효화합니다.
+ */
 export function useUpdatePresentation() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: ({ projectId, data }: { projectId: string; data: UpdateProjectDto }) =>
+    mutationFn: ({ projectId, data }: { projectId: string; data: UpdateProjectRequestDto }) =>
       updatePresentation(projectId, data),
 
     onSuccess: (updatePresentation) => {
-      // Detail 캐시는 API 응답으로 직접 업데이트 (네트워크 절약)
-      queryClient.setQueryData(
+      // Detail 캐시는 기존 데이터에 title/updatedAt만 반영
+      queryClient.setQueryData<Presentation | undefined>(
         queryKeys.presentations.detail(updatePresentation.projectId),
-        updatePresentation,
+        (old) =>
+          old
+            ? { ...old, title: updatePresentation.title, updatedAt: updatePresentation.updatedAt }
+            : old,
       );
       // 목록은 최신 데이터 반영을 위해 무효화
       void queryClient.invalidateQueries({ queryKey: queryKeys.presentations.lists() });
@@ -53,7 +73,11 @@ export function useUpdatePresentation() {
   });
 }
 
-/** 프로젝트 삭제 */
+/**
+ * 프로젝트 삭제 Mutation 훅
+ *
+ * 성공 시 목록 캐시에서 즉시 제거하고, 상세 캐시를 삭제합니다.
+ */
 export function useDeletePresentation() {
   const queryClient = useQueryClient();
 
@@ -61,8 +85,25 @@ export function useDeletePresentation() {
     mutationFn: (projectId: string) => deletePresentation(projectId),
     onSuccess: (_, projectId) => {
       // 1) 목록 캐시에서 삭제된 프로젝트를 제거하여 즉시 UI에 반영합니다.
-      queryClient.setQueryData<Presentation[]>(queryKeys.presentations.lists(), (oldData) =>
-        oldData?.filter((project) => project.projectId !== projectId),
+      queryClient.setQueriesData<PresentationListResponse>(
+        { queryKey: queryKeys.presentations.lists() },
+        (oldData) => {
+          if (!oldData) return oldData;
+          const nextPresentations = oldData.presentations.filter(
+            (project) => project.projectId !== projectId,
+          );
+          if (nextPresentations.length === oldData.presentations.length) return oldData;
+
+          const nextTotal = Math.max(0, oldData.total - 1);
+          const nextTotalPages = Math.max(1, Math.ceil(nextTotal / Math.max(1, oldData.limit)));
+
+          return {
+            ...oldData,
+            presentations: nextPresentations,
+            total: nextTotal,
+            totalPages: nextTotalPages,
+          };
+        },
       );
       // 상세 정보 캐시는 API 응답으로 받은 데이터로 직접 업데이트합니다.
       void queryClient.removeQueries({ queryKey: queryKeys.presentations.detail(projectId) });
diff --git a/src/hooks/queries/useReaction.ts b/src/hooks/queries/useReaction.ts
index 6e09e38c..6a833605 100644
--- a/src/hooks/queries/useReaction.ts
+++ b/src/hooks/queries/useReaction.ts
@@ -1,13 +1,14 @@
-/**
- * 리액션 관련 TanStack Query 훅
- */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import type { ToggleSlideReactionDto } from '@/api';
 import { getSlideReactionSummary, toggleReaction } from '@/api/endpoints/reactions';
 import { queryKeys } from '@/api/queryClient';
 
-/** 여러 슬라이드의 리액션 집계 조회 */
+/**
+ * 여러 슬라이드의 리액션 집계 조회
+ *
+ * @param slideIds - 조회할 슬라이드 ID 배열
+ */
 export function useSlideReactionSummaries(slideIds: string[]) {
   return useQuery({
     queryKey: queryKeys.reactions.summary(slideIds.join('|')),
@@ -16,7 +17,11 @@ export function useSlideReactionSummaries(slideIds: string[]) {
   });
 }
 
-/** 리액션 토글 */
+/**
+ * 슬라이드 리액션 토글 Mutation 훅
+ *
+ * 성공 시 해당 슬라이드의 리액션 집계 캐시를 무효화합니다.
+ */
 export function useToggleReaction() {
   const queryClient = useQueryClient();
 
diff --git a/src/hooks/queries/useScript.ts b/src/hooks/queries/useScript.ts
index 9b619bc6..398b8244 100644
--- a/src/hooks/queries/useScript.ts
+++ b/src/hooks/queries/useScript.ts
@@ -1,7 +1,3 @@
-/**
- * @file useScript.ts
- * @description 대본 관련 React Query 훅
- */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import type { RestoreScriptRequestDto, UpdateScriptRequestDto } from '@/api/dto';
diff --git a/src/hooks/queries/useShares.ts b/src/hooks/queries/useShares.ts
index 1d9b5343..6123bb52 100644
--- a/src/hooks/queries/useShares.ts
+++ b/src/hooks/queries/useShares.ts
@@ -1,9 +1,3 @@
-/**
- * 공유 링크 관련 TanStack Query 훅
- *
- * @file useShares.ts
- * @description 공유 가능 영상 조회 및 공유 링크 생성 훅
- */
 import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 
 import { queryKeys } from '@/api';
diff --git a/src/hooks/queries/useSlideCommentsQuery.ts b/src/hooks/queries/useSlideCommentsQuery.ts
new file mode 100644
index 00000000..0282c8fb
--- /dev/null
+++ b/src/hooks/queries/useSlideCommentsQuery.ts
@@ -0,0 +1,49 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import type { CommentWithUserDto, GetSlideCommentsResponseDto } from '@/api/dto';
+import { getSlideComments } from '@/api/endpoints/comments';
+import { queryKeys } from '@/api/queryClient';
+import { useAuthStore } from '@/stores/authStore';
+import type { Comment } from '@/types/comment';
+
+function mapDtoToComment(dto: CommentWithUserDto, currentUserId?: string): Comment {
+  return {
+    commentId: dto.commentId,
+    serverId: dto.commentId,
+    userId: dto.user.userId,
+    content: dto.content,
+    createdAt: dto.createdAt,
+    isMine: currentUserId ? dto.user.userId === currentUserId : false,
+  };
+}
+
+/**
+ * 슬라이드 댓글 목록 조회 (무한 스크롤)
+ *
+ * DTO를 Comment 타입으로 변환하고, 현재 사용자의 댓글을 isMine으로 표시합니다.
+ * pages를 flat한 Comment[]로 변환하여 제공합니다.
+ *
+ * @param slideId - 슬라이드 ID
+ */
+export function useSlideCommentsQuery(slideId?: string) {
+  const userId = useAuthStore((state) => state.user?.id);
+
+  return useInfiniteQuery<
+    GetSlideCommentsResponseDto,
+    Error,
+    Comment[],
+    ReturnType<typeof queryKeys.comments.list>,
+    number
+  >({
+    queryKey: queryKeys.comments.list(slideId ?? ''),
+    queryFn: ({ pageParam }) => getSlideComments(slideId!, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      const { page, totalPages } = lastPage.pagination;
+      return page < totalPages ? page + 1 : undefined;
+    },
+    select: (data) =>
+      data.pages.flatMap((p) => p.comments.map((dto) => mapDtoToComment(dto, userId))),
+    enabled: !!slideId,
+  });
+}
diff --git a/src/hooks/queries/useSlides.ts b/src/hooks/queries/useSlides.ts
index 4147b789..24f43097 100644
--- a/src/hooks/queries/useSlides.ts
+++ b/src/hooks/queries/useSlides.ts
@@ -1,13 +1,14 @@
-/**
- * 슬라이드 관련 TanStack Query 훅
- */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import type { UpdateSlideTitleRequestDto } from '@/api/dto';
 import { getSlides, updateSlide } from '@/api/endpoints/slides';
 import { queryKeys } from '@/api/queryClient';
 
-/** 슬라이드 목록 조회 */
+/**
+ * 슬라이드 목록 조회
+ *
+ * @param projectId - 프로젝트 ID
+ */
 export function useSlides(projectId: string) {
   return useQuery({
     queryKey: queryKeys.slides.list(projectId),
@@ -20,7 +21,11 @@ export function useSlides(projectId: string) {
   });
 }
 
-/** 슬라이드 수정 */
+/**
+ * 슬라이드 수정 Mutation 훅
+ *
+ * 성공 시 슬라이드 상세/목록 캐시를 무효화합니다.
+ */
 export function useUpdateSlide() {
   const queryClient = useQueryClient();
 
diff --git a/src/hooks/queries/useVideoReactionQueries.ts b/src/hooks/queries/useVideoReactionQueries.ts
index 681e86cd..a52a0829 100644
--- a/src/hooks/queries/useVideoReactionQueries.ts
+++ b/src/hooks/queries/useVideoReactionQueries.ts
@@ -1,26 +1,54 @@
-/**
- * 영상 리액션 관련 TanStack Query 훅
- */
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import {
   type ToggleVideoReactionRequest,
+  getVideoReactionTimeline,
+  getVideoReactions,
   toggleVideoReaction,
 } from '@/api/endpoints/videoReactions';
 import { queryKeys } from '@/api/queryClient';
 
-/** 영상 리액션 토글 */
+/**
+ * 영상 리액션 토글 Mutation 훅
+ *
+ * 성공 시 해당 영상 상세 캐시를 무효화합니다.
+ */
 export function useToggleVideoReaction() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ videoId, data }: { videoId: number; data: ToggleVideoReactionRequest }) =>
-      toggleVideoReaction(videoId.toString(), data),
+    mutationFn: ({ videoId, data }: { videoId: string; data: ToggleVideoReactionRequest }) =>
+      toggleVideoReaction(videoId, data),
 
-    onSuccess: (_, variables) => {
-      void queryClient.invalidateQueries({
-        queryKey: queryKeys.videos.detail(variables.videoId.toString()),
-      });
+    onSuccess: (_, { videoId }) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.reactions.video.all(videoId) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.videos.detail(videoId) });
     },
   });
 }
+
+/**
+ * 영상 리액션 구간 집계 조회
+ */
+export function useVideoReactionWindow(
+  videoId: string | undefined,
+  timestampMs: number | undefined,
+  windowMs = 2000,
+) {
+  return useQuery({
+    queryKey: queryKeys.reactions.video.window(videoId ?? '', timestampMs ?? 0, windowMs),
+    queryFn: () => getVideoReactions(videoId!, { timestampMs: timestampMs!, windowMs }),
+    enabled: !!videoId && Number.isFinite(timestampMs),
+  });
+}
+
+/**
+ * 영상 리액션 타임라인 조회
+ */
+export function useVideoReactionTimeline(videoId: string | undefined, intervalMs = 5000) {
+  return useQuery({
+    queryKey: queryKeys.reactions.video.timeline(videoId ?? '', intervalMs),
+    queryFn: () => getVideoReactionTimeline(videoId!, { intervalMs }),
+    enabled: !!videoId,
+  });
+}
diff --git a/src/hooks/useExitTracker.ts b/src/hooks/useExitTracker.ts
index 258cd49c..13450914 100644
--- a/src/hooks/useExitTracker.ts
+++ b/src/hooks/useExitTracker.ts
@@ -1,10 +1,18 @@
 import { useCallback, useEffect, useRef } from 'react';
 
 import { type RecordExitRequest, recordExit as recordExitApi } from '@/api/endpoints/analytics';
-import { useRecordExit } from '@/hooks/useAnalytics';
+import { useRecordExit } from '@/hooks/queries/useAnalytics';
 
 type ExitMode = 'unload' | 'unmount';
 
+/**
+ * 페이지 이탈 추적 훅
+ *
+ * pagehide / visibilitychange 이벤트와 컴포넌트 언마운트 시
+ * 이탈 데이터를 서버에 전송합니다. 중복 전송을 방지합니다.
+ *
+ * @param buildExitPayload - 이탈 시 전송할 페이로드를 생성하는 콜백 (null 반환 시 전송 생략)
+ */
 export function useExitTracker(buildExitPayload: () => RecordExitRequest | null) {
   const { mutate } = useRecordExit();
   const exitSentRef = useRef(false);
diff --git a/src/hooks/useFeedbackWebSocket.ts b/src/hooks/useFeedbackWebSocket.ts
index 537fb908..f0e60118 100644
--- a/src/hooks/useFeedbackWebSocket.ts
+++ b/src/hooks/useFeedbackWebSocket.ts
@@ -43,7 +43,7 @@ export function useFeedbackWebSocket({ projectId, enabled = true }: UseFeedbackW
 
       // WebSocket 페이로드에서 직접 Store 업데이트
       const currentVideo = useVideoFeedbackStore.getState().video;
-      if (currentVideo && Number(data.videoId) === currentVideo.videoId) {
+      if (currentVideo && data.videoId === currentVideo.videoId) {
         // console.log('🔄 [Feedback WebSocket] Adding comment to store from WebSocket data...');
 
         // WebSocket 데이터에서 받은 정보로 댓글 추가
diff --git a/src/hooks/useMediaStream.ts b/src/hooks/useMediaStream.ts
index ee87a60a..9ea1831e 100644
--- a/src/hooks/useMediaStream.ts
+++ b/src/hooks/useMediaStream.ts
@@ -1,3 +1,11 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+declare global {
+  interface Window {
+    webkitAudioContext: typeof AudioContext;
+  }
+}
+
 /**
  * 미디어 스트림 훅
  *
@@ -11,14 +19,6 @@
  * @returns isLoading - 스트림 로딩 중 여부
  * @returns restartStream - 스트림 재시작 함수
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-declare global {
-  interface Window {
-    webkitAudioContext: typeof AudioContext;
-  }
-}
-
 export const useMediaStream = (videoDeviceId?: string, audioDeviceId?: string) => {
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [volume, setVolume] = useState<number>(0);
diff --git a/src/hooks/usePresentationDeletion.ts b/src/hooks/usePresentationDeletion.ts
index f13616ed..c6f04011 100644
--- a/src/hooks/usePresentationDeletion.ts
+++ b/src/hooks/usePresentationDeletion.ts
@@ -4,6 +4,18 @@ import { showToast } from '@/utils/toast';
 
 import { useDeletePresentation } from './queries/usePresentations';
 
+/**
+ * 프로젝트 삭제 훅
+ *
+ * 삭제 확인 모달 상태와 삭제 실행 로직을 캡슐화합니다.
+ *
+ * @param projectId - 삭제할 프로젝트 ID
+ * @returns isDeleteModalOpen - 삭제 모달 열림 여부
+ * @returns openDeleteModal - 삭제 모달 열기
+ * @returns closeDeleteModal - 삭제 모달 닫기
+ * @returns confirmDelete - 삭제 확인 (API 호출)
+ * @returns isPending - 삭제 진행 중 여부
+ */
 export function usePresentationDeletion(projectId: string) {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { mutate, isPending } = useDeletePresentation();
@@ -13,9 +25,9 @@ export function usePresentationDeletion(projectId: string) {
 
   const confirmDelete = () => {
     mutate(projectId, {
-      onSuccess: () => {
+      onSuccess: (data) => {
         closeDeleteModal();
-        showToast.success('삭제 완료', '발표가 삭제되었습니다.');
+        showToast.success('삭제 완료', data.message);
       },
     });
   };
diff --git a/src/hooks/usePresentationList.ts b/src/hooks/usePresentationList.ts
index ed8f7639..a55c828d 100644
--- a/src/hooks/usePresentationList.ts
+++ b/src/hooks/usePresentationList.ts
@@ -1,14 +1,3 @@
-/**
- * 프로젝트 목록 필터/정렬 훅
- *
- * 검색, 정렬, 커스텀 필터를 적용한 프로젝트 목록을 반환합니다.
- *
- * @param presentations - 원본 프로젝트 배열
- * @param options.query - 검색어 (제목 기준)
- * @param options.sort - 정렬 모드 (null | 'recent' | 'commentCount' | 'name')
- * @param options.filterFn - 커스텀 필터 함수
- * @returns 필터링/정렬된 프로젝트 배열
- */
 import { useMemo } from 'react';
 
 import type { SortMode } from '@/types/home';
@@ -25,6 +14,17 @@ function normalizeForSearch(value: string) {
   return value.replace(/\s+/g, '').toLowerCase();
 }
 
+/**
+ * 프로젝트 목록 필터/정렬 훅
+ *
+ * 검색, 정렬, 커스텀 필터를 적용한 프로젝트 목록을 반환합니다.
+ *
+ * @param presentations - 원본 프로젝트 배열
+ * @param options.query - 검색어 (제목 기준)
+ * @param options.sort - 정렬 모드 ('recent' | 'commentCount' | 'name')
+ * @param options.filterFn - 커스텀 필터 함수
+ * @returns 필터링/정렬된 프로젝트 배열
+ */
 export function usePresentationList(presentations: Presentation[], options?: Options) {
   return useMemo(() => {
     const query = options?.query ?? '';
diff --git a/src/hooks/useRecorder.ts b/src/hooks/useRecorder.ts
index 99e6ffb8..aa105abf 100644
--- a/src/hooks/useRecorder.ts
+++ b/src/hooks/useRecorder.ts
@@ -1,5 +1,16 @@
 import { useCallback, useRef, useState } from 'react';
 
+/**
+ * 캔버스 기반 녹화 훅
+ *
+ * 슬라이드 이미지와 카메라 영상을 캔버스에 합성하여 WebM으로 녹화합니다.
+ *
+ * @returns canvasRef - 합성에 사용할 캔버스 ref
+ * @returns isRecording - 녹화 진행 중 여부
+ * @returns recordedChunks - 녹화된 Blob 청크 배열
+ * @returns startRecording - 녹화 시작 함수
+ * @returns stopRecording - 녹화 중지 함수
+ */
 export const useRecorder = () => {
   const [isRecording, setIsRecording] = useState<boolean>(false);
   const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
diff --git a/src/hooks/useComments.ts b/src/hooks/useSlideCommentsActions.ts
similarity index 91%
rename from src/hooks/useComments.ts
rename to src/hooks/useSlideCommentsActions.ts
index 5bd5aa22..11b42c40 100644
--- a/src/hooks/useComments.ts
+++ b/src/hooks/useSlideCommentsActions.ts
@@ -1,15 +1,9 @@
-/**
- * 댓글 통합 훅
- *
- * TanStack Query(API 호출) + Zustand(Optimistic UI)를 결합합니다.
- * 로컬 store 즉시 업데이트 후 서버 API를 호출하고, 실패 시 롤백합니다.
- */
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import type { CreateCommentDto } from '@/api';
+import type { CreateCommentRequestDto } from '@/api';
 import {
   createReply,
   createSlideComment,
@@ -28,8 +22,11 @@ function useCreateCommentMutation() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (variables: { slideId: string; projectId: string; data: CreateCommentDto }) =>
-      createSlideComment(variables.slideId, variables.data),
+    mutationFn: (variables: {
+      slideId: string;
+      projectId: string;
+      data: CreateCommentRequestDto;
+    }) => createSlideComment(variables.slideId, variables.data),
 
     onSuccess: (_, { slideId, projectId }) => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.comments.list(slideId) });
@@ -83,7 +80,7 @@ function useDeleteCommentMutation() {
 
   return useMutation({
     mutationFn: (variables: { commentId: string; slideId: string; projectId: string }) =>
-      deleteCommentApi(variables.commentId),
+      deleteCommentApi({ commentId: variables.commentId }),
 
     onSuccess: (_, { slideId, projectId }) => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.comments.list(slideId) });
@@ -97,7 +94,19 @@ function useDeleteCommentMutation() {
 
 const EMPTY_COMMENTS: Comment[] = [];
 
-export function useComments() {
+/**
+ * 슬라이드 댓글 통합 훅
+ *
+ * TanStack Query(API 호출) + Zustand(Optimistic UI)를 결합합니다.
+ * 로컬 store 즉시 업데이트 후 서버 API를 호출하고, 실패 시 롤백합니다.
+ *
+ * @returns comments - 트리 구조 댓글 목록 (최신순 정렬)
+ * @returns addComment - 댓글 추가 (optimistic)
+ * @returns addReply - 답글 추가 (optimistic)
+ * @returns deleteComment - 댓글 삭제 (optimistic)
+ * @returns updateComment - 댓글 수정 (optimistic)
+ */
+export function useSlideCommentsActions() {
   const { projectId = '' } = useParams<{ projectId: string }>();
   const slideId = useSlideStore((state) => state.slide?.slideId);
   const flatComments = useSlideStore((state) => state.slide?.comments);
@@ -112,14 +121,11 @@ export function useComments() {
   const { mutate: deleteCommentMutate } = useDeleteCommentMutation();
   const { mutate: updateCommentMutate } = useUpdateCommentMutation();
 
-  const findComment = (commentId: string) => flatComments?.find((c) => c.id === commentId);
+  const findComment = (commentId: string) => flatComments?.find((c) => c.commentId === commentId);
 
   const comments = useMemo(() => {
     if (!flatComments) return EMPTY_COMMENTS;
-    const tree = flatToTree(flatComments);
-    return [...tree].sort(
-      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-    );
+    return flatToTree(flatComments);
   }, [flatComments]);
 
   const addComment = (content: string, currentSlideIndex: number) => {
diff --git a/src/hooks/useSlideCommentsLoader.ts b/src/hooks/useSlideCommentsLoader.ts
new file mode 100644
index 00000000..6ea1b34d
--- /dev/null
+++ b/src/hooks/useSlideCommentsLoader.ts
@@ -0,0 +1,44 @@
+/**
+ * 슬라이드 댓글 로딩 공통 훅
+ *
+ * - slideId 변경 시 댓글 초기화
+ * - getSlideComments 호출 결과를 store에 주입
+ * - 무한 스크롤 핸들러(fetchNextPage, hasNextPage, isFetchingNextPage) 반환
+ */
+import { useEffect, useRef } from 'react';
+
+import type { Comment } from '@/types/comment';
+
+import { useSlideCommentsQuery } from './queries/useSlideCommentsQuery';
+import { useSlideActions } from './useSlideSelectors';
+
+type UseSlideCommentsLoaderOptions = {
+  mapComments?: (comments: Comment[]) => Comment[];
+};
+
+export function useSlideCommentsLoader(slideId?: string, options?: UseSlideCommentsLoaderOptions) {
+  const { setComments } = useSlideActions();
+  const {
+    data: fetchedComments,
+    isLoading,
+    dataUpdatedAt,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useSlideCommentsQuery(slideId);
+  const lastAppliedRef = useRef(0);
+
+  useEffect(() => {
+    setComments([]);
+  }, [slideId, setComments]);
+
+  useEffect(() => {
+    if (!fetchedComments) return;
+    if (dataUpdatedAt && lastAppliedRef.current === dataUpdatedAt) return;
+    if (dataUpdatedAt) lastAppliedRef.current = dataUpdatedAt;
+    const mapped = options?.mapComments ? options.mapComments(fetchedComments) : fetchedComments;
+    setComments(mapped);
+  }, [dataUpdatedAt, fetchedComments, options?.mapComments, setComments]);
+
+  return { isLoading, fetchNextPage, hasNextPage, isFetchingNextPage };
+}
diff --git a/src/hooks/useSlideNavigation.ts b/src/hooks/useSlideNavigation.ts
index 407c4f66..d5b235ec 100644
--- a/src/hooks/useSlideNavigation.ts
+++ b/src/hooks/useSlideNavigation.ts
@@ -1,3 +1,9 @@
+import { useState } from 'react';
+
+interface UseSlideNavigationOptions {
+  initialIndex?: number;
+}
+
 /**
  * 슬라이드 네비게이션 훅
  *
@@ -5,13 +11,13 @@
  *
  * @param totalSlides - 전체 슬라이드 수
  * @param options.initialIndex - 초기 인덱스 (기본값: 0)
+ * @returns slideIndex - 현재 슬라이드 인덱스
+ * @returns isFirst - 첫 번째 슬라이드 여부
+ * @returns isLast - 마지막 슬라이드 여부
+ * @returns goPrev - 이전 슬라이드로 이동
+ * @returns goNext - 다음 슬라이드로 이동
+ * @returns goToIndex - 특정 인덱스로 이동
  */
-import { useState } from 'react';
-
-interface UseSlideNavigationOptions {
-  initialIndex?: number;
-}
-
 export function useSlideNavigation(totalSlides: number, options: UseSlideNavigationOptions = {}) {
   const { initialIndex = 0 } = options;
   const [slideIndex, setSlideIndex] = useState(initialIndex);
diff --git a/src/hooks/useReactions.ts b/src/hooks/useSlideReactions.ts
similarity index 97%
rename from src/hooks/useReactions.ts
rename to src/hooks/useSlideReactions.ts
index 7430e143..7345f8f3 100644
--- a/src/hooks/useReactions.ts
+++ b/src/hooks/useSlideReactions.ts
@@ -18,7 +18,7 @@ import { useToggleReaction } from './queries/useReaction.ts';
 
 const EMPTY_REACTIONS: Reaction[] = [];
 
-export function useReactions() {
+export function useSlideReactions() {
   const slideId = useSlideStore((state) => state.slide?.slideId);
   const reactions = useSlideStore((state) => state.slide?.emojiReactions ?? EMPTY_REACTIONS);
   const toggleReactionStore = useSlideStore((state) => state.toggleReaction);
diff --git a/src/hooks/useUploadFile.ts b/src/hooks/useUploadFile.ts
index e734b5d0..8ff9e6fa 100644
--- a/src/hooks/useUploadFile.ts
+++ b/src/hooks/useUploadFile.ts
@@ -1,14 +1,3 @@
-/**
- * 파일 업로드 훅
- *
- * 진행률 추적과 에러 처리를 포함한 파일 업로드 기능을 제공합니다.
- *
- * @returns progress - 업로드 진행률 (0-100)
- * @returns isUploading - 업로드 상태 ('preparing' | 'uploading' | 'finishing' | 'done')
- * @returns error - 에러 메시지
- * @returns uploadFiles - 파일 업로드 함수
- * @returns reset - 상태 초기화 함수
- */
 import { useCallback, useRef, useState } from 'react';
 
 import type { AxiosProgressEvent } from 'axios';
@@ -32,6 +21,18 @@ const initialProgress: UploadProgress = {
   currentStep: 'preparing',
 };
 
+/**
+ * 파일 업로드 훅
+ *
+ * 진행률 추적과 에러 처리를 포함한 파일 업로드 기능을 제공합니다.
+ *
+ * @returns uploadFile - 파일 업로드 함수
+ * @returns cancelUpload - 업로드 취소 함수
+ * @returns resetUpload - 상태 초기화 함수
+ * @returns isUploading - 업로드 진행 중 여부
+ * @returns progress - 업로드 진행 상태 (퍼센트, 단계)
+ * @returns error - 에러 메시지
+ */
 export function useUploadFile() {
   const [isUploading, setIsUploading] = useState(false);
   const [progress, setProgress] = useState<UploadProgress>(initialProgress);
diff --git a/src/hooks/useVideoComments.ts b/src/hooks/useVideoComments.ts
index a8e8409a..f73f80f9 100644
--- a/src/hooks/useVideoComments.ts
+++ b/src/hooks/useVideoComments.ts
@@ -1,11 +1,3 @@
-/**
- * @file useVideoComments.ts
- * @description 영상 댓글 관리 훅
- *
- * - "현재 타임스탬프의 댓글만" 추출하던 방식 제거
- * - video.feedbacks 전체에서 댓글을 모두 합쳐서 반환
- * - CommentList 재사용을 위해 Tree 변환은 그대로 유지(flatToTree)
- */
 import { useMemo } from 'react';
 
 import { updateComment as updateCommentApi } from '@/api/endpoints/comments';
@@ -18,6 +10,16 @@ import { showToast } from '@/utils/toast';
 
 const EMPTY_COMMENTS: Comment[] = [];
 
+/**
+ * 영상 댓글 관리 훅
+ *
+ * video.feedbacks 전체에서 댓글을 합산하여 트리 구조로 반환합니다.
+ *
+ * @returns comments - 트리 구조 댓글 목록
+ * @returns addComment - 새 댓글 추가 (타임스탬프 지정)
+ * @returns addReply - 답글 추가
+ * @returns deleteComment - 댓글 삭제
+ */
 export function useVideoComments() {
   const video = useVideoFeedbackStore((state) => state.video);
   const videoId = video?.videoId;
@@ -28,7 +30,7 @@ export function useVideoComments() {
   const updateCommentStore = useVideoFeedbackStore((state) => state.updateComment);
   const updateCommentServerId = useVideoFeedbackStore((state) => state.updateCommentServerId);
 
-  // CHANGED: 전체 feedbacks의 comments를 합쳐서 반환
+  // 전체 feedbacks의 comments를 합쳐서 반환
   const flatComments = useMemo(() => {
     if (!video) return EMPTY_COMMENTS;
 
@@ -76,7 +78,7 @@ export function useVideoComments() {
 
       // 서버 ID 저장 (Model에서 serverId 추출)
       if (model && tempComment) {
-        updateCommentServerId(tempComment.id, model.serverId);
+        updateCommentServerId(tempComment.commentId, model.serverId);
       }
     } catch {
       showToast.error('댓글 등록에 실패했습니다.', '잠시 후 다시 시도해주세요.');
@@ -92,7 +94,7 @@ export function useVideoComments() {
     try {
       // parentId로 부모 댓글 찾기 (serverId 필요)
       const allComments = video?.feedbacks.flatMap((f) => f.comments) || [];
-      const parentComment = allComments.find((c) => c.id === parentId);
+      const parentComment = allComments.find((c) => c.commentId === parentId);
 
       if (!parentComment || !parentComment.serverId) {
         showToast.error('답글 등록에 실패했습니다.', '부모 댓글을 찾을 수 없습니다.');
@@ -103,17 +105,15 @@ export function useVideoComments() {
       const extracted = extractTimestampFromComment(content);
       const contentToSend = extracted ? extracted.content : content;
 
-      // 서버 API 호출 (serverId를 number로 변환)
-      const parentServerIdNum = parseInt(parentComment.serverId, 10);
-      if (isNaN(parentServerIdNum)) {
+      if (parentComment.serverId) {
         showToast.error('답글 등록에 실패했습니다.', '잘못된 댓글 ID입니다.');
         return;
       }
-      const model = await createCommentReply(parentServerIdNum, { content: contentToSend });
+      const model = await createCommentReply(parentComment.serverId, { content: contentToSend });
 
       // 서버 ID 저장 (Model에서 serverId 추출)
       if (model && tempReply) {
-        updateCommentServerId(tempReply.id, model.serverId);
+        updateCommentServerId(tempReply.commentId, model.serverId);
       }
     } catch (_error) {
       showToast.error('답글 등록에 실패했습니다.', '잠시 후 다시 시도해주세요.');
@@ -130,7 +130,7 @@ export function useVideoComments() {
 
     // 플랫 구조: 모든 댓글(답글 포함)이 같은 배열에 있음
     const allComments = video.feedbacks.flatMap((f) => f.comments);
-    const targetComment = allComments.find((c) => c.id === commentId);
+    const targetComment = allComments.find((c) => c.commentId === commentId);
 
     if (!targetComment) {
       showToast.error('댓글을 찾을 수 없습니다.');
@@ -147,13 +147,11 @@ export function useVideoComments() {
     deleteCommentStore(commentId);
 
     try {
-      // 서버 API 호출 (serverId를 number로 변환)
-      const commentIdNum = parseInt(targetComment.serverId, 10);
-      if (isNaN(commentIdNum)) {
+      if (targetComment.serverId) {
         throw new Error('Invalid comment server ID');
       }
 
-      await deleteVideoComment(commentIdNum);
+      await deleteVideoComment(targetComment.serverId);
       showToast.success('댓글이 삭제되었습니다.');
     } catch (_error) {
       showToast.error('댓글 삭제에 실패했습니다.', '잠시 후 다시 시도해주세요.');
@@ -167,7 +165,7 @@ export function useVideoComments() {
     if (!video) return;
 
     const allComments = video.feedbacks.flatMap((f) => f.comments);
-    const targetComment = allComments.find((c) => c.id === commentId);
+    const targetComment = allComments.find((c) => c.commentId === commentId);
 
     if (!targetComment) {
       showToast.error('댓글을 찾을 수 없습니다.');
diff --git a/src/hooks/useVideoReactions.ts b/src/hooks/useVideoReactions.ts
index 06aa59c8..f5850b62 100644
--- a/src/hooks/useVideoReactions.ts
+++ b/src/hooks/useVideoReactions.ts
@@ -4,13 +4,8 @@
  *
  * Optimistic UI 패턴으로 리액션 토글을 처리합니다.
  * 1. Store 즉시 업데이트 (optimistic)
- * 2. API 호출은 debounce 처리 (500ms, 연타 방지)
+ * 2. API 비동기 호출
  * 3. 실패 시 rollback (toggleReaction 재호출)
- *
- * 타임스탬프 처리:
- * - 프론트엔드: 정확한 리액션 시간(timestampMs)을 서버에 전송
- * - 백엔드: timestampMs를 FLOOR 연산으로 segmentation (N ms 단위 그룹화)
- * - Debounce: 500ms 내 연타 시 마지막 클릭만 API 호출
  */
 import { useMemo } from 'react';
 
@@ -21,15 +16,32 @@ import type { Reaction, ReactionType } from '@/types/script';
 import { showToast } from '@/utils/toast';
 import { getOverlappingFeedbacks } from '@/utils/video';
 
-import { useToggleVideoReaction } from './queries/useVideoReactionQueries';
+import { useToggleVideoReaction, useVideoReactionWindow } from './queries/useVideoReactionQueries';
 import { useDebouncedCallback } from './useDebounce';
 
+/**
+ * 영상 리액션 관리 훅
+ *
+ * Optimistic UI 패턴으로 리액션 토글을 처리합니다.
+ * Store 즉시 업데이트 → API 호출 → 실패 시 rollback.
+ *
+ * @returns reactions - 현재 시간 구간의 리액션 목록
+ * @returns toggleReaction - 리액션 토글 함수
+ */
 export function useVideoReactions() {
   const video = useVideoFeedbackStore((s) => s.video);
   const currentTime = useVideoFeedbackStore((s) => s.currentTime);
   const toggleReactionStore = useVideoFeedbackStore((s) => s.toggleReaction);
 
   const { mutate: toggleReactionApi } = useToggleVideoReaction();
+  const timestampMs = Math.round(currentTime * 1000);
+  const requestTimestampMs = Math.round(timestampMs / 1000) * 1000;
+  const windowMs = 2000;
+  const { data: windowSummary } = useVideoReactionWindow(
+    video?.videoId,
+    requestTimestampMs,
+    windowMs,
+  );
 
   const reactions: Reaction[] = useMemo(() => {
     if (!video) {
@@ -42,38 +54,52 @@ export function useVideoReactions() {
       currentTime,
       FEEDBACK_WINDOW,
     );
+    const closestFeedback =
+      overlappingFeedbacks.length > 0
+        ? overlappingFeedbacks.reduce((closest, current) => {
+            return Math.abs(current.timestampMs - currentTime * 1000) <
+              Math.abs(closest.timestampMs - currentTime * 1000)
+              ? current
+              : closest;
+          })
+        : null;
+
+    const activeMap: Record<ReactionType, boolean> = REACTION_TYPES.reduce(
+      (acc, type) => {
+        acc[type] = closestFeedback?.reactions.find((r) => r.type === type)?.active ?? false;
+        return acc;
+      },
+      {} as Record<ReactionType, boolean>,
+    );
 
-    // 겹치는 feedbacks이 없으면 기본값
-    if (overlappingFeedbacks.length === 0) {
-      return REACTION_TYPES.map((type) => ({ type, count: 0, active: false }));
+    const countMap: Record<ReactionType, number> = REACTION_TYPES.reduce(
+      (acc, type) => {
+        acc[type] = 0;
+        return acc;
+      },
+      {} as Record<ReactionType, number>,
+    );
+
+    if (windowSummary) {
+      windowSummary.forEach((item) => {
+        countMap[item.emojiType] = item.count;
+      });
+    } else if (overlappingFeedbacks.length > 0) {
+      // fallback: 로컬 store 기반 합산
+      REACTION_TYPES.forEach((type) => {
+        countMap[type] = overlappingFeedbacks.reduce((sum, feedback) => {
+          const reaction = feedback.reactions.find((r) => r.type === type);
+          return sum + (reaction?.count || 0);
+        }, 0);
+      });
     }
 
-    // 가장 가까운 버킷 (active 상태 기준)
-    const closestFeedback = overlappingFeedbacks.reduce((closest, current) => {
-      return Math.abs(current.timestampMs - currentTime) <
-        Math.abs(closest.timestampMs - currentTime)
-        ? current
-        : closest;
-    });
-
-    // 모든 겹치는 feedbacks의 reactions을 합산
-    return REACTION_TYPES.map((type) => {
-      // count: 모든 겹치는 feedbacks의 count 합산
-      const totalCount = overlappingFeedbacks.reduce((sum, feedback) => {
-        const reaction = feedback.reactions.find((r) => r.type === type);
-        return sum + (reaction?.count || 0);
-      }, 0);
-
-      // active: 가장 가까운 버킷의 active 상태만 반영
-      const closestReaction = closestFeedback.reactions.find((r) => r.type === type);
-
-      return {
-        type,
-        count: totalCount,
-        active: closestReaction?.active || false,
-      };
-    });
-  }, [video, currentTime]);
+    return REACTION_TYPES.map((type) => ({
+      type,
+      count: countMap[type],
+      active: activeMap[type],
+    }));
+  }, [video, currentTime, windowSummary]);
 
   /**
    * API 호출 함수 (debounce 적용됨)
diff --git a/src/hooks/useVideoSync.ts b/src/hooks/useVideoSync.ts
index 809f3225..79f7e38a 100644
--- a/src/hooks/useVideoSync.ts
+++ b/src/hooks/useVideoSync.ts
@@ -1,12 +1,3 @@
-/**
- * @file useVideoSync.ts
- * @description 비디오 요소와 store 간 동기화를 담당하는 훅
- *
- * - videoRef 관리
- * - duration 상태 관리
- * - timeupdate 이벤트 → store.currentTime 동기화
- * - store.seekTo 요청 → video.currentTime 동기화
- */
 import { useCallback, useEffect, useState } from 'react';
 
 import { useVideoFeedbackStore } from '@/stores/videoFeedbackStore';
@@ -29,6 +20,19 @@ interface UseVideoSyncReturn {
   handleTimeUpdate: () => void;
 }
 
+/**
+ * 비디오-스토어 동기화 훅
+ *
+ * 비디오 요소의 timeupdate를 store.currentTime에,
+ * store.seekTo 요청을 video.currentTime에 양방향 동기화합니다.
+ *
+ * @param options.useNativeControls - 네이티브 controls 사용 여부 (기본: false)
+ * @returns setVideoRef - 비디오 요소에 연결할 콜백 ref
+ * @returns videoElement - 비디오 요소 (직접 접근 필요 시)
+ * @returns duration - 비디오 총 길이 (초)
+ * @returns currentTime - 현재 재생 시간
+ * @returns handleTimeUpdate - 네이티브 controls용 onTimeUpdate 핸들러
+ */
 export function useVideoSync(options: UseVideoSyncOptions = {}): UseVideoSyncReturn {
   const { useNativeControls = false } = options;
 
diff --git a/src/hooks/useVideoUpload.ts b/src/hooks/useVideoUpload.ts
index e416e678..359dca3c 100644
--- a/src/hooks/useVideoUpload.ts
+++ b/src/hooks/useVideoUpload.ts
@@ -16,6 +16,16 @@ interface SlideLog {
   timestampMs: number;
 }
 
+/**
+ * 영상 청크 업로드 훅
+ *
+ * 영상을 1MB 단위 청크로 분할하여 순차 업로드하고, 진행률을 추적합니다.
+ *
+ * @returns uploadVideo - 영상 업로드 함수 (videoId 반환, 실패 시 null)
+ * @returns isUploading - 업로드 진행 중 여부
+ * @returns progress - 업로드 진행 상태 (청크 수, 퍼센트, 단계)
+ * @returns error - 에러 메시지
+ */
 export const useVideoUpload = () => {
   const [isUploading, setIsUploading] = useState(false);
   const [progress, setProgress] = useState<UploadProgress>({
@@ -31,7 +41,7 @@ export const useVideoUpload = () => {
     projectId: number,
     title: string,
     slideLogs: SlideLog[],
-  ): Promise<number | null> => {
+  ): Promise<string | null> => {
     setIsUploading(true);
     setError(null);
 
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 7a1d48ba..592c55ea 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -8,7 +8,7 @@
 import { HttpResponse, delay, http } from 'msw';
 
 import type { Presentation } from '@/types/presentation';
-import type { SlideListItem } from '@/types/slide';
+import type { SlideDetail } from '@/types/slide';
 
 import {
   getMockProjectAnalyticsSummary,
@@ -38,12 +38,12 @@ let idSeq = Date.now();
 const nextId = () => String(++idSeq);
 
 // ── In-memory Stores ─────────────────────────────────────────
-let slides: SlideListItem[] = [...MOCK_SLIDES];
+let slides: SlideDetail[] = [...MOCK_SLIDES];
 let presentations: Presentation[] = [...MOCK_PROJECTS];
 
 // 댓글 저장소
 interface StoredComment {
-  id: string;
+  commentId: string;
   content: string;
   parentId?: string;
   userId: string;
@@ -61,7 +61,7 @@ MOCK_SLIDES.forEach((slide) => {
   const roots: StoredComment[] = [];
   for (const op of opinions) {
     const stored: StoredComment = {
-      id: op.id,
+      commentId: op.commentId,
       content: op.content,
       parentId: op.parentId,
       userId: op.userId,
@@ -91,7 +91,7 @@ slides.forEach((s) => {
 
 // 영상 댓글 저장소
 interface StoredVideoComment {
-  id: string;
+  commentId: string;
   content: string;
   timestampMs: number;
   userId: string;
@@ -209,11 +209,15 @@ const projectHandlers = [
     const limit = Number(url.searchParams.get('limit') ?? '20');
     const search = url.searchParams.get('search') ?? '';
     const sort = url.searchParams.get('sort') ?? 'latest';
+    const maxDuration = Number(url.searchParams.get('maxDuration') ?? '0');
 
     let filtered = [...presentations];
     if (search.length >= 2) {
       filtered = filtered.filter((p) => p.title.includes(search));
     }
+    if (Number.isFinite(maxDuration) && maxDuration > 0) {
+      filtered = filtered.filter((p) => p.durationSeconds <= maxDuration);
+    }
 
     if (sort === 'latest') filtered.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
     else if (sort === 'name') filtered.sort((a, b) => a.title.localeCompare(b.title));
@@ -485,7 +489,9 @@ const commentHandlers = [
     const page = Number(url.searchParams.get('page') ?? '1');
     const limit = Number(url.searchParams.get('limit') ?? '20');
 
-    const all = slideComments.get(slideId) ?? [];
+    const all = [...(slideComments.get(slideId) ?? [])].sort((a, b) =>
+      a.createdAt.localeCompare(b.createdAt),
+    );
     const total = all.length;
     const start = (page - 1) * limit;
     const paged = all.slice(start, start + limit);
@@ -494,7 +500,7 @@ const commentHandlers = [
       comments: paged.map((c) => {
         const user = MOCK_USERS.find((u) => u.id === c.userId) ?? MOCK_CURRENT_USER;
         return {
-          commentId: c.id,
+          commentId: c.commentId,
           content: c.content,
           user: { userId: c.userId, nickName: user.name },
           createdAt: c.createdAt,
@@ -510,10 +516,10 @@ const commentHandlers = [
     await delay(200);
     const { slideId } = params as { slideId: string };
     const body = (await request.json()) as { content: string };
-    const id = nextId();
+    const commentId = nextId();
     const now = new Date().toISOString();
     const comment: StoredComment = {
-      id,
+      commentId,
       content: body.content,
       userId: MOCK_CURRENT_USER.id,
       slideId,
@@ -525,7 +531,7 @@ const commentHandlers = [
     slideComments.set(slideId, arr);
 
     return ok({
-      commentId: id,
+      commentId: commentId,
       content: body.content,
       userId: MOCK_CURRENT_USER.id,
       createdAt: now,
@@ -535,20 +541,20 @@ const commentHandlers = [
   // 답글 작성
   http.post(`${BASE_URL}/comments/:commentId/replies`, async ({ params, request }) => {
     await delay(200);
-    const { commentId } = params as { commentId: string };
+    const { commentId: parentId } = params as { commentId: string };
     const body = (await request.json()) as { content: string };
 
     // 부모 댓글의 slideId 탐색 (slideComments → commentReplies 순)
     let parentSlideId = '';
     for (const [sid, comments] of slideComments) {
-      if (comments.some((c) => c.id === commentId)) {
+      if (comments.some((c) => c.commentId === parentId)) {
         parentSlideId = sid;
         break;
       }
     }
     if (!parentSlideId) {
       for (const replies of commentReplies.values()) {
-        const found = replies.find((r) => r.id === commentId);
+        const found = replies.find((r) => r.commentId === parentId);
         if (found) {
           parentSlideId = found.slideId;
           break;
@@ -558,44 +564,58 @@ const commentHandlers = [
     // 옵티미스틱 UI에서 생성된 UUID로 요청할 수 있으므로, 못 찾아도 허용
     if (!parentSlideId) parentSlideId = 'unknown';
 
-    const id = nextId();
+    const newCommentId = nextId();
     const now = new Date().toISOString();
     const reply: StoredComment = {
-      id,
+      commentId: newCommentId,
       content: body.content,
-      parentId: commentId,
+      parentId: parentId,
       userId: MOCK_CURRENT_USER.id,
       slideId: parentSlideId,
       createdAt: now,
       updatedAt: now,
     };
-    const arr = commentReplies.get(commentId) ?? [];
+    const arr = commentReplies.get(parentId) ?? [];
     arr.push(reply);
-    commentReplies.set(commentId, arr);
+    commentReplies.set(parentId, arr);
 
     return ok({
-      commentId: id,
+      parentCommentId: parentId,
+      replyId: newCommentId,
       content: body.content,
-      parentId: commentId,
       userId: MOCK_CURRENT_USER.id,
       createdAt: now,
     });
   }),
 
   // 답글 목록
-  http.get(`${BASE_URL}/comments/:commentId/replies`, async ({ params }) => {
+  http.get(`${BASE_URL}/comments/:commentId/replies`, async ({ params, request }) => {
     await delay(100);
     const { commentId } = params as { commentId: string };
-    const replies = commentReplies.get(commentId) ?? [];
-    return ok(
-      replies.map((r) => ({
-        commentId: r.id,
-        content: r.content,
-        parentId: r.parentId ?? null,
-        userId: r.userId,
-        createdAt: r.createdAt,
-      })),
+    const url = new URL(request.url);
+    const page = Number(url.searchParams.get('page') ?? '1');
+    const limit = Number(url.searchParams.get('limit') ?? '20');
+
+    const all = [...(commentReplies.get(commentId) ?? [])].sort((a, b) =>
+      a.createdAt.localeCompare(b.createdAt),
     );
+    const total = all.length;
+    const start = (page - 1) * limit;
+    const paged = all.slice(start, start + limit);
+
+    return ok({
+      comments: paged.map((r) => {
+        const user = MOCK_USERS.find((u) => u.id === r.userId) ?? MOCK_CURRENT_USER;
+        return {
+          commentId: r.commentId,
+          content: r.content,
+          user: { userId: r.userId, nickName: user.name },
+          createdAt: r.createdAt,
+          updatedAt: r.updatedAt,
+        };
+      }),
+      pagination: { page, limit, total, totalPages: Math.ceil(total / limit) },
+    });
   }),
 
   // 댓글 수정
@@ -606,25 +626,47 @@ const commentHandlers = [
 
     // slideComments에서 검색
     for (const comments of slideComments.values()) {
-      const c = comments.find((c) => c.id === commentId);
+      const c = comments.find((c) => c.commentId === commentId);
       if (c) {
         c.content = body.content;
         c.updatedAt = new Date().toISOString();
-        return ok({ commentId, content: c.content, userId: c.userId, createdAt: c.createdAt });
+        return ok({
+          updatedTargetType: 'comment',
+          commentId,
+          content: c.content,
+          userId: c.userId,
+          createdAt: c.createdAt,
+          updatedAt: c.updatedAt,
+        });
       }
     }
     // commentReplies에서 검색
     for (const replies of commentReplies.values()) {
-      const r = replies.find((r) => r.id === commentId);
+      const r = replies.find((r) => r.commentId === commentId);
       if (r) {
         r.content = body.content;
         r.updatedAt = new Date().toISOString();
-        return ok({ commentId, content: r.content, userId: r.userId, createdAt: r.createdAt });
+        return ok({
+          updatedTargetType: 'reply',
+          replyId: commentId,
+          parentCommentId: r.parentId,
+          content: r.content,
+          userId: r.userId,
+          createdAt: r.createdAt,
+          updatedAt: r.updatedAt,
+        });
       }
     }
     // 옵티미스틱 UI에서 생성된 UUID로 요청할 수 있으므로, 못 찾아도 성공 처리
     const now = new Date().toISOString();
-    return ok({ commentId, content: body.content, userId: MOCK_CURRENT_USER.id, createdAt: now });
+    return ok({
+      updatedTargetType: 'comment',
+      commentId,
+      content: body.content,
+      userId: MOCK_CURRENT_USER.id,
+      createdAt: now,
+      updatedAt: now,
+    });
   }),
 
   // 댓글 삭제
@@ -634,25 +676,25 @@ const commentHandlers = [
 
     // slideComments에서 삭제
     for (const [sid, comments] of slideComments) {
-      const idx = comments.findIndex((c) => c.id === commentId);
+      const idx = comments.findIndex((c) => c.commentId === commentId);
       if (idx !== -1) {
         comments.splice(idx, 1);
         slideComments.set(sid, comments);
         commentReplies.delete(commentId);
-        return ok(null);
+        return ok({ deletedTargetType: 'comment', commentId });
       }
     }
     // commentReplies에서 삭제
     for (const [pid, replies] of commentReplies) {
-      const idx = replies.findIndex((r) => r.id === commentId);
+      const idx = replies.findIndex((r) => r.commentId === commentId);
       if (idx !== -1) {
         replies.splice(idx, 1);
         commentReplies.set(pid, replies);
-        return ok(null);
+        return ok({ deletedTargetType: 'reply', replyId: commentId, parentCommentId: pid });
       }
     }
     // 옵티미스틱 UI에서 생성된 UUID로 요청할 수 있으므로, 못 찾아도 성공 처리
-    return ok(null);
+    return ok({ deletedTargetType: 'comment', commentId });
   }),
 
   // 영상 댓글 작성
@@ -660,10 +702,10 @@ const commentHandlers = [
     await delay(200);
     const { videoId } = params as { videoId: string };
     const body = (await request.json()) as { content: string; timestampMs: number };
-    const id = nextId();
+    const commentId = nextId();
     const now = new Date().toISOString();
     const comment: StoredVideoComment = {
-      id,
+      commentId,
       content: body.content,
       timestampMs: body.timestampMs,
       userId: MOCK_CURRENT_USER.id,
@@ -673,7 +715,7 @@ const commentHandlers = [
     const arr = videoComments.get(videoId) ?? [];
     arr.push(comment);
     videoComments.set(videoId, arr);
-    return ok({ id, content: body.content, timestampMs: body.timestampMs, createdAt: now });
+    return ok({ commentId, content: body.content, timestampMs: body.timestampMs, createdAt: now });
   }),
 
   // 영상 댓글 조회 (타임스탬프 기준)
@@ -689,7 +731,7 @@ const commentHandlers = [
     );
     return ok({
       comments: filtered.map((c) => ({
-        commentId: c.id,
+        commentId: c.commentId,
         content: c.content,
         timestampMs: c.timestampMs,
         user: { userId: c.userId, nickName: c.userName },
@@ -722,7 +764,14 @@ const reactionHandlers = [
     await delay(100);
     const { slideId } = params as { slideId: string };
     const reactions = slideReactions.get(slideId) ?? {};
-    return ok({ slideId, reactions });
+    const filled = {
+      fire: reactions.fire ?? 0,
+      good: reactions.good ?? 0,
+      bad: reactions.bad ?? 0,
+      sleepy: reactions.sleepy ?? 0,
+      confused: reactions.confused ?? 0,
+    };
+    return ok({ slideId, reactions: filled });
   }),
 
   // 프로젝트 슬라이드 리액션 총합
@@ -730,7 +779,13 @@ const reactionHandlers = [
     await delay(100);
     const { projectId } = params as { projectId: string };
     const projectSlides = slides.filter((s) => s.projectId === projectId);
-    const total: Record<string, number> = {};
+    const total: Record<string, number> = {
+      fire: 0,
+      good: 0,
+      bad: 0,
+      sleepy: 0,
+      confused: 0,
+    };
     let totalCount = 0;
     projectSlides.forEach((s) => {
       const r = slideReactions.get(s.slideId) ?? {};
@@ -746,8 +801,8 @@ const reactionHandlers = [
   http.post(`${BASE_URL}/videos/:videoId/reactions`, async ({ params, request }) => {
     await delay(100);
     const { videoId } = params as { videoId: string };
-    const body = (await request.json()) as { emojiType: string; timestampMs: number };
-    return ok({ reactionId: nextId(), videoId, active: true, ...body });
+    await request.json();
+    return ok({ reactionId: nextId(), videoId, active: true });
   }),
 
   // 영상 리액션 타임라인
@@ -759,7 +814,7 @@ const reactionHandlers = [
 
     // MOCK_VIDEO feedbacks에서 타임라인 마커 생성
     const markers: { timestampMs: number; emojiType: string; count: number }[] = [];
-    if (Number(videoId) === MOCK_VIDEO.videoId) {
+    if (videoId === MOCK_VIDEO.videoId) {
       MOCK_VIDEO.feedbacks.forEach((fb) => {
         const bucket = Math.floor(fb.timestampMs / intervalMs) * intervalMs;
         fb.reactions.forEach((r) => {
@@ -779,7 +834,7 @@ const reactionHandlers = [
     const windowMs = Number(url.searchParams.get('windowMs') ?? '2000');
 
     const result: { emojiType: string; count: number }[] = [];
-    if (Number(videoId) === MOCK_VIDEO.videoId) {
+    if (videoId === MOCK_VIDEO.videoId) {
       const totals: Record<string, number> = {};
       MOCK_VIDEO.feedbacks.forEach((fb) => {
         if (fb.timestampMs >= timestampMs - windowMs && fb.timestampMs <= timestampMs + windowMs) {
@@ -851,8 +906,7 @@ const videoHandlers = [
   http.get(`${BASE_URL}/videos/:videoId`, async ({ params }) => {
     await delay(200);
     const { videoId } = params as { videoId: string };
-    if (Number(videoId) !== MOCK_VIDEO.videoId)
-      return fail(404, 'V001', '영상을 찾을 수 없습니다.');
+    if (videoId !== MOCK_VIDEO.videoId) return fail(404, 'V001', '영상을 찾을 수 없습니다.');
 
     // MOCK_VIDEO feedbacks → Server timeline 포맷으로 변환
     const timelineReactions: { timestampMs: number; emojiType: string; count: number }[] = [];
@@ -877,7 +931,7 @@ const videoHandlers = [
       fb.comments.forEach((c) => {
         const user = MOCK_USERS.find((u) => u.id === c.userId);
         timelineComments.push({
-          commentId: c.id,
+          commentId: c.commentId,
           timestampMs: fb.timestampMs,
           content: c.content,
           createdAt: c.createdAt,
@@ -907,8 +961,7 @@ const videoHandlers = [
   http.get(`${BASE_URL}/videos/:videoId/slides`, async ({ params }) => {
     await delay(100);
     const { videoId } = params as { videoId: string };
-    if (Number(videoId) !== MOCK_VIDEO.videoId)
-      return fail(404, 'V001', '영상을 찾을 수 없습니다.');
+    if (videoId !== MOCK_VIDEO.videoId) return fail(404, 'V001', '영상을 찾을 수 없습니다.');
     // p1 프로젝트의 처음 5개 슬라이드로 타임라인 생성
     const p1Slides = slides
       .filter((s) => s.projectId === 'p1')
diff --git a/src/mocks/slides.ts b/src/mocks/slides.ts
index e0eb5322..5a638a78 100644
--- a/src/mocks/slides.ts
+++ b/src/mocks/slides.ts
@@ -1,4 +1,4 @@
-import type { SlideListItem } from '@/types/slide';
+import type { SlideDetail } from '@/types/slide';
 
 import { MOCK_USERS } from './users';
 import { timeAgo, timeAt } from './utils';
@@ -20,7 +20,7 @@ const PROJECT_SLIDE_COUNTS = {
 };
 
 // 기본 슬라이드 생성 함수
-const createDefaultSlide = (projectId: string, index: number): SlideListItem => ({
+const createDefaultSlide = (projectId: string, index: number): SlideDetail => ({
   slideId: `${projectId}-${index}`,
   projectId,
   title: `슬라이드 ${index + 1}`,
@@ -34,7 +34,7 @@ const createDefaultSlide = (projectId: string, index: number): SlideListItem =>
   startTime: index * 60, // 슬라이드당 60초 간격
 });
 
-const p1Slides: SlideListItem[] = [
+const p1Slides: SlideDetail[] = [
   {
     slideId: 'p1-0',
     projectId: 'p1',
@@ -51,14 +51,14 @@ const p1Slides: SlideListItem[] = [
     `,
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[1].id,
         content: '도입부가 인상적이에요!',
         createdAt: timeAgo(2, 'minute'),
         isMine: false,
       },
       {
-        id: '2',
+        commentId: '2',
         userId: MOCK_USERS[0].id,
         content: '감사합니다~',
         createdAt: timeAgo(1, 'minute'),
@@ -67,7 +67,7 @@ const p1Slides: SlideListItem[] = [
         parentId: '1',
       },
       {
-        id: '3',
+        commentId: '3',
         userId: MOCK_USERS[2].id,
         content: '첫 문장을 질문으로 시작하면 어떨까요?',
         createdAt: timeAgo(30, 'second'),
@@ -109,14 +109,14 @@ const p1Slides: SlideListItem[] = [
     script: '',
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[1].id,
         content: '문제 정의가 명확하네요',
         createdAt: timeAgo(10, 'minute'),
         isMine: false,
       },
       {
-        id: '2',
+        commentId: '2',
         userId: MOCK_USERS[2].id,
         content: '동의합니다!',
         createdAt: timeAgo(9, 'minute'),
@@ -125,14 +125,14 @@ const p1Slides: SlideListItem[] = [
         parentId: '1',
       },
       {
-        id: '3',
+        commentId: '3',
         userId: MOCK_USERS[3].id,
         content: '추가로 이런 문제도 있어요',
         createdAt: timeAgo(8, 'minute'),
         isMine: false,
       },
       {
-        id: '4',
+        commentId: '4',
         userId: MOCK_USERS[0].id,
         content: '좋은 의견이에요',
         createdAt: timeAgo(7, 'minute'),
@@ -141,28 +141,28 @@ const p1Slides: SlideListItem[] = [
         parentId: '3',
       },
       {
-        id: '5',
+        commentId: '5',
         userId: MOCK_USERS[4].id,
         content: '사용자 인터뷰 결과도 추가하면 좋겠어요',
         createdAt: timeAgo(6, 'minute'),
         isMine: false,
       },
       {
-        id: '6',
+        commentId: '6',
         userId: MOCK_USERS[1].id,
         content: '데이터로 뒷받침하면 더 설득력 있을 것 같아요',
         createdAt: timeAgo(5, 'minute'),
         isMine: false,
       },
       {
-        id: '7',
+        commentId: '7',
         userId: MOCK_USERS[2].id,
         content: '경쟁사 분석도 넣어보는 건 어떨까요?',
         createdAt: timeAgo(4, 'minute'),
         isMine: false,
       },
       {
-        id: '8',
+        commentId: '8',
         userId: MOCK_USERS[0].id,
         content: '네, 반영해볼게요!',
         createdAt: timeAgo(3, 'minute'),
@@ -258,7 +258,7 @@ const p1Slides: SlideListItem[] = [
     script: '그럼 왜 네이버 지도 서비스였을까 궁금하실 텐데요.',
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[3].id,
         content: '목표가 명확해요!',
         createdAt: timeAgo(1, 'hour'),
@@ -326,7 +326,7 @@ const p1Slides: SlideListItem[] = [
     `,
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[4].id,
         content: '기능 정의가 잘 되어있네요',
         createdAt: timeAgo(2, 'hour'),
@@ -388,14 +388,14 @@ const p1Slides: SlideListItem[] = [
     `,
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[0].id,
         content: 'Zustand로 상태 관리하면 좋을 것 같아요',
         createdAt: timeAgo(3, 'hour'),
         isMine: true,
       },
       {
-        id: '2',
+        commentId: '2',
         userId: MOCK_USERS[0].id,
         content: 'Context보다 성능이 좋습니다',
         createdAt: timeAgo(2, 'hour'),
@@ -404,7 +404,7 @@ const p1Slides: SlideListItem[] = [
         parentId: '1',
       },
       {
-        id: '3',
+        commentId: '3',
         userId: MOCK_USERS[0].id,
         content: 'Selector 패턴으로 최적화 가능해요',
         createdAt: timeAgo(1, 'hour'),
@@ -438,21 +438,21 @@ const p1Slides: SlideListItem[] = [
     `,
     comments: [
       {
-        id: '1',
+        commentId: '1',
         userId: MOCK_USERS[1].id,
         content: '기대 효과가 구체적이에요',
         createdAt: timeAgo(4, 'hour'),
         isMine: false,
       },
       {
-        id: '2',
+        commentId: '2',
         userId: MOCK_USERS[2].id,
         content: '수치화된 목표가 있으면 더 좋겠어요',
         createdAt: timeAgo(3, 'hour'),
         isMine: false,
       },
       {
-        id: '3',
+        commentId: '3',
         userId: MOCK_USERS[3].id,
         content: '비즈니스 임팩트도 추가해주세요',
         createdAt: timeAgo(2, 'hour'),
@@ -642,4 +642,4 @@ const generatedSlides = Object.entries(PROJECT_SLIDE_COUNTS).flatMap(([projectId
   );
 });
 
-export const MOCK_SLIDES: SlideListItem[] = [...p1Slides, ...generatedSlides];
+export const MOCK_SLIDES: SlideDetail[] = [...p1Slides, ...generatedSlides];
diff --git a/src/mocks/videos.ts b/src/mocks/videos.ts
index ab0cf2dc..6194899c 100644
--- a/src/mocks/videos.ts
+++ b/src/mocks/videos.ts
@@ -16,7 +16,7 @@ import { timeAgo } from './utils';
  * - 상위 10개 세그먼트가 재생바에 하이라이트로 표시됨
  */
 export const MOCK_VIDEO: VideoFeedback = {
-  videoId: 1,
+  videoId: '1',
   videoUrl: '/p1.webm',
   title: '테스트 영상',
   duration: 596,
@@ -29,7 +29,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 3_000,
       comments: [
         {
-          id: 'vc-1',
+          commentId: 'vc-1',
           userId: MOCK_USERS[0].id,
           content: '오프닝이 멋있네요!',
           createdAt: timeAgo(2, 'minute'),
@@ -51,7 +51,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 15_000,
       comments: [
         {
-          id: 'vc-3',
+          commentId: 'vc-3',
           userId: MOCK_USERS[2].id,
           content: '배경 음악이 좋습니다.',
           createdAt: timeAgo(5, 'minute'),
@@ -86,7 +86,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 45_000,
       comments: [
         {
-          id: 'vc-45-1',
+          commentId: 'vc-45-1',
           userId: MOCK_USERS[1].id,
           content: '여기 정말 좋아요!',
           createdAt: timeAgo(10, 'minute'),
@@ -109,7 +109,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 90_000,
       comments: [
         {
-          id: 'vc-90-1',
+          commentId: 'vc-90-1',
           userId: MOCK_USERS[3].id,
           content: '이 부분이 좀 어려웠어요.',
           createdAt: timeAgo(8, 'minute'),
@@ -131,7 +131,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 150_000,
       comments: [
         {
-          id: 'vc-150-1',
+          commentId: 'vc-150-1',
           userId: MOCK_USERS[0].id,
           content: '하이라이트 부분이네요!',
           createdAt: timeAgo(15, 'minute'),
@@ -139,7 +139,7 @@ export const MOCK_VIDEO: VideoFeedback = {
           ref: { kind: 'video' as const, seconds: 150 },
         },
         {
-          id: 'vc-150-2',
+          commentId: 'vc-150-2',
           userId: MOCK_USERS[4].id,
           content: '완전 동의합니다!',
           createdAt: timeAgo(14, 'minute'),
@@ -175,7 +175,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 270_000,
       comments: [
         {
-          id: 'vc-270-1',
+          commentId: 'vc-270-1',
           userId: MOCK_USERS[2].id,
           content: '이 부분은 개선이 필요해 보여요.',
           createdAt: timeAgo(20, 'minute'),
@@ -198,7 +198,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 330_000,
       comments: [
         {
-          id: 'vc-330-1',
+          commentId: 'vc-330-1',
           userId: MOCK_USERS[1].id,
           content: '다시 재미있어졌네요!',
           createdAt: timeAgo(25, 'minute'),
@@ -233,7 +233,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 450_000,
       comments: [
         {
-          id: 'vc-450-1',
+          commentId: 'vc-450-1',
           userId: MOCK_USERS[3].id,
           content: '클라이막스 부분이네요!',
           createdAt: timeAgo(30, 'minute'),
@@ -269,7 +269,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 560_000,
       comments: [
         {
-          id: 'vc-560-1',
+          commentId: 'vc-560-1',
           userId: MOCK_USERS[4].id,
           content: '엔딩 크레딧도 예쁘네요!',
           createdAt: timeAgo(35, 'minute'),
@@ -291,7 +291,7 @@ export const MOCK_VIDEO: VideoFeedback = {
       timestampMs: 590_000,
       comments: [
         {
-          id: 'vc-590-1',
+          commentId: 'vc-590-1',
           userId: MOCK_USERS[0].id,
           content: '마무리가 정말 좋았어요!',
           createdAt: timeAgo(40, 'minute'),
diff --git a/src/pages/FeedbackSlidePage.tsx b/src/pages/FeedbackSlidePage.tsx
index a0b90b70..fcbff8f3 100644
--- a/src/pages/FeedbackSlidePage.tsx
+++ b/src/pages/FeedbackSlidePage.tsx
@@ -18,18 +18,18 @@ import SlideNavigation from '@/components/feedback/SlideNavigation';
 import SlideViewer from '@/components/feedback/SlideViewer';
 import SlideTitle from '@/components/slide/script/SlideTitle';
 import { createDefaultReactions } from '@/constants/reaction';
-import { useHotkey, useSlideActions } from '@/hooks';
-import { useSlideCommentsQuery } from '@/hooks/queries/useCommentQueries';
+import { useHotkey, useSlideActions, useSlideScript } from '@/hooks';
+import { useScript } from '@/hooks/queries/useScript';
 import { useSlides } from '@/hooks/queries/useSlides';
 import { useExitTracker } from '@/hooks/useExitTracker';
+import { useFeedbackWebSocket } from '@/hooks/useFeedbackWebSocket';
+import { useSlideCommentsActions } from '@/hooks/useSlideCommentsActions';
+import { useSlideCommentsLoader } from '@/hooks/useSlideCommentsLoader';
 import { useSlideNavigation } from '@/hooks/useSlideNavigation';
+import { useSlideReactions } from '@/hooks/useSlideReactions';
 import { useSlideStore } from '@/stores/slideStore';
 import type { Comment } from '@/types/comment';
 
-import { useComments } from '../hooks/useComments';
-import { useFeedbackWebSocket } from '../hooks/useFeedbackWebSocket';
-import { useReactions } from '../hooks/useReactions';
-
 export default function FeedbackSlidePage() {
   const { projectId } = useParams<{ projectId: string }>();
   const { data: slides, isLoading } = useSlides(projectId ?? '');
@@ -46,13 +46,13 @@ export default function FeedbackSlidePage() {
 
   const currentSlide = slides?.[slideIndex];
 
-  const { comments, addComment, addReply, deleteComment, updateComment } = useComments();
-  const { reactions, toggleReaction } = useReactions();
+  const { comments, addComment, addReply, deleteComment, updateComment } =
+    useSlideCommentsActions();
+  const { reactions, toggleReaction } = useSlideReactions();
+  const script = useSlideScript();
   const initSlide = useSlideStore((state) => state.initSlide);
-  const { setComments } = useSlideActions();
-  const { data: fetchedComments, isLoading: isCommentsLoading } = useSlideCommentsQuery(
-    currentSlide?.slideId,
-  );
+  const { updateScript } = useSlideActions();
+  const { data: scriptData } = useScript(currentSlide?.slideId ?? '');
 
   const [commentDraft, setCommentDraft] = useState('');
 
@@ -62,6 +62,20 @@ export default function FeedbackSlidePage() {
     setCommentDraft('');
   };
 
+  const mapComments = useCallback(
+    (comments: Comment[]) => {
+      if (!currentSlide) return comments;
+      const slideLabel = `Slide ${slideIndex + 1}`;
+      return comments.map((comment) => ({
+        ...comment,
+        slideId: currentSlide.slideId,
+        ref: { kind: 'slide' as const, index: slideIndex },
+        slideRef: slideLabel,
+      }));
+    },
+    [currentSlide, slideIndex],
+  );
+
   useHotkey({ ArrowLeft: goPrev, ArrowRight: goNext }, { enabled: !isLoading });
 
   const buildExitPayload = useCallback(() => {
@@ -91,26 +105,20 @@ export default function FeedbackSlidePage() {
 
     initSlide({
       ...currentSlide,
-      emojiReactions:
-        currentSlide.emojiReactions && currentSlide.emojiReactions.length > 0
-          ? currentSlide.emojiReactions
-          : createDefaultReactions(),
+      emojiReactions: createDefaultReactions(),
     });
-    setComments([]);
-  }, [slideIndex, currentSlide, initSlide, setComments]);
+    updateScript('');
+  }, [slideIndex, currentSlide, initSlide, updateScript]);
+
+  const { isLoading: isCommentsLoading } = useSlideCommentsLoader(currentSlide?.slideId, {
+    mapComments,
+  });
 
   useEffect(() => {
-    if (!currentSlide || !fetchedComments) return;
-    const slideLabel = `Slide ${slideIndex + 1}`;
-    setComments(
-      fetchedComments.map((comment) => ({
-        ...comment,
-        slideId: currentSlide.slideId,
-        ref: { kind: 'slide', index: slideIndex },
-        slideRef: slideLabel,
-      })),
-    );
-  }, [currentSlide, fetchedComments, setComments, slideIndex]);
+    if (scriptData) {
+      updateScript(scriptData.scriptText);
+    }
+  }, [scriptData, updateScript]);
 
   const handleGoToRef = useCallback(
     (ref: NonNullable<Comment['ref']>) => {
@@ -133,6 +141,7 @@ export default function FeedbackSlidePage() {
       <div className="hidden md:flex flex-1 px-35">
         <SlideViewer
           slide={currentSlide}
+          script={script}
           slideIndex={slideIndex}
           totalSlides={totalSlides}
           isFirst={isFirst}
@@ -207,10 +216,10 @@ export default function FeedbackSlidePage() {
             <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} readOnly />
             <div className="mt-3 bg-gray-200 rounded-lg px-4 py-3 h-48 overflow-y-auto">
               <p
-                className={`text-body-s ${currentSlide?.script ? 'text-black' : 'text-gray-400'}`}
+                className={`text-body-s ${script ? 'text-black' : 'text-gray-400'}`}
                 style={{ whiteSpace: 'pre-line' }}
               >
-                {currentSlide?.script || '대본이 없습니다.'}
+                {script || '대본이 없습니다.'}
               </p>
             </div>
           </div>
diff --git a/src/pages/FeedbackVideoPage.tsx b/src/pages/FeedbackVideoPage.tsx
index 58fe3724..8b325b22 100644
--- a/src/pages/FeedbackVideoPage.tsx
+++ b/src/pages/FeedbackVideoPage.tsx
@@ -16,9 +16,9 @@ import ReactionButtons from '@/components/feedback/ReactionButtons';
 import ScriptSection from '@/components/feedback/ScriptSection';
 import SlideWebcamStage from '@/components/feedback/video/SlideWebcamStage';
 import { useExitTracker } from '@/hooks/useExitTracker';
-import { useFeedbackVideo } from '@/hooks/useFeedbackVideo';
 import { useFeedbackWebSocket } from '@/hooks/useFeedbackWebSocket';
 import { useIsDesktop } from '@/hooks/useMediaQuery';
+import { useFeedbackVideo } from '@/pages/feedback/useFeedbackVideo';
 import { useVideoFeedbackStore } from '@/stores/videoFeedbackStore';
 
 export default function FeedbackVideoPage() {
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index e4866bbe..3ba424c3 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,13 +1,14 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
+import { useQueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '@/api';
 import IntroSection from '@/components/home/IntroSection';
 import PresentationsSection from '@/components/home/PresentationsSection';
+import { usePresentations, usePresentationsWithFilters } from '@/hooks/queries/usePresentations';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useHomeFilter, useHomeQuery, useHomeSort } from '@/hooks/useHomeSelectors';
-import { usePresentationList } from '@/hooks/usePresentationList';
 import { useUploadFile } from '@/hooks/useUploadFile';
-import { MOCK_PROJECTS } from '@/mocks/projects';
-import type { Presentation } from '@/types/presentation';
 import { showToast } from '@/utils/toast';
 
 const ACCEPTED_FILES_TYPES = '.pptx,.pdf';
@@ -16,6 +17,7 @@ const ACCEPTED_FILES_TYPES = '.pptx,.pdf';
 
 export default function HomePage() {
   //const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { uploadFile, cancelUpload, isUploading, progress, error } = useUploadFile();
 
   const onFileSelected = async (file: File) => {
@@ -23,55 +25,57 @@ export default function HomePage() {
 
     if (response?.resultType === 'SUCCESS') {
       showToast.success('업로드 완료!');
+      void queryClient.invalidateQueries({ queryKey: queryKeys.presentations.lists() });
       //const projectId = response.success.projectId;
       //navigate(`/presentations/${projectId}`);
     }
   };
-  const [isLoading, setIsLoading] = useState(true);
 
   const query = useHomeQuery();
   const sort = useHomeSort();
   const filter = useHomeFilter();
 
   const debouncedQuery = useDebounce(query, 300);
-
-  // TODO :  나중에 mock_projects 말고 서버데이터로 바꿔주기..
-  const allPresentations = MOCK_PROJECTS;
-
-  const filterFn = useMemo<((p: Presentation) => boolean) | undefined>(() => {
+  const maxDuration = useMemo(() => {
     if (filter === null || filter === 'all') return undefined;
-
-    return (p: Presentation) => {
-      switch (filter) {
-        case '3m':
-          return p.durationSeconds <= 180;
-        case '5m':
-          return p.durationSeconds <= 300;
-        default:
-          return true;
-      }
-    };
+    if (filter === '3m') return 180;
+    if (filter === '5m') return 300;
+    return undefined;
   }, [filter]);
 
-  // 1) 필터만 적용한 목록
-  const filteredPresentations = useMemo(() => {
-    return filterFn ? allPresentations.filter(filterFn) : allPresentations;
-  }, [allPresentations, filterFn]);
-
-  const totalCount = allPresentations.length;
-  const filteredCount = filteredPresentations.length;
-
-  // 2) 검색/정렬은 '필터된 목록' 기준으로만 적용
-  const presentations = usePresentationList(filteredPresentations, { query: debouncedQuery, sort });
+  const sortParam = useMemo(() => {
+    if (!sort || sort === 'recent') return 'latest';
+    if (sort === 'commentCount') return 'feedback';
+    if (sort === 'name') return 'name';
+    return undefined;
+  }, [sort]);
+
+  const params = useMemo(
+    () => ({
+      page: 1,
+      limit: 100,
+      search: debouncedQuery.trim() ? debouncedQuery.trim() : undefined,
+      maxDuration,
+      sort: sortParam,
+    }),
+    [debouncedQuery, maxDuration, sortParam],
+  );
 
+  const needsBaseTotal = useMemo(
+    () => Boolean(debouncedQuery.trim() || maxDuration),
+    [debouncedQuery, maxDuration],
+  );
+  const { data: baseData, isLoading: isBaseLoading } = usePresentations({
+    enabled: needsBaseTotal,
+  });
+  const { data: filteredData, isLoading: isFilteredLoading } = usePresentationsWithFilters(params);
+
+  const isLoading = (needsBaseTotal ? isBaseLoading : false) || isFilteredLoading;
+  const presentations = filteredData?.presentations ?? [];
+  const totalCount = needsBaseTotal ? (baseData?.total ?? 0) : (filteredData?.total ?? 0);
+  const filteredCount = filteredData?.total ?? 0;
   const isEmpty = !isLoading && totalCount === 0;
 
-  // TODO : 실제 데이터 패칭 훅의 isLoading으로 교체
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 800);
-    return () => clearTimeout(timer);
-  }, []);
-
   return (
     <main className="mx-auto min-h-screen max-w-4xl px-6 py-8">
       {/* 소개글 & 파일 업로드 */}
diff --git a/src/pages/InsightPage.tsx b/src/pages/InsightPage.tsx
index b38c8bd4..fdad69b1 100644
--- a/src/pages/InsightPage.tsx
+++ b/src/pages/InsightPage.tsx
@@ -22,8 +22,6 @@ import {
   TopSlideCard,
 } from '@/components/insight';
 import { createDefaultReactions } from '@/constants/reaction';
-import { useSlideReactionSummaries } from '@/hooks/queries/useReaction.ts';
-import { useSlides } from '@/hooks/queries/useSlides';
 import {
   useProjectAnalyticsSummary,
   useRecentComments,
@@ -31,7 +29,9 @@ import {
   useSlideRetention,
   useVideoAnalytics,
   useVideoRetention,
-} from '@/hooks/useAnalytics';
+} from '@/hooks/queries/useAnalytics';
+import { useSlideReactionSummaries } from '@/hooks/queries/useReaction.ts';
+import { useSlides } from '@/hooks/queries/useSlides';
 import type { DropOffSlide, DropOffTime, SummaryStat } from '@/types/insight';
 import type { SlideListItem } from '@/types/slide';
 import { formatVideoTimestamp } from '@/utils/format';
@@ -382,7 +382,7 @@ export default function InsightPage() {
                         ...reaction,
                         count: summary[reaction.type] ?? 0,
                       }))
-                    : (slide?.emojiReactions ?? baseReactions);
+                    : baseReactions;
                   const reactionMetrics = summaryReactions.filter((reaction) => reaction.count > 0);
 
                   return (
diff --git a/src/hooks/useFeedbackVideo.ts b/src/pages/feedback/useFeedbackVideo.ts
similarity index 82%
rename from src/hooks/useFeedbackVideo.ts
rename to src/pages/feedback/useFeedbackVideo.ts
index 8f1d130b..2b2554c2 100644
--- a/src/hooks/useFeedbackVideo.ts
+++ b/src/pages/feedback/useFeedbackVideo.ts
@@ -16,7 +16,7 @@ import { formatVideoTimestamp } from '@/utils/format';
  * 테스트용 하드코딩 비디오 ID
  * DB에서 ready 상태인 9초 영상 (id=26, project_id=136)
  */
-const TEST_VIDEO_ID = 26;
+const TEST_VIDEO_ID = '26';
 
 export function useFeedbackVideo() {
   // projectId는 라우트에서 추출하지만 현재 테스트 모드에서는 사용하지 않음
@@ -72,24 +72,18 @@ export function useFeedbackVideo() {
         if (cancelled) return;
 
         // 서버 응답 구조: { resultType: "SUCCESS", success: { video: {...}, timeline: {...} } }
-        const successData = response.data?.success;
-        const serverVideo = successData?.video ?? successData;
-
-        // 서버 응답에서 비디오 URL 추출 (hlsMasterUrl이 실제 필드명)
-        let videoUrl =
-          serverVideo?.hlsMasterUrl ||
-          serverVideo?.streamFileUrl ||
-          serverVideo?.videoUrl ||
-          serverVideo?.streamUrl ||
-          serverVideo?.url ||
-          serverVideo?.playbackUrl ||
-          '';
+        if (response.data.resultType !== 'SUCCESS') {
+          throw new Error(response.data.error.reason);
+        }
+        const { video: serverVideo } = response.data.success;
+
+        // 서버 응답에서 비디오 URL 추출
+        let videoUrl = serverVideo.hlsMasterUrl || '';
 
         // 개발 환경에서 CDN CORS 우회를 위해 proxy 사용
         if (videoUrl && import.meta.env.DEV) {
           try {
             const url = new URL(videoUrl);
-            // hostname이 정확히 cdn.ttorang.com인 경우만 프록시 사용
             if (url.hostname === 'cdn.ttorang.com') {
               videoUrl = `/cdn-proxy${url.pathname}${url.search}`;
             }
@@ -101,21 +95,13 @@ export function useFeedbackVideo() {
         const videoData = {
           videoId: TEST_VIDEO_ID,
           videoUrl,
-          title: serverVideo?.title || '테스트 영상',
-          duration: serverVideo?.durationSeconds || serverVideo?.duration || 9,
+          title: serverVideo.title || '테스트 영상',
+          duration: serverVideo.durationSeconds || 9,
           comments: [],
           reactionEvents: [],
           feedbacks: [],
         };
 
-        console.log('[useFeedbackVideo] 서버 비디오 로드:', {
-          videoId: TEST_VIDEO_ID,
-          videoUrl,
-          title: videoData.title,
-          duration: videoData.duration,
-          fullResponse: response.data,
-        });
-
         initVideo(videoData);
       } catch (error) {
         console.error('[useFeedbackVideo] 비디오 로드 실패, 폴백 사용:', error);
diff --git a/src/stores/slideStore.ts b/src/stores/slideStore.ts
index f842a72d..2c3051dd 100644
--- a/src/stores/slideStore.ts
+++ b/src/stores/slideStore.ts
@@ -13,7 +13,7 @@ import { getExclusiveCounterpart } from '@/constants/reaction';
 import { MOCK_CURRENT_USER } from '@/mocks/users';
 import type { Comment } from '@/types/comment';
 import type { ReactionType } from '@/types/script';
-import type { SlideListItem } from '@/types/slide';
+import type { SlideDetail } from '@/types/slide';
 import {
   addReplyToFlat,
   createComment,
@@ -23,10 +23,10 @@ import {
 } from '@/utils/comment';
 
 interface SlideState {
-  slide: SlideListItem | null;
+  slide: SlideDetail | null;
 
-  initSlide: (slide: SlideListItem) => void;
-  updateSlide: (updates: Partial<SlideListItem>) => void;
+  initSlide: (slide: SlideDetail) => void;
+  updateSlide: (updates: Partial<SlideDetail>) => void;
   updateScript: (script: string) => void;
   deleteComment: (id: string) => void;
   updateComment: (id: string, content: string) => void;
diff --git a/src/stores/videoFeedbackStore.ts b/src/stores/videoFeedbackStore.ts
index dc097e79..72450747 100644
--- a/src/stores/videoFeedbackStore.ts
+++ b/src/stores/videoFeedbackStore.ts
@@ -69,11 +69,8 @@ interface VideoFeedbackState {
   updateCommentServerId: (commentId: string, serverId: string) => void;
 }
 
-/**
- * 플랫 배열에서 ID로 댓글 존재 여부 확인
- */
-function hasCommentId(comments: Comment[], id: string): boolean {
-  return comments.some((c) => c.id === id);
+function hasCommentId(flat: Comment[], commentId: string) {
+  return flat.some((c) => c.commentId === commentId);
 }
 
 // function getAllComments(feedbacks: any[]): Comment[] {
@@ -292,7 +289,7 @@ export const useVideoFeedbackStore = create<VideoFeedbackState>()(
 
           // 플랫 구조: 단순히 id가 일치하는 댓글 업데이트
           const updatedComments = targetFeedback.comments.map((c) =>
-            c.id === commentId ? { ...c, serverId } : c,
+            c.commentId === commentId ? { ...c, serverId } : c,
           );
 
           const updatedFeedbacks = state.video.feedbacks.map((f) =>
diff --git a/src/types/comment.ts b/src/types/comment.ts
index c4acd989..c7095a52 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -1,5 +1,5 @@
 export interface Comment {
-  id: string;
+  commentId: string;
   /** API 의견 ID (피드백 화면에서 prefixed id를 쓰는 경우 원본 ID) */
   serverId?: string;
   /** 의견이 속한 슬라이드 ID (피드백 화면에서 필요) */
diff --git a/src/types/index.ts b/src/types/index.ts
index d20e60ae..6f6516b0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -33,7 +33,7 @@ export type {
 } from './share';
 
 // Slide
-export type { SlideListItem } from './slide';
+export type { SlideDetail, SlideListItem } from './slide';
 
 // Theme
 export type { ThemeMode } from './theme';
diff --git a/src/types/presentation.ts b/src/types/presentation.ts
index 14f76625..7e43618d 100644
--- a/src/types/presentation.ts
+++ b/src/types/presentation.ts
@@ -29,13 +29,3 @@ export interface PresentationListResponse {
   limit: number;
   totalPages: number;
 }
-
-/**
- * API 응답 타입: 프로젝트 수정 응답
- */
-export interface ProjectUpdateResponse {
-  projectId: string;
-  title: string;
-  userName: string;
-  updatedAt: string;
-}
diff --git a/src/types/recording.ts b/src/types/recording.ts
index 18c6bbb9..7b96d9e5 100644
--- a/src/types/recording.ts
+++ b/src/types/recording.ts
@@ -1,4 +1,4 @@
-import type { SlideListItem } from './slide';
+import type { SlideDetail } from './slide';
 
 /**
  * 녹화용 슬라이드 데이터
@@ -28,7 +28,7 @@ export interface RecordingProject {
  * SlideListItem 배열을 RecordingSlide 배열로 변환
  */
 export function convertToRecordingSlides(
-  slides: SlideListItem[],
+  slides: SlideDetail[],
   projectId: string,
 ): RecordingSlide[] {
   return slides.map((slide, index) => ({
@@ -46,7 +46,7 @@ export function convertToRecordingSlides(
 export function createRecordingProject(
   projectId: string,
   projectTitle: string,
-  slides: SlideListItem[],
+  slides: SlideDetail[],
 ): RecordingProject {
   return {
     projectId,
diff --git a/src/types/slide.ts b/src/types/slide.ts
index 08c81739..213bacc6 100644
--- a/src/types/slide.ts
+++ b/src/types/slide.ts
@@ -14,14 +14,20 @@ export interface SlideListItem {
   imageUrl: string;
   createdAt: string;
   updatedAt: string;
-  /** 프론트엔드 확장용 - 대본 */
+  /** 영상 피드백에서 슬라이드 시작 시간 (초) */
+  startTime?: number;
+}
+
+/**
+ * 프론트엔드 확장 타입: 슬라이드 상세/편집 화면용
+ */
+export interface SlideDetail extends SlideListItem {
+  /** 대본 */
   script?: string;
-  /** 프론트엔드 확장용 - 댓글 목록 */
+  /** 댓글 목록 */
   comments?: Comment[];
-  /** 프론트엔드 확장용 - 수정 기록 */
+  /** 수정 기록 */
   history?: GetScriptVersionHistoryResponseDto[];
-  /** 프론트엔드 확장용 - 이모지 반응 */
+  /** 이모지 반응 */
   emojiReactions?: Reaction[];
-  /** 영상 피드백에서 슬라이드 시작 시간 (초) */
-  startTime?: number;
 }
diff --git a/src/types/video.ts b/src/types/video.ts
index 1aadd435..7fc2aeec 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -58,7 +58,7 @@ export interface VideoTimestampFeedback {
  * 전체 영상의 모든 타임스탬프 피드백을 관리합니다.
  */
 export interface VideoFeedback {
-  videoId: number; // 서버 API와 일관성 유지
+  videoId: string; // 서버 API와 일관성 유지
   videoUrl: string;
   title: string;
   duration: number; // 초 단위
diff --git a/src/types/websocket.ts b/src/types/websocket.ts
index 9ee27aaf..5c00b5d1 100644
--- a/src/types/websocket.ts
+++ b/src/types/websocket.ts
@@ -35,7 +35,7 @@ export interface RoomsListResponse {
  */
 export interface NewCommentPayload {
   commentId: string;
-  videoId: number;
+  videoId: string;
   userId: string;
   content: string;
   timestamp: number; // 비디오 타임스탬프 (초 단위)
@@ -50,7 +50,7 @@ export interface CommentDeletedPayload {
  */
 export interface NewReactionPayload {
   reactionId: string;
-  videoId: number;
+  videoId: string;
   userId: string;
   emoji: string;
   timestamp: number; // 백엔드에서 실제로는 timestampMs를 timestamp라는 이름으로 전송 (밀리초 단위)
@@ -61,7 +61,7 @@ export interface ReactionRemovedPayload {
 }
 
 export interface ReactionCountUpdatedPayload {
-  videoId: number; // number로 변경 (API와 일관성)
+  videoId: string;
   counts: Record<string, number>;
 }
 
diff --git a/src/utils/comment.ts b/src/utils/comment.ts
index 3ea07a54..8b163fd5 100644
--- a/src/utils/comment.ts
+++ b/src/utils/comment.ts
@@ -14,7 +14,7 @@ export function createComment(input: CreateCommentInput): Comment {
   const isReply = Boolean(input.parentId);
 
   return {
-    id: generateCommentId(),
+    commentId: generateCommentId(),
     userId: input.userId ?? 'unknown',
     content: input.content.trim(),
     createdAt: new Date().toISOString(),
@@ -38,7 +38,7 @@ export function addReplyToFlat(
 ): { comments: Comment[]; newComment: Comment } {
   const newReply = createComment({ ...input, parentId });
 
-  const parentIndex = comments.findIndex((c) => c.id === parentId);
+  const parentIndex = comments.findIndex((c) => c.commentId === parentId);
   if (parentIndex === -1) return { comments, newComment: newReply };
 
   const result = [...comments];
@@ -47,62 +47,17 @@ export function addReplyToFlat(
 }
 
 /**
- * 중첩 배열에 답글 추가 (부모의 replies 배열에 추가)
- *
- * FeedbackSlidePage(Comment) 방식: 중첩 배열 구조
+ * 플랫 배열에서 특정 댓글의 content를 업데이트
  */
-export function addReplyToTree(
-  comments: Comment[],
-  parentId: string,
-  input: Omit<CreateCommentInput, 'parentId'>,
-): Comment[] {
-  const newReply = createComment({ ...input, parentId });
-
-  const addToTree = (list: Comment[]): Comment[] => {
-    return list.map((node) => {
-      if (node.id === parentId) {
-        return { ...node, replies: [...(node.replies ?? []), newReply] };
-      }
-      if (node.replies && node.replies.length > 0) {
-        return { ...node, replies: addToTree(node.replies) };
-      }
-      return node;
-    });
-  };
-
-  return addToTree(comments);
+export function updateInFlat(comments: Comment[], targetId: string, content: string): Comment[] {
+  return comments.map((c) => (c.commentId === targetId ? { ...c, content } : c));
 }
 
 /**
  * 플랫 배열에서 댓글 삭제 (부모 삭제 시 자식도 함께 삭제)
  */
 export function deleteFromFlat(comments: Comment[], targetId: string): Comment[] {
-  return comments.filter((c) => c.id !== targetId && c.parentId !== targetId);
-}
-
-/**
- * 플랫 배열에서 댓글 수정
- */
-export function updateInFlat(comments: Comment[], targetId: string, content: string): Comment[] {
-  return comments.map((c) => (c.id === targetId ? { ...c, content: content.trim() } : c));
-}
-
-/**
- * 중첩 배열에서 댓글 삭제
- */
-export function deleteFromTree(comments: Comment[], targetId: string): Comment[] {
-  const removeFromTree = (list: Comment[]): Comment[] => {
-    return list
-      .filter((node) => node.id !== targetId)
-      .map((node) => {
-        if (node.replies && node.replies.length > 0) {
-          return { ...node, replies: removeFromTree(node.replies) };
-        }
-        return node;
-      });
-  };
-
-  return removeFromTree(comments);
+  return comments.filter((c) => c.commentId !== targetId && c.parentId !== targetId);
 }
 
 /**
@@ -116,12 +71,12 @@ export function flatToTree(comments: Comment[]): Comment[] {
 
   // 1. 모든 댓글을 맵에 저장 (replies 초기화)
   for (const comment of comments) {
-    map.set(comment.id, { ...comment, replies: [] });
+    map.set(comment.commentId, { ...comment, replies: [] });
   }
 
   // 2. 부모-자식 관계 연결
   for (const comment of comments) {
-    const node = map.get(comment.id)!;
+    const node = map.get(comment.commentId)!;
     if (comment.parentId) {
       const parent = map.get(comment.parentId);
       if (parent) {
@@ -148,7 +103,7 @@ export function treeToFlat(comments: Comment[]): Comment[] {
       const { replies, ...rest } = comment;
       result.push({ ...rest, parentId, isReply: Boolean(parentId) });
       if (replies && replies.length > 0) {
-        flatten(replies, comment.id);
+        flatten(replies, comment.commentId);
       }
     }
   };
@@ -167,7 +122,7 @@ export function treeToFlat(comments: Comment[]): Comment[] {
  * @returns 최상위 부모 댓글 ID (parentId가 없는 댓글)
  */
 export function findRootParentId(comments: Comment[], commentId: string): string {
-  const comment = comments.find((c) => c.id === commentId);
+  const comment = comments.find((c) => c.commentId === commentId);
 
   // 댓글을 찾지 못하거나 이미 최상위 댓글이면 자기 자신 반환
   if (!comment || !comment.parentId) {