From 21edf27de69c58dc9667361275e2a86939ae500c 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 11:04:36 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=8C=80=EB=B3=B8=20=EC=9D=BD?=
 =?UTF-8?q?=EA=B8=B0=20=EC=86=8D=EB=8F=84=20=EC=84=A4=EC=A0=95,=20?=
 =?UTF-8?q?=EA=B3=84=EC=82=B0=20=EC=B6=94=EA=B0=80=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/icon-setting.svg             |   7 +
 .../slide/script/ScriptBoxContent.tsx         |  51 +++++--
 .../slide/script/ScriptBulkEditModal.tsx      |  17 +++
 .../slide/script/ScriptReadingSpeedModal.tsx  | 134 ++++++++++++++++++
 src/hooks/index.ts                            |   1 +
 src/hooks/useScriptReadingSpeed.ts            |  36 +++++
 src/stores/scriptReadingSpeedStore.ts         |  35 +++++
 src/utils/scriptDuration.test.ts              |  84 +++++++++++
 src/utils/scriptDuration.ts                   | 109 ++++++++++++++
 9 files changed, 464 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/icon-setting.svg
 create mode 100644 src/components/slide/script/ScriptReadingSpeedModal.tsx
 create mode 100644 src/hooks/useScriptReadingSpeed.ts
 create mode 100644 src/stores/scriptReadingSpeedStore.ts
 create mode 100644 src/utils/scriptDuration.test.ts
 create mode 100644 src/utils/scriptDuration.ts

diff --git a/src/assets/icons/icon-setting.svg b/src/assets/icons/icon-setting.svg
new file mode 100644
index 00000000..7899ee02
--- /dev/null
+++ b/src/assets/icons/icon-setting.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+     class="lucide lucide-settings-icon lucide-settings">
+  <path
+    d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/>
+  <circle cx="12" cy="12" r="3"/>
+</svg>
diff --git a/src/components/slide/script/ScriptBoxContent.tsx b/src/components/slide/script/ScriptBoxContent.tsx
index cbd9bb64..961ef4d3 100644
--- a/src/components/slide/script/ScriptBoxContent.tsx
+++ b/src/components/slide/script/ScriptBoxContent.tsx
@@ -6,12 +6,25 @@
  * Zustand store를 통해 대본을 읽고 업데이트하며,
  * debounce로 자동저장됩니다.
  */
