From ea8dd3bc906010a7cbd8fe1636d16dd9cea70963 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:33:12 +0900
Subject: [PATCH 01/16] =?UTF-8?q?refactor:=20ScriptBox=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 중복 파일 삭제 (src/components/ScriptBox.tsx)
- ScriptBoxEmogi → ScriptBoxEmoji 리네임
- treshcanIcon → trashcanIcon 리네임
- props 네이밍 개선 (isEmogiClick → isEmojiOpen)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../{treshcanIcon.svg => trashcanIcon.svg}    |   0
 src/components/ScriptBox.tsx                  | 457 ------------------
 src/components/script-box/Opinion.tsx         |   4 +-
 src/components/script-box/ScriptBox.tsx       |  12 +-
 ...{ScriptBoxEmogi.tsx => ScriptBoxEmoji.tsx} |  22 +-
 src/components/script-box/ScriptHistory.tsx   |   4 +-
 6 files changed, 20 insertions(+), 479 deletions(-)
 rename src/assets/icons/{treshcanIcon.svg => trashcanIcon.svg} (100%)
 delete mode 100644 src/components/ScriptBox.tsx
 rename src/components/script-box/{ScriptBoxEmogi.tsx => ScriptBoxEmoji.tsx} (85%)

diff --git a/src/assets/icons/treshcanIcon.svg b/src/assets/icons/trashcanIcon.svg
similarity index 100%
rename from src/assets/icons/treshcanIcon.svg
rename to src/assets/icons/trashcanIcon.svg
diff --git a/src/components/ScriptBox.tsx b/src/components/ScriptBox.tsx
deleted file mode 100644
index bf304448..00000000
--- a/src/components/ScriptBox.tsx
+++ /dev/null
@@ -1,457 +0,0 @@
-import { useState } from 'react';
-
-import refreshIcon from '../assets/icons/refreshIcon.svg';
-import replyIcon from '../assets/icons/replyIcon.svg';
-import smallArrowIcon from '../assets/icons/smallArrowIcon.svg';
-import treshcanIcon from '../assets/icons/treshcanIcon.svg';
-import { useToggle } from '../hooks/useToggle';
-
-const ScriptBox = () => {
-  // 0. 슬라이드 이름(이름 변경) 버튼
-  const slideNameChange = useToggle(false);
-  // 0-1. 현재 슬라이드 이름
-  const [slideTitle, setSlideTitle] = useState('슬라이드 1');
-  // 0-2. 타이틀 저장 버튼(서버 요청)
-  // const handleSaveSlideTitle = () => {
-  //
-  // };
-
-  // 1. 이모지버튼
-  const [isEmogiClick, setEmogiClick] = useState(false);
-
-  const handleEmogiClick = () => {
-    setEmogiClick((prev) => !prev);
-  };
-
-  // 2. 변경기록 버튼
-  const scriptHistory = useToggle(false);
-  // 3. 의견 버튼
-  const opinion = useToggle(false);
-  // 3-1. 답변 (나중에 피드백id랑 매칭해야됨)
-  // 어떤 댓글에 답글 입력창이 열려있는지
-  const [activeReplyIdx, setActiveReplyIdx] = useState<number | null>(null);
-
-  //  답글 입력값(일단 1개만)
-  const [replyText, setReplyText] = useState('');
-
-  // 4. 대본섹션 닫기 토글
-  const scriptBoxDock = useToggle(false);
-  return (
-    <>
-      <div
-        /* 접힘=true면 전체높이(320) 중 헤더(40)만 남기고 아래로 숨김 */
-        className={`
-            fixed left-0 right-0 bottom-0 z-30
-            mx-auto w-full
-            bg-white
-            transition-transform duration-300 ease-out
-            h-[320px]
-            ${scriptBoxDock.value ? 'translate-y-[calc(100%-40px)]' : 'translate-y-0'}
-            `}
-      >
-        {/* 변경: 상단바 내부 레이아웃(좌/우 정렬) */}
-
-        <div className="h-10 px-5 py-2 flex items-center justify-between border-b border-zinc-200">
-          <div className="relative inline-block">
-            <button
-              type="button"
-              onClick={slideNameChange.toggle}
-              className="
-                h-7 px-2 rounded-md
-                inline-flex items-center gap-1.5
-                text-zinc-700 text-sm font-semibold
-                hover:bg-zinc-50
-                "
-            >
-              <span className="max-w-[120px] line-clamp-1">{slideTitle}</span>
-              <img src={smallArrowIcon} />
-            </button>
-
-            {/* 슬라이드 이름변경 popover */}
-            {slideNameChange.value && (
-              <>
-                {/* 바깥 클릭 시 닫기 */}
-                <div className="fixed inset-0 z-40" onClick={slideNameChange.off} />
-
-                <div
-                  className="
-                      absolute z-50 left-0 top-full mt-2
-                      w-[320px]
-                      rounded-lg bg-white
-                      border border-zinc-200
-                      shadow-[0px_4px_20px_rgba(0,0,0,0.08)]
-                      px-3 py-2
-                      flex items-center gap-2
-                    "
-                >
-                  {/* 슬라이드 제목 변경 입력창 */}
-                  <input
-                    value={slideTitle}
-                    onChange={(e) => setSlideTitle(e.target.value)}
-                    className="
-                                flex-1 h-9 px-3
-                                rounded-md
-                                border border-zinc-200
-                                text-sm text-zinc-700
-                                outline-none
-                                focus:border-indigo-500
-                              "
-                  />
-
-                  {/* 저장 버튼: 핸들러만 연결(현재는 아무 동작 X) */}
-                  <button
-                    type="button"
-                    //  onClick={handleSaveSlideTitle}
-                    className="
-                                h-9 px-3 rounded-full
-                                bg-indigo-500 text-white
-                                text-sm font-semibold
-                                hover:bg-indigo-600
-                              "
-                  >
-                    저장
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-
-          {/* 우측 컨트롤 영역 */}
-          <div className="flex items-center gap-4">
-            {/* 이모지 카운트 영역 */}
-            <div className="flex items-center gap-6">
-              <div className="flex items-center gap-2">
-                <div className="text-zinc-700 text-base leading-6">👍</div>
-                <div className="text-zinc-700 text-base leading-6">99+</div>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="text-zinc-700 text-base leading-6">😡</div>
-                <div className="text-zinc-700 text-base leading-6">12</div>
-              </div>
-            </div>
-
-            {/* 변경: 이모지 버튼을 오른쪽 컨트롤 쪽에 자연스럽게 배치 + popover 기준점 유지 */}
-            <div className="relative">
-              <button
-                className="h-7 px-2 rounded  hover:bg-zinc-100"
-                onClick={handleEmogiClick}
-                aria-expanded={isEmogiClick}
-              >
-                ...
-              </button>
-
-              {isEmogiClick && ( // 받은 이모티콘 서버에서 뿌려줌
-                <div
-                  className="
-                    px-4 py-3 bg-white rounded-lg
-                    shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-                    inline-flex flex-col justify-start items-start gap-3
-                    absolute right-0 bottom-full mb-2 origin-bottom-right z-50
-                  "
-                >
-                  <div className="inline-flex justify-start items-center gap-6">
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">😏</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">15</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">❤️</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">28</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">😎️</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">5</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">👀</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">182</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">🤪</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">3</div>
-                    </div>
-                  </div>
-                  <div className="inline-flex justify-start items-center gap-6">
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">💡</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">11</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">🙈️</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">488</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">💕</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">2</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">😂</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">46</div>
-                    </div>
-                    <div className="flex justify-start items-center gap-2">
-                      <div className="text-center text-zinc-700 text-base leading-6">🤓</div>
-                      <div className="text-center text-zinc-700 text-base leading-6">36</div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* 변경: 변경기록/의견 버튼 그룹 */}
-            <div className="flex items-center gap-2">
-              <div className="relative">
-                <button
-                  onClick={scriptHistory.toggle}
-                  className={`
-                    h-7 pl-2 pr-1.5 rounded outline outline-1 outline-offset-[-1px]
-                    inline-flex items-center gap-1
-                    ${scriptHistory.value ? 'outline-indigo-500 text-indigo-500 bg-white' : 'outline-zinc-200 text-zinc-700 bg-white hover:bg-zinc-50'}
-                  `}
-                  aria-pressed={scriptHistory.value}
-                >
-                  <span className="text-sm font-semibold leading-5">변경 기록</span>
-                  <img src={refreshIcon} className="w-4 h-4" />
-                </button>
-
-                {scriptHistory.value && (
-                  <>
-                    <div className="fixed inset-0 z-40" onClick={scriptHistory.off} />
-
-                    <div
-                      className="absolute z-50
-                        right-0 bottom-full mb-2
-                        origin-bottom-right
-                        w-[384px] max-w-[90vw]
-                        rounded-lg overflow-hidden bg-white
-                        shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-                        "
-                    >
-                      <div className="px-4 py-3 bg-white border-b border-zinc-200 flex items-center justify-between">
-                        <div className="text-zinc-700 text-base font-semibold leading-6">
-                          대본 변경 기록
-                        </div>
-                      </div>
-
-                      <div className="max-h-[320px] overflow-y-auto">
-                        <div className="px-4 pt-3 pb-4 bg-gray-100 border-b border-zinc-200">
-                          <div className="flex flex-col gap-3">
-                            <div className="text-gray-500 text-xs font-semibold leading-4">
-                              현재
-                            </div>
-                            <div className="text-zinc-700 text-sm font-medium leading-5">
-                              (현재 대본 내용이 들어올 자리)
-                            </div>
-                          </div>
-                        </div>
-
-                        {[0, 1, 2, 3].map((idx) => (
-                          <div
-                            key={idx}
-                            className="px-4 pt-2 pb-4 bg-white border-b border-zinc-200"
-                            title=""
-                          >
-                            <div className="flex items-center justify-between">
-                              <div className="text-gray-500 text-xs font-medium leading-4">
-                                (시간 표시 자리)
-                              </div>
-
-                              <button
-                                type="button"
-                                className="
-                                  pl-2 pr-1.5 py-1 bg-white rounded
-                                  outline outline-1 outline-offset-[-1px] outline-zinc-200
-                                  inline-flex items-center gap-1
-                                  hover:bg-gray-50 active:scale-[0.99] transition
-                                "
-                              >
-                                <span className="text-zinc-700 text-xs font-semibold leading-4">
-                                  복원
-                                </span>
-                                <img src={refreshIcon} className="w-4 h-4" />
-                              </button>
-                            </div>
-
-                            <div className="mt-2 text-zinc-700 text-sm font-medium leading-5">
-                              (이전 대본 내용 자리 #{idx + 1})
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-
-              <div className="relative inline-block align-top">
-                <button
-                  onClick={opinion.toggle}
-                  className={`
-                    h-7 px-2 rounded outline outline-1 outline-offset-[-1px]
-                    inline-flex items-center gap-1
-                    ${opinion.value ? 'outline-indigo-500 text-indigo-500 bg-white' : 'outline-zinc-200 text-zinc-700 bg-white hover:bg-zinc-50'}
-                  `}
-                  aria-pressed={opinion.value}
-                >
-                  <span className="text-sm font-semibold leading-5">의견</span>
-                  <span
-                    className={`${opinion.value ? 'text-indigo-500' : 'text-gray-500'} text-sm font-semibold leading-5`}
-                  >
-                    3
-                  </span>
-                </button>
-
-                {/* 의견 pop over */}
-                {opinion.value && (
-                  <>
-                    <div className="fixed inset-0 z-40" onClick={opinion.off} />
-
-                    {/* popover 위치 = 버튼 right edge에 붙이고 왼쪽으로 펼쳐지게 */}
-                    <div
-                      className="absolute z-50
-                        right-0 bottom-full mb-2
-                        origin-bottom-right
-                        w-[384px] max-w-[90vw]
-                        rounded-lg overflow-hidden bg-white
-                        shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-                        "
-                    >
-                      <div className="px-4 py-3 bg-white border-b border-zinc-200 flex items-center justify-between">
-                        <div className="text-zinc-700 text-base font-semibold leading-6">의견</div>
-                      </div>
-
-                      <div className="h-80 overflow-y-auto">
-                        {[0, 1, 2, 3].map((idx) => {
-                          const isMine = idx < 2;
-                          const hasReply = idx === 2;
-
-                          return (
-                            <div
-                              key={idx}
-                              className={`
-                                ${hasReply ? 'pl-14 pr-4' : 'px-4'}
-                                py-3 bg-white
-                                flex items-start gap-3
-                              `}
-                              title={''}
-                            >
-                              <div className="h-20 flex items-start gap-2.5">
-                                <div className="w-8 h-8 bg-zinc-300 rounded-full" />
-                              </div>
-
-                              <div className="flex-1 pt-1.5 flex flex-col gap-1">
-                                <div className="flex flex-col gap-1">
-                                  <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2">
-                                      <div className="max-w-48 text-zinc-700 text-sm font-semibold leading-5 line-clamp-1">
-                                        {isMine ? '익명 사용자' : '김철수'}
-                                      </div>
-                                      <div className="text-gray-500 text-xs font-medium leading-4">
-                                        {idx === 0 ? '방금 전' : '1시간 전'}
-                                      </div>
-                                    </div>
-
-                                    {isMine && (
-                                      <button
-                                        type="button"
-                                        className="flex items-center gap-1 text-red-500 text-xs font-semibold leading-4 hover:opacity-80"
-                                      >
-                                        삭제
-                                        <img src={treshcanIcon} className="w-4 h-4" />
-                                      </button>
-                                    )}
-                                  </div>
-
-                                  <div className="text-zinc-700 text-sm font-medium leading-5">
-                                    이 부분 설명이 명확해요!
-                                  </div>
-                                </div>
-
-                                <div className="flex items-center gap-4">
-                                  {/* setActiveReplyIdx: 같은 댓글 다시 누르면 닫기(toggle)
-                                   setReplyText: 새로 열 때 입력 초기화(원하면 제거) */}
-                                  <button
-                                    type="button"
-                                    className="flex items-center gap-1 text-indigo-500 text-xs font-semibold leading-4 hover:opacity-80"
-                                    onClick={() => {
-                                      setActiveReplyIdx((prev) => (prev === idx ? null : idx));
-                                      setReplyText('');
-                                    }}
-                                  >
-                                    답글
-                                    <img src={replyIcon} className="w-4 h-4" />
-                                  </button>
-
-                                  {/* 답글 버튼 밑에 inputBox렌더링 */}
-                                  {activeReplyIdx === idx && (
-                                    <div className="mt-2 flex items-center gap-2">
-                                      <input
-                                        value={replyText}
-                                        onChange={(e) => setReplyText(e.target.value)}
-                                        placeholder="답글을 입력하세요"
-                                        className="flex-1 h-10 px-3 rounded-lg border border-zinc-200 text-sm outline-none focus:border-indigo-500"
-                                      />
-                                      {/* 서버 붙기 전: 아무 것도 안 하고 닫기만 */}
-                                      <button
-                                        type="button"
-                                        className="h-10 px-3 rounded-lg bg-zinc-900 text-white text-sm font-semibold hover:opacity-90"
-                                        onClick={() => {
-                                          setActiveReplyIdx(null);
-                                          setReplyText('');
-                                        }}
-                                      >
-                                        등록
-                                      </button>
-                                    </div>
-                                  )}
-                                </div>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-
-            {/* 전체 Script Box 내려갔다 올라오게 */}
-            <button
-              type="button"
-              onClick={scriptBoxDock.toggle}
-              className="w-6 h-6 rounded hover:bg-zinc-100 flex items-center justify-center"
-              aria-label="more"
-              aria-expanded={!scriptBoxDock.value}
-            >
-              <img
-                src={smallArrowIcon}
-                className={`
-                      w-4 h-4
-                      transition-transform duration-300 ease-out
-                      ${scriptBoxDock.value ? 'rotate-180' : 'rotate-0'}
-                    `}
-              />
-            </button>
-          </div>
-        </div>
-
-        {/* "대본 입력 영역" textarea */}
-        <div className="w-full bg-white">
-          <textarea
-            className="
-              w-full min-h-[250px] resize-none
-              px-5 py-4
-              text-zinc-700 text-sm leading-6
-              placeholder:text-gray-400
-              outline-none
-              rounded-bl-lg rounded-br-lg
-            "
-            placeholder="슬라이드 대본을 입력하세요..."
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ScriptBox;
diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index 7cd9557b..ee828a16 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import replyIcon from '../../assets/icons/replyIcon.svg';
-import treshcanIcon from '../../assets/icons/treshcanIcon.svg';
+import trashcanIcon from '../../assets/icons/trashcanIcon.svg';
 
 type OpinionProps = {
   opinion: {
@@ -106,7 +106,7 @@ const Opinion = ({
                               className="flex items-center gap-1 text-red-500 text-xs font-semibold leading-4 hover:opacity-80"
                             >
                               삭제
-                              <img src={treshcanIcon} className="w-4 h-4" />
+                              <img src={trashcanIcon} className="w-4 h-4" />
                             </button>
                           )}
                         </div>
diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index 1fe85770..b9b9cae4 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
 import { useToggle } from '../../hooks/useToggle';
 import Opinion from './Opinion';
-import ScriptBoxEmogi from './ScriptBoxEmogi';
+import ScriptBoxEmoji from './ScriptBoxEmoji';
 import ScriptHistory from './ScriptHistory';
 import SlideTitle from './SlideTitle';
 
@@ -17,11 +17,11 @@ const ScriptBox = () => {
   //
   // };
 
-  // 1. 이모지버튼 ( 그대로 유지 )
-  const [isEmogiClick, setEmogiClick] = useState(false);
+  // 1. 이모지 팝오버
+  const [isEmojiOpen, setEmojiOpen] = useState(false);
 
-  const handleEmogiClick = () => {
-    setEmogiClick((prev) => !prev);
+  const handleEmojiToggle = () => {
+    setEmojiOpen((prev) => !prev);
   };
 
   // 2. 변경기록 버튼
@@ -63,7 +63,7 @@ const ScriptBox = () => {
           {/* 우측 컨트롤 영역 */}
           <div className="flex items-center gap-4">
             {/* 이모지 카운트 영역 -> 컴포넌트로 분리 */}
-            <ScriptBoxEmogi isEmogiClick={isEmogiClick} handleEmogiClick={handleEmogiClick} />
+            <ScriptBoxEmoji isEmojiOpen={isEmojiOpen} onToggle={handleEmojiToggle} />
 
             {/* 변경기록/의견 버튼 그룹 */}
             <div className="flex items-center gap-2">
diff --git a/src/components/script-box/ScriptBoxEmogi.tsx b/src/components/script-box/ScriptBoxEmoji.tsx
similarity index 85%
rename from src/components/script-box/ScriptBoxEmogi.tsx
rename to src/components/script-box/ScriptBoxEmoji.tsx
index aa62f67d..dff27b54 100644
--- a/src/components/script-box/ScriptBoxEmogi.tsx
+++ b/src/components/script-box/ScriptBoxEmoji.tsx
@@ -1,9 +1,9 @@
-type ScriptBoxEmogiProps = {
-  isEmogiClick: boolean; // 변수명 그대로 유지: isEmogiClick
-  handleEmogiClick: () => void; // 핸들러명 그대로 유지: handleEmogiClick
+type ScriptBoxEmojiProps = {
+  isEmojiOpen: boolean;
+  onToggle: () => void;
 };
 
-const ScriptBoxEmogi = ({ isEmogiClick, handleEmogiClick }: ScriptBoxEmogiProps) => {
+const ScriptBoxEmoji = ({ isEmojiOpen, onToggle }: ScriptBoxEmojiProps) => {
   return (
     <>
       {/*  (기존 그대로) 이모지 카운트 영역 */}
@@ -21,16 +21,14 @@ const ScriptBoxEmogi = ({ isEmogiClick, handleEmogiClick }: ScriptBoxEmogiProps)
       {/*  (기존 그대로) 이모지 버튼 + popover */}
       <div className="relative">
         <button
-          className="h-7 px-2 rounded  hover:bg-zinc-100"
-          // ✅ 부모에서 내려준 handleEmogiClick 그대로 연결
-          onClick={handleEmogiClick}
-          // ✅ 부모에서 내려준 isEmogiClick 그대로 연결
-          aria-expanded={isEmogiClick}
+          className="h-7 px-2 rounded hover:bg-gray-100"
+          onClick={onToggle}
+          aria-expanded={isEmojiOpen}
         >
-          ...
+          ···
         </button>
 
-        {isEmogiClick && ( // 받은 이모티콘 서버에서 뿌려줌
+        {isEmojiOpen && (
           <div
             className="
               px-4 py-3 bg-white rounded-lg
@@ -91,4 +89,4 @@ const ScriptBoxEmogi = ({ isEmogiClick, handleEmogiClick }: ScriptBoxEmogiProps)
   );
 };
 
-export default ScriptBoxEmogi;
+export default ScriptBoxEmoji;
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index 5475862d..ff21f170 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -15,7 +15,7 @@ const ScriptHistory = ({ scriptHistory }: ScriptHistoryProps) => {
       <button
         onClick={scriptHistory.toggle}
         className={`
-          h-7 pl-2 pr-1.5 rounded outline outline-1 outline-offset-[-1px]
+          h-7 pl-2 pr-1.5 rounded outline outline-1 -outline-offset-1
           inline-flex items-center gap-1
           ${
             scriptHistory.value
@@ -48,7 +48,7 @@ const ScriptHistory = ({ scriptHistory }: ScriptHistoryProps) => {
               <div className="text-zinc-700 text-base font-semibold leading-6">대본 변경 기록</div>
             </div>
 
-            <div className="max-h-[320px] overflow-y-auto">
+            <div className="max-h-80 overflow-y-auto">
               <div className="px-4 pt-3 pb-4 bg-gray-100 border-b border-zinc-200">
                 <div className="flex flex-col gap-3">
                   <div className="text-gray-500 text-xs font-semibold leading-4">현재</div>

From 99c65a8901ba3af64ac45717dc1b561395db8a71 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:34:43 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20Popover=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20(#1?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 외부 클릭 시 닫기
- Escape 키로 닫기
- position (top/bottom), align (start/end) 지원

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/common/Popover.tsx | 91 +++++++++++++++++++++++++++++++
 src/components/common/index.ts    |  1 +
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/common/Popover.tsx

diff --git a/src/components/common/Popover.tsx b/src/components/common/Popover.tsx
new file mode 100644
index 00000000..9aa0cc07
--- /dev/null
+++ b/src/components/common/Popover.tsx
@@ -0,0 +1,91 @@
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+type PopoverPosition = 'top' | 'bottom';
+type PopoverAlign = 'start' | 'end';
+
+interface PopoverProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  position?: PopoverPosition;
+  align?: PopoverAlign;
+  className?: string;
+}
+
+export function Popover({
+  trigger,
+  children,
+  position = 'top',
+  align = 'end',
+  className,
+}: PopoverProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  // Escape 키로 닫기
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, handleClose]);
+
+  // 외부 클릭 시 닫기
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, handleClose]);
+
+  const positionClasses = clsx({
+    'bottom-full mb-2': position === 'top',
+    'top-full mt-2': position === 'bottom',
+  });
+
+  const alignClasses = clsx({
+    'left-0': align === 'start',
+    'right-0': align === 'end',
+  });
+
+  return (
+    <div ref={popoverRef} className="relative">
+      <div onClick={handleToggle}>{trigger}</div>
+
+      {isOpen && (
+        <div
+          className={clsx(
+            'absolute z-50',
+            positionClasses,
+            alignClasses,
+            'rounded-lg bg-white shadow-[0_0.25rem_1.25rem_rgba(0,0,0,0.05)]',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 85767d1a..faaaf7ba 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,2 +1,3 @@
 export { LoginButton } from './LoginButton';
 export { Logo } from './Logo';
+export { Popover } from './Popover';

From fde77002b137a4331935ef3d11b6701b3d653091 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:39:25 +0900
Subject: [PATCH 03/16] =?UTF-8?q?refactor:=20ScriptBox=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ScriptBox를 Header와 Content로 분리
- Header에서 모든 팝오버 상태를 자체 관리하도록 변경
- props drilling 최소화
- 불필요한 slideId prop 제거

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/script-box/ScriptBox.tsx       | 141 ++++--------------
 .../script-box/ScriptBoxContent.tsx           |  16 ++
 src/components/script-box/ScriptBoxHeader.tsx |  98 ++++++++++++
 src/components/script-box/index.ts            |   1 +
 4 files changed, 143 insertions(+), 113 deletions(-)
 create mode 100644 src/components/script-box/ScriptBoxContent.tsx
 create mode 100644 src/components/script-box/ScriptBoxHeader.tsx
 create mode 100644 src/components/script-box/index.ts

diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index b9b9cae4..467a57b1 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -1,122 +1,37 @@
 import { useState } from 'react';
 
-import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
-import { useToggle } from '../../hooks/useToggle';
-import Opinion from './Opinion';
-import ScriptBoxEmoji from './ScriptBoxEmoji';
-import ScriptHistory from './ScriptHistory';
-import SlideTitle from './SlideTitle';
+import clsx from 'clsx';
 
-const ScriptBox = () => {
-  // 0. 슬라이드 이름(이름 변경) 버튼
-  const slideNameChange = useToggle(false);
-  // 0-1. 현재 슬라이드 이름, 나중에 서버에서 받아온 거로 default 채워야함.
-  const [slideTitle, setSlideTitle] = useState('슬라이드 1');
-  // 0-2. 타이틀 저장 버튼(서버 요청)
-  // const handleSaveSlideTitle = () => {
-  //
-  // };
+import ScriptBoxContent from './ScriptBoxContent';
+import ScriptBoxHeader from './ScriptBoxHeader';
 
-  // 1. 이모지 팝오버
-  const [isEmojiOpen, setEmojiOpen] = useState(false);
+interface ScriptBoxProps {
+  slideTitle?: string;
+}
 
-  const handleEmojiToggle = () => {
-    setEmojiOpen((prev) => !prev);
-  };
-
-  // 2. 변경기록 버튼
-  const scriptHistory = useToggle(false);
-  // 3. 의견 버튼
-  const opinion = useToggle(false);
-  // 3-1. 답변 (나중에 피드백id랑 매칭해야됨)
-  // 어떤 댓글에 답글 입력창이 열려있는지
-  const [activeReplyIdx, setActiveReplyIdx] = useState<number | null>(null);
-
-  //  답글 입력값(일단 1개만)
-  const [replyText, setReplyText] = useState('');
+export default function ScriptBox({ slideTitle = '슬라이드 1' }: ScriptBoxProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
-  // 4. 대본섹션 닫기 토글
-  const scriptBoxDock = useToggle(false);
+  const handleToggleCollapse = () => {
+    setIsCollapsed((prev) => !prev);
+  };
 
   return (
-    <>
-      <div
-        /* 접힘=true면 전체높이(320) 중 헤더(40)만 남기고 아래로 숨김 */
-        className={`
-            fixed left-0 right-0 bottom-0 z-30
-            mx-auto w-full
-            bg-white
-            transition-transform duration-300 ease-out
-            h-[320px]
-            ${scriptBoxDock.value ? 'translate-y-[calc(100%-40px)]' : 'translate-y-0'}
-            `}
-      >
-        {/* 변경: 상단바 내부 레이아웃(좌/우 정렬) */}
-        <div className="h-10 px-5 py-2 flex items-center justify-between border-b border-zinc-200">
-          {/* 슬라이드 제목 변경 */}
-          <SlideTitle
-            slideNameChange={slideNameChange}
-            slideTitle={slideTitle}
-            setSlideTitle={setSlideTitle}
-          />
-
-          {/* 우측 컨트롤 영역 */}
-          <div className="flex items-center gap-4">
-            {/* 이모지 카운트 영역 -> 컴포넌트로 분리 */}
-            <ScriptBoxEmoji isEmojiOpen={isEmojiOpen} onToggle={handleEmojiToggle} />
-
-            {/* 변경기록/의견 버튼 그룹 */}
-            <div className="flex items-center gap-2">
-              {/* 변경기록 */}
-              <ScriptHistory scriptHistory={scriptHistory} />
-
-              {/* 의견(댓글)기록 */}
-              <Opinion
-                opinion={opinion}
-                activeReplyIdx={activeReplyIdx}
-                setActiveReplyIdx={setActiveReplyIdx}
-                replyText={replyText}
-                setReplyText={setReplyText}
-              />
-            </div>
-
-            {/* 전체 Script Box 열림 닫힘 버튼*/}
-            <button
-              type="button"
-              onClick={scriptBoxDock.toggle}
-              className="w-6 h-6 rounded hover:bg-zinc-100 flex items-center justify-center"
-              aria-label="more"
-              aria-expanded={!scriptBoxDock.value}
-            >
-              <img
-                src={smallArrowIcon}
-                className={`
-                      w-4 h-4
-                      transition-transform duration-300 ease-out
-                      ${scriptBoxDock.value ? 'rotate-180' : 'rotate-0'}
-                    `}
-              />
-            </button>
-          </div>
-        </div>
-
-        {/* "대본 입력 영역" textarea */}
-        <div className="w-full bg-white">
-          <textarea
-            className="
-              w-full min-h-[250px] resize-none
-              px-5 py-4
-              text-zinc-700 text-sm leading-6
-              placeholder:text-gray-400
-              outline-none
-              rounded-bl-lg rounded-br-lg
-            "
-            placeholder="슬라이드 대본을 입력하세요..."
-          />
-        </div>
-      </div>
-    </>
+    <div
+      className={clsx(
+        'fixed inset-x-0 bottom-0 z-30',
+        'mx-auto w-full bg-white',
+        'transition-transform duration-300 ease-out',
+        'h-[20rem]',
+        isCollapsed ? 'translate-y-[calc(100%-2.5rem)]' : 'translate-y-0',
+      )}
+    >
+      <ScriptBoxHeader
+        slideTitle={slideTitle}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={handleToggleCollapse}
+      />
+      <ScriptBoxContent />
+    </div>
   );
-};
-
-export default ScriptBox;
+}
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
new file mode 100644
index 00000000..78cf0e07
--- /dev/null
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+export default function ScriptBoxContent() {
+  const [script, setScript] = useState('');
+
+  return (
+    <div className="h-[calc(100%-2.5rem)] overflow-y-auto bg-white px-4 py-3">
+      <textarea
+        value={script}
+        onChange={(e) => setScript(e.target.value)}
+        placeholder="대본을 입력하세요..."
+        className="h-full w-full resize-none border-none bg-transparent text-sm leading-relaxed text-gray-800 outline-none placeholder:text-gray-400"
+      />
+    </div>
+  );
+}
diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
new file mode 100644
index 00000000..2433d9a6
--- /dev/null
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+import clsx from 'clsx';
+
+import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
+import Opinion from './Opinion';
+import ScriptBoxEmoji from './ScriptBoxEmoji';
+import ScriptHistory from './ScriptHistory';
+import SlideTitle from './SlideTitle';
+
+interface ScriptBoxHeaderProps {
+  slideTitle: string;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+export default function ScriptBoxHeader({
+  slideTitle: initialSlideTitle,
+  isCollapsed,
+  onToggleCollapse,
+}: ScriptBoxHeaderProps) {
+  // SlideTitle 관련 상태
+  const [slideTitle, setSlideTitle] = useState(initialSlideTitle);
+  const [isSlideNameOpen, setIsSlideNameOpen] = useState(false);
+
+  // Emoji 관련 상태
+  const [isEmojiOpen, setIsEmojiOpen] = useState(false);
+
+  // History 관련 상태
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+
+  // Opinion 관련 상태
+  const [isOpinionOpen, setIsOpinionOpen] = useState(false);
+  const [activeReplyIdx, setActiveReplyIdx] = useState<number | null>(null);
+  const [replyText, setReplyText] = useState('');
+
+  return (
+    <div className="flex h-10 items-center justify-between border-b border-gray-200 bg-white px-4">
+      {/* 좌측: 접기 버튼 + 슬라이드 제목 */}
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onToggleCollapse}
+          className="flex h-7 w-7 items-center justify-center rounded hover:bg-gray-100"
+          aria-expanded={!isCollapsed}
+          aria-label={isCollapsed ? '대본 펼치기' : '대본 접기'}
+        >
+          <img
+            src={smallArrowIcon}
+            alt=""
+            className={clsx(
+              'h-4 w-4 transition-transform duration-300',
+              !isCollapsed && 'rotate-180',
+            )}
+          />
+        </button>
+
+        <SlideTitle
+          slideNameChange={{
+            value: isSlideNameOpen,
+            toggle: () => setIsSlideNameOpen((prev) => !prev),
+            off: () => setIsSlideNameOpen(false),
+          }}
+          slideTitle={slideTitle}
+          setSlideTitle={setSlideTitle}
+        />
+      </div>
+
+      {/* 우측: 이모지, 변경기록, 의견 */}
+      <div className="flex items-center gap-3">
+        <ScriptBoxEmoji
+          isEmojiOpen={isEmojiOpen}
+          onToggle={() => setIsEmojiOpen((prev) => !prev)}
+        />
+
+        <ScriptHistory
+          scriptHistory={{
+            value: isHistoryOpen,
+            toggle: () => setIsHistoryOpen((prev) => !prev),
+            off: () => setIsHistoryOpen(false),
+          }}
+        />
+
+        <Opinion
+          opinion={{
+            value: isOpinionOpen,
+            toggle: () => setIsOpinionOpen((prev) => !prev),
+            off: () => setIsOpinionOpen(false),
+          }}
+          activeReplyIdx={activeReplyIdx}
+          setActiveReplyIdx={setActiveReplyIdx}
+          replyText={replyText}
+          setReplyText={setReplyText}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/script-box/index.ts b/src/components/script-box/index.ts
new file mode 100644
index 00000000..8efe0b14
--- /dev/null
+++ b/src/components/script-box/index.ts
@@ -0,0 +1 @@
+export { default as ScriptBox } from './ScriptBox';

From c7cb045cdd182e4f03f6372ce8cd40b6d937bc0b Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:42:18 +0900
Subject: [PATCH 04/16] =?UTF-8?q?refactor:=20=ED=95=98=EC=9C=84=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20Popover=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=9E=90=EC=B2=B4=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20=EA=B4=80=EB=A6=AC=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SlideTitle, ScriptBoxEmoji, ScriptHistory, Opinion 컴포넌트 리팩토링
- 공통 Popover 컴포넌트 사용으로 중복 코드 제거
- 각 컴포넌트가 자체 상태를 관리하도록 변경
- ScriptBoxHeader에서 상태 관리 로직 제거 (props drilling 해소)
- 데이터 구조를 인터페이스로 명시화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/script-box/Opinion.tsx         | 310 +++++++++---------
 src/components/script-box/ScriptBoxEmoji.tsx  | 139 +++-----
 src/components/script-box/ScriptBoxHeader.tsx |  56 +---
 src/components/script-box/ScriptHistory.tsx   | 167 +++++-----
 src/components/script-box/SlideTitle.tsx      | 114 +++----
 5 files changed, 336 insertions(+), 450 deletions(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index ee828a16..6f95cbb8 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -1,170 +1,180 @@
-import React from 'react';
+import { useState } from 'react';
+
+import clsx from 'clsx';
 
 import replyIcon from '../../assets/icons/replyIcon.svg';
 import trashcanIcon from '../../assets/icons/trashcanIcon.svg';
+import { Popover } from '../common';
+
+interface OpinionItem {
+  id: number;
+  author: string;
+  content: string;
+  timestamp: string;
+  isMine: boolean;
+  isReply?: boolean;
+}
+
+interface OpinionProps {
+  opinions?: OpinionItem[];
+  opinionCount?: number;
+  onDelete?: (id: number) => void;
+  onReply?: (id: number, content: string) => void;
+}
+
+export default function Opinion({
+  opinions = [
+    {
+      id: 0,
+      author: '익명 사용자',
+      content: '이 부분 설명이 명확해요!',
+      timestamp: '방금 전',
+      isMine: true,
+    },
+    {
+      id: 1,
+      author: '익명 사용자',
+      content: '이 부분 설명이 명확해요!',
+      timestamp: '1시간 전',
+      isMine: true,
+    },
+    {
+      id: 2,
+      author: '김철수',
+      content: '이 부분 설명이 명확해요!',
+      timestamp: '1시간 전',
+      isMine: false,
+      isReply: true,
+    },
+    {
+      id: 3,
+      author: '김철수',
+      content: '이 부분 설명이 명확해요!',
+      timestamp: '1시간 전',
+      isMine: false,
+    },
+  ],
+  opinionCount = 3,
+  onDelete,
+  onReply,
+}: OpinionProps) {
+  const [activeReplyId, setActiveReplyId] = useState<number | null>(null);
+  const [replyText, setReplyText] = useState('');
 
-type OpinionProps = {
-  opinion: {
-    value: boolean;
-    toggle: () => void;
-    off: () => void;
+  const handleReplySubmit = (opinionId: number) => {
+    if (replyText.trim()) {
+      onReply?.(opinionId, replyText);
+    }
+    setActiveReplyId(null);
+    setReplyText('');
   };
 
-  activeReplyIdx: number | null;
-  setActiveReplyIdx: React.Dispatch<React.SetStateAction<number | null>>;
-  replyText: string;
-  // React.SetStateAction : 상태를 바꾸는 set 함수의 타입은 이런 식으로 명시함
-  setReplyText: React.Dispatch<React.SetStateAction<string>>;
-};
+  const trigger = (
+    <button
+      type="button"
+      className={clsx(
+        'inline-flex h-7 items-center gap-1 rounded px-2',
+        'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
+        'hover:bg-gray-100',
+      )}
+    >
+      <span className="text-sm font-semibold leading-5 text-gray-800">의견</span>
+      <span className="text-sm font-semibold leading-5 text-gray-500">{opinionCount}</span>
+    </button>
+  );
 
-const Opinion = ({
-  opinion,
-  activeReplyIdx,
-  setActiveReplyIdx,
-  replyText,
-  setReplyText,
-}: OpinionProps) => {
   return (
-    <div className="relative inline-block align-top">
-      {/* (기존 그대로) 의견 버튼 */}
-      <button
-        onClick={opinion.toggle}
-        className={`
-          h-7 px-2 rounded outline outline-1 outline-offset-[-1px]
-          inline-flex items-center gap-1
-          ${
-            opinion.value
-              ? 'outline-indigo-500 text-indigo-500 bg-white'
-              : 'outline-zinc-200 text-zinc-700 bg-white hover:bg-zinc-50'
-          }
-        `}
-        aria-pressed={opinion.value}
-      >
-        <span className="text-sm font-semibold leading-5">의견</span>
-        <span
-          className={`${
-            opinion.value ? 'text-indigo-500' : 'text-gray-500'
-          } text-sm font-semibold leading-5`}
-        >
-          3
-        </span>
-      </button>
-
-      {/* (기존 그대로) 의견 popover */}
-      {opinion.value && (
-        <>
-          {/* 바깥 클릭 시 닫기 */}
-          <div className="fixed inset-0 z-40" onClick={opinion.off} />
+    <Popover
+      trigger={trigger}
+      position="top"
+      align="end"
+      className="w-96 max-w-[90vw] overflow-hidden"
+    >
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
+        <span className="text-base font-semibold leading-6 text-gray-800">의견</span>
+      </div>
 
+      {/* 의견 목록 */}
+      <div className="h-80 overflow-y-auto">
+        {opinions.map((opinion) => (
           <div
-            className="absolute z-50
-              right-0 bottom-full mb-2
-              origin-bottom-right
-              w-[384px] max-w-[90vw]
-              rounded-lg overflow-hidden bg-white
-              shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-            "
+            key={opinion.id}
+            className={clsx(
+              'flex items-start gap-3 bg-white py-3',
+              opinion.isReply ? 'pl-14 pr-4' : 'px-4',
+            )}
           >
-            <div className="px-4 py-3 bg-white border-b border-zinc-200 flex items-center justify-between">
-              <div className="text-zinc-700 text-base font-semibold leading-6">의견</div>
+            {/* 프로필 이미지 */}
+            <div className="flex h-20 items-start gap-2.5">
+              <div className="h-8 w-8 rounded-full bg-gray-300" />
             </div>
 
-            <div className="h-80 overflow-y-auto">
-              {[0, 1, 2, 3].map((idx) => {
-                const isMine = idx < 2;
-                const hasReply = idx === 2;
-
-                return (
-                  <div
-                    key={idx}
-                    className={`
-                      ${hasReply ? 'pl-14 pr-4' : 'px-4'}
-                      py-3 bg-white
-                      flex items-start gap-3
-                    `}
-                    title={''}
-                  >
-                    <div className="h-20 flex items-start gap-2.5">
-                      <div className="w-8 h-8 bg-zinc-300 rounded-full" />
-                    </div>
-
-                    <div className="flex-1 pt-1.5 flex flex-col gap-1">
-                      <div className="flex flex-col gap-1">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            <div className="max-w-48 text-zinc-700 text-sm font-semibold leading-5 line-clamp-1">
-                              {isMine ? '익명 사용자' : '김철수'}
-                            </div>
-                            <div className="text-gray-500 text-xs font-medium leading-4">
-                              {idx === 0 ? '방금 전' : '1시간 전'}
-                            </div>
-                          </div>
+            {/* 의견 내용 */}
+            <div className="flex flex-1 flex-col gap-1 pt-1.5">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="max-w-48 text-sm font-semibold leading-5 text-gray-800 line-clamp-1">
+                      {opinion.author}
+                    </span>
+                    <span className="text-xs font-medium leading-4 text-gray-500">
+                      {opinion.timestamp}
+                    </span>
+                  </div>
 
-                          {isMine && (
-                            <button
-                              type="button"
-                              className="flex items-center gap-1 text-red-500 text-xs font-semibold leading-4 hover:opacity-80"
-                            >
-                              삭제
-                              <img src={trashcanIcon} className="w-4 h-4" />
-                            </button>
-                          )}
-                        </div>
+                  {opinion.isMine && (
+                    <button
+                      type="button"
+                      onClick={() => onDelete?.(opinion.id)}
+                      className="flex items-center gap-1 text-xs font-semibold leading-4 text-red-500 hover:opacity-80"
+                    >
+                      삭제
+                      <img src={trashcanIcon} alt="" className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
 
-                        <div className="text-zinc-700 text-sm font-medium leading-5">
-                          이 부분 설명이 명확해요!
-                        </div>
-                      </div>
+                <p className="text-sm font-medium leading-5 text-gray-800">{opinion.content}</p>
+              </div>
 
-                      <div className="flex items-center gap-4">
-                        {/* ✅ 기존 로직 그대로 유지
-                            - setActiveReplyIdx: 같은 댓글 다시 누르면 닫기(toggle)
-                            - setReplyText: 새로 열 때 입력 초기화 */}
-                        <button
-                          type="button"
-                          className="flex items-center gap-1 text-indigo-500 text-xs font-semibold leading-4 hover:opacity-80"
-                          onClick={() => {
-                            setActiveReplyIdx((prev) => (prev === idx ? null : idx));
-                            setReplyText('');
-                          }}
-                        >
-                          답글
-                          <img src={replyIcon} className="w-4 h-4" />
-                        </button>
+              {/* 답글 버튼 */}
+              <div className="flex items-center gap-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setActiveReplyId(activeReplyId === opinion.id ? null : opinion.id);
+                    setReplyText('');
+                  }}
+                  className="flex items-center gap-1 text-xs font-semibold leading-4 text-main hover:opacity-80"
+                >
+                  답글
+                  <img src={replyIcon} alt="" className="h-4 w-4" />
+                </button>
+              </div>
 
-                        {/* 답글 inputBox 렌더링 */}
-                        {activeReplyIdx === idx && (
-                          <div className="mt-2 flex items-center gap-2">
-                            <input
-                              value={replyText}
-                              onChange={(e) => setReplyText(e.target.value)}
-                              placeholder="답글을 입력하세요"
-                              className="flex-1 h-10 px-3 rounded-lg border border-zinc-200 text-sm outline-none focus:border-indigo-500"
-                            />
-                            {/* 서버 붙기 전: 아무 것도 안 하고 닫기만 */}
-                            <button
-                              type="button"
-                              className="h-10 px-3 rounded-lg bg-zinc-900 text-white text-sm font-semibold hover:opacity-90"
-                              onClick={() => {
-                                setActiveReplyIdx(null);
-                                setReplyText('');
-                              }}
-                            >
-                              등록
-                            </button>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
+              {/* 답글 입력 */}
+              {activeReplyId === opinion.id && (
+                <div className="mt-2 flex items-center gap-2">
+                  <input
+                    value={replyText}
+                    onChange={(e) => setReplyText(e.target.value)}
+                    placeholder="답글을 입력하세요"
+                    className="h-10 flex-1 rounded-lg border border-gray-200 px-3 text-sm outline-none focus:border-main"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleReplySubmit(opinion.id)}
+                    className="h-10 rounded-lg bg-gray-900 px-3 text-sm font-semibold text-white hover:opacity-90"
+                  >
+                    등록
+                  </button>
+                </div>
+              )}
             </div>
           </div>
-        </>
-      )}
-    </div>
+        ))}
+      </div>
+    </Popover>
   );
-};
-
-export default Opinion;
+}
diff --git a/src/components/script-box/ScriptBoxEmoji.tsx b/src/components/script-box/ScriptBoxEmoji.tsx
index dff27b54..45df12d5 100644
--- a/src/components/script-box/ScriptBoxEmoji.tsx
+++ b/src/components/script-box/ScriptBoxEmoji.tsx
@@ -1,92 +1,61 @@
-type ScriptBoxEmojiProps = {
-  isEmojiOpen: boolean;
-  onToggle: () => void;
-};
+import { Popover } from '../common';
 
-const ScriptBoxEmoji = ({ isEmojiOpen, onToggle }: ScriptBoxEmojiProps) => {
-  return (
-    <>
-      {/*  (기존 그대로) 이모지 카운트 영역 */}
-      <div className="flex items-center gap-6">
-        <div className="flex items-center gap-2">
-          <div className="text-zinc-700 text-base leading-6">👍</div>
-          <div className="text-zinc-700 text-base leading-6">99+</div>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="text-zinc-700 text-base leading-6">😡</div>
-          <div className="text-zinc-700 text-base leading-6">12</div>
-        </div>
-      </div>
+const EMOJI_DATA = [
+  { emoji: '👍', count: 99 },
+  { emoji: '😡', count: 12 },
+];
 
-      {/*  (기존 그대로) 이모지 버튼 + popover */}
-      <div className="relative">
-        <button
-          className="h-7 px-2 rounded hover:bg-gray-100"
-          onClick={onToggle}
-          aria-expanded={isEmojiOpen}
-        >
-          ···
-        </button>
+const EMOJI_EXTENDED_DATA = [
+  [
+    { emoji: '😏', count: 15 },
+    { emoji: '❤️', count: 28 },
+    { emoji: '😎', count: 5 },
+    { emoji: '👀', count: 182 },
+    { emoji: '🤪', count: 3 },
+  ],
+  [
+    { emoji: '💡', count: 11 },
+    { emoji: '🙈', count: 488 },
+    { emoji: '💕', count: 2 },
+    { emoji: '😂', count: 46 },
+    { emoji: '🤓', count: 36 },
+  ],
+];
 
-        {isEmojiOpen && (
-          <div
-            className="
-              px-4 py-3 bg-white rounded-lg
-              shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-              inline-flex flex-col justify-start items-start gap-3
-              absolute right-0 bottom-full mb-2 origin-bottom-right z-50
-            "
-          >
-            <div className="inline-flex justify-start items-center gap-6">
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">😏</div>
-                <div className="text-center text-zinc-700 text-base leading-6">15</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">❤️</div>
-                <div className="text-center text-zinc-700 text-base leading-6">28</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">😎️</div>
-                <div className="text-center text-zinc-700 text-base leading-6">5</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">👀</div>
-                <div className="text-center text-zinc-700 text-base leading-6">182</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">🤪</div>
-                <div className="text-center text-zinc-700 text-base leading-6">3</div>
-              </div>
-            </div>
+export default function ScriptBoxEmoji() {
+  const trigger = (
+    <button type="button" className="h-7 rounded px-2 hover:bg-gray-100" aria-label="이모지 더보기">
+      ···
+    </button>
+  );
 
-            <div className="inline-flex justify-start items-center gap-6">
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">💡</div>
-                <div className="text-center text-zinc-700 text-base leading-6">11</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">🙈️</div>
-                <div className="text-center text-zinc-700 text-base leading-6">488</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">💕</div>
-                <div className="text-center text-zinc-700 text-base leading-6">2</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">😂</div>
-                <div className="text-center text-zinc-700 text-base leading-6">46</div>
-              </div>
-              <div className="flex justify-start items-center gap-2">
-                <div className="text-center text-zinc-700 text-base leading-6">🤓</div>
-                <div className="text-center text-zinc-700 text-base leading-6">36</div>
-              </div>
-            </div>
+  return (
+    <div className="flex items-center gap-3">
+      {/* 메인 이모지 카운트 */}
+      <div className="flex items-center gap-6">
+        {EMOJI_DATA.map(({ emoji, count }) => (
+          <div key={emoji} className="flex items-center gap-2">
+            <span className="text-base leading-6 text-gray-800">{emoji}</span>
+            <span className="text-base leading-6 text-gray-800">{count > 99 ? '99+' : count}</span>
           </div>
-        )}
+        ))}
       </div>
-    </>
-  );
-};
 
-export default ScriptBoxEmoji;
+      {/* 이모지 더보기 팝오버 */}
+      <Popover trigger={trigger} position="top" align="end" className="px-4 py-3">
+        <div className="flex flex-col gap-3">
+          {EMOJI_EXTENDED_DATA.map((row, rowIdx) => (
+            <div key={rowIdx} className="flex items-center gap-6">
+              {row.map(({ emoji, count }) => (
+                <div key={emoji} className="flex items-center gap-2">
+                  <span className="text-center text-base leading-6 text-gray-800">{emoji}</span>
+                  <span className="text-center text-base leading-6 text-gray-800">{count}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index 2433d9a6..4e7d41e2 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import clsx from 'clsx';
 
 import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
@@ -15,25 +13,10 @@ interface ScriptBoxHeaderProps {
 }
 
 export default function ScriptBoxHeader({
-  slideTitle: initialSlideTitle,
+  slideTitle,
   isCollapsed,
   onToggleCollapse,
 }: ScriptBoxHeaderProps) {
-  // SlideTitle 관련 상태
-  const [slideTitle, setSlideTitle] = useState(initialSlideTitle);
-  const [isSlideNameOpen, setIsSlideNameOpen] = useState(false);
-
-  // Emoji 관련 상태
-  const [isEmojiOpen, setIsEmojiOpen] = useState(false);
-
-  // History 관련 상태
-  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
-
-  // Opinion 관련 상태
-  const [isOpinionOpen, setIsOpinionOpen] = useState(false);
-  const [activeReplyIdx, setActiveReplyIdx] = useState<number | null>(null);
-  const [replyText, setReplyText] = useState('');
-
   return (
     <div className="flex h-10 items-center justify-between border-b border-gray-200 bg-white px-4">
       {/* 좌측: 접기 버튼 + 슬라이드 제목 */}
@@ -55,43 +38,14 @@ export default function ScriptBoxHeader({
           />
         </button>
 
-        <SlideTitle
-          slideNameChange={{
-            value: isSlideNameOpen,
-            toggle: () => setIsSlideNameOpen((prev) => !prev),
-            off: () => setIsSlideNameOpen(false),
-          }}
-          slideTitle={slideTitle}
-          setSlideTitle={setSlideTitle}
-        />
+        <SlideTitle initialTitle={slideTitle} />
       </div>
 
       {/* 우측: 이모지, 변경기록, 의견 */}
       <div className="flex items-center gap-3">
-        <ScriptBoxEmoji
-          isEmojiOpen={isEmojiOpen}
-          onToggle={() => setIsEmojiOpen((prev) => !prev)}
-        />
-
-        <ScriptHistory
-          scriptHistory={{
-            value: isHistoryOpen,
-            toggle: () => setIsHistoryOpen((prev) => !prev),
-            off: () => setIsHistoryOpen(false),
-          }}
-        />
-
-        <Opinion
-          opinion={{
-            value: isOpinionOpen,
-            toggle: () => setIsOpinionOpen((prev) => !prev),
-            off: () => setIsOpinionOpen(false),
-          }}
-          activeReplyIdx={activeReplyIdx}
-          setActiveReplyIdx={setActiveReplyIdx}
-          replyText={replyText}
-          setReplyText={setReplyText}
-        />
+        <ScriptBoxEmoji />
+        <ScriptHistory />
+        <Opinion />
       </div>
     </div>
   );
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index ff21f170..04ad55a6 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -1,99 +1,88 @@
-import refreshIcon from '../../assets/icons/refreshIcon.svg';
-
-type ScriptHistoryProps = {
-  scriptHistory: {
-    value: boolean;
-    toggle: () => void;
-    off: () => void;
-  };
-};
+import clsx from 'clsx';
 
-const ScriptHistory = ({ scriptHistory }: ScriptHistoryProps) => {
-  return (
-    <div className="relative">
-      {/* (기존 그대로) 변경기록 버튼 */}
-      <button
-        onClick={scriptHistory.toggle}
-        className={`
-          h-7 pl-2 pr-1.5 rounded outline outline-1 -outline-offset-1
-          inline-flex items-center gap-1
-          ${
-            scriptHistory.value
-              ? 'outline-indigo-500 text-indigo-500 bg-white'
-              : 'outline-zinc-200 text-zinc-700 bg-white hover:bg-zinc-50'
-          }
-        `}
-        aria-pressed={scriptHistory.value}
-      >
-        <span className="text-sm font-semibold leading-5">변경 기록</span>
-        <img src={refreshIcon} className="w-4 h-4" />
-      </button>
+import refreshIcon from '../../assets/icons/refreshIcon.svg';
+import { Popover } from '../common';
 
-      {/* (기존 그대로) 변경기록 popover */}
-      {scriptHistory.value && (
-        <>
-          {/* 바깥 클릭 시 닫기 */}
-          <div className="fixed inset-0 z-40" onClick={scriptHistory.off} />
+interface HistoryItem {
+  id: string;
+  timestamp: string;
+  content: string;
+}
 
-          <div
-            className="absolute z-50
-              right-0 bottom-full mb-2
-              origin-bottom-right
-              w-[384px] max-w-[90vw]
-              rounded-lg overflow-hidden bg-white
-              shadow-[0px_4px_20px_0px_rgba(0,0,0,0.05)]
-            "
-          >
-            <div className="px-4 py-3 bg-white border-b border-zinc-200 flex items-center justify-between">
-              <div className="text-zinc-700 text-base font-semibold leading-6">대본 변경 기록</div>
-            </div>
+interface ScriptHistoryProps {
+  currentScript?: string;
+  historyItems?: HistoryItem[];
+  onRestore?: (item: HistoryItem) => void;
+}
 
-            <div className="max-h-80 overflow-y-auto">
-              <div className="px-4 pt-3 pb-4 bg-gray-100 border-b border-zinc-200">
-                <div className="flex flex-col gap-3">
-                  <div className="text-gray-500 text-xs font-semibold leading-4">현재</div>
-                  <div className="text-zinc-700 text-sm font-medium leading-5">
-                    (현재 대본 내용이 들어올 자리)
-                  </div>
-                </div>
-              </div>
+export default function ScriptHistory({
+  currentScript = '(현재 대본 내용이 들어올 자리)',
+  historyItems = [
+    { id: '1', timestamp: '(시간 표시 자리)', content: '(이전 대본 내용 자리 #1)' },
+    { id: '2', timestamp: '(시간 표시 자리)', content: '(이전 대본 내용 자리 #2)' },
+    { id: '3', timestamp: '(시간 표시 자리)', content: '(이전 대본 내용 자리 #3)' },
+    { id: '4', timestamp: '(시간 표시 자리)', content: '(이전 대본 내용 자리 #4)' },
+  ],
+  onRestore,
+}: ScriptHistoryProps) {
+  const trigger = (
+    <button
+      type="button"
+      className={clsx(
+        'inline-flex h-7 items-center gap-1 rounded pl-2 pr-1.5',
+        'bg-white text-gray-800 outline outline-1 -outline-offset-1 outline-gray-200',
+        'hover:bg-gray-100',
+      )}
+    >
+      <span className="text-sm font-semibold leading-5">변경 기록</span>
+      <img src={refreshIcon} alt="" className="h-4 w-4" />
+    </button>
+  );
 
-              {[0, 1, 2, 3].map((idx) => (
-                <div
-                  key={idx}
-                  className="px-4 pt-2 pb-4 bg-white border-b border-zinc-200"
-                  title=""
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="text-gray-500 text-xs font-medium leading-4">
-                      (시간 표시 자리)
-                    </div>
+  return (
+    <Popover
+      trigger={trigger}
+      position="top"
+      align="end"
+      className="w-96 max-w-[90vw] overflow-hidden"
+    >
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
+        <span className="text-base font-semibold leading-6 text-gray-800">대본 변경 기록</span>
+      </div>
 
-                    <button
-                      type="button"
-                      className="
-                        pl-2 pr-1.5 py-1 bg-white rounded
-                        outline outline-1 outline-offset-[-1px] outline-zinc-200
-                        inline-flex items-center gap-1
-                        hover:bg-gray-50 active:scale-[0.99] transition
-                      "
-                    >
-                      <span className="text-zinc-700 text-xs font-semibold leading-4">복원</span>
-                      <img src={refreshIcon} className="w-4 h-4" />
-                    </button>
-                  </div>
+      {/* 콘텐츠 */}
+      <div className="max-h-80 overflow-y-auto">
+        {/* 현재 대본 */}
+        <div className="border-b border-gray-200 bg-gray-100 px-4 pb-4 pt-3">
+          <div className="flex flex-col gap-3">
+            <span className="text-xs font-semibold leading-4 text-gray-500">현재</span>
+            <p className="text-sm font-medium leading-5 text-gray-800">{currentScript}</p>
+          </div>
+        </div>
 
-                  <div className="mt-2 text-zinc-700 text-sm font-medium leading-5">
-                    (이전 대본 내용 자리 #{idx + 1})
-                  </div>
-                </div>
-              ))}
+        {/* 히스토리 목록 */}
+        {historyItems.map((item) => (
+          <div key={item.id} className="border-b border-gray-200 bg-white px-4 pb-4 pt-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium leading-4 text-gray-500">{item.timestamp}</span>
+              <button
+                type="button"
+                onClick={() => onRestore?.(item)}
+                className={clsx(
+                  'inline-flex items-center gap-1 rounded py-1 pl-2 pr-1.5',
+                  'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
+                  'transition hover:bg-gray-100 active:scale-[0.99]',
+                )}
+              >
+                <span className="text-xs font-semibold leading-4 text-gray-800">복원</span>
+                <img src={refreshIcon} alt="" className="h-4 w-4" />
+              </button>
             </div>
+            <p className="mt-2 text-sm font-medium leading-5 text-gray-800">{item.content}</p>
           </div>
-        </>
-      )}
-    </div>
+        ))}
+      </div>
+    </Popover>
   );
-};
-
-export default ScriptHistory;
+}
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index 3c0f29b7..35e32cfd 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -1,87 +1,51 @@
-import React from 'react';
+import { useState } from 'react';
 
 import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
+import { Popover } from '../common';
 
-type SlideTitleProps = {
-  // 변수명 그대로 유지: slideNameChange
-  slideNameChange: {
-    value: boolean;
-    toggle: () => void;
-    off: () => void;
+interface SlideTitleProps {
+  initialTitle?: string;
+  onSave?: (title: string) => void;
+}
+
+export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }: SlideTitleProps) {
+  const [title, setTitle] = useState(initialTitle);
+  const [editTitle, setEditTitle] = useState(initialTitle);
+
+  const handleSave = () => {
+    setTitle(editTitle);
+    onSave?.(editTitle);
   };
 
-  // 변수명 그대로 유지: slideTitle / setSlideTitle
-  slideTitle: string;
-  setSlideTitle: React.Dispatch<React.SetStateAction<string>>;
-};
+  const trigger = (
+    <button
+      type="button"
+      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100"
+    >
+      <span className="max-w-[7.5rem] line-clamp-1">{title}</span>
+      <img src={smallArrowIcon} alt="" />
+    </button>
+  );
 
-const SlideTitle = ({ slideNameChange, slideTitle, setSlideTitle }: SlideTitleProps) => {
   return (
-    <div className="relative inline-block">
-      {/* (기존 그대로) 슬라이드 제목 버튼 */}
+    <Popover
+      trigger={trigger}
+      position="bottom"
+      align="start"
+      className="flex w-80 items-center gap-2 border border-gray-200 px-3 py-2"
+    >
+      <input
+        value={editTitle}
+        onChange={(e) => setEditTitle(e.target.value)}
+        className="h-9 flex-1 rounded-md border border-gray-200 px-3 text-sm text-gray-800 outline-none focus:border-main"
+      />
       <button
         type="button"
-        onClick={slideNameChange.toggle}
-        className="
-          h-7 px-2 rounded-md
-          inline-flex items-center gap-1.5
-          text-zinc-700 text-sm font-semibold
-          hover:bg-zinc-50
-        "
+        onClick={handleSave}
+        className="h-9 rounded-full bg-main px-3 text-sm font-semibold text-white hover:opacity-90"
       >
-        <span className="max-w-[120px] line-clamp-1">{slideTitle}</span>
-        <img src={smallArrowIcon} />
+        저장
       </button>
-
-      {/* (기존 그대로) 슬라이드 이름변경 popover */}
-      {slideNameChange.value && (
-        <>
-          {/* 바깥 클릭 시 닫기 */}
-          <div className="fixed inset-0 z-40" onClick={slideNameChange.off} />
-
-          <div
-            className="
-              absolute z-50 left-0 top-full mt-2
-              w-[320px]
-              rounded-lg bg-white
-              border border-zinc-200
-              shadow-[0px_4px_20px_rgba(0,0,0,0.08)]
-              px-3 py-2
-              flex items-center gap-2
-            "
-          >
-            {/* 슬라이드 제목 변경 입력창 */}
-            <input
-              value={slideTitle}
-              onChange={(e) => setSlideTitle(e.target.value)}
-              className="
-                flex-1 h-9 px-3
-                rounded-md
-                border border-zinc-200
-                text-sm text-zinc-700
-                outline-none
-                focus:border-indigo-500
-              "
-            />
-
-            {/* 저장 버튼: 핸들러만 연결(현재는 아무 동작 X) */}
-            <button
-              type="button"
-              //  onClick={handleSaveSlideTitle}
-              className="
-                h-9 px-3 rounded-full
-                bg-indigo-500 text-white
-                text-sm font-semibold
-                hover:bg-indigo-600
-              "
-            >
-              저장
-            </button>
-          </div>
-        </>
-      )}
-    </div>
+    </Popover>
   );
-};
-
-export default SlideTitle;
+}

From 9d135f1f187139fba0247432e15b870ab82b30a1 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:47:04 +0900
Subject: [PATCH 05/16] =?UTF-8?q?style:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=ED=86=A0=ED=81=B0=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EA=B0=92=20=EC=88=98=EC=A0=95=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

피그마 디자인 분석 후 색상 값 정렬:
- gray-500 → gray-600 (보조 텍스트: 시간, 카운트)
- gray-300 → gray-400 (아바타 플레이스홀더)
- red-500 → error (삭제 버튼)
- placeholder 색상을 gray-600으로 통일

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/script-box/Opinion.tsx          | 8 ++++----
 src/components/script-box/ScriptBoxContent.tsx | 2 +-
 src/components/script-box/ScriptHistory.tsx    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index 6f95cbb8..d8f952be 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -79,7 +79,7 @@ export default function Opinion({
       )}
     >
       <span className="text-sm font-semibold leading-5 text-gray-800">의견</span>
-      <span className="text-sm font-semibold leading-5 text-gray-500">{opinionCount}</span>
+      <span className="text-sm font-semibold leading-5 text-gray-600">{opinionCount}</span>
     </button>
   );
 
@@ -107,7 +107,7 @@ export default function Opinion({
           >
             {/* 프로필 이미지 */}
             <div className="flex h-20 items-start gap-2.5">
-              <div className="h-8 w-8 rounded-full bg-gray-300" />
+              <div className="h-8 w-8 rounded-full bg-gray-400" />
             </div>
 
             {/* 의견 내용 */}
@@ -118,7 +118,7 @@ export default function Opinion({
                     <span className="max-w-48 text-sm font-semibold leading-5 text-gray-800 line-clamp-1">
                       {opinion.author}
                     </span>
-                    <span className="text-xs font-medium leading-4 text-gray-500">
+                    <span className="text-xs font-medium leading-4 text-gray-600">
                       {opinion.timestamp}
                     </span>
                   </div>
@@ -127,7 +127,7 @@ export default function Opinion({
                     <button
                       type="button"
                       onClick={() => onDelete?.(opinion.id)}
-                      className="flex items-center gap-1 text-xs font-semibold leading-4 text-red-500 hover:opacity-80"
+                      className="flex items-center gap-1 text-xs font-semibold leading-4 text-error hover:opacity-80"
                     >
                       삭제
                       <img src={trashcanIcon} alt="" className="h-4 w-4" />
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
index 78cf0e07..2d3cf574 100644
--- a/src/components/script-box/ScriptBoxContent.tsx
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -9,7 +9,7 @@ export default function ScriptBoxContent() {
         value={script}
         onChange={(e) => setScript(e.target.value)}
         placeholder="대본을 입력하세요..."
-        className="h-full w-full resize-none border-none bg-transparent text-sm leading-relaxed text-gray-800 outline-none placeholder:text-gray-400"
+        className="h-full w-full resize-none border-none bg-transparent text-sm leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
       />
     </div>
   );
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index 04ad55a6..bca682c3 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -56,7 +56,7 @@ export default function ScriptHistory({
         {/* 현재 대본 */}
         <div className="border-b border-gray-200 bg-gray-100 px-4 pb-4 pt-3">
           <div className="flex flex-col gap-3">
-            <span className="text-xs font-semibold leading-4 text-gray-500">현재</span>
+            <span className="text-xs font-semibold leading-4 text-gray-600">현재</span>
             <p className="text-sm font-medium leading-5 text-gray-800">{currentScript}</p>
           </div>
         </div>
@@ -65,7 +65,7 @@ export default function ScriptHistory({
         {historyItems.map((item) => (
           <div key={item.id} className="border-b border-gray-200 bg-white px-4 pb-4 pt-2">
             <div className="flex items-center justify-between">
-              <span className="text-xs font-medium leading-4 text-gray-500">{item.timestamp}</span>
+              <span className="text-xs font-medium leading-4 text-gray-600">{item.timestamp}</span>
               <button
                 type="button"
                 onClick={() => onRestore?.(item)}

From 7ad9fdf3017dd731afdee8d2ccad512226eb9325 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:50:32 +0900
Subject: [PATCH 06/16] =?UTF-8?q?feat:=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Popover 컴포넌트:
- aria-haspopup, aria-expanded, aria-controls 추가
- role="dialog"와 aria-label 속성 지원
- Escape 키로 닫을 때 트리거로 포커스 복귀
- 팝오버 열릴 때 첫 번째 포커스 가능 요소로 포커스 이동

각 컴포넌트:
- 모든 버튼에 aria-label 추가
- 아이콘에 aria-hidden="true" 추가
- 입력 필드에 aria-label 추가
- 토글 버튼에 aria-expanded 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/common/Popover.tsx             | 37 ++++++++++++++++++-
 src/components/script-box/Opinion.tsx         | 11 +++++-
 .../script-box/ScriptBoxContent.tsx           |  1 +
 src/components/script-box/ScriptBoxEmoji.tsx  |  8 +++-
 src/components/script-box/ScriptHistory.tsx   |  7 +++-
 src/components/script-box/SlideTitle.tsx      |  5 ++-
 6 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Popover.tsx b/src/components/common/Popover.tsx
index 9aa0cc07..c87d0081 100644
--- a/src/components/common/Popover.tsx
+++ b/src/components/common/Popover.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
 
 import clsx from 'clsx';
 
@@ -11,6 +11,7 @@ interface PopoverProps {
   position?: PopoverPosition;
   align?: PopoverAlign;
   className?: string;
+  ariaLabel?: string;
 }
 
 export function Popover({
@@ -19,9 +20,13 @@ export function Popover({
   position = 'top',
   align = 'end',
   className,
+  ariaLabel,
 }: PopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const popoverId = useId();
 
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
@@ -29,6 +34,8 @@ export function Popover({
 
   const handleClose = useCallback(() => {
     setIsOpen(false);
+    // 팝오버 닫힐 때 트리거로 포커스 이동
+    triggerRef.current?.querySelector('button')?.focus();
   }, []);
 
   // Escape 키로 닫기
@@ -59,6 +66,19 @@ export function Popover({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [isOpen, handleClose]);
 
+  // 팝오버 열릴 때 첫 번째 포커스 가능한 요소로 포커스 이동
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+
+    const focusableElements = contentRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+  }, [isOpen]);
+
   const positionClasses = clsx({
     'bottom-full mb-2': position === 'top',
     'top-full mt-2': position === 'bottom',
@@ -71,10 +91,23 @@ export function Popover({
 
   return (
     <div ref={popoverRef} className="relative">
-      <div onClick={handleToggle}>{trigger}</div>
+      <div
+        ref={triggerRef}
+        onClick={handleToggle}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? popoverId : undefined}
+      >
+        {trigger}
+      </div>
 
       {isOpen && (
         <div
+          ref={contentRef}
+          id={popoverId}
+          role="dialog"
+          aria-label={ariaLabel}
+          aria-modal="false"
           className={clsx(
             'absolute z-50',
             positionClasses,
diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index d8f952be..f9f68cda 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -72,6 +72,7 @@ export default function Opinion({
   const trigger = (
     <button
       type="button"
+      aria-label={`의견 ${opinionCount}개 보기`}
       className={clsx(
         'inline-flex h-7 items-center gap-1 rounded px-2',
         'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
@@ -88,6 +89,7 @@ export default function Opinion({
       trigger={trigger}
       position="top"
       align="end"
+      ariaLabel="의견 목록"
       className="w-96 max-w-[90vw] overflow-hidden"
     >
       {/* 헤더 */}
@@ -127,10 +129,11 @@ export default function Opinion({
                     <button
                       type="button"
                       onClick={() => onDelete?.(opinion.id)}
+                      aria-label="의견 삭제"
                       className="flex items-center gap-1 text-xs font-semibold leading-4 text-error hover:opacity-80"
                     >
                       삭제
-                      <img src={trashcanIcon} alt="" className="h-4 w-4" />
+                      <img src={trashcanIcon} alt="" aria-hidden="true" className="h-4 w-4" />
                     </button>
                   )}
                 </div>
@@ -146,10 +149,12 @@ export default function Opinion({
                     setActiveReplyId(activeReplyId === opinion.id ? null : opinion.id);
                     setReplyText('');
                   }}
+                  aria-expanded={activeReplyId === opinion.id}
+                  aria-label={`${opinion.author}에게 답글 달기`}
                   className="flex items-center gap-1 text-xs font-semibold leading-4 text-main hover:opacity-80"
                 >
                   답글
-                  <img src={replyIcon} alt="" className="h-4 w-4" />
+                  <img src={replyIcon} alt="" aria-hidden="true" className="h-4 w-4" />
                 </button>
               </div>
 
@@ -160,11 +165,13 @@ export default function Opinion({
                     value={replyText}
                     onChange={(e) => setReplyText(e.target.value)}
                     placeholder="답글을 입력하세요"
+                    aria-label="답글 입력"
                     className="h-10 flex-1 rounded-lg border border-gray-200 px-3 text-sm outline-none focus:border-main"
                   />
                   <button
                     type="button"
                     onClick={() => handleReplySubmit(opinion.id)}
+                    aria-label="답글 등록"
                     className="h-10 rounded-lg bg-gray-900 px-3 text-sm font-semibold text-white hover:opacity-90"
                   >
                     등록
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
index 2d3cf574..6fd35ad8 100644
--- a/src/components/script-box/ScriptBoxContent.tsx
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -9,6 +9,7 @@ export default function ScriptBoxContent() {
         value={script}
         onChange={(e) => setScript(e.target.value)}
         placeholder="대본을 입력하세요..."
+        aria-label="슬라이드 대본"
         className="h-full w-full resize-none border-none bg-transparent text-sm leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
       />
     </div>
diff --git a/src/components/script-box/ScriptBoxEmoji.tsx b/src/components/script-box/ScriptBoxEmoji.tsx
index 45df12d5..58afac03 100644
--- a/src/components/script-box/ScriptBoxEmoji.tsx
+++ b/src/components/script-box/ScriptBoxEmoji.tsx
@@ -42,7 +42,13 @@ export default function ScriptBoxEmoji() {
       </div>
 
       {/* 이모지 더보기 팝오버 */}
-      <Popover trigger={trigger} position="top" align="end" className="px-4 py-3">
+      <Popover
+        trigger={trigger}
+        position="top"
+        align="end"
+        ariaLabel="이모지 반응 목록"
+        className="px-4 py-3"
+      >
         <div className="flex flex-col gap-3">
           {EMOJI_EXTENDED_DATA.map((row, rowIdx) => (
             <div key={rowIdx} className="flex items-center gap-6">
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index bca682c3..d167ba1e 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -28,6 +28,7 @@ export default function ScriptHistory({
   const trigger = (
     <button
       type="button"
+      aria-label="대본 변경 기록 보기"
       className={clsx(
         'inline-flex h-7 items-center gap-1 rounded pl-2 pr-1.5',
         'bg-white text-gray-800 outline outline-1 -outline-offset-1 outline-gray-200',
@@ -35,7 +36,7 @@ export default function ScriptHistory({
       )}
     >
       <span className="text-sm font-semibold leading-5">변경 기록</span>
-      <img src={refreshIcon} alt="" className="h-4 w-4" />
+      <img src={refreshIcon} alt="" aria-hidden="true" className="h-4 w-4" />
     </button>
   );
 
@@ -44,6 +45,7 @@ export default function ScriptHistory({
       trigger={trigger}
       position="top"
       align="end"
+      ariaLabel="대본 변경 기록"
       className="w-96 max-w-[90vw] overflow-hidden"
     >
       {/* 헤더 */}
@@ -69,6 +71,7 @@ export default function ScriptHistory({
               <button
                 type="button"
                 onClick={() => onRestore?.(item)}
+                aria-label={`${item.timestamp} 버전으로 복원`}
                 className={clsx(
                   'inline-flex items-center gap-1 rounded py-1 pl-2 pr-1.5',
                   'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
@@ -76,7 +79,7 @@ export default function ScriptHistory({
                 )}
               >
                 <span className="text-xs font-semibold leading-4 text-gray-800">복원</span>
-                <img src={refreshIcon} alt="" className="h-4 w-4" />
+                <img src={refreshIcon} alt="" aria-hidden="true" className="h-4 w-4" />
               </button>
             </div>
             <p className="mt-2 text-sm font-medium leading-5 text-gray-800">{item.content}</p>
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index 35e32cfd..d02f99b2 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -20,10 +20,11 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
   const trigger = (
     <button
       type="button"
+      aria-label="슬라이드 이름 변경"
       className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100"
     >
       <span className="max-w-[7.5rem] line-clamp-1">{title}</span>
-      <img src={smallArrowIcon} alt="" />
+      <img src={smallArrowIcon} alt="" aria-hidden="true" />
     </button>
   );
 
@@ -32,11 +33,13 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
       trigger={trigger}
       position="bottom"
       align="start"
+      ariaLabel="슬라이드 이름 변경"
       className="flex w-80 items-center gap-2 border border-gray-200 px-3 py-2"
     >
       <input
         value={editTitle}
         onChange={(e) => setEditTitle(e.target.value)}
+        aria-label="슬라이드 이름"
         className="h-9 flex-1 rounded-md border border-gray-200 px-3 text-sm text-gray-800 outline-none focus:border-main"
       />
       <button

From b7051527fa287fd68535637b8ca772d217c6d35a Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:53:50 +0900
Subject: [PATCH 07/16] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20outline=20?=
 =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=A0=9C=EA=B1=B0=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind v4에서 outline-1이 이미 outline-style: solid를 포함하므로
중복 outline 클래스 제거

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/script-box/Opinion.tsx       | 2 +-
 src/components/script-box/ScriptBox.tsx     | 2 +-
 src/components/script-box/ScriptHistory.tsx | 4 ++--
 src/components/script-box/SlideTitle.tsx    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index f9f68cda..d2f6e13a 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -75,7 +75,7 @@ export default function Opinion({
       aria-label={`의견 ${opinionCount}개 보기`}
       className={clsx(
         'inline-flex h-7 items-center gap-1 rounded px-2',
-        'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
+        'bg-white outline-1 -outline-offset-1 outline-gray-200',
         'hover:bg-gray-100',
       )}
     >
diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index 467a57b1..17713f52 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -22,7 +22,7 @@ export default function ScriptBox({ slideTitle = '슬라이드 1' }: ScriptBoxPr
         'fixed inset-x-0 bottom-0 z-30',
         'mx-auto w-full bg-white',
         'transition-transform duration-300 ease-out',
-        'h-[20rem]',
+        'h-80',
         isCollapsed ? 'translate-y-[calc(100%-2.5rem)]' : 'translate-y-0',
       )}
     >
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index d167ba1e..cf07fd10 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -31,7 +31,7 @@ export default function ScriptHistory({
       aria-label="대본 변경 기록 보기"
       className={clsx(
         'inline-flex h-7 items-center gap-1 rounded pl-2 pr-1.5',
-        'bg-white text-gray-800 outline outline-1 -outline-offset-1 outline-gray-200',
+        'bg-white text-gray-800 outline-1 -outline-offset-1 outline-gray-200',
         'hover:bg-gray-100',
       )}
     >
@@ -74,7 +74,7 @@ export default function ScriptHistory({
                 aria-label={`${item.timestamp} 버전으로 복원`}
                 className={clsx(
                   'inline-flex items-center gap-1 rounded py-1 pl-2 pr-1.5',
-                  'bg-white outline outline-1 outline-offset-[-1px] outline-gray-200',
+                  'bg-white outline-1 -outline-offset-1 outline-gray-200',
                   'transition hover:bg-gray-100 active:scale-[0.99]',
                 )}
               >
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index d02f99b2..6f29b720 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -23,7 +23,7 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
       aria-label="슬라이드 이름 변경"
       className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100"
     >
-      <span className="max-w-[7.5rem] line-clamp-1">{title}</span>
+      <span className="max-w-30 line-clamp-1">{title}</span>
       <img src={smallArrowIcon} alt="" aria-hidden="true" />
     </button>
   );

From 8a1ee49b4358814726b2ac9b63b33fa63fb04987 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Wed, 31 Dec 2025 23:59:35 +0900
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20SVGR=EB=A1=9C=20SVG=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EA=B4=80=EB=A6=AC=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- vite-plugin-svgr 설치 및 설정
- SVG 아이콘을 React 컴포넌트로 임포트하도록 변경
- TypeScript 타입 지원 추가 (vite-plugin-svgr/client)
- img 태그 대신 SVG 컴포넌트 사용으로 스타일링 용이

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package-lock.json                             | 406 +++++++++++++++++-
 package.json                                  |   3 +-
 src/components/script-box/Opinion.tsx         |   9 +-
 src/components/script-box/ScriptBoxHeader.tsx |   8 +-
 src/components/script-box/ScriptHistory.tsx   |   7 +-
 src/components/script-box/SlideTitle.tsx      |   5 +-
 src/pages/SlidePage.tsx                       |   2 +
 tsconfig.app.json                             |   2 +-
 vite.config.ts                                |   3 +-
 9 files changed, 428 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2f66b2d6..86ef4c3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,8 @@
         "lint-staged": "^16.2.7",
         "prettier": "3.7.4",
         "typescript": "~5.9.3",
-        "vite": "^7.2.4"
+        "vite": "^7.2.4",
+        "vite-plugin-svgr": "^4.5.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1389,6 +1390,42 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
@@ -1675,6 +1712,258 @@
         "win32"
       ]
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.15.7",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.7.tgz",
@@ -2991,6 +3280,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001761",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
@@ -3463,6 +3765,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -3511,6 +3824,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -4128,6 +4454,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -5901,6 +6234,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6041,6 +6384,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -6336,6 +6690,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7000,6 +7364,17 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7239,6 +7614,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
@@ -7366,6 +7748,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "devOptional": true,
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -7638,6 +8027,21 @@
         }
       }
     },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.5.0.tgz",
+      "integrity": "sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.2.0",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.6.0"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
diff --git a/package.json b/package.json
index b81f7ea8..647ab6ce 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "lint-staged": "^16.2.7",
     "prettier": "3.7.4",
     "typescript": "~5.9.3",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vite-plugin-svgr": "^4.5.0"
   }
 }
diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index d2f6e13a..06a4cf31 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -2,8 +2,9 @@ import { useState } from 'react';
 
 import clsx from 'clsx';
 
-import replyIcon from '../../assets/icons/replyIcon.svg';
-import trashcanIcon from '../../assets/icons/trashcanIcon.svg';
+import ReplyIcon from '@/assets/icons/replyIcon.svg?react';
+import TrashcanIcon from '@/assets/icons/trashcanIcon.svg?react';
+
 import { Popover } from '../common';
 
 interface OpinionItem {
@@ -133,7 +134,7 @@ export default function Opinion({
                       className="flex items-center gap-1 text-xs font-semibold leading-4 text-error hover:opacity-80"
                     >
                       삭제
-                      <img src={trashcanIcon} alt="" aria-hidden="true" className="h-4 w-4" />
+                      <TrashcanIcon className="h-4 w-4" aria-hidden="true" />
                     </button>
                   )}
                 </div>
@@ -154,7 +155,7 @@ export default function Opinion({
                   className="flex items-center gap-1 text-xs font-semibold leading-4 text-main hover:opacity-80"
                 >
                   답글
-                  <img src={replyIcon} alt="" aria-hidden="true" className="h-4 w-4" />
+                  <ReplyIcon className="h-4 w-4" aria-hidden="true" />
                 </button>
               </div>
 
diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index 4e7d41e2..a1fd8283 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 
-import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
+import SmallArrowIcon from '@/assets/icons/smallArrowIcon.svg?react';
+
 import Opinion from './Opinion';
 import ScriptBoxEmoji from './ScriptBoxEmoji';
 import ScriptHistory from './ScriptHistory';
@@ -28,13 +29,12 @@ export default function ScriptBoxHeader({
           aria-expanded={!isCollapsed}
           aria-label={isCollapsed ? '대본 펼치기' : '대본 접기'}
         >
-          <img
-            src={smallArrowIcon}
-            alt=""
+          <SmallArrowIcon
             className={clsx(
               'h-4 w-4 transition-transform duration-300',
               !isCollapsed && 'rotate-180',
             )}
+            aria-hidden="true"
           />
         </button>
 
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index cf07fd10..1b67359a 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 
-import refreshIcon from '../../assets/icons/refreshIcon.svg';
+import RefreshIcon from '@/assets/icons/refreshIcon.svg?react';
+
 import { Popover } from '../common';
 
 interface HistoryItem {
@@ -36,7 +37,7 @@ export default function ScriptHistory({
       )}
     >
       <span className="text-sm font-semibold leading-5">변경 기록</span>
-      <img src={refreshIcon} alt="" aria-hidden="true" className="h-4 w-4" />
+      <RefreshIcon className="h-4 w-4" aria-hidden="true" />
     </button>
   );
 
@@ -79,7 +80,7 @@ export default function ScriptHistory({
                 )}
               >
                 <span className="text-xs font-semibold leading-4 text-gray-800">복원</span>
-                <img src={refreshIcon} alt="" aria-hidden="true" className="h-4 w-4" />
+                <RefreshIcon className="h-4 w-4" aria-hidden="true" />
               </button>
             </div>
             <p className="mt-2 text-sm font-medium leading-5 text-gray-800">{item.content}</p>
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index 6f29b720..fbdb6057 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
-import smallArrowIcon from '../../assets/icons/smallArrowIcon.svg';
+import SmallArrowIcon from '@/assets/icons/smallArrowIcon.svg?react';
+
 import { Popover } from '../common';
 
 interface SlideTitleProps {
@@ -24,7 +25,7 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
       className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100"
     >
       <span className="max-w-30 line-clamp-1">{title}</span>
-      <img src={smallArrowIcon} alt="" aria-hidden="true" />
+      <SmallArrowIcon className="h-4 w-4" aria-hidden="true" />
     </button>
   );
 
diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx
index 0a74aa83..88550d48 100644
--- a/src/pages/SlidePage.tsx
+++ b/src/pages/SlidePage.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { ScriptBox } from '@/components/script-box';
 import { setLastSlideId } from '@/constants/navigation';
 
 export default function SlidePage() {
@@ -18,6 +19,7 @@ export default function SlidePage() {
   return (
     <div role="tabpanel" id="tabpanel-slide" aria-labelledby="tab-slide" className="p-8">
       <h1 className="text-body-m-bold">슬라이드 {slideId}</h1>
+      <ScriptBox />
     </div>
   );
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 595827e4..19bb3bfb 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
diff --git a/vite.config.ts b/vite.config.ts
index d07dd82a..1b5e2494 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,10 +2,11 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), svgr()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

From ad6d848727d51021fd38aefb25e8285993b58071 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 00:57:32 +0900
Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=EB=B9=A0=EC=A7=84=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EA=B7=9C=EA=B2=A9=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/refreshIcon.svg              |   4 +-
 src/assets/icons/replyIcon.svg                |   4 +-
 src/assets/icons/smallArrowIcon.svg           |   2 +-
 src/assets/icons/trashcanIcon.svg             |   6 +-
 src/components/common/Popover.tsx             |   4 +-
 src/components/script-box/Opinion.tsx         | 216 ++++++++++--------
 src/components/script-box/ScriptBox.tsx       |   2 +-
 .../script-box/ScriptBoxContent.tsx           |   6 +-
 src/components/script-box/ScriptBoxHeader.tsx |  23 +-
 src/components/script-box/ScriptHistory.tsx   |  47 ++--
 src/components/script-box/SlideTitle.tsx      |   4 +-
 src/constants/navigation.ts                   |   6 +-
 src/types/navigation.ts                       |   6 +
 src/types/script.ts                           |  15 ++
 14 files changed, 195 insertions(+), 150 deletions(-)
 create mode 100644 src/types/navigation.ts
 create mode 100644 src/types/script.ts

diff --git a/src/assets/icons/refreshIcon.svg b/src/assets/icons/refreshIcon.svg
index a5f8d31a..fd372d65 100644
--- a/src/assets/icons/refreshIcon.svg
+++ b/src/assets/icons/refreshIcon.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.9978 7.99756C2.9978 8.98646 3.29105 9.95316 3.84045 10.7754C4.38986 11.5977 5.17075 12.2385 6.08438 12.617C6.99801 12.9954 8.00335 13.0944 8.97325 12.9015C9.94316 12.7086 10.8341 12.2324 11.5333 11.5331C12.2326 10.8338 12.7088 9.94291 12.9017 8.97301C13.0947 8.0031 12.9956 6.99777 12.6172 6.08414C12.2388 5.17051 11.5979 4.38962 10.7757 3.84021C9.95341 3.2908 8.98671 2.99756 7.9978 2.99756C6.6 3.00282 5.25834 3.54824 4.25336 4.51978L2.9978 5.77534" stroke="#343841" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.9978 2.99756V5.99756H5.9978" stroke="#343841" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.9978 7.99756C2.9978 8.98646 3.29105 9.95316 3.84045 10.7754C4.38986 11.5977 5.17075 12.2385 6.08438 12.617C6.99801 12.9954 8.00335 13.0944 8.97325 12.9015C9.94316 12.7086 10.8341 12.2324 11.5333 11.5331C12.2326 10.8338 12.7088 9.94291 12.9017 8.97301C13.0947 8.0031 12.9956 6.99777 12.6172 6.08414C12.2388 5.17051 11.5979 4.38962 10.7757 3.84021C9.95341 3.2908 8.98671 2.99756 7.9978 2.99756C6.6 3.00282 5.25834 3.54824 4.25336 4.51978L2.9978 5.77534" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.9978 2.99756V5.99756H5.9978" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/assets/icons/replyIcon.svg b/src/assets/icons/replyIcon.svg
index 7f5ec49c..9db50da6 100644
--- a/src/assets/icons/replyIcon.svg
+++ b/src/assets/icons/replyIcon.svg
@@ -1,4 +1,4 @@
 <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3563 9.41681V7.84103C13.3563 7.00518 13.0243 6.20356 12.4332 5.61253C11.8422 5.02149 11.0406 4.68945 10.2047 4.68945H0.75" stroke="#4F5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.68947 8.62894L0.75 4.68947L4.68947 0.75" stroke="#4F5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3563 9.41681V7.84103C13.3563 7.00518 13.0243 6.20356 12.4332 5.61253C11.8422 5.02149 11.0406 4.68945 10.2047 4.68945H0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.68947 8.62894L0.75 4.68947L4.68947 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/assets/icons/smallArrowIcon.svg b/src/assets/icons/smallArrowIcon.svg
index e8e4bf8e..2db0fd09 100644
--- a/src/assets/icons/smallArrowIcon.svg
+++ b/src/assets/icons/smallArrowIcon.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6L8 11L13 6" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M3 6L8 11L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
 </svg>
diff --git a/src/assets/icons/trashcanIcon.svg b/src/assets/icons/trashcanIcon.svg
index e38ed0ac..93646e2c 100644
--- a/src/assets/icons/trashcanIcon.svg
+++ b/src/assets/icons/trashcanIcon.svg
@@ -1,5 +1,5 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.2491 1.5V11.9994C11.2491 12.3744 10.8742 12.7494 10.4992 12.7494H6.74939H2.99959C2.62461 12.7494 2.24963 12.3744 2.24963 11.9994V1.5" stroke="#F24B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M0.75 1.5H12.7493" stroke="#F24B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.25 0.75H8.24984M5.25 4.4998V9.74951M8.24984 4.4998V9.74951" stroke="#F24B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2491 1.5V11.9994C11.2491 12.3744 10.8742 12.7494 10.4992 12.7494H6.74939H2.99959C2.62461 12.7494 2.24963 12.3744 2.24963 11.9994V1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.75 1.5H12.7493" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 0.75H8.24984M5.25 4.4998V9.74951M8.24984 4.4998V9.74951" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/common/Popover.tsx b/src/components/common/Popover.tsx
index c87d0081..084efd6b 100644
--- a/src/components/common/Popover.tsx
+++ b/src/components/common/Popover.tsx
@@ -6,7 +6,7 @@ type PopoverPosition = 'top' | 'bottom';
 type PopoverAlign = 'start' | 'end';
 
 interface PopoverProps {
-  trigger: ReactNode;
+  trigger: ReactNode | ((props: { isOpen: boolean }) => ReactNode);
   children: ReactNode;
   position?: PopoverPosition;
   align?: PopoverAlign;
@@ -98,7 +98,7 @@ export function Popover({
         aria-expanded={isOpen}
         aria-controls={isOpen ? popoverId : undefined}
       >
-        {trigger}
+        {typeof trigger === 'function' ? trigger({ isOpen }) : trigger}
       </div>
 
       {isOpen && (
diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index 06a4cf31..86500f7c 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -4,18 +4,10 @@ import clsx from 'clsx';
 
 import ReplyIcon from '@/assets/icons/replyIcon.svg?react';
 import TrashcanIcon from '@/assets/icons/trashcanIcon.svg?react';
+import type { OpinionItem } from '@/types/script.ts';
 
 import { Popover } from '../common';
 
-interface OpinionItem {
-  id: number;
-  author: string;
-  content: string;
-  timestamp: string;
-  isMine: boolean;
-  isReply?: boolean;
-}
-
 interface OpinionProps {
   opinions?: OpinionItem[];
   opinionCount?: number;
@@ -34,18 +26,19 @@ export default function Opinion({
     },
     {
       id: 1,
-      author: '익명 사용자',
+      author: '이영희',
       content: '이 부분 설명이 명확해요!',
       timestamp: '1시간 전',
       isMine: true,
     },
     {
       id: 2,
-      author: '김철수',
+      author: '박민수',
       content: '이 부분 설명이 명확해요!',
       timestamp: '1시간 전',
       isMine: false,
       isReply: true,
+      parentId: 1,
     },
     {
       id: 3,
@@ -70,28 +63,42 @@ export default function Opinion({
     setReplyText('');
   };
 
-  const trigger = (
-    <button
-      type="button"
-      aria-label={`의견 ${opinionCount}개 보기`}
-      className={clsx(
-        'inline-flex h-7 items-center gap-1 rounded px-2',
-        'bg-white outline-1 -outline-offset-1 outline-gray-200',
-        'hover:bg-gray-100',
-      )}
-    >
-      <span className="text-sm font-semibold leading-5 text-gray-800">의견</span>
-      <span className="text-sm font-semibold leading-5 text-gray-600">{opinionCount}</span>
-    </button>
-  );
-
   return (
     <Popover
-      trigger={trigger}
+      trigger={({ isOpen }) => (
+        <button
+          type="button"
+          aria-label={`의견 ${opinionCount}개 보기`}
+          className={clsx(
+            'inline-flex h-7 items-center gap-1 rounded px-2',
+            'outline-1 -outline-offset-1',
+            isOpen
+              ? 'bg-white outline-main'
+              : 'bg-white outline-gray-200 hover:bg-gray-100 active:bg-gray-200',
+          )}
+        >
+          <span
+            className={clsx(
+              'text-sm font-semibold leading-5',
+              isOpen ? 'text-main' : 'text-gray-800',
+            )}
+          >
+            의견
+          </span>
+          <span
+            className={clsx(
+              'text-sm font-semibold leading-5',
+              isOpen ? 'text-main-variant1' : 'text-gray-600',
+            )}
+          >
+            {opinionCount}
+          </span>
+        </button>
+      )}
       position="top"
       align="end"
       ariaLabel="의견 목록"
-      className="w-96 max-w-[90vw] overflow-hidden"
+      className="w-105.25 max-w-[90vw] overflow-hidden rounded-b-lg"
     >
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
@@ -101,85 +108,108 @@ export default function Opinion({
       {/* 의견 목록 */}
       <div className="h-80 overflow-y-auto">
         {opinions.map((opinion) => (
-          <div
-            key={opinion.id}
-            className={clsx(
-              'flex items-start gap-3 bg-white py-3',
-              opinion.isReply ? 'pl-14 pr-4' : 'px-4',
-            )}
-          >
-            {/* 프로필 이미지 */}
-            <div className="flex h-20 items-start gap-2.5">
-              <div className="h-8 w-8 rounded-full bg-gray-400" />
-            </div>
+          <div key={opinion.id}>
+            {/* 의견 항목 */}
+            <div
+              className={clsx(
+                'flex gap-3 py-3 pr-4',
+                opinion.isReply ? 'pl-15' : 'pl-4',
+                activeReplyId === opinion.id ? 'bg-gray-100' : 'bg-white',
+              )}
+            >
+              {/* 프로필 이미지 */}
+              <div className="w-8 shrink-0">
+                <div className="h-8 w-8 rounded-full bg-gray-400" />
+              </div>
+
+              {/* 의견 내용 */}
+              <div className="flex flex-1 flex-col gap-1 pt-1.5">
+                <div className="flex flex-col gap-1">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="max-w-50 truncate text-sm font-semibold text-gray-800">
+                        {opinion.author}
+                      </span>
+                      <span className="text-xs font-medium text-gray-600">{opinion.timestamp}</span>
+                    </div>
 
-            {/* 의견 내용 */}
-            <div className="flex flex-1 flex-col gap-1 pt-1.5">
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <span className="max-w-48 text-sm font-semibold leading-5 text-gray-800 line-clamp-1">
-                      {opinion.author}
-                    </span>
-                    <span className="text-xs font-medium leading-4 text-gray-600">
-                      {opinion.timestamp}
-                    </span>
+                    {opinion.isMine && (
+                      <button
+                        type="button"
+                        onClick={() => onDelete?.(opinion.id)}
+                        aria-label="의견 삭제"
+                        className="flex items-center gap-1 text-xs font-semibold text-error active:opacity-80"
+                      >
+                        삭제
+                        <TrashcanIcon className="h-4 w-4" aria-hidden="true" />
+                      </button>
+                    )}
                   </div>
 
-                  {opinion.isMine && (
-                    <button
-                      type="button"
-                      onClick={() => onDelete?.(opinion.id)}
-                      aria-label="의견 삭제"
-                      className="flex items-center gap-1 text-xs font-semibold leading-4 text-error hover:opacity-80"
-                    >
-                      삭제
-                      <TrashcanIcon className="h-4 w-4" aria-hidden="true" />
-                    </button>
-                  )}
+                  <p className="text-sm font-medium text-gray-800">{opinion.content}</p>
                 </div>
 
-                <p className="text-sm font-medium leading-5 text-gray-800">{opinion.content}</p>
-              </div>
-
-              {/* 답글 버튼 */}
-              <div className="flex items-center gap-4">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setActiveReplyId(activeReplyId === opinion.id ? null : opinion.id);
-                    setReplyText('');
-                  }}
-                  aria-expanded={activeReplyId === opinion.id}
-                  aria-label={`${opinion.author}에게 답글 달기`}
-                  className="flex items-center gap-1 text-xs font-semibold leading-4 text-main hover:opacity-80"
-                >
-                  답글
-                  <ReplyIcon className="h-4 w-4" aria-hidden="true" />
-                </button>
+                {/* 답글 버튼 */}
+                <div className="flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setActiveReplyId(activeReplyId === opinion.id ? null : opinion.id);
+                      setReplyText('');
+                    }}
+                    aria-expanded={activeReplyId === opinion.id}
+                    aria-label={`${opinion.author}에게 답글 달기`}
+                    className={clsx(
+                      'flex items-center gap-1 text-xs font-semibold',
+                      activeReplyId === opinion.id
+                        ? 'text-gray-400'
+                        : 'text-main hover:text-main-variant1 active:text-main-variant2',
+                    )}
+                  >
+                    답글
+                    <ReplyIcon className="h-4 w-4" aria-hidden="true" />
+                  </button>
+                </div>
               </div>
+            </div>
 
-              {/* 답글 입력 */}
-              {activeReplyId === opinion.id && (
-                <div className="mt-2 flex items-center gap-2">
-                  <input
-                    value={replyText}
-                    onChange={(e) => setReplyText(e.target.value)}
-                    placeholder="답글을 입력하세요"
-                    aria-label="답글 입력"
-                    className="h-10 flex-1 rounded-lg border border-gray-200 px-3 text-sm outline-none focus:border-main"
-                  />
+            {/* 답글 입력 */}
+            {activeReplyId === opinion.id && (
+              <div className="flex flex-col gap-1 bg-gray-100 pb-4 pl-15 pr-4">
+                <input
+                  value={replyText}
+                  onChange={(e) => setReplyText(e.target.value)}
+                  placeholder="댓글을 입력하세요"
+                  aria-label="답글 입력"
+                  className="w-full border-b border-gray-400 bg-transparent px-0.5 py-2 text-base font-semibold text-gray-800 outline-none placeholder:text-gray-600 focus:border-main"
+                />
+                <div className="flex items-center justify-end gap-2">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setActiveReplyId(null);
+                      setReplyText('');
+                    }}
+                    aria-label="답글 취소"
+                    className="px-3 py-1.5 text-xs font-semibold text-gray-800 hover:text-gray-600"
+                  >
+                    취소
+                  </button>
                   <button
                     type="button"
                     onClick={() => handleReplySubmit(opinion.id)}
+                    disabled={!replyText.trim()}
                     aria-label="답글 등록"
-                    className="h-10 rounded-lg bg-gray-900 px-3 text-sm font-semibold text-white hover:opacity-90"
+                    className={clsx(
+                      'rounded-full bg-white px-3 py-1.5 text-xs font-semibold',
+                      replyText.trim() ? 'text-main active:text-main-variant2' : 'text-gray-400',
+                    )}
                   >
-                    등록
+                    답글
                   </button>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         ))}
       </div>
diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index 17713f52..dae66eef 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -20,7 +20,7 @@ export default function ScriptBox({ slideTitle = '슬라이드 1' }: ScriptBoxPr
     <div
       className={clsx(
         'fixed inset-x-0 bottom-0 z-30',
-        'mx-auto w-full bg-white',
+        'mx-auto w-full rounded-t-lg bg-white',
         'transition-transform duration-300 ease-out',
         'h-80',
         isCollapsed ? 'translate-y-[calc(100%-2.5rem)]' : 'translate-y-0',
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
index 6fd35ad8..e18ea108 100644
--- a/src/components/script-box/ScriptBoxContent.tsx
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -4,13 +4,13 @@ export default function ScriptBoxContent() {
   const [script, setScript] = useState('');
 
   return (
-    <div className="h-[calc(100%-2.5rem)] overflow-y-auto bg-white px-4 py-3">
+    <div className="h-[calc(100%-2.5rem)] overflow-y-auto border-b border-gray-200 bg-white px-4 pb-6 pt-3">
       <textarea
         value={script}
         onChange={(e) => setScript(e.target.value)}
-        placeholder="대본을 입력하세요..."
+        placeholder="슬라이드 대본을 입력하세요..."
         aria-label="슬라이드 대본"
-        className="h-full w-full resize-none border-none bg-transparent text-sm leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
+        className="h-full w-full resize-none border-none bg-transparent text-base leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
       />
     </div>
   );
diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index a1fd8283..6cb0ea8f 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -19,13 +19,19 @@ export default function ScriptBoxHeader({
   onToggleCollapse,
 }: ScriptBoxHeaderProps) {
   return (
-    <div className="flex h-10 items-center justify-between border-b border-gray-200 bg-white px-4">
-      {/* 좌측: 접기 버튼 + 슬라이드 제목 */}
-      <div className="flex items-center gap-2">
+    <div className="flex h-10 items-center justify-between border-b border-gray-200 bg-white px-5">
+      {/* 좌측: 슬라이드 제목 */}
+      <SlideTitle initialTitle={slideTitle} />
+
+      {/* 우측: 이모지, 변경기록, 의견, 접기 버튼 */}
+      <div className="flex items-center gap-3">
+        <ScriptBoxEmoji />
+        <ScriptHistory />
+        <Opinion />
         <button
           type="button"
           onClick={onToggleCollapse}
-          className="flex h-7 w-7 items-center justify-center rounded hover:bg-gray-100"
+          className="flex h-6 w-6 items-center justify-center rounded hover:bg-gray-100 active:bg-gray-200"
           aria-expanded={!isCollapsed}
           aria-label={isCollapsed ? '대본 펼치기' : '대본 접기'}
         >
@@ -37,15 +43,6 @@ export default function ScriptBoxHeader({
             aria-hidden="true"
           />
         </button>
-
-        <SlideTitle initialTitle={slideTitle} />
-      </div>
-
-      {/* 우측: 이모지, 변경기록, 의견 */}
-      <div className="flex items-center gap-3">
-        <ScriptBoxEmoji />
-        <ScriptHistory />
-        <Opinion />
       </div>
     </div>
   );
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index 1b67359a..0129f848 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -1,15 +1,10 @@
 import clsx from 'clsx';
 
 import RefreshIcon from '@/assets/icons/refreshIcon.svg?react';
+import type { HistoryItem } from '@/types/script';
 
 import { Popover } from '../common';
 
-interface HistoryItem {
-  id: string;
-  timestamp: string;
-  content: string;
-}
-
 interface ScriptHistoryProps {
   currentScript?: string;
   historyItems?: HistoryItem[];
@@ -26,28 +21,28 @@ export default function ScriptHistory({
   ],
   onRestore,
 }: ScriptHistoryProps) {
-  const trigger = (
-    <button
-      type="button"
-      aria-label="대본 변경 기록 보기"
-      className={clsx(
-        'inline-flex h-7 items-center gap-1 rounded pl-2 pr-1.5',
-        'bg-white text-gray-800 outline-1 -outline-offset-1 outline-gray-200',
-        'hover:bg-gray-100',
-      )}
-    >
-      <span className="text-sm font-semibold leading-5">변경 기록</span>
-      <RefreshIcon className="h-4 w-4" aria-hidden="true" />
-    </button>
-  );
-
   return (
     <Popover
-      trigger={trigger}
+      trigger={({ isOpen }) => (
+        <button
+          type="button"
+          aria-label="대본 변경 기록 보기"
+          className={clsx(
+            'inline-flex h-7 items-center gap-1 rounded pl-2 pr-1.5',
+            'outline-1 -outline-offset-1',
+            isOpen
+              ? 'bg-white text-main outline-main'
+              : 'bg-white text-gray-800 outline-gray-200 hover:bg-gray-100 active:bg-gray-200',
+          )}
+        >
+          <span className="text-sm font-semibold leading-5">변경 기록</span>
+          <RefreshIcon className="h-4 w-4" aria-hidden="true" />
+        </button>
+      )}
       position="top"
       align="end"
       ariaLabel="대본 변경 기록"
-      className="w-96 max-w-[90vw] overflow-hidden"
+      className="w-105.25 max-w-[90vw] overflow-hidden rounded-b-lg"
     >
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
@@ -75,11 +70,11 @@ export default function ScriptHistory({
                 aria-label={`${item.timestamp} 버전으로 복원`}
                 className={clsx(
                   'inline-flex items-center gap-1 rounded py-1 pl-2 pr-1.5',
-                  'bg-white outline-1 -outline-offset-1 outline-gray-200',
-                  'transition hover:bg-gray-100 active:scale-[0.99]',
+                  'bg-white text-gray-800 outline-1 -outline-offset-1 outline-gray-200',
+                  'hover:text-gray-600 active:bg-gray-100',
                 )}
               >
-                <span className="text-xs font-semibold leading-4 text-gray-800">복원</span>
+                <span className="text-xs font-semibold leading-4">복원</span>
                 <RefreshIcon className="h-4 w-4" aria-hidden="true" />
               </button>
             </div>
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index fbdb6057..0432ab4c 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -22,7 +22,7 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
     <button
       type="button"
       aria-label="슬라이드 이름 변경"
-      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100"
+      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200"
     >
       <span className="max-w-30 line-clamp-1">{title}</span>
       <SmallArrowIcon className="h-4 w-4" aria-hidden="true" />
@@ -46,7 +46,7 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
       <button
         type="button"
         onClick={handleSave}
-        className="h-9 rounded-full bg-main px-3 text-sm font-semibold text-white hover:opacity-90"
+        className="h-9 rounded-full bg-main px-3 text-sm font-semibold text-white active:bg-main-variant2"
       >
         저장
       </button>
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
index 7045a79f..acf16759 100644
--- a/src/constants/navigation.ts
+++ b/src/constants/navigation.ts
@@ -1,10 +1,12 @@
-export const TABS = [
+import type { TabItem, TabKey } from '@/types/navigation';
+
+export const TABS: readonly TabItem[] = [
   { key: 'slide', label: '슬라이드' },
   { key: 'video', label: '영상' },
   { key: 'insight', label: '인사이트' },
 ] as const;
 
-export type Tab = (typeof TABS)[number]['key'];
+export type Tab = TabKey;
 
 export const DEFAULT_SLIDE_ID = '1';
 
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
new file mode 100644
index 00000000..d8815efe
--- /dev/null
+++ b/src/types/navigation.ts
@@ -0,0 +1,6 @@
+export type TabKey = 'slide' | 'video' | 'insight';
+
+export interface TabItem {
+  key: TabKey;
+  label: string;
+}
diff --git a/src/types/script.ts b/src/types/script.ts
new file mode 100644
index 00000000..a371a22e
--- /dev/null
+++ b/src/types/script.ts
@@ -0,0 +1,15 @@
+export interface HistoryItem {
+  id: string;
+  timestamp: string;
+  content: string;
+}
+
+export interface OpinionItem {
+  id: number;
+  author: string;
+  content: string;
+  timestamp: string;
+  isMine: boolean;
+  isReply?: boolean;
+  parentId?: number;
+}

From 682d0c184e323b61b259ec519386560c887f5e9d Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 01:20:09 +0900
Subject: [PATCH 10/16] =?UTF-8?q?chore:=20=ED=99=95=EC=9E=A5=EC=9E=90=20?=
 =?UTF-8?q?=EC=83=9D=EB=9E=B5(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/script-box/Opinion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index 86500f7c..346c5e6e 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 import ReplyIcon from '@/assets/icons/replyIcon.svg?react';
 import TrashcanIcon from '@/assets/icons/trashcanIcon.svg?react';
-import type { OpinionItem } from '@/types/script.ts';
+import type { OpinionItem } from '@/types/script';
 
 import { Popover } from '../common';
 

From a054de7f47123816e039470b4be79a6df83cd0ac Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 22:29:16 +0900
Subject: [PATCH 11/16] =?UTF-8?q?chore:=2016x16=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/Icon.svg                          |  4 ++++
 src/assets/icons/icon-add.svg                      |  3 +++
 .../{smallArrowIcon.svg => icon-arrow-down.svg}    |  0
 src/assets/icons/icon-arrow-left.svg               |  3 +++
 src/assets/icons/icon-arrow-right.svg              |  3 +++
 src/assets/icons/icon-arrow-up.svg                 |  3 +++
 src/assets/icons/icon-close.svg                    |  4 ++++
 src/assets/icons/icon-copy.svg                     | 11 +++++++++++
 src/assets/icons/icon-document.svg                 |  5 +++++
 src/assets/icons/icon-fullscreen.svg               |  3 +++
 src/assets/icons/icon-info.svg                     | 10 ++++++++++
 src/assets/icons/icon-link.svg                     | 11 +++++++++++
 src/assets/icons/icon-logo.svg                     |  3 +++
 src/assets/icons/icon-more.svg                     |  5 +++++
 src/assets/icons/icon-pause.svg                    |  3 +++
 src/assets/icons/icon-play.svg                     |  3 +++
 src/assets/icons/icon-recent.svg                   | 11 +++++++++++
 src/assets/icons/icon-refresh.svg                  |  4 ++++
 src/assets/icons/icon-remove.svg                   |  5 +++++
 src/assets/icons/icon-reply.svg                    |  4 ++++
 src/assets/icons/icon-revert.svg                   |  4 ++++
 src/assets/icons/icon-share.svg                    | 14 ++++++++++++++
 src/assets/icons/icon-smile.svg                    |  4 ++++
 src/assets/icons/icon-sound-mute.svg               |  5 +++++
 src/assets/icons/icon-sound.svg                    |  4 ++++
 src/assets/icons/icon-stop.svg                     |  3 +++
 src/assets/icons/icon-video.svg                    |  4 ++++
 src/assets/icons/refreshIcon.svg                   |  4 ----
 src/assets/icons/replyIcon.svg                     |  4 ----
 src/assets/icons/trashcanIcon.svg                  |  5 -----
 src/components/script-box/Opinion.tsx              |  4 ++--
 src/components/script-box/ScriptBoxHeader.tsx      |  2 +-
 src/components/script-box/ScriptHistory.tsx        |  2 +-
 src/components/script-box/SlideTitle.tsx           |  2 +-
 34 files changed, 141 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/icons/Icon.svg
 create mode 100644 src/assets/icons/icon-add.svg
 rename src/assets/icons/{smallArrowIcon.svg => icon-arrow-down.svg} (100%)
 create mode 100644 src/assets/icons/icon-arrow-left.svg
 create mode 100644 src/assets/icons/icon-arrow-right.svg
 create mode 100644 src/assets/icons/icon-arrow-up.svg
 create mode 100644 src/assets/icons/icon-close.svg
 create mode 100644 src/assets/icons/icon-copy.svg
 create mode 100644 src/assets/icons/icon-document.svg
 create mode 100644 src/assets/icons/icon-fullscreen.svg
 create mode 100644 src/assets/icons/icon-info.svg
 create mode 100644 src/assets/icons/icon-link.svg
 create mode 100644 src/assets/icons/icon-logo.svg
 create mode 100644 src/assets/icons/icon-more.svg
 create mode 100644 src/assets/icons/icon-pause.svg
 create mode 100644 src/assets/icons/icon-play.svg
 create mode 100644 src/assets/icons/icon-recent.svg
 create mode 100644 src/assets/icons/icon-refresh.svg
 create mode 100644 src/assets/icons/icon-remove.svg
 create mode 100644 src/assets/icons/icon-reply.svg
 create mode 100644 src/assets/icons/icon-revert.svg
 create mode 100644 src/assets/icons/icon-share.svg
 create mode 100644 src/assets/icons/icon-smile.svg
 create mode 100644 src/assets/icons/icon-sound-mute.svg
 create mode 100644 src/assets/icons/icon-sound.svg
 create mode 100644 src/assets/icons/icon-stop.svg
 create mode 100644 src/assets/icons/icon-video.svg
 delete mode 100644 src/assets/icons/refreshIcon.svg
 delete mode 100644 src/assets/icons/replyIcon.svg
 delete mode 100644 src/assets/icons/trashcanIcon.svg

diff --git a/src/assets/icons/Icon.svg b/src/assets/icons/Icon.svg
new file mode 100644
index 00000000..f1739210
--- /dev/null
+++ b/src/assets/icons/Icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.37468 8.232C1.31912 8.08232 1.31912 7.91767 1.37468 7.768C1.91581 6.4559 2.83435 5.33402 4.01386 4.5446C5.19336 3.75517 6.58071 3.33374 8.00001 3.33374C9.41932 3.33374 10.8067 3.75517 11.9862 4.5446C13.1657 5.33402 14.0842 6.4559 14.6253 7.768C14.6809 7.91767 14.6809 8.08232 14.6253 8.232C14.0842 9.54409 13.1657 10.666 11.9862 11.4554C10.8067 12.2448 9.41932 12.6663 8.00001 12.6663C6.58071 12.6663 5.19336 12.2448 4.01386 11.4554C2.83435 10.666 1.91581 9.54409 1.37468 8.232Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-add.svg b/src/assets/icons/icon-add.svg
new file mode 100644
index 00000000..08f9d70b
--- /dev/null
+++ b/src/assets/icons/icon-add.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 8H8M8 8H13M8 8V3M8 8V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/smallArrowIcon.svg b/src/assets/icons/icon-arrow-down.svg
similarity index 100%
rename from src/assets/icons/smallArrowIcon.svg
rename to src/assets/icons/icon-arrow-down.svg
diff --git a/src/assets/icons/icon-arrow-left.svg b/src/assets/icons/icon-arrow-left.svg
new file mode 100644
index 00000000..5a59090f
--- /dev/null
+++ b/src/assets/icons/icon-arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-arrow-right.svg b/src/assets/icons/icon-arrow-right.svg
new file mode 100644
index 00000000..70f67cbe
--- /dev/null
+++ b/src/assets/icons/icon-arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 13L11 8L6 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-arrow-up.svg b/src/assets/icons/icon-arrow-up.svg
new file mode 100644
index 00000000..5f22f738
--- /dev/null
+++ b/src/assets/icons/icon-arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 11L8 6L3 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-close.svg b/src/assets/icons/icon-close.svg
new file mode 100644
index 00000000..2f90b7e4
--- /dev/null
+++ b/src/assets/icons/icon-close.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.3335 3.33325L12.6668 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.6665 3.33325L3.33317 12.6666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-copy.svg b/src/assets/icons/icon-copy.svg
new file mode 100644
index 00000000..13067e16
--- /dev/null
+++ b/src/assets/icons/icon-copy.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_166_13771)">
+<path d="M13.3298 5.33179H6.66499C5.92882 5.33179 5.33203 5.92857 5.33203 6.66475V13.3295C5.33203 14.0657 5.92882 14.6625 6.66499 14.6625H13.3298C14.066 14.6625 14.6627 14.0657 14.6627 13.3295V6.66475C14.6627 5.92857 14.066 5.33179 13.3298 5.33179Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.66597 10.6637C1.93284 10.6637 1.33301 10.0639 1.33301 9.33076V2.66597C1.33301 1.93284 1.93284 1.33301 2.66597 1.33301H9.33076C10.0639 1.33301 10.6637 1.93284 10.6637 2.66597" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_166_13771">
+<rect width="15.9955" height="15.9955" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/icon-document.svg b/src/assets/icons/icon-document.svg
new file mode 100644
index 00000000..43747b51
--- /dev/null
+++ b/src/assets/icons/icon-document.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66683 14C4.31321 14 3.97407 13.8595 3.72402 13.6095C3.47397 13.3594 3.3335 13.0203 3.3335 12.6667V2H8.50507C9.0355 2 9.54421 2.21071 9.91928 2.58579L12.081 4.74755C12.4561 5.12262 12.6668 5.63133 12.6668 6.16176V12.6667C12.6668 13.0203 12.5264 13.3594 12.2763 13.6095C12.0263 13.8595 11.6871 14 11.3335 14H4.66683Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.66699 2V6H12.667" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M6 8.66675H10M6 11.3334H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-fullscreen.svg b/src/assets/icons/icon-fullscreen.svg
new file mode 100644
index 00000000..488cb8f0
--- /dev/null
+++ b/src/assets/icons/icon-fullscreen.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.22883 4.22875L11.7715 11.7714M8.66683 12.3334L12.3335 12.3334L12.3335 8.66675M7.3335 3.66675L3.66683 3.66675L3.66683 7.33342" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-info.svg b/src/assets/icons/icon-info.svg
new file mode 100644
index 00000000..f849c325
--- /dev/null
+++ b/src/assets/icons/icon-info.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_225_12733)">
+<path d="M8.00016 5.33325H8.0055M8.00016 10.6666V7.33325M14.6668 7.99992C14.6668 11.6819 11.6822 14.6666 8.00016 14.6666C4.31816 14.6666 1.3335 11.6819 1.3335 7.99992C1.3335 4.31792 4.31816 1.33325 8.00016 1.33325C11.6822 1.33325 14.6668 4.31792 14.6668 7.99992Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_225_12733">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/icon-link.svg b/src/assets/icons/icon-link.svg
new file mode 100644
index 00000000..c8a9913e
--- /dev/null
+++ b/src/assets/icons/icon-link.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_166_12640)">
+<path d="M6.66504 8.66419C6.95126 9.04684 7.31643 9.36345 7.73577 9.59256C8.15512 9.82166 8.61883 9.95791 9.09546 9.99204C9.57208 10.0262 10.0505 9.95741 10.4982 9.7904C10.9459 9.62339 11.3525 9.36204 11.6903 9.02409L13.6897 7.02465C14.2968 6.39615 14.6326 5.55438 14.6251 4.68064C14.6175 3.80689 14.267 2.97109 13.6491 2.35323C13.0313 1.73538 12.1955 1.38492 11.3217 1.37732C10.448 1.36973 9.60622 1.70562 8.97772 2.31264L7.83138 3.45232" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33074 7.33124C9.04452 6.94859 8.67935 6.63198 8.26001 6.40287C7.84067 6.17376 7.37695 6.03752 6.90032 6.00339C6.4237 5.96925 5.9453 6.03802 5.49759 6.20503C5.04988 6.37204 4.64332 6.63339 4.30549 6.97134L2.30605 8.97078C1.69903 9.59927 1.36314 10.441 1.37073 11.3148C1.37832 12.1885 1.72879 13.0243 2.34664 13.6422C2.9645 14.26 3.8003 14.6105 4.67405 14.6181C5.54779 14.6257 6.38956 14.2898 7.01806 13.6828L8.15774 12.5431" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_166_12640">
+<rect width="15.9955" height="15.9955" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/icon-logo.svg b/src/assets/icons/icon-logo.svg
new file mode 100644
index 00000000..0cfd3f33
--- /dev/null
+++ b/src/assets/icons/icon-logo.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.09635 1.88366C11.5499 2.56842 12.9838 5.11252 12.299 7.56606C12.2927 7.58881 12.2861 7.61145 12.2794 7.63402C11.4908 10.3633 9.74071 12.5589 7.50124 13.9549C7.16246 14.1661 6.834 13.6768 7.08533 13.3666C7.3056 13.0948 7.51211 12.8098 7.70351 12.5125C8.14167 11.8319 7.51131 10.9967 6.72659 10.798C6.68992 10.7887 6.65326 10.779 6.61662 10.7687C4.16308 10.084 2.72919 7.53988 3.41395 5.08634C4.0987 2.63279 6.6428 1.1989 9.09635 1.88366Z" stroke="currentColor" stroke-width="1.5"/>
+</svg>
diff --git a/src/assets/icons/icon-more.svg b/src/assets/icons/icon-more.svg
new file mode 100644
index 00000000..6d278995
--- /dev/null
+++ b/src/assets/icons/icon-more.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99753 8.66426C8.36562 8.66426 8.66401 8.36586 8.66401 7.99778C8.66401 7.62969 8.36562 7.3313 7.99753 7.3313C7.62945 7.3313 7.33105 7.62969 7.33105 7.99778C7.33105 8.36586 7.62945 8.66426 7.99753 8.66426Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99753 3.99897C8.36562 3.99897 8.66401 3.70058 8.66401 3.3325C8.66401 2.96441 8.36562 2.66602 7.99753 2.66602C7.62945 2.66602 7.33105 2.96441 7.33105 3.3325C7.33105 3.70058 7.62945 3.99897 7.99753 3.99897Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99753 13.3295C8.36562 13.3295 8.66401 13.0311 8.66401 12.6631C8.66401 12.295 8.36562 11.9966 7.99753 11.9966C7.62945 11.9966 7.33105 12.295 7.33105 12.6631C7.33105 13.0311 7.62945 13.3295 7.99753 13.3295Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-pause.svg b/src/assets/icons/icon-pause.svg
new file mode 100644
index 00000000..5346ba78
--- /dev/null
+++ b/src/assets/icons/icon-pause.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 14C10.875 14 10.4828 13.8323 10.1567 13.4969C9.83055 13.1614 9.66722 12.7577 9.66666 12.2857V3.71429C9.66666 3.24286 9.83 2.83943 10.1567 2.504C10.4833 2.16857 10.8756 2.00057 11.3333 2C11.7911 1.99943 12.1836 2.16743 12.5108 2.504C12.838 2.84057 13.0011 3.244 13 3.71429V12.2857C13 12.7571 12.8369 13.1609 12.5108 13.4969C12.1847 13.8329 11.7922 14.0006 11.3333 14ZM4.66667 14C4.20833 14 3.81611 13.8323 3.49 13.4969C3.16389 13.1614 3.00056 12.7577 3 12.2857V3.71429C3 3.24286 3.16333 2.83943 3.49 2.504C3.81667 2.16857 4.20889 2.00057 4.66667 2C5.12444 1.99943 5.51694 2.16743 5.84417 2.504C6.17139 2.84057 6.33444 3.244 6.33333 3.71429V12.2857C6.33333 12.7571 6.17028 13.1609 5.84417 13.4969C5.51805 13.8329 5.12555 14.0006 4.66667 14Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/icon-play.svg b/src/assets/icons/icon-play.svg
new file mode 100644
index 00000000..245fa7ad
--- /dev/null
+++ b/src/assets/icons/icon-play.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.56087 3.05558C5.50448 3.0198 5.44024 3.00063 5.37468 3.00002C5.30912 2.9994 5.24458 3.01737 5.18761 3.05209C5.13064 3.08682 5.08328 3.13706 5.05033 3.19772C5.01738 3.25837 5.00001 3.32728 5 3.39745V12.6026C5.00001 12.6727 5.01738 12.7416 5.05033 12.8023C5.08328 12.8629 5.13064 12.9132 5.18761 12.9479C5.24458 12.9826 5.30912 13.0006 5.37468 13C5.44024 12.9994 5.50448 12.9802 5.56087 12.9444L12.8181 8.34186C12.8735 8.30666 12.9194 8.25664 12.9513 8.1967C12.9832 8.13676 13 8.06897 13 8C13 7.93103 12.9832 7.86324 12.9513 7.8033C12.9194 7.74336 12.8735 7.69334 12.8181 7.65814L5.56087 3.05558Z" fill="black" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-recent.svg b/src/assets/icons/icon-recent.svg
new file mode 100644
index 00000000..35136d09
--- /dev/null
+++ b/src/assets/icons/icon-recent.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_122_6696)">
+<path d="M8 4V8L10.6667 9.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_122_6696">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/icon-refresh.svg b/src/assets/icons/icon-refresh.svg
new file mode 100644
index 00000000..552edad2
--- /dev/null
+++ b/src/assets/icons/icon-refresh.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.9524 2.66669C3.11469 3.71659 1.90479 5.73259 1.90479 8.00002C1.90479 9.61658 2.54696 11.1669 3.69004 12.31C4.83312 13.4531 6.38347 14.0953 8.00002 14.0953M11.0476 13.3334C12.7901 12.2606 14.0953 10.1958 14.0953 8.00002C14.0953 6.38347 13.4531 4.83312 12.31 3.69004C11.1669 2.54696 9.61658 1.90479 8.00002 1.90479" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.9524 5.71437V2.66675H1.90479M11.0476 10.2858V13.3334H14.0953" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-remove.svg b/src/assets/icons/icon-remove.svg
new file mode 100644
index 00000000..ae206159
--- /dev/null
+++ b/src/assets/icons/icon-remove.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4995 2.75V13.2494C12.4995 13.6244 12.1245 13.9994 11.7496 13.9994H7.99976H4.24996C3.87498 13.9994 3.5 13.6244 3.5 13.2494V2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2.75H13.9993" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.50049 2H9.50033M6.50049 5.7498V10.9995M9.50033 5.7498V10.9995" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-reply.svg b/src/assets/icons/icon-reply.svg
new file mode 100644
index 00000000..d63bf461
--- /dev/null
+++ b/src/assets/icons/icon-reply.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3036 12.6668V11.091C14.3036 10.2552 13.9715 9.45356 13.3805 8.86253C12.7895 8.27149 11.9878 7.93945 11.152 7.93945H1.69727" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.63673 11.8789L1.69727 7.93947L5.63673 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-revert.svg b/src/assets/icons/icon-revert.svg
new file mode 100644
index 00000000..b8a74bd9
--- /dev/null
+++ b/src/assets/icons/icon-revert.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.99805 7.9978C2.99805 8.98671 3.29129 9.95341 3.8407 10.7757C4.39011 11.5979 5.171 12.2388 6.08463 12.6172C6.99826 12.9956 8.00359 13.0947 8.9735 12.9017C9.9434 12.7088 10.8343 12.2326 11.5336 11.5333C12.2328 10.8341 12.709 9.94316 12.902 8.97325C13.0949 8.00335 12.9959 6.99801 12.6174 6.08438C12.239 5.17075 11.5981 4.38986 10.7759 3.84045C9.95365 3.29105 8.98695 2.9978 7.99805 2.9978C6.60024 3.00306 5.25858 3.54848 4.2536 4.52002L2.99805 5.77558" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.99805 2.9978V5.9978H5.99805" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-share.svg b/src/assets/icons/icon-share.svg
new file mode 100644
index 00000000..96a46bd8
--- /dev/null
+++ b/src/assets/icons/icon-share.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_116_4918)">
+<path d="M11.9965 5.33188C13.1008 5.33188 13.9959 4.43671 13.9959 3.33245C13.9959 2.22819 13.1008 1.33301 11.9965 1.33301C10.8922 1.33301 9.99707 2.22819 9.99707 3.33245C9.99707 4.43671 10.8922 5.33188 11.9965 5.33188Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.99895 9.99717C5.10321 9.99717 5.99839 9.10199 5.99839 7.99773C5.99839 6.89347 5.10321 5.99829 3.99895 5.99829C2.89469 5.99829 1.99951 6.89347 1.99951 7.99773C1.99951 9.10199 2.89469 9.99717 3.99895 9.99717Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9965 14.6625C13.1008 14.6625 13.9959 13.7673 13.9959 12.663C13.9959 11.5588 13.1008 10.6636 11.9965 10.6636C10.8922 10.6636 9.99707 11.5588 9.99707 12.663C9.99707 13.7673 10.8922 14.6625 11.9965 14.6625Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.7251 9.00415L10.2772 11.6567" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2705 4.33887L5.7251 6.99146" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_116_4918">
+<rect width="15.9955" height="15.9955" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/icon-smile.svg b/src/assets/icons/icon-smile.svg
new file mode 100644
index 00000000..6106f129
--- /dev/null
+++ b/src/assets/icons/icon-smile.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99998 14C11.3137 14 14 11.3137 14 7.99998C14 4.68628 11.3137 2 7.99998 2C4.68628 2 2 4.68628 2 7.99998C2 11.3137 4.68628 14 7.99998 14Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.6001 9.19994C5.6001 9.19994 6.50009 10.3999 8.00009 10.3999C9.50008 10.3999 10.4001 9.19994 10.4001 9.19994M6.2001 6.19995H6.2061M9.80008 6.19995H9.80608" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/icon-sound-mute.svg b/src/assets/icons/icon-sound-mute.svg
new file mode 100644
index 00000000..d582ea60
--- /dev/null
+++ b/src/assets/icons/icon-sound-mute.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31607 2.19677C9.03793 1.67945 10 2.24263 10 3.18218V12.8177C10 13.7579 9.03793 14.3205 8.31607 13.8031L4.59193 11.1356C4.56674 11.1173 4.53718 11.1075 4.5069 11.1073H2.7069C2.2542 11.1073 1.82004 10.9118 1.49994 10.564C1.17983 10.2162 1 9.74437 1 9.25245V6.74745C1 6.25552 1.17983 5.78375 1.49994 5.4359C1.82004 5.08806 2.2542 4.89264 2.7069 4.89264H4.5069C4.53733 4.89275 4.56711 4.88314 4.59255 4.86499L8.31607 2.19677Z" fill="black"/>
+<path d="M15 6.5L12 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15 9.5L12 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/icon-sound.svg b/src/assets/icons/icon-sound.svg
new file mode 100644
index 00000000..5a229fe2
--- /dev/null
+++ b/src/assets/icons/icon-sound.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 5C13.8333 5.83333 15 8.1 13 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31607 2.19677C9.03793 1.67945 10 2.24263 10 3.18218V12.8177C10 13.7579 9.03793 14.3205 8.31607 13.8031L4.59193 11.1356C4.56674 11.1173 4.53718 11.1075 4.5069 11.1073H2.7069C2.2542 11.1073 1.82004 10.9118 1.49994 10.564C1.17983 10.2162 1 9.74437 1 9.25245V6.74745C1 6.25552 1.17983 5.78375 1.49994 5.4359C1.82004 5.08806 2.2542 4.89264 2.7069 4.89264H4.5069C4.53733 4.89275 4.56711 4.88314 4.59255 4.86499L8.31607 2.19677Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/icon-stop.svg b/src/assets/icons/icon-stop.svg
new file mode 100644
index 00000000..d432f4af
--- /dev/null
+++ b/src/assets/icons/icon-stop.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 11.3333V4.66667C3 4.20833 3.16333 3.81611 3.49 3.49C3.81667 3.16389 4.20889 3.00056 4.66667 3H11.3333C11.7917 3 12.1842 3.16333 12.5108 3.49C12.8375 3.81667 13.0006 4.20889 13 4.66667V11.3333C13 11.7917 12.8369 12.1842 12.5108 12.5108C12.1847 12.8375 11.7922 13.0006 11.3333 13H4.66667C4.20833 13 3.81611 12.8369 3.49 12.5108C3.16389 12.1847 3.00056 11.7922 3 11.3333Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/icon-video.svg b/src/assets/icons/icon-video.svg
new file mode 100644
index 00000000..1478ac13
--- /dev/null
+++ b/src/assets/icons/icon-video.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6665 8.66676L14.1485 10.9881C14.1987 11.0215 14.257 11.0407 14.3172 11.0435C14.3775 11.0464 14.4373 11.0329 14.4905 11.0045C14.5437 10.976 14.5881 10.9337 14.6191 10.8819C14.6501 10.8302 14.6665 10.7711 14.6665 10.7108V5.24676C14.6665 5.18811 14.6511 5.13049 14.6217 5.07973C14.5923 5.02896 14.5501 4.98684 14.4992 4.95763C14.4484 4.92841 14.3907 4.91313 14.332 4.91333C14.2734 4.91353 14.2158 4.9292 14.1652 4.95876L10.6665 7.0001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.3335 4H2.66683C1.93045 4 1.3335 4.59695 1.3335 5.33333V10.6667C1.3335 11.403 1.93045 12 2.66683 12H9.3335C10.0699 12 10.6668 11.403 10.6668 10.6667V5.33333C10.6668 4.59695 10.0699 4 9.3335 4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/refreshIcon.svg b/src/assets/icons/refreshIcon.svg
deleted file mode 100644
index fd372d65..00000000
--- a/src/assets/icons/refreshIcon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.9978 7.99756C2.9978 8.98646 3.29105 9.95316 3.84045 10.7754C4.38986 11.5977 5.17075 12.2385 6.08438 12.617C6.99801 12.9954 8.00335 13.0944 8.97325 12.9015C9.94316 12.7086 10.8341 12.2324 11.5333 11.5331C12.2326 10.8338 12.7088 9.94291 12.9017 8.97301C13.0947 8.0031 12.9956 6.99777 12.6172 6.08414C12.2388 5.17051 11.5979 4.38962 10.7757 3.84021C9.95341 3.2908 8.98671 2.99756 7.9978 2.99756C6.6 3.00282 5.25834 3.54824 4.25336 4.51978L2.9978 5.77534" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.9978 2.99756V5.99756H5.9978" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/assets/icons/replyIcon.svg b/src/assets/icons/replyIcon.svg
deleted file mode 100644
index 9db50da6..00000000
--- a/src/assets/icons/replyIcon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3563 9.41681V7.84103C13.3563 7.00518 13.0243 6.20356 12.4332 5.61253C11.8422 5.02149 11.0406 4.68945 10.2047 4.68945H0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.68947 8.62894L0.75 4.68947L4.68947 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/assets/icons/trashcanIcon.svg b/src/assets/icons/trashcanIcon.svg
deleted file mode 100644
index 93646e2c..00000000
--- a/src/assets/icons/trashcanIcon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.2491 1.5V11.9994C11.2491 12.3744 10.8742 12.7494 10.4992 12.7494H6.74939H2.99959C2.62461 12.7494 2.24963 12.3744 2.24963 11.9994V1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M0.75 1.5H12.7493" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.25 0.75H8.24984M5.25 4.4998V9.74951M8.24984 4.4998V9.74951" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index 346c5e6e..f4e97e14 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import clsx from 'clsx';
 
-import ReplyIcon from '@/assets/icons/replyIcon.svg?react';
-import TrashcanIcon from '@/assets/icons/trashcanIcon.svg?react';
+import TrashcanIcon from '@/assets/icons/icon-remove.svg?react';
+import ReplyIcon from '@/assets/icons/icon-reply.svg?react';
 import type { OpinionItem } from '@/types/script';
 
 import { Popover } from '../common';
diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index 6cb0ea8f..19d8a1e0 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import SmallArrowIcon from '@/assets/icons/smallArrowIcon.svg?react';
+import SmallArrowIcon from '@/assets/icons/icon-arrow-down.svg?react';
 
 import Opinion from './Opinion';
 import ScriptBoxEmoji from './ScriptBoxEmoji';
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index 0129f848..f23be872 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import RefreshIcon from '@/assets/icons/refreshIcon.svg?react';
+import RefreshIcon from '@/assets/icons/icon-revert.svg?react';
 import type { HistoryItem } from '@/types/script';
 
 import { Popover } from '../common';
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index 0432ab4c..5a4a36bb 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import SmallArrowIcon from '@/assets/icons/smallArrowIcon.svg?react';
+import SmallArrowIcon from '@/assets/icons/icon-arrow-down.svg?react';
 
 import { Popover } from '../common';
 

From 06ada31d1111c4354cd52ff98a1869321d37a6ff Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 22:47:06 +0900
Subject: [PATCH 12/16] =?UTF-8?q?design:=20=ED=8C=9D=EC=98=A4=EB=B2=84=20s?=
 =?UTF-8?q?pacing=20=EB=94=94=EC=9E=90=EC=9D=B8=20=ED=86=A0=ED=81=B0=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/script-box/Opinion.tsx       | 2 +-
 src/components/script-box/ScriptHistory.tsx | 2 +-
 src/styles/index.css                        | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index f4e97e14..df9925b0 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -98,7 +98,7 @@ export default function Opinion({
       position="top"
       align="end"
       ariaLabel="의견 목록"
-      className="w-105.25 max-w-[90vw] overflow-hidden rounded-b-lg"
+      className="w-popover max-w-[90vw] overflow-hidden rounded-b-lg"
     >
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index f23be872..c377bd16 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -42,7 +42,7 @@ export default function ScriptHistory({
       position="top"
       align="end"
       ariaLabel="대본 변경 기록"
-      className="w-105.25 max-w-[90vw] overflow-hidden rounded-b-lg"
+      className="w-popover max-w-[90vw] overflow-hidden rounded-b-lg"
     >
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
diff --git a/src/styles/index.css b/src/styles/index.css
index d029f3af..1b064d4f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -27,4 +27,6 @@
   --spacing-15: 3.75rem;
   --spacing-18: 4.5rem;
   --spacing-25: 6.25rem;
+
+  --width-popover: 26.3125rem; /* 421px */
 }

From dbb1bc8feba4b5067877a1a83ad457981ca6a1d3 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 22:59:48 +0900
Subject: [PATCH 13/16] =?UTF-8?q?feat:=20=ED=8C=9D=EC=98=A4=EB=B2=84=20?=
 =?UTF-8?q?=EB=8B=AB=ED=9E=90=20=EB=95=8C=20=ED=8F=AC=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=96=88=EB=8D=98=20=EC=9A=94=EC=86=8C=20=ED=8F=AC=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Popover.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Popover.tsx b/src/components/common/Popover.tsx
index 084efd6b..6ec7de8c 100644
--- a/src/components/common/Popover.tsx
+++ b/src/components/common/Popover.tsx
@@ -1,4 +1,12 @@
-import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
+import {
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
 
 import clsx from 'clsx';
 
@@ -6,7 +14,7 @@ type PopoverPosition = 'top' | 'bottom';
 type PopoverAlign = 'start' | 'end';
 
 interface PopoverProps {
-  trigger: ReactNode | ((props: { isOpen: boolean }) => ReactNode);
+  trigger: ReactElement | ((props: { isOpen: boolean }) => ReactElement);
   children: ReactNode;
   position?: PopoverPosition;
   align?: PopoverAlign;
@@ -26,16 +34,23 @@ export function Popover({
   const popoverRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const lastFocusedElement = useRef<HTMLElement | null>(null);
   const popoverId = useId();
 
   const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
+    setIsOpen((prev) => {
+      if (!prev) {
+        // 팝오버가 열릴 때 현재 포커스된 요소 저장
+        lastFocusedElement.current = document.activeElement as HTMLElement;
+      }
+      return !prev;
+    });
   }, []);
 
   const handleClose = useCallback(() => {
     setIsOpen(false);
-    // 팝오버 닫힐 때 트리거로 포커스 이동
-    triggerRef.current?.querySelector('button')?.focus();
+    // 팝오버 닫힐 때 이전에 포커스된 요소로 포커스 이동
+    lastFocusedElement.current?.focus();
   }, []);
 
   // Escape 키로 닫기

From baaf38831d644d2f1f5a46af43d536a5bbb5d1c7 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 23:09:08 +0900
Subject: [PATCH 14/16] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AA=A8=EC=A7=80?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20SVGR?=
 =?UTF-8?q?=20=EC=9A=94=EC=86=8C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/script-box/Opinion.tsx        |  4 ++--
 src/components/script-box/ScriptBoxEmoji.tsx | 12 +++++++++---
 src/components/script-box/ScriptHistory.tsx  |  6 +++---
 src/components/script-box/SlideTitle.tsx     |  4 ++--
 src/types/script.ts                          |  5 +++++
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/script-box/Opinion.tsx b/src/components/script-box/Opinion.tsx
index df9925b0..f37c252a 100644
--- a/src/components/script-box/Opinion.tsx
+++ b/src/components/script-box/Opinion.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import clsx from 'clsx';
 
-import TrashcanIcon from '@/assets/icons/icon-remove.svg?react';
+import RemoveIcon from '@/assets/icons/icon-remove.svg?react';
 import ReplyIcon from '@/assets/icons/icon-reply.svg?react';
 import type { OpinionItem } from '@/types/script';
 
@@ -141,7 +141,7 @@ export default function Opinion({
                         className="flex items-center gap-1 text-xs font-semibold text-error active:opacity-80"
                       >
                         삭제
-                        <TrashcanIcon className="h-4 w-4" aria-hidden="true" />
+                        <RemoveIcon className="h-4 w-4" aria-hidden="true" />
                       </button>
                     )}
                   </div>
diff --git a/src/components/script-box/ScriptBoxEmoji.tsx b/src/components/script-box/ScriptBoxEmoji.tsx
index 58afac03..22850e64 100644
--- a/src/components/script-box/ScriptBoxEmoji.tsx
+++ b/src/components/script-box/ScriptBoxEmoji.tsx
@@ -1,11 +1,13 @@
+import type { EmojiReaction } from '@/types/script';
+
 import { Popover } from '../common';
 
-const EMOJI_DATA = [
+const EMOJI_DATA: EmojiReaction[] = [
   { emoji: '👍', count: 99 },
   { emoji: '😡', count: 12 },
 ];
 
-const EMOJI_EXTENDED_DATA = [
+const EMOJI_EXTENDED_DATA: EmojiReaction[][] = [
   [
     { emoji: '😏', count: 15 },
     { emoji: '❤️', count: 28 },
@@ -24,7 +26,11 @@ const EMOJI_EXTENDED_DATA = [
 
 export default function ScriptBoxEmoji() {
   const trigger = (
-    <button type="button" className="h-7 rounded px-2 hover:bg-gray-100" aria-label="이모지 더보기">
+    <button
+      type="button"
+      className="h-7 rounded px-2 hover:bg-gray-100 active:bg-gray-200"
+      aria-label="반응 더보기"
+    >
       ···
     </button>
   );
diff --git a/src/components/script-box/ScriptHistory.tsx b/src/components/script-box/ScriptHistory.tsx
index c377bd16..c739590e 100644
--- a/src/components/script-box/ScriptHistory.tsx
+++ b/src/components/script-box/ScriptHistory.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import RefreshIcon from '@/assets/icons/icon-revert.svg?react';
+import RevertIcon from '@/assets/icons/icon-revert.svg?react';
 import type { HistoryItem } from '@/types/script';
 
 import { Popover } from '../common';
@@ -36,7 +36,7 @@ export default function ScriptHistory({
           )}
         >
           <span className="text-sm font-semibold leading-5">변경 기록</span>
-          <RefreshIcon className="h-4 w-4" aria-hidden="true" />
+          <RevertIcon className="h-4 w-4" aria-hidden="true" />
         </button>
       )}
       position="top"
@@ -75,7 +75,7 @@ export default function ScriptHistory({
                 )}
               >
                 <span className="text-xs font-semibold leading-4">복원</span>
-                <RefreshIcon className="h-4 w-4" aria-hidden="true" />
+                <RevertIcon className="h-4 w-4" aria-hidden="true" />
               </button>
             </div>
             <p className="mt-2 text-sm font-medium leading-5 text-gray-800">{item.content}</p>
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index 5a4a36bb..b7cf7806 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import SmallArrowIcon from '@/assets/icons/icon-arrow-down.svg?react';
+import ArrowDownIcon from '@/assets/icons/icon-arrow-down.svg?react';
 
 import { Popover } from '../common';
 
@@ -25,7 +25,7 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
       className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200"
     >
       <span className="max-w-30 line-clamp-1">{title}</span>
-      <SmallArrowIcon className="h-4 w-4" aria-hidden="true" />
+      <ArrowDownIcon className="h-4 w-4" aria-hidden="true" />
     </button>
   );
 
diff --git a/src/types/script.ts b/src/types/script.ts
index a371a22e..4daa7acd 100644
--- a/src/types/script.ts
+++ b/src/types/script.ts
@@ -13,3 +13,8 @@ export interface OpinionItem {
   isReply?: boolean;
   parentId?: number;
 }
+
+export interface EmojiReaction {
+  emoji: string;
+  count: number;
+}

From 2fe865a2c0aff0050af6404e7d25ea38715e8405 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 23:21:54 +0900
Subject: [PATCH 15/16] =?UTF-8?q?feat:=20=EB=8C=80=EB=B3=B8=20=EB=B7=B0?=
 =?UTF-8?q?=EC=96=B4=20=EB=8B=AB=ED=98=80=20=EC=9E=88=EC=9D=84=20=EB=95=8C?=
 =?UTF-8?q?=20=EC=9C=84=EB=A1=9C=20popover=20=EB=9C=A8=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/script-box/ScriptBoxHeader.tsx |  6 +--
 src/components/script-box/SlideTitle.tsx      | 39 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index 19d8a1e0..5cd3713d 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import SmallArrowIcon from '@/assets/icons/icon-arrow-down.svg?react';
+import ArrowDownIcon from '@/assets/icons/icon-arrow-down.svg?react';
 
 import Opinion from './Opinion';
 import ScriptBoxEmoji from './ScriptBoxEmoji';
@@ -21,7 +21,7 @@ export default function ScriptBoxHeader({
   return (
     <div className="flex h-10 items-center justify-between border-b border-gray-200 bg-white px-5">
       {/* 좌측: 슬라이드 제목 */}
-      <SlideTitle initialTitle={slideTitle} />
+      <SlideTitle initialTitle={slideTitle} isCollapsed={isCollapsed} />
 
       {/* 우측: 이모지, 변경기록, 의견, 접기 버튼 */}
       <div className="flex items-center gap-3">
@@ -35,7 +35,7 @@ export default function ScriptBoxHeader({
           aria-expanded={!isCollapsed}
           aria-label={isCollapsed ? '대본 펼치기' : '대본 접기'}
         >
-          <SmallArrowIcon
+          <ArrowDownIcon
             className={clsx(
               'h-4 w-4 transition-transform duration-300',
               !isCollapsed && 'rotate-180',
diff --git a/src/components/script-box/SlideTitle.tsx b/src/components/script-box/SlideTitle.tsx
index b7cf7806..02597aeb 100644
--- a/src/components/script-box/SlideTitle.tsx
+++ b/src/components/script-box/SlideTitle.tsx
@@ -1,15 +1,22 @@
 import { useState } from 'react';
 
+import clsx from 'clsx';
+
 import ArrowDownIcon from '@/assets/icons/icon-arrow-down.svg?react';
 
 import { Popover } from '../common';
 
 interface SlideTitleProps {
   initialTitle?: string;
+  isCollapsed?: boolean;
   onSave?: (title: string) => void;
 }
 
-export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }: SlideTitleProps) {
+export default function SlideTitle({
+  initialTitle = '슬라이드 1',
+  isCollapsed = false,
+  onSave,
+}: SlideTitleProps) {
   const [title, setTitle] = useState(initialTitle);
   const [editTitle, setEditTitle] = useState(initialTitle);
 
@@ -18,21 +25,25 @@ export default function SlideTitle({ initialTitle = '슬라이드 1', onSave }:
     onSave?.(editTitle);
   };
 
-  const trigger = (
-    <button
-      type="button"
-      aria-label="슬라이드 이름 변경"
-      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200"
-    >
-      <span className="max-w-30 line-clamp-1">{title}</span>
-      <ArrowDownIcon className="h-4 w-4" aria-hidden="true" />
-    </button>
-  );
-
   return (
     <Popover
-      trigger={trigger}
-      position="bottom"
+      trigger={({ isOpen }) => (
+        <button
+          type="button"
+          aria-label="슬라이드 이름 변경"
+          className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200"
+        >
+          <span className="max-w-30 line-clamp-1">{title}</span>
+          <ArrowDownIcon
+            className={clsx(
+              'h-4 w-4 transition-transform duration-300',
+              isOpen !== isCollapsed && 'rotate-180',
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      )}
+      position={isCollapsed ? 'top' : 'bottom'}
       align="start"
       ariaLabel="슬라이드 이름 변경"
       className="flex w-80 items-center gap-2 border border-gray-200 px-3 py-2"

From 9e45a5e5749fc3186595ae206ab9d005f64d17db Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Thu, 1 Jan 2026 23:27:37 +0900
Subject: [PATCH 16/16] =?UTF-8?q?design:=20Gnb=20=EB=A9=94=EB=89=B4=20?=
 =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=94=A9=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Gnb.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Gnb.tsx b/src/components/layout/Gnb.tsx
index 6d99e8fd..25e0219e 100644
--- a/src/components/layout/Gnb.tsx
+++ b/src/components/layout/Gnb.tsx
@@ -8,12 +8,13 @@ export function Gnb() {
   const { projectId } = useParams<{ projectId: string }>();
   const location = useLocation();
   const activeTab = getTabFromPathname(location.pathname);
+  const activeIndex = TABS.findIndex((tab) => tab.key === activeTab);
 
   if (!projectId) return null;
 
   return (
     <nav
-      className="flex h-15 items-center justify-center"
+      className="relative flex h-15 items-center justify-center"
       role="tablist"
       aria-label="네비게이션 메뉴"
     >
@@ -28,17 +29,20 @@ export function Gnb() {
             aria-selected={isActive}
             aria-controls={`tabpanel-${key}`}
             className={clsx(
-              'flex h-full w-25 items-end justify-center px-2.5 pb-4 pt-4 text-body-m-bold border-b-2',
-              {
-                'border-main text-main': isActive,
-                'border-transparent text-gray-600': !isActive,
-              },
+              'flex h-full w-25 items-end justify-center px-2.5 pb-4 pt-4 text-body-m-bold transition-colors duration-300',
+              isActive ? 'text-main' : 'text-gray-600',
             )}
           >
             {label}
           </Link>
         );
       })}
+
+      {/* 슬라이딩 인디케이터 */}
+      <div
+        className="absolute bottom-0 h-0.5 w-25 bg-main transition-transform duration-300 ease-out"
+        style={{ transform: `translateX(${(activeIndex - 1) * 100}%)` }}
+      />
     </nav>
   );
 }