From 9121d9b61a4a974df8155f1a5a7a140f24e48c3f Mon Sep 17 00:00:00 2001
From: wonellyho <navybsktb@gmail.com>
Date: Sat, 3 Jan 2026 01:14:22 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20SlidePage=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=EA=B3=BC=20ScriptBox=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EB=B3=80=ED=99=94=20(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx              |  10 +-
 src/components/script-box/ScriptBox.tsx       |  65 ++++--
 .../script-box/ScriptBoxContent.tsx           |   3 +-
 src/pages/SlidePage.tsx                       | 196 +++++++++++++++++-
 4 files changed, 248 insertions(+), 26 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 68a71961..b8e3a188 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -11,14 +11,18 @@ interface LayoutProps {
 
 export function Layout({ left, center, right }: LayoutProps) {
   return (
-    <div className="min-h-screen bg-gray-100">
+    <div className="h-screen overflow-hidden bg-gray-100">
       <header className="fixed top-0 right-0 left-0 z-50 flex h-15 items-center justify-between border-b border-gray-200 bg-white px-18">
         <div className="flex items-center gap-6">{left ?? <Logo />}</div>
         <div className="absolute left-1/2 -translate-x-1/2">{center}</div>
         <div className="flex items-center gap-8">{right}</div>
       </header>
-      <main className="pt-15">
-        <Outlet />
+
+      <main className="mt-15 h-[calc(100vh-3.75rem)] overflow-hidden">
+        {/* Outlet이 들어가는 영역(= 네 컨텐츠)이 이제 정확한 높이를 가짐 */}
+        <div className="h-full">
+          <Outlet />
+        </div>
       </main>
     </div>
   );
diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index dae66eef..079192a0 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import clsx from 'clsx';
 
@@ -7,31 +7,62 @@ import ScriptBoxHeader from './ScriptBoxHeader';
 
 interface ScriptBoxProps {
   slideTitle?: string;
+  /**
+   * [기존] ScriptBox는 내부에서만 접힘 상태를 알고 있었고,
+   *       슬라이드(상단 콘텐츠)는 ScriptBox 상태에 맞춰 움직일 수 없었음.
+   * [현재] 부모가 접힘 상태를 알 수 있어야 "슬라이드를 살짝 내려오는" UI 연동이 가능함.
+   */
+  onCollapsedChange?: (collapsed: boolean) => void;
 }
 
-export default function ScriptBox({ slideTitle = '슬라이드 1' }: ScriptBoxProps) {
+export default function ScriptBox({
+  slideTitle = '슬라이드 1',
+  onCollapsedChange,
+}: ScriptBoxProps) {
+  // ScriptBox 접힌 상태인지 체크
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const handleToggleCollapse = () => {
     setIsCollapsed((prev) => !prev);
   };
 
+  /**
+   *  접힘 상태가 바뀔 때마다 부모에게 알려줌
+   * - 부모는 이 상태를 받아 슬라이드 영역에 transform/padding 등으로 반응하게 됨
+   */
+  useEffect(() => {
+    onCollapsedChange?.(isCollapsed);
+  }, [isCollapsed, onCollapsedChange]);
+
   return (
-    <div
-      className={clsx(
-        'fixed inset-x-0 bottom-0 z-30',
-        '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',
-      )}
-    >
-      <ScriptBoxHeader
-        slideTitle={slideTitle}
-        isCollapsed={isCollapsed}
-        onToggleCollapse={handleToggleCollapse}
-      />
-      <ScriptBoxContent />
+    <div className={clsx('w-full rounded-t-lg bg-white shadow-sm', isCollapsed ? 'h-10' : 'h-80')}>
+      {/* 헤더는 그대로 */}
+      <div className="h-12 relative">
+        <ScriptBoxHeader
+          slideTitle={slideTitle}
+          isCollapsed={isCollapsed}
+          onToggleCollapse={handleToggleCollapse}
+        />
+      </div>
+
+      {/**
+       * 본문 영역만 따로 감싸서 접힘 애니메이션 처리
+       *
+       * 왜 wrapper를 하나 더 뒀나?
+       * - 헤더는 popover 때문에 잘리면 안 됨 → overflow-hidden을 헤더가 아닌 "본문 wrapper"에만 적용
+       * - 접힘 애니메이션은 "height 변화"로 처리하는 게 가장 예측 가능함
+       *
+       * [기존] translate로 박스를 숨김 → 공간 계산, popover, 클릭 영역이 꼬일 수 있음
+       * [현재] content wrapper의 높이를 h-0으로 만들어 진짜로 본문이 없어지게 함(접힌 상태라면 아예 랜더 자체 하지 않음)
+       */}
+      <div
+        className={clsx(
+          'overflow-hidden transition-[height] duration-300 ease-out',
+          isCollapsed ? 'h-0' : 'h-[280px]',
+        )}
+      >
+        {!isCollapsed && <ScriptBoxContent />}
+      </div>
     </div>
   );
 }
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
index e18ea108..39029eb4 100644
--- a/src/components/script-box/ScriptBoxContent.tsx
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -4,7 +4,8 @@ export default function ScriptBoxContent() {
   const [script, setScript] = useState('');
 
   return (
-    <div className="h-[calc(100%-2.5rem)] overflow-y-auto border-b border-gray-200 bg-white px-4 pb-6 pt-3">
+    // ScriptBox 전체 높이에서 헤더만큼 뺀 영역을 그대로 사용
+    <div className="h-full overflow-y-auto bg-white px-4 py-3">
       <textarea
         value={script}
         onChange={(e) => setScript(e.target.value)}
diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx
index 88550d48..4c65eda9 100644
--- a/src/pages/SlidePage.tsx
+++ b/src/pages/SlidePage.tsx
@@ -1,25 +1,211 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import clsx from 'clsx';
 
 import { ScriptBox } from '@/components/script-box';
 import { setLastSlideId } from '@/constants/navigation';
 
 export default function SlidePage() {
+  // url에 입력된 프로젝트, 슬라이드id 읽기
   const { projectId, slideId } = useParams<{
     projectId: string;
     slideId: string;
   }>();
 
+  /**
+   *
+   * 목적:
+   * - 탭 이동(영상/인사이트 → 슬라이드) 후 다시 돌아왔을 때
+   *   → 마지막으로 보던 슬라이드로 복원하기 위함
+   */
   useEffect(() => {
     if (projectId && slideId) {
       setLastSlideId(projectId, slideId);
     }
   }, [projectId, slideId]);
 
+  /**
+   * ScriptBox가 접혔는지 여부
+   * - ScriptBox 내부 상태를 부모(SlidePage)에서 받아서
+   * - 슬라이드 영역을 독립적으로 이동시키는 데 사용
+   */
+  const [isScriptCollapsed, setIsScriptCollapsed] = useState(false);
+
+  /**
+   * 임시 슬라이드 데이터
+   * - slideId 기준으로 현재 슬라이드 결정
+   * - 왼쪽 썸네일 리스트 및 중앙 슬라이드에 사용
+   * - 추후 서버에서 받아온 데이터로 대체
+   */
+  const slides = [
+    {
+      id: '1',
+      title: '도입',
+      thumb: 'https://via.placeholder.com/160x90?text=1',
+      content: '이번 프로젝트에서 다루고자 하는 주제와 전체 발표 흐름을 간단히 소개합니다.',
+    },
+    {
+      id: '2',
+      title: '문제 정의',
+      thumb: 'https://via.placeholder.com/160x90?text=2',
+      content: '현재 사용자가 겪고 있는 불편함과 기존 방식의 한계를 정리합니다.',
+    },
+    {
+      id: '3',
+      title: '문제 분석',
+      thumb: 'https://via.placeholder.com/160x90?text=3',
+      content: '문제가 발생하는 원인을 기능·구조·사용 흐름 관점에서 분석합니다.',
+    },
+    {
+      id: '4',
+      title: '해결 목표',
+      thumb: 'https://via.placeholder.com/160x90?text=4',
+      content: '이번 개선을 통해 달성하고자 하는 핵심 목표와 방향성을 정의합니다.',
+    },
+    {
+      id: '5',
+      title: '해결 방안',
+      thumb: 'https://via.placeholder.com/160x90?text=5',
+      content: '문제 해결을 위해 제안하는 주요 기능과 UI/UX 전략을 설명합니다.',
+    },
+    {
+      id: '6',
+      title: '기능 구성',
+      thumb: 'https://via.placeholder.com/160x90?text=6',
+      content: '슬라이드, 스크립트 박스 등 핵심 기능들의 구성과 역할을 소개합니다.',
+    },
+    {
+      id: '7',
+      title: '화면 흐름',
+      thumb: 'https://via.placeholder.com/160x90?text=7',
+      content: '사용자가 화면을 어떻게 탐색하고 상호작용하는지 흐름 중심으로 설명합니다.',
+    },
+    {
+      id: '8',
+      title: '기술적 구현',
+      thumb: 'https://via.placeholder.com/160x90?text=8',
+      content: '레이아웃 분리, 상태 관리 등 구현 과정에서의 핵심 기술적 포인트를 다룹니다.',
+    },
+    {
+      id: '9',
+      title: '기대 효과',
+      thumb: 'https://via.placeholder.com/160x90?text=9',
+      content: '이번 개선으로 사용자 경험과 개발 구조 측면에서 기대되는 효과를 정리합니다.',
+    },
+    {
+      id: '10',
+      title: '결론',
+      thumb: 'https://via.placeholder.com/160x90?text=10',
+      content: '전체 내용을 요약하고, 향후 확장 또는 개선 방향을 제안하며 마무리합니다.',
+    },
+  ];
+
+  // 현재 선택 중인 슬라이드 중앙 배치
+  const currentSlide = slides.find((s) => s.id === slideId) ?? slides[0];
+  const basePath = projectId ? `/${projectId}` : '';
+
   return (
-    <div role="tabpanel" id="tabpanel-slide" aria-labelledby="tab-slide" className="p-8">
-      <h1 className="text-body-m-bold">슬라이드 {slideId}</h1>
-      <ScriptBox />
+    <div className="h-full bg-gray-100">
+      {/*  양쪽 다 바닥까지 꽉: h-full */}
+      <div className="flex h-full gap-8 px-20 py-0">
+        {/* ================= LEFT ================= */}
+        {/* 슬라이드 썸네일 영역
+            - 여기만 스크롤 가능
+            - 슬라이드 이동은 URL 기반으로 처리 */}
+        <aside className="w-80 min-w-80 h-full overflow-y-auto">
+          <div className="flex flex-col gap-5 pr-10">
+            {slides.map((s, idx) => {
+              const isActive = s.id === currentSlide.id;
+
+              return (
+                <div
+                  key={s.id}
+                  className={clsx(
+                    'flex items-start gap-3 rounded-xl border p-2 bg-white',
+                    isActive ? 'border-main' : 'border-gray-200',
+                  )}
+                >
+                  <div className="w-6 pt-2 text-right text-sm font-semibold text-gray-700 select-none">
+                    {idx + 1}
+                  </div>
+                  {/* 슬라이드 이동 링크 */}
+                  <Link
+                    to={`${basePath}/slide/${s.id}`}
+                    aria-current={isActive ? 'true' : undefined}
+                    className={clsx(
+                      'block w-full h-40 rounded-lg overflow-hidden',
+                      'focus:outline-none focus:ring-2 focus:ring-main',
+                    )}
+                  >
+                    <div
+                      className={clsx(
+                        'h-full w-full rounded-lg transition',
+                        isActive ? 'bg-gray-200' : 'bg-gray-100 hover:bg-gray-200',
+                      )}
+                    />
+                  </Link>
+                </div>
+              );
+            })}
+          </div>
+        </aside>
+
+        {/* ================= RIGHT ================= */}
+        {/* 핵심 영역:
+            - 슬라이드와 ScriptBox를 완전히 분리된 레이어로 구성
+            - ScriptBox는 항상 하단 고정
+            - 슬라이드는 ScriptBox 상태에 따라 독립적으로 이동 */}
+        <main className="flex-1 h-full overflow-hidden">
+          <div className="relative h-full">
+            {/* 슬라이드 레이어
+                - absolute로 전체 영역을 덮음
+                - ScriptBox 높이만큼 paddingBottom으로 안전 영역 확보 */}
+            <div
+              className="absolute left-0 right-0 top-0 bottom-0 flex justify-center"
+              style={{
+                paddingBottom: isScriptCollapsed ? 40 : 100,
+
+                paddingTop: 50,
+              }}
+            >
+              {/* 슬라이드 컨테이너
+                  - ScriptBox 접힘 상태에 따라 translateY로 "조금만" 이동
+                  - 레이아웃 계산이 아닌 명시적 이동을 사용 */}
+              <div
+                className="w-[2200px] flex flex-col items-center"
+                style={{
+                  // ✅ 여기서 '독립적으로' 내려가게 만듦 (원하는 만큼만)
+                  transform: `translateY(${isScriptCollapsed ? 120 : 0}px)`,
+                  transition: 'transform 300ms ease-out',
+                }}
+              >
+                {/* 실제 슬라이드 */}
+                <div className="w-[2200px] h-[1238px] rounded-2xl bg-gray-200 shadow-sm relative">
+                  <span className="text-2xl font-bold text-gray-800 absolute top-10 left-8">
+                    {currentSlide.title}
+                  </span>
+                  <span className="text-base text-gray-600 absolute bottom-6 left-8">
+                    {currentSlide.content}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* ScriptBox 레이어
+                - 오른쪽 컬럼 기준 absolute bottom 고정
+                - 슬라이드와 동일한 폭을 사용 */}
+            <div className="absolute bottom-0 left-0 right-0 flex justify-center">
+              <div className="w-[2200px]">
+                <ScriptBox
+                  slideTitle={`슬라이드 ${slideId ?? currentSlide.id}`}
+                  onCollapsedChange={setIsScriptCollapsed}
+                />
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
     </div>
   );
 }

From a83cd0c43e5505282b7bb65f22c8fae6010ea2b7 Mon Sep 17 00:00:00 2001
From: wonellyho <navybsktb@gmail.com>
Date: Sat, 3 Jan 2026 01:44:22 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20ScriptBoxHeader=20=EB=8B=AB=ED=9E=98?=
 =?UTF-8?q?=20=ED=86=A0=EA=B8=80=20=EC=9D=B4=EB=AA=A8=EC=A7=80=20=EB=B0=98?=
 =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=EC=88=98=EC=A0=95(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/script-box/ScriptBoxHeader.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/script-box/ScriptBoxHeader.tsx b/src/components/script-box/ScriptBoxHeader.tsx
index 5cd3713d..bd46297d 100644
--- a/src/components/script-box/ScriptBoxHeader.tsx
+++ b/src/components/script-box/ScriptBoxHeader.tsx
@@ -24,6 +24,7 @@ export default function ScriptBoxHeader({
       <SlideTitle initialTitle={slideTitle} isCollapsed={isCollapsed} />
 
       {/* 우측: 이모지, 변경기록, 의견, 접기 버튼 */}
+      {/* onToggleCollapse: 접힘, 펼친 상태변경 */}
       <div className="flex items-center gap-3">
         <ScriptBoxEmoji />
         <ScriptHistory />
@@ -38,7 +39,7 @@ export default function ScriptBoxHeader({
           <ArrowDownIcon
             className={clsx(
               'h-4 w-4 transition-transform duration-300',
-              !isCollapsed && 'rotate-180',
+              isCollapsed && 'rotate-180',
             )}
             aria-hidden="true"
           />

From 24f8acb81f7810192222f9b6cd2871428042d56a Mon Sep 17 00:00:00 2001
From: wonellyho <navybsktb@gmail.com>
Date: Sat, 3 Jan 2026 22:20:42 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20SlidePage=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/script-box/ScriptBox.tsx       |  38 +++---
 .../script-box/ScriptBoxContent.tsx           |   4 +-
 src/pages/SlidePage.tsx                       | 112 ++++++++++--------
 3 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index 079192a0..8e00e4c6 100644
--- a/src/components/script-box/ScriptBox.tsx
+++ b/src/components/script-box/ScriptBox.tsx
@@ -5,13 +5,13 @@ import clsx from 'clsx';
 import ScriptBoxContent from './ScriptBoxContent';
 import ScriptBoxHeader from './ScriptBoxHeader';
 
+/**
+ * 목적:
+ * - ScriptBox 접힘/펼침 상태를 부모에게 전달
+ * - 부모는 이 상태를 받아 슬라이드를 "살짝 내려오는" UI로 동기화
+ */
 interface ScriptBoxProps {
   slideTitle?: string;
-  /**
-   * [기존] ScriptBox는 내부에서만 접힘 상태를 알고 있었고,
-   *       슬라이드(상단 콘텐츠)는 ScriptBox 상태에 맞춰 움직일 수 없었음.
-   * [현재] 부모가 접힘 상태를 알 수 있어야 "슬라이드를 살짝 내려오는" UI 연동이 가능함.
-   */
   onCollapsedChange?: (collapsed: boolean) => void;
 }
 
@@ -19,24 +19,26 @@ export default function ScriptBox({
   slideTitle = '슬라이드 1',
   onCollapsedChange,
 }: ScriptBoxProps) {
-  // ScriptBox 접힌 상태인지 체크
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const handleToggleCollapse = () => {
     setIsCollapsed((prev) => !prev);
   };
 
-  /**
-   *  접힘 상태가 바뀔 때마다 부모에게 알려줌
-   * - 부모는 이 상태를 받아 슬라이드 영역에 transform/padding 등으로 반응하게 됨
-   */
   useEffect(() => {
     onCollapsedChange?.(isCollapsed);
   }, [isCollapsed, onCollapsedChange]);
 
   return (
-    <div className={clsx('w-full rounded-t-lg bg-white shadow-sm', isCollapsed ? 'h-10' : 'h-80')}>
-      {/* 헤더는 그대로 */}
+    <div
+      className={clsx(
+        'w-full rounded-t-lg bg-white shadow-sm',
+        // 변경: 펼친 높이를 화면에 비례하도록 (작은 화면에서 과도하게 커지지 않게)
+        // 큰 모니터에서 슬라이드와 대본박스 여백 조절할 때 20rem 조절
+
+        isCollapsed ? 'h-10' : 'h-[clamp(12rem,30vh,20rem)]', // 192px ~ 320px
+      )}
+    >
       <div className="h-12 relative">
         <ScriptBoxHeader
           slideTitle={slideTitle}
@@ -45,20 +47,10 @@ export default function ScriptBox({
         />
       </div>
 
-      {/**
-       * 본문 영역만 따로 감싸서 접힘 애니메이션 처리
-       *
-       * 왜 wrapper를 하나 더 뒀나?
-       * - 헤더는 popover 때문에 잘리면 안 됨 → overflow-hidden을 헤더가 아닌 "본문 wrapper"에만 적용
-       * - 접힘 애니메이션은 "height 변화"로 처리하는 게 가장 예측 가능함
-       *
-       * [기존] translate로 박스를 숨김 → 공간 계산, popover, 클릭 영역이 꼬일 수 있음
-       * [현재] content wrapper의 높이를 h-0으로 만들어 진짜로 본문이 없어지게 함(접힌 상태라면 아예 랜더 자체 하지 않음)
-       */}
       <div
         className={clsx(
           'overflow-hidden transition-[height] duration-300 ease-out',
-          isCollapsed ? 'h-0' : 'h-[280px]',
+          isCollapsed ? 'h-10' : 'h-[clamp(12rem,30vh,20rem)]',
         )}
       >
         {!isCollapsed && <ScriptBoxContent />}
diff --git a/src/components/script-box/ScriptBoxContent.tsx b/src/components/script-box/ScriptBoxContent.tsx
index 39029eb4..0337c589 100644
--- a/src/components/script-box/ScriptBoxContent.tsx
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -5,13 +5,13 @@ export default function ScriptBoxContent() {
 
   return (
     // ScriptBox 전체 높이에서 헤더만큼 뺀 영역을 그대로 사용
-    <div className="h-full overflow-y-auto bg-white px-4 py-3">
+    <div className="h-full bg-white px-4 py-3">
       <textarea
         value={script}
         onChange={(e) => setScript(e.target.value)}
         placeholder="슬라이드 대본을 입력하세요..."
         aria-label="슬라이드 대본"
-        className="h-full w-full resize-none border-none bg-transparent text-base leading-relaxed text-gray-800 outline-none placeholder:text-gray-600"
+        className="h-full w-full resize-none border-none bg-transparent text-base leading-relaxed text-gray-800 outline-none placeholder:text-gray-600  overflow-y-auto"
       />
     </div>
   );
diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx
index 4c65eda9..28b857d5 100644
--- a/src/pages/SlidePage.tsx
+++ b/src/pages/SlidePage.tsx
@@ -14,7 +14,6 @@ export default function SlidePage() {
   }>();
 
   /**
-   *
    * 목적:
    * - 탭 이동(영상/인사이트 → 슬라이드) 후 다시 돌아왔을 때
    *   → 마지막으로 보던 슬라이드로 복원하기 위함
@@ -105,14 +104,24 @@ export default function SlidePage() {
   const currentSlide = slides.find((s) => s.id === slideId) ?? slides[0];
   const basePath = projectId ? `/${projectId}` : '';
 
+  /**
+   *  핵심 레이아웃 목표
+   * 1) 어떤 화면에서도 16:9 슬라이드가 "잘리지 않게" 전체 노출
+   * 2) 슬라이드와 ScriptBox의 폭을 항상 동일하게 유지
+   * 3) ScriptBox 토글 애니메이션 시, 슬라이드는 살짝만 내려오되(독립 이동)
+   *    ScriptBox와 겹치지 않도록 여백을 유지
+   *
+   * 접근:
+   * - 오른쪽 영역을 "세로 기준"으로 최대 폭을 계산해서(= max-width)
+   *   작은 화면에서도 슬라이드가 박스에 의해 잘리지 않도록 방어
+   * - 슬라이드/ScriptBox를 동일한 max-width 컨테이너로 감싸 폭을 강제 통일
+   */
   return (
     <div className="h-full bg-gray-100">
-      {/*  양쪽 다 바닥까지 꽉: h-full */}
-      <div className="flex h-full gap-8 px-20 py-0">
+      {/* 변경: 전체 컨텐츠에 위 여백 주기 */}
+      <div className="flex h-full gap-8 px-20 py-12 pb-0">
         {/* ================= LEFT ================= */}
-        {/* 슬라이드 썸네일 영역
-            - 여기만 스크롤 가능
-            - 슬라이드 이동은 URL 기반으로 처리 */}
+        {/*  슬라이드 리스트 영역 */}
         <aside className="w-80 min-w-80 h-full overflow-y-auto">
           <div className="flex flex-col gap-5 pr-10">
             {slides.map((s, idx) => {
@@ -122,26 +131,25 @@ export default function SlidePage() {
                 <div
                   key={s.id}
                   className={clsx(
-                    'flex items-start gap-3 rounded-xl border p-2 bg-white',
+                    'flex items-start gap-3 p-2 bg-gray-100',
                     isActive ? 'border-main' : 'border-gray-200',
                   )}
                 >
                   <div className="w-6 pt-2 text-right text-sm font-semibold text-gray-700 select-none">
                     {idx + 1}
                   </div>
-                  {/* 슬라이드 이동 링크 */}
                   <Link
                     to={`${basePath}/slide/${s.id}`}
                     aria-current={isActive ? 'true' : undefined}
                     className={clsx(
-                      'block w-full h-40 rounded-lg overflow-hidden',
+                      'block w-full h-40  overflow-hidden',
                       'focus:outline-none focus:ring-2 focus:ring-main',
                     )}
                   >
                     <div
                       className={clsx(
-                        'h-full w-full rounded-lg transition',
-                        isActive ? 'bg-gray-200' : 'bg-gray-100 hover:bg-gray-200',
+                        'h-full w-full transition',
+                        isActive ? 'bg-gray-200' : 'bg-gray-200 hover:bg-gray-200',
                       )}
                     />
                   </Link>
@@ -152,51 +160,53 @@ export default function SlidePage() {
         </aside>
 
         {/* ================= RIGHT ================= */}
-        {/* 핵심 영역:
-            - 슬라이드와 ScriptBox를 완전히 분리된 레이어로 구성
-            - ScriptBox는 항상 하단 고정
-            - 슬라이드는 ScriptBox 상태에 따라 독립적으로 이동 */}
-        <main className="flex-1 h-full overflow-hidden">
-          <div className="relative h-full">
-            {/* 슬라이드 레이어
-                - absolute로 전체 영역을 덮음
-                - ScriptBox 높이만큼 paddingBottom으로 안전 영역 확보 */}
-            <div
-              className="absolute left-0 right-0 top-0 bottom-0 flex justify-center"
-              style={{
-                paddingBottom: isScriptCollapsed ? 40 : 100,
-
-                paddingTop: 50,
-              }}
-            >
-              {/* 슬라이드 컨테이너
-                  - ScriptBox 접힘 상태에 따라 translateY로 "조금만" 이동
-                  - 레이아웃 계산이 아닌 명시적 이동을 사용 */}
+        {/* 오른쪽 영역은 슬라이드(16:9) + ScriptBox(동일폭)로 구성 */}
+        <main className="flex-1 h-full min-w-0 overflow-hidden">
+          <div className="h-full min-h-0 flex flex-col gap-6">
+            {/* ================= SLIDE ================= */}
+            <section className="flex-1 min-h-0 overflow-hidden pt-2">
+              {/* 핵심: 세로 기준으로 max-width 계산
+                 - 화면이 작으면(높이가 부족하면) 가로폭을 자동으로 줄여서
+                 - 16:9 슬라이드가 항상 "한 장"으로 온전히 노출되게 함 */}
               <div
-                className="w-[2200px] flex flex-col items-center"
-                style={{
-                  // ✅ 여기서 '독립적으로' 내려가게 만듦 (원하는 만큼만)
-                  transform: `translateY(${isScriptCollapsed ? 120 : 0}px)`,
-                  transition: 'transform 300ms ease-out',
-                }}
+                className="
+          mx-auto w-full px-2
+          max-w-[min(2200px,calc((100dvh-3.75rem-20rem-3rem)*16/9))]
+        "
               >
-                {/* 실제 슬라이드 */}
-                <div className="w-[2200px] h-[1238px] rounded-2xl bg-gray-200 shadow-sm relative">
-                  <span className="text-2xl font-bold text-gray-800 absolute top-10 left-8">
-                    {currentSlide.title}
-                  </span>
-                  <span className="text-base text-gray-600 absolute bottom-6 left-8">
-                    {currentSlide.content}
-                  </span>
+                {/* ScriptBox 토글에 반응하는 슬라이드 이동 (독립적으로 '살짝' 내려옴) */}
+
+                <div
+                  className="transition-transform duration-300 ease-out"
+                  style={{
+                    transform: `translateY(${isScriptCollapsed ? 120 : 0}px)`,
+                  }}
+                >
+                  {/* 슬라이드는 컨테이너 폭을 그대로 쓰고 16:9 유지 */}
+                  <div className="w-full aspect-video  bg-gray-200 shadow-sm relative">
+                    <span className="text-2xl font-bold text-gray-800 absolute top-10 left-8">
+                      {currentSlide.title}
+                    </span>
+                    <span className="text-base text-gray-600 absolute bottom-6 left-8">
+                      {currentSlide.content}
+                    </span>
+                  </div>
+
+                  {/* 슬라이드와 ScriptBox 사이 공백 유지 */}
+                  <div className="h-6" />
                 </div>
               </div>
-            </div>
+            </section>
 
-            {/* ScriptBox 레이어
-                - 오른쪽 컬럼 기준 absolute bottom 고정
-                - 슬라이드와 동일한 폭을 사용 */}
-            <div className="absolute bottom-0 left-0 right-0 flex justify-center">
-              <div className="w-[2200px]">
+            {/* ================= SCRIPT BOX ================= */}
+            {/* ScriptBox는 슬라이드와 "완전히 동일한 컨테이너 폭"을 사용 */}
+            <div className="shrink-0">
+              <div
+                className="
+          mx-auto w-full px-2
+          max-w-[min(2200px,calc((100dvh-3.75rem-20rem-3rem)*16/9))]
+        "
+              >
                 <ScriptBox
                   slideTitle={`슬라이드 ${slideId ?? currentSlide.id}`}
                   onCollapsedChange={setIsScriptCollapsed}