-import { useAutoSaveScript, useSlideActions, useSlideScript } from '@/hooks';
+import { useMemo, useState } from 'react';
+
+import IconSetting from '@/assets/icons/icon-setting.svg?react';
+import { useAutoSaveScript, useScriptReadingSpeed, useSlideActions, useSlideScript } from '@/hooks';
+import { estimateScriptDurationSeconds, formatScriptDuration } from '@/utils/scriptDuration';
+
+import ScriptReadingSpeedModal from './ScriptReadingSpeedModal';
 
 export default function ScriptBoxContent() {
+  const [isSpeedModalOpen, setIsSpeedModalOpen] = useState(false);
   const script = useSlideScript();
   const { updateScript } = useSlideActions();
   const { autoSave, flushSave } = useAutoSaveScript();
+  const { selectedSpeed } = useScriptReadingSpeed();
+
+  const estimatedDuration = useMemo(() => {
+    const durationSeconds = estimateScriptDurationSeconds(script, selectedSpeed);
+    return formatScriptDuration(durationSeconds);
+  }, [script, selectedSpeed]);
 
   const handleChange = (value: string) => {
     updateScript(value);
@@ -19,15 +32,33 @@ export default function ScriptBoxContent() {
   };
 
   return (
-    <div className="h-full bg-white px-4 pt-3 pb-6">
-      <textarea
-        value={script}
-        onChange={(e) => handleChange(e.target.value)}
-        onBlur={flushSave}
-        placeholder="슬라이드 대본을 입력하세요..."
-        aria-label="슬라이드 대본"
-        className="h-full w-full resize-none border-none bg-transparent text-base leading-relaxed text-gray-800 outline-none placeholder:text-gray-600 overflow-y-auto"
+    <>
+      <div className="relative h-full bg-white px-4 pt-3 pb-6">
+        <textarea
+          value={script}
+          onChange={(e) => handleChange(e.target.value)}
+          onBlur={flushSave}
+          placeholder="슬라이드 대본을 입력하세요..."
+          aria-label="슬라이드 대본"
+          className="h-full w-full resize-none overflow-y-auto border-none bg-transparent pb-8 pr-28 text-base leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
+        />
+
+        <div className="absolute bottom-3 right-4">
+          <button
+            type="button"
+            onClick={() => setIsSpeedModalOpen(true)}
+            aria-label={`읽기 속도 설정 열기 (현재 예상 시간 ${estimatedDuration})`}
+            className="inline-flex min-h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-white/95 px-2.5 py-1 text-gray-500 shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-700 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main"
+          >
+            <span className="text-xs leading-4">{estimatedDuration}</span>
+            <IconSetting className="size-3.5 shrink-0" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+      <ScriptReadingSpeedModal
+        isOpen={isSpeedModalOpen}
+        onClose={() => setIsSpeedModalOpen(false)}
       />
-    </div>
+    </>
   );
 }
diff --git a/src/components/slide/script/ScriptBulkEditModal.tsx b/src/components/slide/script/ScriptBulkEditModal.tsx
index 43c475ec..5516df64 100644
--- a/src/components/slide/script/ScriptBulkEditModal.tsx
+++ b/src/components/slide/script/ScriptBulkEditModal.tsx
@@ -1,8 +1,11 @@
+import { useMemo } from 'react';
 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 { useScriptReadingSpeed } from '@/hooks/useScriptReadingSpeed';
+import { estimateScriptsDurationSeconds, formatScriptDuration } from '@/utils/scriptDuration';
 
 interface ScriptBulkEditModalProps {
   isOpen: boolean;
@@ -31,6 +34,15 @@ function ScriptBulkEditModal({
   onFileChange,
   onScriptChange,
 }: ScriptBulkEditModalProps) {
+  const { selectedSpeed } = useScriptReadingSpeed();
+  const totalDuration = useMemo(() => {
+    const durationSeconds = estimateScriptsDurationSeconds(
+      previewItems.map((item) => item.script),
+      selectedSpeed,
+    );
+    return formatScriptDuration(durationSeconds);
+  }, [previewItems, selectedSpeed]);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -62,6 +74,11 @@ function ScriptBulkEditModal({
               <span className="font-semibold text-gray-800">{selectedFileName}</span>
             </p>
           ) : null}
+          <p className="text-sm text-gray-600">
+            전체 예상 읽기 시간:{' '}
+            <span className="font-semibold text-gray-800">{totalDuration}</span>{' '}
+            <span>(분당 {selectedSpeed}자 기준)</span>
+          </p>
         </div>
 
         <button
diff --git a/src/components/slide/script/ScriptReadingSpeedModal.tsx b/src/components/slide/script/ScriptReadingSpeedModal.tsx
new file mode 100644
index 00000000..04cee0a0
--- /dev/null
+++ b/src/components/slide/script/ScriptReadingSpeedModal.tsx
@@ -0,0 +1,134 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Dropdown, Modal } from '@/components/common';
+import type { DropdownItem } from '@/components/common/Dropdown';
+import { useProjectScripts, useScriptReadingSpeed, useSlideId, useSlideScript } from '@/hooks';
+import {
+  SCRIPT_READING_SPEED_MAX,
+  SCRIPT_READING_SPEED_MIN,
+  estimateScriptsDurationSeconds,
+  formatScriptDuration,
+} from '@/utils/scriptDuration';
+
+interface ScriptReadingSpeedModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ScriptReadingSpeedModal({ isOpen, onClose }: ScriptReadingSpeedModalProps) {
+  const { projectId } = useParams<{ projectId: string }>();
+  const activeProjectId = isOpen ? (projectId ?? '') : '';
+  const { data: projectScripts } = useProjectScripts(activeProjectId);
+  const slideId = useSlideId();
+  const script = useSlideScript();
+  const { speedOptions, selectedSpeed, selectedPreset, setSelectedSpeed } = useScriptReadingSpeed();
+
+  const speedDropdownItems: DropdownItem[] = speedOptions.map((option) => ({
+    id: option.id,
+    label: option.label,
+    selected: selectedSpeed === option.charsPerMinute,
+    onClick: () => setSelectedSpeed(option.charsPerMinute),
+  }));
+
+  const scripts = useMemo(() => {
+    const scriptMap = new Map<string, string>();
+
+    (projectScripts?.scripts ?? []).forEach((scriptItem) => {
+      scriptMap.set(scriptItem.slideId, scriptItem.scriptText ?? '');
+    });
+
+    if (slideId) {
+      scriptMap.set(slideId, script);
+    } else if (scriptMap.size < 1 && script.length > 0) {
+      scriptMap.set('current', script);
+    }
+
+    return Array.from(scriptMap.values());
+  }, [projectScripts, slideId, script]);
+
+  const totalDurationSeconds = useMemo(
+    () => estimateScriptsDurationSeconds(scripts, selectedSpeed),
+    [scripts, selectedSpeed],
+  );
+  const totalDuration = useMemo(
+    () => formatScriptDuration(totalDurationSeconds),
+    [totalDurationSeconds],
+  );
+  const presetLabel = selectedPreset?.label ?? '직접 설정';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="읽기 속도 설정" size="sm">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <span className="text-body-m-bold text-gray-800">프리셋</span>
+          <Dropdown
+            trigger={({ isOpen }) => (
+              <button
+                type="button"
+                className={`flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-5 py-3 ${isOpen ? 'border-gray-400' : ''}`}
+              >
+                <span className="text-body-m-bold text-gray-800">{presetLabel}</span>
+                <svg
+                  className={`h-4 w-4 text-gray-600 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden
+                >
+                  <path
+                    d="M6 9l6 6 6-6"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            )}
+            items={speedDropdownItems}
+            className="w-full"
+            menuClassName="w-full"
+            ariaLabel="읽기 속도 프리셋 선택"
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label htmlFor="script-reading-speed-slider" className="text-body-m-bold text-gray-800">
+            읽기 속도: 분당 {selectedSpeed}자
+          </label>
+          <input
+            id="script-reading-speed-slider"
+            type="range"
+            min={SCRIPT_READING_SPEED_MIN}
+            max={SCRIPT_READING_SPEED_MAX}
+            step={1}
+            value={selectedSpeed}
+            onChange={(event) => setSelectedSpeed(Number(event.target.value))}
+            className="h-2 w-full cursor-pointer accent-main"
+          />
+          <div className="flex items-center justify-between text-caption text-gray-600">
+            <span>매우 느리게</span>
+            <span>매우 빠르게</span>
+          </div>
+        </div>
+
+        <div className="rounded-lg bg-gray-100 px-4 py-3">
+          <p className="text-sm text-gray-600">전체 대본 예상 읽기 시간</p>
+          <p className="text-body-m-bold text-gray-800">{totalDuration}</p>
+        </div>
+
+        <p className="text-sm leading-5 text-gray-600">
+          예상 시간은 전체 대본의 공백을 제외한 글자 수를 기준으로 계산됩니다.
+        </p>
+
+        <button
+          type="button"
+          onClick={onClose}
+          className="w-full rounded-md bg-main py-3 font-bold text-white transition-colors hover:bg-main-variant2"
+        >
+          확인
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index b7a35a89..47a30159 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -7,6 +7,7 @@ export * from './useAutoSaveScript';
 export * from './useDebounce';
 export * from './useHotkey';
 export * from './useMediaQuery';
+export * from './useScriptReadingSpeed';
 export * from './useSlideNavigation';
 export * from './useSlideSelectors';
 export * from './useSlideCommentsActions';
diff --git a/src/hooks/useScriptReadingSpeed.ts b/src/hooks/useScriptReadingSpeed.ts
new file mode 100644
index 00000000..0ae7dbd8
--- /dev/null
+++ b/src/hooks/useScriptReadingSpeed.ts
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { useScriptReadingSpeedStore } from '@/stores/scriptReadingSpeedStore';
+import {
+  SCRIPT_READING_SPEED_OPTIONS,
+  type ScriptReadingSpeedPresetId,
+  getScriptReadingSpeedPreset,
+  normalizeScriptReadingSpeed,
+} from '@/utils/scriptDuration';
+
+export function useScriptReadingSpeed() {
+  const speed = useScriptReadingSpeedStore((state) => state.speed);
+  const setSpeed = useScriptReadingSpeedStore((state) => state.setSpeed);
+
+  const selectedSpeed = useMemo(() => normalizeScriptReadingSpeed(speed), [speed]);
+  const selectedPreset = useMemo(() => getScriptReadingSpeedPreset(selectedSpeed), [selectedSpeed]);
+  const selectedSpeedLabel = useMemo(
+    () => selectedPreset?.label ?? `직접 설정 (분당 ${selectedSpeed}자)`,
+    [selectedPreset, selectedSpeed],
+  );
+
+  const setSelectedPresetId = (presetId: ScriptReadingSpeedPresetId) => {
+    const selectedOption = SCRIPT_READING_SPEED_OPTIONS.find((option) => option.id === presetId);
+    if (!selectedOption) return;
+    setSpeed(selectedOption.charsPerMinute);
+  };
+
+  return {
+    speedOptions: SCRIPT_READING_SPEED_OPTIONS,
+    selectedSpeed,
+    selectedPreset,
+    selectedSpeedLabel,
+    setSelectedSpeed: setSpeed,
+    setSelectedPresetId,
+  };
+}
diff --git a/src/stores/scriptReadingSpeedStore.ts b/src/stores/scriptReadingSpeedStore.ts
new file mode 100644
index 00000000..af9761b7
--- /dev/null
+++ b/src/stores/scriptReadingSpeedStore.ts
@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import {
+  DEFAULT_SCRIPT_READING_SPEED,
+  SCRIPT_READING_SPEED_STORAGE_KEY,
+  normalizeScriptReadingSpeed,
+} from '@/utils/scriptDuration';
+
+interface ScriptReadingSpeedState {
+  speed: number;
+  setSpeed: (nextSpeed: number) => void;
+}
+
+export const useScriptReadingSpeedStore = create<ScriptReadingSpeedState>()(
+  persist(
+    (set) => ({
+      speed: DEFAULT_SCRIPT_READING_SPEED,
+      setSpeed: (nextSpeed) => {
+        set({ speed: normalizeScriptReadingSpeed(nextSpeed) });
+      },
+    }),
+    {
+      name: SCRIPT_READING_SPEED_STORAGE_KEY,
+      partialize: (state) => ({ speed: state.speed }),
+      onRehydrateStorage: () => (state) => {
+        if (!state) return;
+        const normalizedSpeed = normalizeScriptReadingSpeed(state.speed);
+        if (state.speed !== normalizedSpeed) {
+          state.setSpeed(normalizedSpeed);
+        }
+      },
+    },
+  ),
+);
diff --git a/src/utils/scriptDuration.test.ts b/src/utils/scriptDuration.test.ts
new file mode 100644
index 00000000..b8b435c2
--- /dev/null
+++ b/src/utils/scriptDuration.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  DEFAULT_SCRIPT_READING_SPEED,
+  countScriptReadableCharacters,
+  estimateScriptDurationSeconds,
+  estimateScriptsDurationSeconds,
+  formatScriptDuration,
+  getScriptReadingSpeedOption,
+  getScriptReadingSpeedPreset,
+  normalizeScriptReadingSpeed,
+} from './scriptDuration';
+
+describe('countScriptReadableCharacters', () => {
+  it('excludes spaces, tabs and line breaks', () => {
+    expect(countScriptReadableCharacters('안녕 하세요\n또랑\t입니다')).toBe(10);
+  });
+});
+
+describe('getScriptReadingSpeedOption', () => {
+  it('returns default option for unknown values', () => {
+    expect(getScriptReadingSpeedOption('unknown').id).toBe('normal');
+    expect(getScriptReadingSpeedOption(null).id).toBe('normal');
+  });
+});
+
+describe('normalizeScriptReadingSpeed', () => {
+  it('normalizes to integer speed in 200~400 range', () => {
+    expect(normalizeScriptReadingSpeed(180)).toBe(200);
+    expect(normalizeScriptReadingSpeed(500)).toBe(400);
+    expect(normalizeScriptReadingSpeed(299.6)).toBe(300);
+  });
+
+  it('returns default speed for invalid values', () => {
+    expect(normalizeScriptReadingSpeed(undefined)).toBe(DEFAULT_SCRIPT_READING_SPEED);
+    expect(normalizeScriptReadingSpeed('invalid')).toBe(DEFAULT_SCRIPT_READING_SPEED);
+  });
+});
+
+describe('getScriptReadingSpeedPreset', () => {
+  it('returns matching preset when current speed equals preset value', () => {
+    expect(getScriptReadingSpeedPreset(240)?.id).toBe('slow');
+    expect(getScriptReadingSpeedPreset(300)?.id).toBe('normal');
+  });
+
+  it('returns null for custom speed values', () => {
+    expect(getScriptReadingSpeedPreset(287)).toBeNull();
+  });
+});
+
+describe('estimateScriptDurationSeconds', () => {
+  it('estimates seconds with characters per minute', () => {
+    expect(estimateScriptDurationSeconds('12345', 300)).toBe(1);
+    expect(estimateScriptDurationSeconds('123456', 300)).toBe(2);
+  });
+
+  it('returns 0 when script is empty or speed is invalid', () => {
+    expect(estimateScriptDurationSeconds('', 300)).toBe(0);
+    expect(estimateScriptDurationSeconds('123', 0)).toBe(0);
+    expect(estimateScriptDurationSeconds('123', Number.NaN)).toBe(0);
+  });
+});
+
+describe('estimateScriptsDurationSeconds', () => {
+  it('estimates total seconds from multiple scripts', () => {
+    expect(estimateScriptsDurationSeconds(['12345', '12345'], 300)).toBe(2);
+  });
+});
+
+describe('formatScriptDuration', () => {
+  it('formats short duration to seconds', () => {
+    expect(formatScriptDuration(59)).toBe('59초');
+  });
+
+  it('formats long duration to minutes and seconds', () => {
+    expect(formatScriptDuration(60)).toBe('1분 0초');
+    expect(formatScriptDuration(135)).toBe('2분 15초');
+  });
+
+  it('returns 0초 for invalid values', () => {
+    expect(formatScriptDuration(-1)).toBe('0초');
+    expect(formatScriptDuration(Number.POSITIVE_INFINITY)).toBe('0초');
+  });
+});
diff --git a/src/utils/scriptDuration.ts b/src/utils/scriptDuration.ts
new file mode 100644
index 00000000..fba89c61
--- /dev/null
+++ b/src/utils/scriptDuration.ts
@@ -0,0 +1,109 @@
+export type ScriptReadingSpeedPresetId = 'slow' | 'normal' | 'fast';
+
+export interface ScriptReadingSpeedOption {
+  id: ScriptReadingSpeedPresetId;
+  label: string;
+  charsPerMinute: number;
+}
+
+export const SCRIPT_READING_SPEED_STORAGE_KEY = 'ttorang-script-reading-speed';
+export const SCRIPT_READING_SPEED_MIN = 200;
+export const SCRIPT_READING_SPEED_MAX = 400;
+export const DEFAULT_SCRIPT_READING_SPEED = 300;
+
+export const SCRIPT_READING_SPEED_OPTIONS: ScriptReadingSpeedOption[] = [
+  {
+    id: 'slow',
+    label: '느리게 (분당 240자)',
+    charsPerMinute: 240,
+  },
+  {
+    id: 'normal',
+    label: '보통 (분당 300자)',
+    charsPerMinute: 300,
+  },
+  {
+    id: 'fast',
+    label: '빠르게 (분당 360자)',
+    charsPerMinute: 360,
+  },
+];
+
+const speedOptionMap = new Map<ScriptReadingSpeedPresetId, ScriptReadingSpeedOption>(
+  SCRIPT_READING_SPEED_OPTIONS.map((option) => [option.id, option]),
+);
+
+const speedOptionByCharsPerMinute = new Map<number, ScriptReadingSpeedOption>(
+  SCRIPT_READING_SPEED_OPTIONS.map((option) => [option.charsPerMinute, option]),
+);
+
+const DEFAULT_SCRIPT_READING_SPEED_OPTION = speedOptionByCharsPerMinute.get(
+  DEFAULT_SCRIPT_READING_SPEED,
+)!;
+
+/**
+ * 읽기 속도 값을 200~400 정수 범위로 정규화합니다.
+ */
+export function normalizeScriptReadingSpeed(speed?: number | string | null): number {
+  const parsed = typeof speed === 'string' ? Number(speed) : speed;
+  if (!Number.isFinite(parsed)) return DEFAULT_SCRIPT_READING_SPEED;
+  const rounded = Math.round(parsed);
+  return Math.min(SCRIPT_READING_SPEED_MAX, Math.max(SCRIPT_READING_SPEED_MIN, rounded));
+}
+
+/**
+ * 프리셋 ID에 해당하는 옵션을 조회합니다.
+ */
+export function getScriptReadingSpeedOption(speedId?: string | null): ScriptReadingSpeedOption {
+  if (!speedId) return DEFAULT_SCRIPT_READING_SPEED_OPTION;
+  return (
+    speedOptionMap.get(speedId as ScriptReadingSpeedPresetId) ?? DEFAULT_SCRIPT_READING_SPEED_OPTION
+  );
+}
+
+/**
+ * 현재 속도와 정확히 일치하는 프리셋이 있을 때만 반환합니다.
+ */
+export function getScriptReadingSpeedPreset(
+  speed?: number | string | null,
+): ScriptReadingSpeedOption | null {
+  const normalizedSpeed = normalizeScriptReadingSpeed(speed);
+  return speedOptionByCharsPerMinute.get(normalizedSpeed) ?? null;
+}
+
+/**
+ * 대본 길이 계산 시 공백(띄어쓰기, 줄바꿈, 탭)은 제외합니다.
+ */
+export const countScriptReadableCharacters = (script: string) => script.replace(/\s+/g, '').length;
+
+export function estimateScriptDurationSeconds(script: string, charsPerMinute: number): number {
+  if (!Number.isFinite(charsPerMinute) || charsPerMinute <= 0) return 0;
+
+  const readableCharacters = countScriptReadableCharacters(script);
+  if (readableCharacters < 1) return 0;
+
+  return Math.ceil((readableCharacters * 60) / charsPerMinute);
+}
+
+export function estimateScriptsDurationSeconds(scripts: string[], charsPerMinute: number): number {
+  if (!Number.isFinite(charsPerMinute) || charsPerMinute <= 0) return 0;
+
+  const totalReadableCharacters = scripts.reduce(
+    (sum, script) => sum + countScriptReadableCharacters(script),
+    0,
+  );
+
+  if (totalReadableCharacters < 1) return 0;
+  return Math.ceil((totalReadableCharacters * 60) / charsPerMinute);
+}
+
+export function formatScriptDuration(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0초';
+
+  const safeSeconds = Math.round(seconds);
+  if (safeSeconds < 60) return `${safeSeconds}초`;
+
+  const minutes = Math.floor(safeSeconds / 60);
+  const remainingSeconds = safeSeconds % 60;
+  return `${minutes}분 ${remainingSeconds}초`;
+}

From bb0d6d21a07c9ab725eeebd2d0efdb3ce9c58da3 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 11:10:26 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=98=88=EC=83=81=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/script/ScriptBoxContent.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/slide/script/ScriptBoxContent.tsx b/src/components/slide/script/ScriptBoxContent.tsx
index 961ef4d3..9577e94d 100644
--- a/src/components/slide/script/ScriptBoxContent.tsx
+++ b/src/components/slide/script/ScriptBoxContent.tsx
@@ -48,10 +48,12 @@ export default function ScriptBoxContent() {
             type="button"
             onClick={() => setIsSpeedModalOpen(true)}
             aria-label={`읽기 속도 설정 열기 (현재 예상 시간 ${estimatedDuration})`}
-            className="inline-flex min-h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-white/95 px-2.5 py-1 text-gray-500 shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-700 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main"
+            className="inline-flex min-h-9 items-center gap-2 rounded-md bg-white px-3 py-1.5 text-gray-700 transition-colors hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main"
           >
-            <span className="text-xs leading-4">{estimatedDuration}</span>
-            <IconSetting className="size-3.5 shrink-0" aria-hidden="true" />
+            <span aria-live="polite" aria-atomic="true" className="text-sm font-semibold leading-4">
+              {estimatedDuration}
+            </span>
+            <IconSetting className="size-4 shrink-0 text-gray-700" aria-hidden="true" />
           </button>
         </div>
       </div>

From d44d9158d51831c8887826239520e82252d9e664 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 11:11:52 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB?=
 =?UTF-8?q?=ED=9E=98=20=EC=8B=9C=20=EC=A0=84=EC=B2=B4=20=EB=8C=80=EB=B3=B8?=
 =?UTF-8?q?=20=EC=8B=9C=EA=B0=84=20=EC=9C=A0=EC=A7=80=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/script/ScriptReadingSpeedModal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/slide/script/ScriptReadingSpeedModal.tsx b/src/components/slide/script/ScriptReadingSpeedModal.tsx
index 04cee0a0..35acdd75 100644
--- a/src/components/slide/script/ScriptReadingSpeedModal.tsx
+++ b/src/components/slide/script/ScriptReadingSpeedModal.tsx
@@ -18,8 +18,7 @@ interface ScriptReadingSpeedModalProps {
 
 export default function ScriptReadingSpeedModal({ isOpen, onClose }: ScriptReadingSpeedModalProps) {
   const { projectId } = useParams<{ projectId: string }>();
-  const activeProjectId = isOpen ? (projectId ?? '') : '';
-  const { data: projectScripts } = useProjectScripts(activeProjectId);
+  const { data: projectScripts } = useProjectScripts(projectId ?? '');
   const slideId = useSlideId();
   const script = useSlideScript();
   const { speedOptions, selectedSpeed, selectedPreset, setSelectedSpeed } = useScriptReadingSpeed();

From 66ae9a799331a3950c1ae5f7543046864050df42 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 11:13:51 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20Gemini=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8=20=EB=B0=98=EC=98=81=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../slide/script/ScriptReadingSpeedModal.tsx         | 12 ++++++++++--
 src/hooks/useScriptReadingSpeed.ts                   |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/slide/script/ScriptReadingSpeedModal.tsx b/src/components/slide/script/ScriptReadingSpeedModal.tsx
index 35acdd75..b2102f11 100644
--- a/src/components/slide/script/ScriptReadingSpeedModal.tsx
+++ b/src/components/slide/script/ScriptReadingSpeedModal.tsx
@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import clsx from 'clsx';
+
 import { Dropdown, Modal } from '@/components/common';
 import type { DropdownItem } from '@/components/common/Dropdown';
 import { useProjectScripts, useScriptReadingSpeed, useSlideId, useSlideScript } from '@/hooks';
@@ -65,11 +67,17 @@ export default function ScriptReadingSpeedModal({ isOpen, onClose }: ScriptReadi
             trigger={({ isOpen }) => (
               <button
                 type="button"
-                className={`flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-5 py-3 ${isOpen ? 'border-gray-400' : ''}`}
+                className={clsx(
+                  'flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-5 py-3',
+                  isOpen && 'border-gray-400',
+                )}
               >
                 <span className="text-body-m-bold text-gray-800">{presetLabel}</span>
                 <svg
-                  className={`h-4 w-4 text-gray-600 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                  className={clsx(
+                    'h-4 w-4 text-gray-600 transition-transform',
+                    isOpen && 'rotate-180',
+                  )}
                   viewBox="0 0 24 24"
                   fill="none"
                   aria-hidden
diff --git a/src/hooks/useScriptReadingSpeed.ts b/src/hooks/useScriptReadingSpeed.ts
index 0ae7dbd8..3568842c 100644
--- a/src/hooks/useScriptReadingSpeed.ts
+++ b/src/hooks/useScriptReadingSpeed.ts
@@ -4,6 +4,7 @@ import { useScriptReadingSpeedStore } from '@/stores/scriptReadingSpeedStore';
 import {
   SCRIPT_READING_SPEED_OPTIONS,
   type ScriptReadingSpeedPresetId,
+  getScriptReadingSpeedOption,
   getScriptReadingSpeedPreset,
   normalizeScriptReadingSpeed,
 } from '@/utils/scriptDuration';
@@ -20,8 +21,7 @@ export function useScriptReadingSpeed() {
   );
 
   const setSelectedPresetId = (presetId: ScriptReadingSpeedPresetId) => {
-    const selectedOption = SCRIPT_READING_SPEED_OPTIONS.find((option) => option.id === presetId);
-    if (!selectedOption) return;
+    const selectedOption = getScriptReadingSpeedOption(presetId);
     setSpeed(selectedOption.charsPerMinute);
   };
 

From 101c40da81a1521cf9b2fe81f78a3e54ce0e0afc 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 11:14:39 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/scriptDuration.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/scriptDuration.ts b/src/utils/scriptDuration.ts
index fba89c61..a80c0561 100644
--- a/src/utils/scriptDuration.ts
+++ b/src/utils/scriptDuration.ts
@@ -47,6 +47,7 @@ const DEFAULT_SCRIPT_READING_SPEED_OPTION = speedOptionByCharsPerMinute.get(
 export function normalizeScriptReadingSpeed(speed?: number | string | null): number {
   const parsed = typeof speed === 'string' ? Number(speed) : speed;
   if (!Number.isFinite(parsed)) return DEFAULT_SCRIPT_READING_SPEED;
+  if (!parsed) return DEFAULT_SCRIPT_READING_SPEED;
   const rounded = Math.round(parsed);
   return Math.min(SCRIPT_READING_SPEED_MAX, Math.max(SCRIPT_READING_SPEED_MIN, rounded));
 }