From b0089a713268070b288a7e494d9cf4d06fcd38d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A1=9C=EB=A1=9C?= <pretocki3@gmail.com>
Date: Sun, 22 Feb 2026 13:01:56 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20title=20nullable=20=ED=83=80=EC=9E=85=20=EC=A0=95=EB=A6=AC?=
 =?UTF-8?q?=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dto/analytics.dto.ts         |  6 +++---
 src/api/dto/scripts.dto.ts           |  1 +
 src/api/dto/slides.dto.ts            |  6 +++---
 src/api/dto/video.dto.ts             |  1 +
 src/components/slide/SlideViewer.tsx |  3 ++-
 src/hooks/UseSlideSelectors.test.tsx | 10 ++++++++--
 src/hooks/useSlideSelectors.ts       |  3 ++-
 src/types/share.ts                   |  2 +-
 src/types/slide.ts                   |  2 +-
 9 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/api/dto/analytics.dto.ts b/src/api/dto/analytics.dto.ts
index 78f54555..8c78c3f5 100644
--- a/src/api/dto/analytics.dto.ts
+++ b/src/api/dto/analytics.dto.ts
@@ -51,7 +51,7 @@ export interface RecordExitRequestDto {
 export interface SlideAnalyticsDto {
   slideId: string;
   slideNum: number;
-  title: string;
+  title: string | null;
   viewCount: number;
   exitCount: number;
   exitRate: number;
@@ -117,7 +117,7 @@ export interface ReadPresentationAnalyticsSummaryDto {
 export interface SlideRetentionDto {
   slideId: string;
   slideNum: number;
-  title: string;
+  title: string | null;
   sessionCount: number;
   retentionRate: number;
 }
@@ -185,7 +185,7 @@ export interface RecentCommentUserDto {
 export interface RecentCommentSlideDto {
   slideId: string;
   slideNum: number;
-  title: string;
+  title: string | null;
   imageUrl: string;
 }
 
diff --git a/src/api/dto/scripts.dto.ts b/src/api/dto/scripts.dto.ts
index f896f669..509d9139 100644
--- a/src/api/dto/scripts.dto.ts
+++ b/src/api/dto/scripts.dto.ts
@@ -43,6 +43,7 @@ export interface RestoreScriptResponseDto {
  */
 export interface ProjectScriptItemDto {
   slideId: string;
+  title?: string | null;
   scriptText: string;
 }
 
diff --git a/src/api/dto/slides.dto.ts b/src/api/dto/slides.dto.ts
index 969d28df..2b34447b 100644
--- a/src/api/dto/slides.dto.ts
+++ b/src/api/dto/slides.dto.ts
@@ -4,7 +4,7 @@
 export interface CreateSlideResponseDto {
   slideId: string;
   projectId: string;
-  title: string;
+  title: string | null;
   slideNum: number;
   imageUrl: string;
   createdAt: string;
@@ -24,7 +24,7 @@ export interface UpdateSlideTitleRequestDto {
 export interface GetSlideResponseDto {
   slideId: string;
   projectId: string;
-  title: string;
+  title: string | null;
   slideNum: number;
   imageUrl: string;
   prevSlideId: string | null;
@@ -37,7 +37,7 @@ export interface GetSlideResponseDto {
  */
 export interface UpdateSlideResponseDto {
   slideId: string;
-  title: string;
+  title: string | null;
   slideNum: number;
   imageUrl: string;
   updatedAt: string;
diff --git a/src/api/dto/video.dto.ts b/src/api/dto/video.dto.ts
index 4b92e968..c7e663e5 100644
--- a/src/api/dto/video.dto.ts
+++ b/src/api/dto/video.dto.ts
@@ -227,6 +227,7 @@ export interface ReadVideoCommentsAllResponseDto {
  */
 export interface VideoSlideTimelineItemDto {
   slideId: string;
+  title: string | null;
   timestampMs: number;
 }
 
diff --git a/src/components/slide/SlideViewer.tsx b/src/components/slide/SlideViewer.tsx
index 18e606c3..d8e37034 100644
--- a/src/components/slide/SlideViewer.tsx
+++ b/src/components/slide/SlideViewer.tsx
@@ -17,6 +17,7 @@ interface SlideViewerProps {
 export default function SlideViewer({ isLoading }: SlideViewerProps) {
   const thumb = useSlideThumb();
   const title = useSlideTitle();
+  const imageAlt = title ?? '슬라이드';
 
   return (
     <section className="flex flex-1 min-h-0 flex-col justify-center overflow-hidden">
@@ -30,7 +31,7 @@ export default function SlideViewer({ isLoading }: SlideViewerProps) {
             <div className="relative mx-auto w-fit shadow-sm overflow-hidden rounded-lg">
               <SlideImage
                 src={thumb}
-                alt={title}
+                alt={imageAlt}
                 maxHeight={SLIDE_MAX_HEIGHT}
                 loading="eager"
                 decoding="async"
diff --git a/src/hooks/UseSlideSelectors.test.tsx b/src/hooks/UseSlideSelectors.test.tsx
index 55fef620..8267f6fb 100644
--- a/src/hooks/UseSlideSelectors.test.tsx
+++ b/src/hooks/UseSlideSelectors.test.tsx
@@ -26,9 +26,9 @@ describe('useSlideSelectors', () => {
       expect(result.current).toBe('');
     });
 
-    it('useSlideTitle returns empty string', () => {
+    it('useSlideTitle returns null', () => {
       const { result } = renderHook(() => useSlideTitle());
-      expect(result.current).toBe('');
+      expect(result.current).toBeNull();
     });
 
     it('useSlideThumb returns empty string', () => {
@@ -70,6 +70,12 @@ describe('useSlideSelectors', () => {
       expect(result.current).toBe('Test Title');
     });
 
+    it('useSlideTitle preserves null title', () => {
+      useSlideStore.getState().initSlide(createMockSlide({ title: null }));
+      const { result } = renderHook(() => useSlideTitle());
+      expect(result.current).toBeNull();
+    });
+
     it('useSlideThumb returns imageUrl', () => {
       const { result } = renderHook(() => useSlideThumb());
       expect(result.current).toBe('https://img.url');
diff --git a/src/hooks/useSlideSelectors.ts b/src/hooks/useSlideSelectors.ts
index 4acc5be9..177bc477 100644
--- a/src/hooks/useSlideSelectors.ts
+++ b/src/hooks/useSlideSelectors.ts
@@ -15,7 +15,8 @@ const EMPTY_COMMENTS: Comment[] = [];
 export const useSlideId = () => useSlideStore((state) => state.slide?.slideId ?? '');
 
 /** 슬라이드 제목 구독 */
-export const useSlideTitle = () => useSlideStore((state) => state.slide?.title ?? '');
+export const useSlideTitle = () =>
+  useSlideStore((state) => (state.slide ? state.slide.title : null));
 
 /** 슬라이드 썸네일 구독 */
 export const useSlideThumb = () => useSlideStore((state) => state.slide?.imageUrl ?? '');
diff --git a/src/types/share.ts b/src/types/share.ts
index 309b3550..8c8ab572 100644
--- a/src/types/share.ts
+++ b/src/types/share.ts
@@ -58,7 +58,7 @@ export type ShareableVideosResponse = ApiResponse<ShareableVideosData>;
 export interface SharedPresentationSlide {
   slideId: string;
   slideNum: number;
-  title: string;
+  title: string | null;
   imageUrl: string;
   scriptText: string;
   timestampMs: number;
diff --git a/src/types/slide.ts b/src/types/slide.ts
index d8156640..75b9b00b 100644
--- a/src/types/slide.ts
+++ b/src/types/slide.ts
@@ -10,7 +10,7 @@ export interface SlideListItem {
   script: string;
   slideId: string;
   projectId: string;
-  title: string;
+  title: string | null;
   slideNum: number;
   imageUrl: string;
   createdAt: string;

From eea061cf0ba67b702a8e4e815a40abd78eebedd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A1=9C=EB=A1=9C?= <pretocki3@gmail.com>
Date: Sun, 22 Feb 2026 13:02:14 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EB=AA=A9=20=EB=A0=8C=EB=8D=94=EB=A7=81/=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=91=20=EB=8F=99=EC=9E=91=20=ED=86=B5=EC=9D=BC=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comment/Comment.tsx            |  3 +-
 src/components/common/TitleEditorPopover.tsx  | 16 ++--
 src/components/feedback/SlideViewer.tsx       |  7 +-
 .../feedback/slide/SlideInfoPanel.tsx         |  3 +-
 .../feedback/video/SlideWebcamStage.tsx       |  3 +-
 .../insight/DropOffAnalysisSection.tsx        |  3 +-
 .../insight/RecentCommentsSection.test.tsx    | 46 ++++++++++++
 .../insight/RecentCommentsSection.tsx         |  8 +-
 src/components/slide/SlideThumbnail.tsx       |  3 +-
 .../slide/script/ScriptBulkEditModal.test.tsx | 75 +++++++++++++++++++
 .../slide/script/ScriptBulkEditModal.tsx      |  7 +-
 src/components/slide/script/SlideTitle.tsx    | 41 ++++++++--
 src/hooks/useInsightPageModel.ts              |  9 ++-
 src/mocks/analytics.ts                        |  3 +-
 src/pages/FeedbackSlidePage.tsx               |  5 +-
 src/pages/feedback/useFeedbackVideo.ts        | 10 ++-
 src/types/recording.ts                        |  4 +-
 src/utils/sharedContent.ts                    |  3 +-
 src/utils/slideTitle.test.ts                  | 18 +++++
 src/utils/slideTitle.ts                       | 19 +++++
 20 files changed, 249 insertions(+), 37 deletions(-)
 create mode 100644 src/components/slide/script/ScriptBulkEditModal.test.tsx
 create mode 100644 src/utils/slideTitle.test.ts
 create mode 100644 src/utils/slideTitle.ts

diff --git a/src/components/comment/Comment.tsx b/src/components/comment/Comment.tsx
index b2362ec5..f75a8618 100644
--- a/src/components/comment/Comment.tsx
+++ b/src/components/comment/Comment.tsx
@@ -18,6 +18,7 @@ import { UserAvatar } from '@/components/common';
 import { useAuthStore } from '@/stores/authStore';
 import type { Comment as CommentType } from '@/types/comment';
 import { formatRelativeTime, formatVideoTimestamp } from '@/utils/format';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import { useCommentContext } from './CommentContext';
 import CommentInput from './CommentInput';
@@ -119,7 +120,7 @@ function Comment({ comment, isIndented = false, rootCommentId }: CommentProps) {
   const commentRef = comment.ref;
   const refLabel = commentRef
     ? commentRef.kind === 'slide'
-      ? `슬라이드 ${commentRef.index + 1}`
+      ? getSlideTitle(undefined, commentRef.index + 1)
       : formatVideoTimestamp(commentRef.seconds)
     : null;
 
diff --git a/src/components/common/TitleEditorPopover.tsx b/src/components/common/TitleEditorPopover.tsx
index 9b35fd73..4962c306 100644
--- a/src/components/common/TitleEditorPopover.tsx
+++ b/src/components/common/TitleEditorPopover.tsx
@@ -5,7 +5,7 @@
  * readOnlyContent가 제공되면 InfoIcon + 정보 팝오버를 표시하고,
  * 없으면 ArrowDownIcon + 편집 팝오버를 표시합니다.
  */
-import { type ReactNode, useEffect, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 
 import clsx from 'clsx';
 
@@ -17,6 +17,8 @@ import { TextField } from './TextField';
 
 interface TitleEditorPopoverProps {
   title: string;
+  inputTitle?: string;
+  inputPlaceholder?: string;
   onSave?: (newTitle: string, close: () => void) => void;
   readOnlyContent?: ReactNode;
   isCollapsed?: boolean;
@@ -28,6 +30,8 @@ interface TitleEditorPopoverProps {
 
 export function TitleEditorPopover({
   title,
+  inputTitle,
+  inputPlaceholder,
   onSave,
   readOnlyContent,
   isCollapsed = false,
@@ -36,11 +40,9 @@ export function TitleEditorPopover({
   titleClassName = 'max-w-60 truncate',
   showOnMobile = false,
 }: TitleEditorPopoverProps) {
-  const [editTitle, setEditTitle] = useState(title);
-
-  useEffect(() => {
-    setEditTitle(title);
-  }, [title]);
+  const resolvedInputTitle = inputTitle ?? title;
+  const inputResetKey = `${resolvedInputTitle}::${inputPlaceholder ?? ''}`;
+  const [editTitle, setEditTitle] = useState(resolvedInputTitle);
 
   if (readOnlyContent) {
     return (
@@ -69,6 +71,7 @@ export function TitleEditorPopover({
 
   return (
     <Popover
+      key={inputResetKey}
       trigger={({ isOpen }) => (
         <button
           type="button"
@@ -107,6 +110,7 @@ export function TitleEditorPopover({
             disabled={isPending}
             aria-label={ariaLabel}
             className="h-9 flex-1 text-sm"
+            placeholder={inputPlaceholder}
             spellCheck={false}
           />
           <button
diff --git a/src/components/feedback/SlideViewer.tsx b/src/components/feedback/SlideViewer.tsx
index a60050f0..065e8345 100644
--- a/src/components/feedback/SlideViewer.tsx
+++ b/src/components/feedback/SlideViewer.tsx
@@ -3,6 +3,7 @@
  * @description 피드백 화면 좌측 슬라이드 뷰어
  */
 import type { SlideListItem } from '@/types/slide';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import SlideInfoPanel from './slide/SlideInfoPanel';
 
@@ -39,7 +40,11 @@ export default function SlideViewer({
     <div className="flex-1 flex items-start justify-center min-w-0 bg-gray-100">
       <div className="flex flex-col max-w-full max-h-full">
         <div className="flex items-center justify-center">
-          <img src={slide.imageUrl} alt={slide.title} className="max-w-full max-h-full shadow-lg" />
+          <img
+            src={slide.imageUrl}
+            alt={getSlideTitle(slide.title, slideIndex + 1)}
+            className="max-w-full max-h-full shadow-lg"
+          />
         </div>
 
         <SlideInfoPanel
diff --git a/src/components/feedback/slide/SlideInfoPanel.tsx b/src/components/feedback/slide/SlideInfoPanel.tsx
index 67a33ce3..c1dfd8b7 100644
--- a/src/components/feedback/slide/SlideInfoPanel.tsx
+++ b/src/components/feedback/slide/SlideInfoPanel.tsx
@@ -3,6 +3,7 @@
  * @description 슬라이드 제목과 대본을 표시하는 패널
  */
 import SlideTitle from '@/components/slide/script/SlideTitle';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import SlideNavigation from '../SlideNavigation';
 
@@ -29,7 +30,7 @@ export default function SlideInfoPanel({
     <div className="shrink-0 flex flex-col gap-4 px-5 py-4">
       <div className="flex justify-between items-center gap-4">
         <div className="min-w-0">
-          <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} readOnly />
+          <SlideTitle fallbackTitle={getSlideTitle(undefined, slideIndex + 1)} readOnly />
         </div>
 
         <SlideNavigation
diff --git a/src/components/feedback/video/SlideWebcamStage.tsx b/src/components/feedback/video/SlideWebcamStage.tsx
index 877d4fcd..d127303e 100644
--- a/src/components/feedback/video/SlideWebcamStage.tsx
+++ b/src/components/feedback/video/SlideWebcamStage.tsx
@@ -19,6 +19,7 @@ import VideoPlaybackBar from '@/components/feedback/video/VideoPlaybackBar';
 import { useVideoSync } from '@/hooks/useVideoSync';
 import type { SlideListItem } from '@/types/slide';
 import type { SegmentHighlight } from '@/types/video';
+import { getSlideTitle } from '@/utils/slideTitle';
 import { getSlideIndexFromTime } from '@/utils/video';
 
 const LAYOUT_STORAGE_KEY = 'feedback-video-layout';
@@ -329,7 +330,7 @@ export default function SlideWebcamStage({
           >
             <img
               src={activeSlide.imageUrl}
-              alt={`슬라이드 ${activeIndex + 1} - ${activeSlide.title}`}
+              alt={`슬라이드 ${activeIndex + 1} - ${getSlideTitle(activeSlide.title, activeIndex + 1)}`}
               className={clsx(
                 'h-full w-full',
                 // 슬라이드는 메인일 때 전체 보기(contain), 작은 박스일 땐 꽉 차게(cover)
diff --git a/src/components/insight/DropOffAnalysisSection.tsx b/src/components/insight/DropOffAnalysisSection.tsx
index 218aa791..43aeb4cc 100644
--- a/src/components/insight/DropOffAnalysisSection.tsx
+++ b/src/components/insight/DropOffAnalysisSection.tsx
@@ -1,4 +1,5 @@
 import type { DropOffSlide, DropOffTime } from '@/types/insight';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import SlideThumb from './SlideThumb';
 
@@ -131,7 +132,7 @@ export default function DropOffAnalysisSection({
               >
                 {renderSlideThumb(
                   item.slideIndex,
-                  `슬라이드 ${item.slideIndex + 1} 썸네일`,
+                  `${getSlideTitle(undefined, item.slideIndex + 1)} 썸네일`,
                   'h-12 w-20 shrink-0 rounded object-cover md:h-16.75 md:w-30',
                   'h-12 w-20 shrink-0 rounded bg-gray-200 md:h-[67px] md:w-[120px]',
                 )}
diff --git a/src/components/insight/RecentCommentsSection.test.tsx b/src/components/insight/RecentCommentsSection.test.tsx
index 78ade0df..3da506bb 100644
--- a/src/components/insight/RecentCommentsSection.test.tsx
+++ b/src/components/insight/RecentCommentsSection.test.tsx
@@ -37,4 +37,50 @@ describe('RecentCommentsSection', () => {
       'https://example.com/avatar.png',
     );
   });
+
+  it('renders slide title when present and falls back to 슬라이드 N when title is null', () => {
+    const recentCommentsData: ReadRecentCommentListResponseDto = {
+      comments: [
+        {
+          commentId: 'comment-1',
+          content: '좋은 발표였어요.',
+          timestampMs: 42000,
+          createdAt: '2026-02-01T00:00:00.000Z',
+          user: {
+            userId: 'user-1',
+            nickName: 'alex',
+            name: 'Alex',
+          },
+          slide: {
+            slideId: 'slide-1',
+            slideNum: 1,
+            title: '도입',
+            imageUrl: 'https://example.com/slide-1.png',
+          },
+        },
+        {
+          commentId: 'comment-2',
+          content: '두 번째 슬라이드 코멘트',
+          timestampMs: 52000,
+          createdAt: '2026-02-01T00:00:01.000Z',
+          user: {
+            userId: 'user-2',
+            nickName: 'jamie',
+            name: 'Jamie',
+          },
+          slide: {
+            slideId: 'slide-2',
+            slideNum: 2,
+            title: null,
+            imageUrl: 'https://example.com/slide-2.png',
+          },
+        },
+      ],
+    };
+
+    render(<RecentCommentsSection hasVideo recentCommentsData={recentCommentsData} />);
+
+    expect(screen.getByText('도입')).toBeInTheDocument();
+    expect(screen.getByText('슬라이드 2')).toBeInTheDocument();
+  });
 });
diff --git a/src/components/insight/RecentCommentsSection.tsx b/src/components/insight/RecentCommentsSection.tsx
index 2abcfa9c..839962ba 100644
--- a/src/components/insight/RecentCommentsSection.tsx
+++ b/src/components/insight/RecentCommentsSection.tsx
@@ -2,6 +2,7 @@
 import type { ReadRecentCommentListResponseDto } from '@/api/dto/analytics.dto';
 import { RecentCommentItem } from '@/components/insight';
 import { formatVideoTimestamp } from '@/utils/format';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 const thumbBase = 'bg-gray-100 rounded-lg aspect-video';
 const sampleComments = [
@@ -47,7 +48,7 @@ export function RecentCommentsSection({
         <div key={comment.commentId} className={idx > 0 ? 'hidden md:block' : ''}>
           <RecentCommentItem
             user={comment.user}
-            slideLabel={`슬라이드 ${comment.slideNum}`}
+            slideLabel={getSlideTitle(undefined, comment.slideNum)}
             time={comment.time}
             text={comment.text}
             thumbFallbackClassName={thumbBase}
@@ -64,6 +65,9 @@ export function RecentCommentsSection({
       <>
         {recentCommentsData?.comments.slice(0, 5).map((comment) => {
           const seconds = Math.max(0, comment.timestampMs / 1000);
+          const slideLabel = comment.slide
+            ? getSlideTitle(comment.slide.title, comment.slide.slideNum)
+            : '전체';
           return (
             <RecentCommentItem
               key={comment.commentId}
@@ -71,7 +75,7 @@ export function RecentCommentsSection({
               userProfileImage={
                 comment.user.profileImage ?? comment.user.profileImageUrl ?? undefined
               }
-              slideLabel={comment.slide ? `슬라이드 ${comment.slide.slideNum}` : '전체'}
+              slideLabel={slideLabel}
               time={formatVideoTimestamp(seconds)}
               text={comment.content}
               thumbUrl={comment.slide?.imageUrl}
diff --git a/src/components/slide/SlideThumbnail.tsx b/src/components/slide/SlideThumbnail.tsx
index ea3f99d8..8353c32e 100644
--- a/src/components/slide/SlideThumbnail.tsx
+++ b/src/components/slide/SlideThumbnail.tsx
@@ -12,6 +12,7 @@ import clsx from 'clsx';
 import { SlideImage } from '@/components/common';
 import { getTabPath } from '@/constants/navigation';
 import type { SlideListItem } from '@/types/slide';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 interface SlideThumbnailProps {
   /** 슬라이드 데이터 */
@@ -71,7 +72,7 @@ export default function SlideThumbnail({
       <div className="relative flex-1 rounded overflow-hidden bg-gray-200">
         <SlideImage
           src={slide.imageUrl}
-          alt={`슬라이드 ${index + 1}: ${slide.title}`}
+          alt={`슬라이드 ${index + 1}: ${getSlideTitle(slide.title, index + 1)}`}
           loading="lazy"
           decoding="async"
           fetchPriority="low"
diff --git a/src/components/slide/script/ScriptBulkEditModal.test.tsx b/src/components/slide/script/ScriptBulkEditModal.test.tsx
new file mode 100644
index 00000000..2e6d3d2c
--- /dev/null
+++ b/src/components/slide/script/ScriptBulkEditModal.test.tsx
@@ -0,0 +1,75 @@
+import { createRef } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { ScriptBulkEditPreviewItem } from '@/hooks/useScriptBulkEdit';
+
+import ScriptBulkEditModal from './ScriptBulkEditModal';
+
+const baseProps = {
+  isOpen: true,
+  isSaving: false,
+  isPreparingModal: false,
+  selectedFileName: undefined,
+  fileInputRef: createRef<HTMLInputElement>(),
+  onClose: vi.fn(),
+  onSave: vi.fn(),
+  onOpenFilePicker: vi.fn(),
+  onFileChange: vi.fn(),
+  onScriptChange: vi.fn(),
+};
+
+const createPreviewItem = (
+  overrides?: Partial<ScriptBulkEditPreviewItem>,
+): ScriptBulkEditPreviewItem => ({
+  slide: {
+    slideId: '1',
+    projectId: 'p1',
+    title: null,
+    slideNum: 1,
+    imageUrl: 'https://example.com/slide-1.png',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    script: '',
+  },
+  index: 0,
+  script: '대본',
+  ...overrides,
+});
+
+describe('ScriptBulkEditModal', () => {
+  it('uses 슬라이드 N when title is null', () => {
+    const previewItems = [
+      createPreviewItem({
+        slide: {
+          ...createPreviewItem().slide,
+          title: null,
+          slideNum: 3,
+        },
+      }),
+    ];
+
+    render(<ScriptBulkEditModal {...baseProps} previewItems={previewItems} />);
+
+    expect(screen.getByText('슬라이드 3')).toBeInTheDocument();
+    expect(screen.getByLabelText('슬라이드 3 대본')).toBeInTheDocument();
+  });
+
+  it('uses server title as-is when title exists', () => {
+    const previewItems = [
+      createPreviewItem({
+        slide: {
+          ...createPreviewItem().slide,
+          title: '도입',
+          slideNum: 1,
+        },
+      }),
+    ];
+
+    render(<ScriptBulkEditModal {...baseProps} previewItems={previewItems} />);
+
+    expect(screen.getByText('도입')).toBeInTheDocument();
+    expect(screen.getByLabelText('도입 대본')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/slide/script/ScriptBulkEditModal.tsx b/src/components/slide/script/ScriptBulkEditModal.tsx
index 43c475ec..4a9a0892 100644
--- a/src/components/slide/script/ScriptBulkEditModal.tsx
+++ b/src/components/slide/script/ScriptBulkEditModal.tsx
@@ -3,6 +3,7 @@ import type { ChangeEvent, RefObject } from 'react';
 import UploadIcon from '@/assets/icons/icon-upload.svg?react';
 import { Modal, SlideImage } from '@/components/common';
 import type { ScriptBulkEditPreviewItem } from '@/hooks/useScriptBulkEdit';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 interface ScriptBulkEditModalProps {
   isOpen: boolean;
@@ -94,7 +95,7 @@ function ScriptBulkEditModal({
                     {slide.imageUrl ? (
                       <SlideImage
                         src={slide.imageUrl}
-                        alt={`${slide.title || `슬라이드 ${slide.slideNum ?? index + 1}`}`}
+                        alt={getSlideTitle(slide.title, slide.slideNum ?? index + 1)}
                         loading="lazy"
                         fetchPriority="low"
                       />
@@ -107,7 +108,7 @@ function ScriptBulkEditModal({
                   <div className="flex w-full flex-col gap-1 md:h-31.5">
                     <div className="flex min-w-0 items-center gap-2 text-xs leading-5 text-gray-700 sm:text-sm">
                       <span className="truncate font-semibold text-gray-800">
-                        {slide.title || `슬라이드 ${slide.slideNum ?? index + 1}`}
+                        {getSlideTitle(slide.title, slide.slideNum ?? index + 1)}
                       </span>
                     </div>
                     <textarea
@@ -115,7 +116,7 @@ function ScriptBulkEditModal({
                       onChange={(event) => onScriptChange(index, event.target.value)}
                       rows={3}
                       className="h-30 w-full resize-none rounded-md border border-gray-200 bg-white p-2 text-xs leading-5 text-gray-800 outline-none focus-visible:border-main sm:p-3 sm:text-sm sm:leading-6 md:h-auto md:min-h-0 md:flex-1"
-                      aria-label={`${slide.title || `슬라이드 ${slide.slideNum ?? index + 1}`} 대본`}
+                      aria-label={`${getSlideTitle(slide.title, slide.slideNum ?? index + 1)} 대본`}
                     />
                   </div>
                 </div>
diff --git a/src/components/slide/script/SlideTitle.tsx b/src/components/slide/script/SlideTitle.tsx
index 70dfd456..864a9cda 100644
--- a/src/components/slide/script/SlideTitle.tsx
+++ b/src/components/slide/script/SlideTitle.tsx
@@ -7,6 +7,8 @@
  */
 import { TitleEditorPopover } from '@/components/common';
 import { useSlideActions, useSlideId, useSlideTitle, useUpdateSlide } from '@/hooks';
+import { useSlideStore } from '@/stores/slideStore';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 interface SlideTitleProps {
   isCollapsed?: boolean;
@@ -21,8 +23,14 @@ export default function SlideTitle({
   readOnly = false,
 }: SlideTitleProps) {
   const title = useSlideTitle();
-  const resolvedFallback = fallbackTitle?.trim() ? fallbackTitle : undefined;
-  const resolvedTitle = title?.trim() ? title : (resolvedFallback ?? '');
+  const slideNum = useSlideStore((state) => state.slide?.slideNum);
+  const resolvedFallback = fallbackTitle?.trim()
+    ? fallbackTitle
+    : slideNum != null
+      ? getSlideTitle(undefined, slideNum)
+      : '';
+  const resolvedTitle =
+    slideNum != null ? getSlideTitle(title, slideNum) : title?.trim() ? title : resolvedFallback;
 
   if (readOnly) {
     return (
@@ -35,7 +43,8 @@ export default function SlideTitle({
   return (
     <SlideTitleEditable
       title={resolvedTitle}
-      fallbackTitle={resolvedFallback}
+      inputTitle={title ?? ''}
+      inputPlaceholder={resolvedFallback || undefined}
       isCollapsed={isCollapsed}
     />
   );
@@ -43,11 +52,13 @@ export default function SlideTitle({
 
 function SlideTitleEditable({
   title,
-  fallbackTitle,
+  inputTitle,
+  inputPlaceholder,
   isCollapsed,
 }: {
   title: string;
-  fallbackTitle?: string;
+  inputTitle: string;
+  inputPlaceholder?: string;
   isCollapsed: boolean;
 }) {
   const slideId = useSlideId();
@@ -57,13 +68,25 @@ function SlideTitleEditable({
 
   const handleSave = (newTitle: string, close: () => void) => {
     const trimmedTitle = newTitle.trim();
-    const nextTitle = trimmedTitle || storeTitle || fallbackTitle;
-    if (!nextTitle) return;
+    const previousTitle = storeTitle;
+    const currentTitle = storeTitle?.trim() ?? '';
+    const nextTitle = trimmedTitle || currentTitle;
+    if (!nextTitle || nextTitle === currentTitle) {
+      close();
+      return;
+    }
 
     updateSlide({ title: nextTitle });
 
     if (slideId) {
-      updateSlideApi({ slideId, data: { title: nextTitle } });
+      updateSlideApi(
+        { slideId, data: { title: nextTitle } },
+        {
+          onError: () => {
+            updateSlide({ title: previousTitle });
+          },
+        },
+      );
     }
 
     close();
@@ -72,6 +95,8 @@ function SlideTitleEditable({
   return (
     <TitleEditorPopover
       title={title}
+      inputTitle={inputTitle}
+      inputPlaceholder={inputPlaceholder}
       onSave={handleSave}
       isCollapsed={isCollapsed}
       ariaLabel="슬라이드 이름 변경"
diff --git a/src/hooks/useInsightPageModel.ts b/src/hooks/useInsightPageModel.ts
index 2476a8d8..2213fc0c 100644
--- a/src/hooks/useInsightPageModel.ts
+++ b/src/hooks/useInsightPageModel.ts
@@ -25,6 +25,7 @@ import { useVideoSlides } from '@/hooks/queries/useVideoSlides';
 import type { DropOffSlide, DropOffTime, SummaryStat } from '@/types/insight';
 import type { SlideListItem } from '@/types/slide';
 import { formatVideoTimestamp } from '@/utils/format';
+import { getSlideTitle } from '@/utils/slideTitle';
 import { getSlideIndexFromTime } from '@/utils/video';
 
 const summaryStatLabels = ['총 조회수', '완독률', '받은 피드백', '평균 시청 시간'] as const;
@@ -173,7 +174,7 @@ export function useInsightPageModel(): InsightModel {
       .map((item) => {
         const slide = slideById.get(item.slideId);
         const slideIndex = slideIndexById.get(item.slideId) ?? Math.max(0, item.slideNum - 1);
-        const title = slide?.title || item.title || `슬라이드 ${slideIndex + 1}`;
+        const title = getSlideTitle(slide?.title ?? item.title, slideIndex + 1);
 
         return {
           slideId: item.slideId,
@@ -228,7 +229,7 @@ export function useInsightPageModel(): InsightModel {
       .sort((a, b) => b.exitCount - a.exitCount)
       .slice(0, 3)
       .map((item) => ({
-        label: `슬라이드 ${item.slideNum}`,
+        label: getSlideTitle(undefined, item.slideNum),
         desc: `${item.exitCount}명 이탈`,
         percent: Math.min(
           100,
@@ -264,7 +265,7 @@ export function useInsightPageModel(): InsightModel {
 
         return {
           time: formatVideoTimestamp(seconds),
-          desc: slideList.length ? `슬라이드 ${slideNum}` : '슬라이드',
+          desc: slideList.length ? getSlideTitle(undefined, slideNum) : '슬라이드',
           count: item.exitCount,
           slideIndex,
           seconds,
@@ -294,7 +295,7 @@ export function useInsightPageModel(): InsightModel {
     return slideRetentionRes.slideRetention.map((item: SlideRetentionDto) => ({
       label: `S${item.slideNum}`, // x축: S1, S2
       value: Math.round(normalizeRate(item.retentionRate)),
-      tooltipTitle: item.title || `슬라이드 ${item.slideNum}`, // 툴팁: 제목
+      tooltipTitle: getSlideTitle(item.title, item.slideNum), // 툴팁: 제목
       sessionCount: item.sessionCount,
     }));
   }, [slideRetentionRes]);
diff --git a/src/mocks/analytics.ts b/src/mocks/analytics.ts
index 79f77670..ec1d560b 100644
--- a/src/mocks/analytics.ts
+++ b/src/mocks/analytics.ts
@@ -3,6 +3,7 @@ import type {
   ReadSlideAnalyticsResponseDto,
   ReadVideoExitAnalyticsResponseDto,
 } from '@/api/dto/analytics.dto';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import { MOCK_SLIDES } from './slides';
 
@@ -28,7 +29,7 @@ export const getMockSlideAnalytics = (projectId: string): ReadSlideAnalyticsResp
     slides: slidesToUse.map((slide, index) => ({
       slideId: slide.slideId,
       slideNum: index + 1,
-      title: slide.title || `슬라이드 ${index + 1}`,
+      title: getSlideTitle(slide.title, index + 1),
       viewCount: Math.floor(Math.random() * 1000) + 100,
       exitCount: Math.floor(Math.random() * 50),
       exitRate: Math.random() * 0.3,
diff --git a/src/pages/FeedbackSlidePage.tsx b/src/pages/FeedbackSlidePage.tsx
index 1ba7dafc..bdb66e13 100644
--- a/src/pages/FeedbackSlidePage.tsx
+++ b/src/pages/FeedbackSlidePage.tsx
@@ -18,6 +18,7 @@ import SlideTitle from '@/components/slide/script/SlideTitle';
 import { createDefaultReactions } from '@/constants/reaction';
 import type { ReadSharedContentData } from '@/types/share';
 import { countTreeComments } from '@/utils/comment';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 import { useFeedbackSlide } from './feedback/useFeedbackSlide';
 import type { ShareExitSnapshot } from './feedback/useFeedbackVideo';
@@ -130,7 +131,7 @@ export default function FeedbackSlidePage({
           currentSlide ? (
             <img
               src={currentSlide.imageUrl}
-              alt={currentSlide.title}
+              alt={getSlideTitle(currentSlide.title, slideIndex + 1)}
               className="max-h-full max-w-full"
             />
           ) : (
@@ -157,7 +158,7 @@ export default function FeedbackSlidePage({
         }
         scriptTabContent={
           <div className="px-4 py-4">
-            <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} readOnly />
+            <SlideTitle fallbackTitle={getSlideTitle(undefined, slideIndex + 1)} readOnly />
             <div className="mt-3 rounded-2xl border border-gray-200 bg-gray-200 px-4 py-3 h-48 overflow-y-auto pb-4">
               <p
                 className={`text-body-s leading-relaxed break-words ${script ? 'text-black' : 'text-gray-600'}`}
diff --git a/src/pages/feedback/useFeedbackVideo.ts b/src/pages/feedback/useFeedbackVideo.ts
index a27f5f70..fed5fcfd 100644
--- a/src/pages/feedback/useFeedbackVideo.ts
+++ b/src/pages/feedback/useFeedbackVideo.ts
@@ -19,6 +19,7 @@ import type { SlideDetail } from '@/types/slide';
 import type { VideoTimestampFeedback } from '@/types/video';
 import { formatVideoTimestamp } from '@/utils/format';
 import { SHARED_PROJECT_ID, normalizeSharedSlides } from '@/utils/sharedContent';
+import { getSlideTitle } from '@/utils/slideTitle';
 import { getSlideIndexFromTime } from '@/utils/video';
 
 // 타임라인 데이터 없을때, 슬라이드 1장당 10초로 균등분배
@@ -60,7 +61,7 @@ function toPlayableVideoUrl(url?: string | null): string {
 // 슬라이드 목록과 타임라인 배열 만드는 함수
 function mapSlidesByTimeline(
   sourceSlides: SlideDetail[],
-  timeline: Array<{ slideId: string; timestampMs: number }>,
+  timeline: Array<{ slideId: string; title?: string | null; timestampMs: number }>,
 ): { slides: SlideDetail[]; slideChangeTimes: number[] } {
   if (!timeline.length) {
     const slides = sourceSlides.map((slide, index) => ({
@@ -94,7 +95,7 @@ function mapSlidesByTimeline(
     return {
       slideId: String(item.slideId),
       projectId: fallbackProjectId,
-      title: `슬라이드 ${index + 1}`,
+      title: getSlideTitle(item.title, index + 1),
       slideNum: index + 1,
       imageUrl: '',
       createdAt: now,
@@ -206,6 +207,7 @@ export function useFeedbackVideo(
         )
         .map((slide) => ({
           slideId: String(slide.slideId),
+          title: slide.title,
           timestampMs: normalizeTimestampMs(slide.timestampMs),
         }));
 
@@ -214,7 +216,8 @@ export function useFeedbackVideo(
       let videoUrl = toPlayableVideoUrl(content.presentationContent.video?.videoUrl);
       let videoTitle = content.presentationContent.title || '공유 영상';
       let duration = 0;
-      let timelineSlides: Array<{ slideId: string; timestampMs: number }> = fallbackTimelineSlides;
+      let timelineSlides: Array<{ slideId: string; title?: string | null; timestampMs: number }> =
+        fallbackTimelineSlides;
 
       if (normalizedVideoId) {
         const [detailResult, timelineResult] = await Promise.allSettled([
@@ -239,6 +242,7 @@ export function useFeedbackVideo(
         ) {
           timelineSlides = timelineResult.value.data.success.slides.map((slide) => ({
             slideId: String(slide.slideId),
+            title: slide.title,
             timestampMs: slide.timestampMs,
           }));
         }
diff --git a/src/types/recording.ts b/src/types/recording.ts
index 7b96d9e5..8951c0cd 100644
--- a/src/types/recording.ts
+++ b/src/types/recording.ts
@@ -1,3 +1,5 @@
+import { getSlideTitle } from '@/utils/slideTitle';
+
 import type { SlideDetail } from './slide';
 
 /**
@@ -36,7 +38,7 @@ export function convertToRecordingSlides(
     page: index + 1,
     imageUrl: slide.imageUrl || `/thumbnails/${projectId}/${index}.webp`,
     script: slide.script || '',
-    title: slide.title,
+    title: getSlideTitle(slide.title, index + 1),
   }));
 }
 
diff --git a/src/utils/sharedContent.ts b/src/utils/sharedContent.ts
index 79db2a71..04bcb58f 100644
--- a/src/utils/sharedContent.ts
+++ b/src/utils/sharedContent.ts
@@ -4,6 +4,7 @@
  */
 import type { SharedPresentationSlide } from '@/types/share';
 import type { SlideDetail } from '@/types/slide';
+import { getSlideTitle } from '@/utils/slideTitle';
 
 export const SHARED_PROJECT_ID = 'shared';
 
@@ -25,7 +26,7 @@ export function normalizeSharedSlides(rawSlides: SharedPresentationSlide[]): Sli
       return {
         slideId: slide.slideId,
         projectId: SHARED_PROJECT_ID,
-        title: slide.title ?? `슬라이드 ${slideNum}`,
+        title: getSlideTitle(slide.title, slideNum),
         slideNum,
         imageUrl: slide.imageUrl,
         createdAt: now,
diff --git a/src/utils/slideTitle.test.ts b/src/utils/slideTitle.test.ts
new file mode 100644
index 00000000..58e5c2ce
--- /dev/null
+++ b/src/utils/slideTitle.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+
+import { getSlideTitle } from './slideTitle';
+
+describe('getSlideTitle', () => {
+  it('returns the original title when title exists', () => {
+    expect(getSlideTitle('도입', 1)).toBe('도입');
+  });
+
+  it('returns fallback when title is null', () => {
+    expect(getSlideTitle(null, 2)).toBe('슬라이드 2');
+  });
+
+  it('returns fallback when title is empty or blank', () => {
+    expect(getSlideTitle('', 3)).toBe('슬라이드 3');
+    expect(getSlideTitle('   ', 4)).toBe('슬라이드 4');
+  });
+});
diff --git a/src/utils/slideTitle.ts b/src/utils/slideTitle.ts
new file mode 100644
index 00000000..05fa6a43
--- /dev/null
+++ b/src/utils/slideTitle.ts
@@ -0,0 +1,19 @@
+/**
+ * @file slideTitle.ts
+ * @description 슬라이드 제목 렌더링 공통 유틸리티
+ */
+
+/**
+ * 슬라이드 제목 표시 문자열을 반환합니다.
+ *
+ * - title이 존재하면 title 그대로 반환
+ * - title이 없거나 공백이면 "슬라이드 N" 반환
+ */
+export function getSlideTitle(title: string | null | undefined, slideNum: number): string {
+  if (typeof title === 'string' && title.trim().length > 0) {
+    return title;
+  }
+
+  const safeSlideNum = Number.isFinite(slideNum) && slideNum > 0 ? Math.floor(slideNum) : 1;
+  return `슬라이드 ${safeSlideNum}`;
+}

From c82f871bd365dabd120951d17335b9559f75748e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A1=9C=EB=A1=9C?= <pretocki3@gmail.com>
Date: Sun, 22 Feb 2026 13:02:26 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EB=AA=A9=20=EB=B3=80=EA=B2=BD=20optimistic=20updat?=
 =?UTF-8?q?e=20=EC=B6=94=EA=B0=80=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/queries/useSlides.test.tsx | 156 +++++++++++++++++++++++++++
 src/hooks/queries/useSlides.ts       |  74 ++++++++++++-
 2 files changed, 228 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/queries/useSlides.test.tsx

diff --git a/src/hooks/queries/useSlides.test.tsx b/src/hooks/queries/useSlides.test.tsx
new file mode 100644
index 00000000..16966c89
--- /dev/null
+++ b/src/hooks/queries/useSlides.test.tsx
@@ -0,0 +1,156 @@
+import type { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { GetSlideResponseDto, UpdateSlideResponseDto } from '@/api/dto';
+import { updateSlide } from '@/api/endpoints/slides';
+import { queryKeys } from '@/api/queryClient';
+import type { SlideListItem } from '@/types/slide';
+
+import { useUpdateSlide } from './useSlides';
+
+vi.mock('@/api/endpoints/slides', async () => {
+  const actual =
+    await vi.importActual<typeof import('@/api/endpoints/slides')>('@/api/endpoints/slides');
+  return {
+    ...actual,
+    updateSlide: vi.fn(),
+  };
+});
+
+const mockedUpdateSlide = vi.mocked(updateSlide);
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+}
+
+function createWrapper(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+function makeListItem(overrides?: Partial<SlideListItem>): SlideListItem {
+  return {
+    slideId: 's1',
+    projectId: 'p1',
+    title: '기존 제목',
+    slideNum: 1,
+    imageUrl: 'https://example.com/1.png',
+    script: '',
+    createdAt: '2026-01-01T00:00:00Z',
+    updatedAt: '2026-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+function makeDetail(overrides?: Partial<GetSlideResponseDto>): GetSlideResponseDto {
+  return {
+    slideId: 's1',
+    projectId: 'p1',
+    title: '기존 제목',
+    slideNum: 1,
+    imageUrl: 'https://example.com/1.png',
+    prevSlideId: null,
+    nextSlideId: null,
+    updatedAt: '2026-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+describe('useUpdateSlide', () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    queryClient = createQueryClient();
+  });
+
+  afterEach(() => {
+    queryClient.clear();
+  });
+
+  it('optimistically updates detail/list cache and keeps server response values', async () => {
+    let resolveMutation: ((value: UpdateSlideResponseDto) => void) | undefined;
+
+    mockedUpdateSlide.mockImplementation(
+      () =>
+        new Promise<UpdateSlideResponseDto>((resolve) => {
+          resolveMutation = resolve;
+        }),
+    );
+
+    queryClient.setQueryData(queryKeys.slides.detail('s1'), makeDetail());
+    queryClient.setQueryData(queryKeys.slides.list('p1'), [
+      makeListItem(),
+      makeListItem({ slideId: 's2', title: '다른 슬라이드', slideNum: 2 }),
+    ]);
+
+    const { result } = renderHook(() => useUpdateSlide(), {
+      wrapper: createWrapper(queryClient),
+    });
+
+    act(() => {
+      result.current.mutate({ slideId: 's1', data: { title: '새 제목' } });
+    });
+
+    await waitFor(() => {
+      expect(
+        queryClient.getQueryData<GetSlideResponseDto>(queryKeys.slides.detail('s1'))?.title,
+      ).toBe('새 제목');
+      expect(
+        queryClient.getQueryData<SlideListItem[]>(queryKeys.slides.list('p1'))?.[0]?.title,
+      ).toBe('새 제목');
+    });
+
+    await act(async () => {
+      resolveMutation?.({
+        slideId: 's1',
+        title: '서버 제목',
+        slideNum: 1,
+        imageUrl: 'https://example.com/updated.png',
+        updatedAt: '2026-02-22T12:00:00Z',
+      });
+      await Promise.resolve();
+    });
+
+    const detail = queryClient.getQueryData<GetSlideResponseDto>(queryKeys.slides.detail('s1'));
+    const list = queryClient.getQueryData<SlideListItem[]>(queryKeys.slides.list('p1'));
+
+    expect(detail?.title).toBe('서버 제목');
+    expect(detail?.updatedAt).toBe('2026-02-22T12:00:00Z');
+    expect(list?.[0]?.title).toBe('서버 제목');
+    expect(list?.[0]?.imageUrl).toBe('https://example.com/updated.png');
+  });
+
+  it('rolls back optimistic cache when mutation fails', async () => {
+    mockedUpdateSlide.mockRejectedValue(new Error('update failed'));
+
+    queryClient.setQueryData(queryKeys.slides.detail('s1'), makeDetail());
+    queryClient.setQueryData(queryKeys.slides.list('p1'), [makeListItem()]);
+
+    const { result } = renderHook(() => useUpdateSlide(), {
+      wrapper: createWrapper(queryClient),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.mutateAsync({ slideId: 's1', data: { title: '실패 제목' } }),
+      ).rejects.toThrow('update failed');
+    });
+
+    expect(
+      queryClient.getQueryData<GetSlideResponseDto>(queryKeys.slides.detail('s1'))?.title,
+    ).toBe('기존 제목');
+    expect(queryClient.getQueryData<SlideListItem[]>(queryKeys.slides.list('p1'))?.[0]?.title).toBe(
+      '기존 제목',
+    );
+  });
+});
diff --git a/src/hooks/queries/useSlides.ts b/src/hooks/queries/useSlides.ts
index 6af1a030..53d0d6d3 100644
--- a/src/hooks/queries/useSlides.ts
+++ b/src/hooks/queries/useSlides.ts
@@ -1,12 +1,14 @@
 /**
  * 슬라이드 관련 TanStack Query 훅
  */
+import type { QueryKey } from '@tanstack/react-query';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
 
-import type { UpdateSlideTitleRequestDto } from '@/api/dto';
+import type { GetSlideResponseDto, UpdateSlideTitleRequestDto } from '@/api/dto';
 import { getSlides, updateSlide } from '@/api/endpoints/slides';
 import { queryKeys } from '@/api/queryClient';
+import type { SlideListItem } from '@/types/slide';
 
 /**
  * 슬라이드 목록 조회
@@ -40,11 +42,79 @@ export function useSlides(projectId: string) {
 export function useUpdateSlide() {
   const queryClient = useQueryClient();
 
+  type OptimisticContext = {
+    previousDetail?: GetSlideResponseDto;
+    previousLists: Array<[QueryKey, SlideListItem[] | undefined]>;
+  };
+
   return useMutation({
     mutationFn: ({ slideId, data }: { slideId: string; data: UpdateSlideTitleRequestDto }) =>
       updateSlide(slideId, data),
 
-    onSuccess: (_, { slideId }) => {
+    onMutate: async ({ slideId, data }): Promise<OptimisticContext> => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.slides.detail(slideId) });
+      await queryClient.cancelQueries({ queryKey: queryKeys.slides.lists() });
+
+      const previousDetail = queryClient.getQueryData<GetSlideResponseDto>(
+        queryKeys.slides.detail(slideId),
+      );
+      const previousLists = queryClient.getQueriesData<SlideListItem[]>({
+        queryKey: queryKeys.slides.lists(),
+      });
+
+      if (typeof data.title === 'string') {
+        queryClient.setQueryData<GetSlideResponseDto | undefined>(
+          queryKeys.slides.detail(slideId),
+          (old) => (old ? { ...old, title: data.title } : old),
+        );
+        queryClient.setQueriesData<SlideListItem[]>({ queryKey: queryKeys.slides.lists() }, (old) =>
+          old?.map((item) => (item.slideId === slideId ? { ...item, title: data.title } : item)),
+        );
+      }
+
+      return { previousDetail, previousLists };
+    },
+
+    onError: (_error, { slideId }, context) => {
+      if (context?.previousDetail) {
+        queryClient.setQueryData(queryKeys.slides.detail(slideId), context.previousDetail);
+      }
+
+      context?.previousLists.forEach(([key, value]) => {
+        queryClient.setQueryData(key, value);
+      });
+    },
+
+    onSuccess: (savedSlide, { slideId }) => {
+      queryClient.setQueryData<GetSlideResponseDto | undefined>(
+        queryKeys.slides.detail(slideId),
+        (old) =>
+          old
+            ? {
+                ...old,
+                title: savedSlide.title,
+                slideNum: savedSlide.slideNum,
+                imageUrl: savedSlide.imageUrl,
+                updatedAt: savedSlide.updatedAt,
+              }
+            : old,
+      );
+      queryClient.setQueriesData<SlideListItem[]>({ queryKey: queryKeys.slides.lists() }, (old) =>
+        old?.map((item) =>
+          item.slideId === slideId
+            ? {
+                ...item,
+                title: savedSlide.title,
+                slideNum: savedSlide.slideNum,
+                imageUrl: savedSlide.imageUrl,
+                updatedAt: savedSlide.updatedAt,
+              }
+            : item,
+        ),
+      );
+    },
+
+    onSettled: (_data, _error, { slideId }) => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.slides.detail(slideId) });
       void queryClient.invalidateQueries({ queryKey: queryKeys.slides.lists() });
     },

From 1eb35f315fe2fd304be5205d5a379d7633067259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A1=9C=EB=A1=9C?= <pretocki3@gmail.com>
Date: Sun, 22 Feb 2026 13:05:05 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EB=AA=A9=20=ED=8C=9D=EC=98=A4=EB=B2=84=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B3=B4=EC=A0=95=20?=
 =?UTF-8?q?(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TitleEditorPopover.test.tsx        | 63 +++++++++++++++++++
 src/components/common/TitleEditorPopover.tsx  |  9 ++-
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/TitleEditorPopover.test.tsx

diff --git a/src/components/common/TitleEditorPopover.test.tsx b/src/components/common/TitleEditorPopover.test.tsx
new file mode 100644
index 00000000..0994a8d7
--- /dev/null
+++ b/src/components/common/TitleEditorPopover.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { TitleEditorPopover } from './TitleEditorPopover';
+
+describe('TitleEditorPopover', () => {
+  it('re-initializes input value from inputTitle whenever popover opens', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <TitleEditorPopover
+        title="슬라이드 1"
+        inputTitle=""
+        inputPlaceholder="슬라이드 1"
+        ariaLabel="슬라이드 이름 변경"
+      />,
+    );
+
+    const triggerButton = screen.getByRole('button', { name: '슬라이드 이름 변경' });
+
+    await user.click(triggerButton);
+    const input = screen.getByRole('textbox', { name: '슬라이드 이름 변경' });
+    expect(input).toHaveValue('');
+    expect(input).toHaveAttribute('placeholder', '슬라이드 1');
+
+    await user.type(input, '임시 제목');
+    expect(input).toHaveValue('임시 제목');
+
+    await user.click(triggerButton); // close
+    await user.click(triggerButton); // reopen
+
+    expect(screen.getByRole('textbox', { name: '슬라이드 이름 변경' })).toHaveValue('');
+  });
+
+  it('uses title as default input value when title exists', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <TitleEditorPopover
+        title="도입"
+        inputTitle="도입"
+        inputPlaceholder="슬라이드 1"
+        ariaLabel="슬라이드 이름 변경"
+      />,
+    );
+
+    const triggerButton = screen.getByRole('button', { name: '슬라이드 이름 변경' });
+
+    await user.click(triggerButton);
+    const input = screen.getByRole('textbox', { name: '슬라이드 이름 변경' });
+    expect(input).toHaveValue('도입');
+
+    await user.clear(input);
+    await user.type(input, '변경 전 임시 값');
+    expect(input).toHaveValue('변경 전 임시 값');
+
+    await user.click(triggerButton); // close
+    await user.click(triggerButton); // reopen
+
+    expect(screen.getByRole('textbox', { name: '슬라이드 이름 변경' })).toHaveValue('도입');
+  });
+});
diff --git a/src/components/common/TitleEditorPopover.tsx b/src/components/common/TitleEditorPopover.tsx
index 4962c306..db64948a 100644
--- a/src/components/common/TitleEditorPopover.tsx
+++ b/src/components/common/TitleEditorPopover.tsx
@@ -41,9 +41,14 @@ export function TitleEditorPopover({
   showOnMobile = false,
 }: TitleEditorPopoverProps) {
   const resolvedInputTitle = inputTitle ?? title;
-  const inputResetKey = `${resolvedInputTitle}::${inputPlaceholder ?? ''}`;
   const [editTitle, setEditTitle] = useState(resolvedInputTitle);
 
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) return;
+    // Popover를 열 때마다 현재 슬라이드 기준 입력값으로 초기화합니다.
+    setEditTitle(resolvedInputTitle);
+  };
+
   if (readOnlyContent) {
     return (
       <div className="hidden md:inline-flex h-7 items-center gap-1.5 min-w-0">
@@ -71,7 +76,7 @@ export function TitleEditorPopover({
 
   return (
     <Popover
-      key={inputResetKey}
+      onOpenChange={handleOpenChange}
       trigger={({ isOpen }) => (
         <button
           type="button"

From e84253d6efc2ffa2bfb03734cf767dc5e3db5898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A1=9C=EB=A1=9C?= <pretocki3@gmail.com>
Date: Sun, 22 Feb 2026 13:27:32 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20useSlides=20optimistic=20title=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=B4=EC=A0=95=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/queries/useSlides.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/hooks/queries/useSlides.ts b/src/hooks/queries/useSlides.ts
index a1c25321..e8168aef 100644
--- a/src/hooks/queries/useSlides.ts
+++ b/src/hooks/queries/useSlides.ts
@@ -76,12 +76,15 @@ export function useUpdateSlide() {
       });
 
       if (typeof data.title === 'string') {
+        const optimisticTitle = data.title;
         queryClient.setQueryData<GetSlideResponseDto | undefined>(
           queryKeys.slides.detail(slideId),
-          (old) => (old ? { ...old, title: data.title } : old),
+          (old) => (old ? { ...old, title: optimisticTitle } : old),
         );
         queryClient.setQueriesData<SlideListItem[]>({ queryKey: queryKeys.slides.lists() }, (old) =>
-          old?.map((item) => (item.slideId === slideId ? { ...item, title: data.title } : item)),
+          old?.map((item) =>
+            item.slideId === slideId ? { ...item, title: optimisticTitle } : item,
+          ),
         );
       }