From 3246bb0aca438c5e9602412f0832ce3d6ceba8be Mon Sep 17 00:00:00 2001
From: sandy <a26948077@gmail.com>
Date: Fri, 16 Jan 2026 18:31:29 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=A1=9C=EC=A7=81?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20(#49)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comment/CommentList.tsx    |   2 +-
 src/components/common/DarkHeader.tsx      |  66 ++++++---
 src/components/feedback/FeedbackInput.tsx | 156 +++++++++++++---------
 src/components/feedback/SlideViewer.tsx   | 149 ++++++++++++---------
 src/pages/FeedbackSlidePage.tsx           | 140 +++++++++++++++++--
 src/stores/slideStore.ts                  | 114 ++++++++++------
 6 files changed, 434 insertions(+), 193 deletions(-)

diff --git a/src/components/comment/CommentList.tsx b/src/components/comment/CommentList.tsx
index 5e6005b8..663668d6 100644
--- a/src/components/comment/CommentList.tsx
+++ b/src/components/comment/CommentList.tsx
@@ -46,7 +46,7 @@ export default function CommentList({
   };
 
   return (
-    <div className="mr-35 mt-2 flex-1 space-y-2 overflow-y-auto">
+    <div className="mr-10 md:mr-35 mt-2 flex-1 space-y-2 overflow-y-auto">
       {comments.map((comment) => (
         <CommentItem
           key={comment.id}
diff --git a/src/components/common/DarkHeader.tsx b/src/components/common/DarkHeader.tsx
index 752ccb0c..903ea0c5 100644
--- a/src/components/common/DarkHeader.tsx
+++ b/src/components/common/DarkHeader.tsx
@@ -1,38 +1,66 @@
 import type { ReactNode } from 'react';
 
-import { Logo } from '@/components/common';
+import clsx from 'clsx';
+
+import Informaion from '@/assets/icons/icon-info.svg?react';
+import { Logo, Popover } from '@/components/common';
 
 interface DarkHeaderProps {
   title: string;
   renderRight?: ReactNode;
+  publisher?: string;
+  publishedAt?: string;
 }
 
-export const DarkHeader = ({ title, renderRight }: DarkHeaderProps) => {
+export const DarkHeader = ({
+  title,
+  renderRight,
+  publisher = '익명의 바다거북이',
+  publishedAt = '2025.11.25 21:10:34',
+}: DarkHeaderProps) => {
   return (
-    <header className="flex h-15 w-full shrink-0 items-center justify-between border-b border-white/10 bg-[#2a2d34] px-6 md:px-18">
+    <header className="flex h-15 w-full shrink-0 items-center justify-between border-b border-gray-600 bg-gray-800 px-6 md:px-18">
       <div className="flex items-center gap-4">
         <Logo />
-        <div className="hidden h-4 w-[1px] bg-white/20 sm:block" />
+
         <div className="flex items-center gap-1.5">
           <span className="text-sm font-bold text-white">{title}</span>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="text-white/40 cursor-help"
+
+          <Popover
+            trigger={({ isOpen }) => (
+              <button
+                type="button"
+                className={clsx(
+                  'flex items-center justify-center transition-colors',
+                  // 열려있거나 호버시 흰색, 평소엔 회색
+                  isOpen ? 'text-white' : 'text-gray-200 hover:text-white',
+                )}
+              >
+                <Informaion />
+              </button>
+            )}
+            align="end" // 팝오버 왼쪽 정렬 (취향에 따라 center로 변경 가능)
+            position="bottom"
+            className="w-[250px] rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5 translate-x-20"
           >
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 16v-4" />
-            <path d="M12 8h.01" />
-          </svg>
+            {/* 팝오버 내부 콘텐츠 (사진 디자인 반영) */}
+            <div className="flex flex-col gap-2">
+              {/* 행 1: 게시자 */}
+              <div className="flex items-center gap-4">
+                <span className="w-14 text-body-s-bold text-gray-600">게시자</span>
+                <span className="text-body-s text-gray-800">{publisher}</span>
+              </div>
+
+              {/* 행 2: 게시 날짜 */}
+              <div className="flex items-center gap-4">
+                <span className="w-14 text-body-s-bold text-gray-600">게시 날짜</span>
+                <span className="text-body-s text-gray-800">{publishedAt}</span>
+              </div>
+            </div>
+          </Popover>
         </div>
       </div>
-      = <div className="flex items-center">{renderRight}</div>
+      <div className="flex items-center">{renderRight}</div>
     </header>
   );
 };
diff --git a/src/components/feedback/FeedbackInput.tsx b/src/components/feedback/FeedbackInput.tsx
index 78e4bb07..f0f1cd2b 100644
--- a/src/components/feedback/FeedbackInput.tsx
+++ b/src/components/feedback/FeedbackInput.tsx
@@ -8,12 +8,22 @@ interface Props {
   reactions: EmojiReaction[];
   onToggleReaction: (emoji: string) => void;
   onAddComment: (content: string) => void;
+  // 'all'(기존), 'reactions-only'(중간바), 'input-only'(댓글탭하단)
+  viewType?: 'all' | 'reactions-only' | 'input-only';
 }
 
-export default function FeedbackInput({ reactions, onToggleReaction, onAddComment }: Props) {
+export default function FeedbackInput({
+  reactions,
+  onToggleReaction,
+  onAddComment,
+  viewType = 'all',
+}: Props) {
   const [commentDraft, setCommentDraft] = useState('');
   const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
 
+  const showInput = viewType === 'all' || viewType === 'input-only';
+  const showReactions = viewType === 'all' || viewType === 'reactions-only';
+
   const handleAddComment = () => {
     onAddComment(commentDraft);
     setCommentDraft('');
@@ -31,73 +41,97 @@ export default function FeedbackInput({ reactions, onToggleReaction, onAddCommen
 
   const formatReactionCount = (count: number) => (count > 99 ? '99+' : count);
 
-  return (
-    <div className="mr-35 p-4 bg-gray-900">
-      <div className="mb-1">
-        <textarea
-          ref={commentTextareaRef}
-          placeholder="댓글을 입력하세요..."
-          value={commentDraft}
-          rows={1}
-          onChange={(e) => {
-            setCommentDraft(e.target.value);
-            e.currentTarget.style.height = 'auto';
-            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              handleAddComment();
-            }
-          }}
-          className="w-full overflow-hidden resize-none bg-transparent border-b border-gray-400 focus:border-white outline-none py-2 text-body-m-bold text-white placeholder-gray-400 transition-colors"
-        />
-      </div>
-
-      <div className="flex justify-end gap-2 mt-1">
-        <button
-          type="button"
-          onClick={handleCancel}
-          className="px-3 py-1.5 rounded-full text-caption-bold text-gray-200 bg-gray-900 hover:bg-gray-800 transition"
-        >
-          취소
-        </button>
+  const isMobileReactionsOnly = viewType === 'reactions-only';
 
-        <button
-          type="button"
-          onClick={handleAddComment}
-          className="px-3 py-1.5 rounded-full text-caption-bold text-gray-400 bg-white hover:bg-white/20 transition"
-        >
-          답글
-        </button>
-      </div>
+  return (
+    <div className={`${viewType === 'all' ? 'mr-35 p-4' : 'p-1'} bg-gray-900`}>
+      {/* 댓글 입력 영역 */}
+      {showInput && (
+        <div className="mb-1 mx-2">
+          <textarea
+            ref={commentTextareaRef}
+            placeholder="댓글을 입력하세요..."
+            value={commentDraft}
+            rows={1}
+            onChange={(e) => {
+              setCommentDraft(e.target.value);
+              e.currentTarget.style.height = 'auto';
+              e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleAddComment();
+              }
+            }}
+            className="w-full overflow-hidden resize-none bg-transparent border-b border-gray-400 focus:border-white outline-none py-2 text-body-m-bold text-white placeholder-gray-400 transition-colors"
+          />
 
-      <div className="items-center mt-3">
-        <div className="grid grid-cols-2 gap-2">
-          {reactions.map((reaction) => (
+          <div className="flex justify-end gap-2 mt-1">
             <button
-              key={reaction.emoji}
-              onClick={() => onToggleReaction(reaction.emoji)}
-              className={`flex items-center justify-between px-2 py-1.5 rounded-full transition ${
-                reaction.active
-                  ? 'bg-gray-100 text-main-variant2 text-body-m-bold ring-1 ring-main-variant1'
-                  : 'bg-gray-800 ring-1 text-body-m ring-gray-600 text-white hover:bg-gray-800'
-              }`}
+              type="button"
+              onClick={handleCancel}
+              className="px-3 py-1.5 rounded-full text-caption-bold text-gray-200 bg-gray-900 hover:bg-gray-800 transition"
             >
-              <div className="flex items-center gap-2 min-w-0">
-                <span className="flex-shrink-0">{reaction.emoji}</span>
-                <span className="whitespace-nowrap overflow-hidden">{reaction.label}</span>
-              </div>
+              취소
+            </button>
 
-              {reaction.count > 0 && (
-                <span className={`flex-shrink-0 ml-2 ${reaction.active ? 'font-bold' : ''}`}>
-                  {formatReactionCount(reaction.count)}
-                </span>
-              )}
+            <button
+              type="button"
+              onClick={handleAddComment}
+              className="px-3 py-1.5 rounded-full text-caption-bold text-gray-400 bg-white hover:bg-white/20 transition"
+            >
+              답글
             </button>
-          ))}
+          </div>
+        </div>
+      )}
+
+      {/* 이모지 리액션 영역 */}
+      {showReactions && (
+        <div className={`items-center ${viewType === 'all' ? 'mt-3' : ''}`}>
+          {/* viewType이 reactions-only(모바일)일 때는 가로 스크롤(flex), 데스크탑은 그리드 */}
+          <div
+            className={`${
+              viewType === 'reactions-only'
+                ? // 모바일
+                  'flex flex-wrap w-full justify-between gap-x-2 gap-y-2'
+                : // 데스크탑
+                  'grid grid-cols-2 gap-2'
+            }`}
+          >
+            {reactions.map((reaction) => (
+              <button
+                key={reaction.emoji}
+                onClick={() => onToggleReaction(reaction.emoji)}
+                className={[
+                  'flex items-center justify-between px-2 py-1.5 rounded-full transition',
+                  reaction.active
+                    ? 'bg-gray-100 text-main-variant2 text-body-m-bold ring-1 ring-main-variant1'
+                    : 'bg-gray-800 ring-1 text-body-m ring-gray-600 text-white hover:bg-gray-800',
+
+                  isMobileReactionsOnly ? 'flex-1 basis-[35px] max-w-[120px]' : '',
+                ].join(' ')}
+              >
+                <div className="flex items-center min-w-0">
+                  <span className="flex-shrink-0">{reaction.emoji}</span>
+                  <span
+                    className={`whitespace-nowrap overflow-hidden ${viewType === 'reactions-only' ? 'hidden' : ''}`}
+                  >
+                    {reaction.label}
+                  </span>
+                </div>
+
+                {reaction.count > 0 && (
+                  <span className={`flex-shrink-0 ml-1 ${reaction.active ? 'font-bold' : ''}`}>
+                    {formatReactionCount(reaction.count)}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/feedback/SlideViewer.tsx b/src/components/feedback/SlideViewer.tsx
index 823c900a..3fa79160 100644
--- a/src/components/feedback/SlideViewer.tsx
+++ b/src/components/feedback/SlideViewer.tsx
@@ -5,7 +5,10 @@ import RightArrow from '@/assets/icons/icon-arrow-right.svg?react';
 
 import { useSlides } from '../../hooks/useSlides';
 
-type Props = ReturnType<typeof useSlides>;
+// viewMode 추가: 'desktop'(기존), 'mobile-screen'(화면만), 'mobile-script'(대본만)
+interface Props extends ReturnType<typeof useSlides> {
+  viewMode?: 'desktop' | 'mobile-screen' | 'mobile-script';
+}
 
 export default function SlideViewer({
   currentSlide,
@@ -21,80 +24,102 @@ export default function SlideViewer({
   startTitleEdit,
   commitTitle,
   cancelTitleEdit,
+  viewMode = 'desktop', // 기본값
 }: Props) {
+  const showScreen = viewMode === 'desktop' || viewMode === 'mobile-screen';
+  const showScript = viewMode === 'desktop' || viewMode === 'mobile-script';
+
+  // 모바일 스크립트 뷰에서는 버튼을 숨긴다
+  const showButtons = viewMode === 'desktop';
   return (
-    <div className="ml-35 flex-1 flex flex-col min-w-0 bg-gray-900">
+    <div
+      className={`${viewMode === 'desktop' ? 'ml-35' : ''} flex-1 flex flex-col min-w-0 bg-gray-900`}
+    >
       {/* 1. 좌측 상단: 슬라이드 뷰어 */}
       {/* 1. 상단 영역 (슬라이드가 들어갈 공간 확보) */}
       {/* 이 div는 남는 공간을 꽉 채우고, 내용물을 정중앙에 배치합니다. */}
-      <div className="flex-1 flex items-center justify-center overflow-hidden relative">
-        {/* 2. 슬라이드 본체 (회색 박스) */}
-        {/* w-full max-h-full: 가로를 꽉 채우되, 세로 공간이 모자라면 높이에 맞춤 (반응형) */}
-        <div className="aspect-[16/9] w-full max-h-full bg-gray-600 relative flex items-center justify-center shadow-lg">
-          <p className="text-gray-300 text-lg font-medium">{currentSlide.viewerText}</p>
+      {showScreen && (
+        <div className="flex-1 flex items-center justify-center overflow-hidden relative">
+          {/* 2. 슬라이드 본체 (회색 박스) */}
+          {/* w-full max-h-full: 가로를 꽉 채우되, 세로 공간이 모자라면 높이에 맞춤 (반응형) */}
+          <div className="aspect-[16/9] w-full max-h-full bg-gray-600 relative flex items-center justify-center shadow-lg">
+            <p className="text-gray-300 text-lg font-medium">{currentSlide.viewerText}</p>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* 2. 좌측 하단: 설명 텍스트 */}
-      <div className="h-[250px] bg-gray-900 px-5 mt-2 overflow-y-auto border-r border-gray-800">
-        <div className="flex justify-between items-baseline mb-3">
-          {isEditingTitle ? (
-            <input
-              value={draftTitle}
-              autoFocus
-              onChange={(e) => setDraftTitle(e.target.value)}
-              onBlur={commitTitle}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitTitle();
-                if (e.key === 'Escape') cancelTitleEdit();
-              }}
-              className="text-body-m-bold text-white bg-gray-800 border-white rounded px-1"
-            />
-          ) : (
-            <h2
-              className="text-body-m-bold text-white"
-              onDoubleClick={startTitleEdit}
-              title="더블클릭해서 제목 수정"
-            >
-              {currentSlide.title}
-            </h2>
-          )}
+      {showScript && (
+        <div
+          className={`${viewMode === 'desktop' ? 'h-[250px] mt-2' : 'flex-1'} bg-gray-900 px-5 overflow-y-auto`}
+        >
+          <div
+            className={`${viewMode === 'desktop' ? 'flex justify-between items-baseline mb-3' : 'mt-2'}`}
+          >
+            {isEditingTitle ? (
+              <input
+                value={draftTitle}
+                autoFocus
+                onChange={(e) => setDraftTitle(e.target.value)}
+                onBlur={commitTitle}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') commitTitle();
+                  if (e.key === 'Escape') cancelTitleEdit();
+                }}
+                className="text-body-m-bold text-white bg-gray-800 border-white rounded px-1"
+              />
+            ) : (
+              <h2
+                className="text-body-m-bold text-white"
+                onDoubleClick={startTitleEdit}
+                title="더블클릭해서 제목 수정"
+              >
+                {currentSlide.title}
+              </h2>
+            )}
+            {/* 데스크탑 모드에서만 내부 버튼 표시 */}
+            {showButtons && (
+              <div className="bottom-6 inline-flex items-center gap-1 rounded-full py-2 backdrop-blur">
+                <button
+                  onClick={goPrev}
+                  disabled={isFirst}
+                  className={[
+                    'grid h-6 w-6 place-items-center rounded-full ',
+                    isFirst
+                      ? 'bg-gray-800 opacity-30 cursor-not-allowed'
+                      : 'bg-gray-800 hover:bg-gray-700 active:scale-95 transition',
+                  ].join(' ')}
+                >
+                  <LeftArrow className="text-white" />
+                </button>
 
-          <div className="bottom-6 inline-flex items-center gap-1 rounded-full py-2 backdrop-blur">
-            <button
-              onClick={goPrev}
-              disabled={isFirst}
-              className={[
-                'grid h-6 w-6 place-items-center rounded-full ',
-                isFirst ? 'bg-black' : 'bg-gray-800 hover:bg-white/15 transition',
-              ].join(' ')}
-            >
-              <LeftArrow className="text-white" />
-            </button>
+                <div className="min-w-[56px] text-center text-body-m-bold text-gray-200">
+                  {slideIndex + 1} / {totalSlides}
+                </div>
 
-            <div className="min-w-[56px] text-center text-body-m-bold text-gray-200">
-              {slideIndex + 1} / {totalSlides}
-            </div>
-
-            <button
-              onClick={goNext}
-              disabled={isLast}
-              className={[
-                'grid h-6 w-6 place-items-center rounded-full',
-                isLast ? 'bg-black' : 'bg-gray-800 hover:bg-white/15 transition',
-              ].join(' ')}
-            >
-              <RightArrow className="text-white" />
-            </button>
+                <button
+                  onClick={goNext}
+                  disabled={isLast}
+                  className={[
+                    'grid h-6 w-6 place-items-center rounded-full',
+                    isLast
+                      ? 'bg-gray-800 opacity-30 cursor-not-allowed'
+                      : 'bg-gray-800 hover:bg-gray-700 active:scale-95 transition',
+                  ].join(' ')}
+                >
+                  <RightArrow className="text-white" />
+                </button>
+              </div>
+            )}
           </div>
-        </div>
 
-        <div className="bg-gray-800 rounded-xl p-3 my-2 ">
-          <p className="text-body-s text-white" style={{ whiteSpace: 'pre-line' }}>
-            {currentSlide.body}
-          </p>
+          <div className="bg-gray-800 rounded-xl p-3 my-2 ">
+            <p className="text-body-s text-white" style={{ whiteSpace: 'pre-line' }}>
+              {currentSlide.body}
+            </p>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/pages/FeedbackSlidePage.tsx b/src/pages/FeedbackSlidePage.tsx
index bea200f0..879c2e78 100644
--- a/src/pages/FeedbackSlidePage.tsx
+++ b/src/pages/FeedbackSlidePage.tsx
@@ -1,5 +1,7 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
+import LeftArrow from '@/assets/icons/icon-arrow-left.svg?react';
+import RightArrow from '@/assets/icons/icon-arrow-right.svg?react';
 import DarkHeader from '@/components/common/DarkHeader';
 import { MOCK_SLIDES, MOCK_UI_SLIDES } from '@/mocks/slides';
 import { useSlideStore } from '@/stores/slideStore';
@@ -13,12 +15,15 @@ import { useSlides } from '../hooks/useSlides';
 
 export default function FeedbackSlidePage() {
   const slideLogic = useSlides();
-  const { slideIndex } = slideLogic;
+  const { slideIndex, totalSlides, isFirst, isLast, goPrev, goNext } = slideLogic;
 
   const { comments, addComment, addReply, deleteComment } = useComments();
   const { reactions, toggleReaction } = useReactions();
   const initSlide = useSlideStore((state) => state.initSlide);
 
+  // 모바일 전용 탭 상태 ('script' | 'comment')
+  const [mobileTab, setMobileTab] = useState<'script' | 'comment'>('script');
+
   const allFlatOpinions = useMemo(() => {
     return MOCK_SLIDES.flatMap((slide, index) => {
       const slideLabel = `슬라이드 ${index + 1}`;
@@ -36,11 +41,15 @@ export default function FeedbackSlidePage() {
     const uiData = MOCK_UI_SLIDES[slideIndex];
 
     if (rawData && uiData) {
-      initSlide({
-        ...rawData,
-        opinions: allFlatOpinions,
-        emojiReactions: uiData.emojiReactions,
-      });
+      // initSlide 호출 시 두 번째 인자로 slideIndex를 넘겨줍니다.
+      initSlide(
+        {
+          ...rawData,
+          opinions: allFlatOpinions,
+          emojiReactions: uiData.emojiReactions,
+        },
+        slideIndex,
+      ); // <--- 여기 slideIndex 추가!
     }
   }, [slideIndex, initSlide, allFlatOpinions]);
 
@@ -48,10 +57,11 @@ export default function FeedbackSlidePage() {
     <div className="fixed inset-0 z-[60] flex h-screen w-screen flex-col overflow-hidden bg-gray-900">
       <DarkHeader title="Q4 마케팅 전략 발표" />
 
-      <div className="flex flex-1 w-full min-h-0">
-        <SlideViewer {...slideLogic} />
+      {/** [Desktop Layout] md 이상일 때만 표시 */}
+      <div className="hidden md:flex flex-1 w-full min-h-0">
+        <SlideViewer {...slideLogic} viewMode="desktop" />
 
-        <aside className="w-[520px] bg-gray-900 flex flex-col border-l border-white/5">
+        <aside className="w-[520px] bg-gray-900 flex flex-col border-l border-gray-800">
           <div className="flex-1 min-h-0 overflow-y-auto">
             <CommentList
               comments={comments}
@@ -61,15 +71,123 @@ export default function FeedbackSlidePage() {
             />
           </div>
 
-          <div className="shrink-0 border-t border-white/5">
+          <div className="shrink-0">
             <FeedbackInput
               reactions={reactions}
               onToggleReaction={toggleReaction}
               onAddComment={(content) => addComment(content, slideLogic.slideIndex)}
+              viewType="all"
             />
           </div>
         </aside>
       </div>
+
+      {/** [Mobile Layout] md 미만일 때만 표시 */}
+      <div className="flex md:hidden flex-col flex-1 w-full overflow-hidden">
+        {/* 1. 슬라이드 뷰어 (화면만) */}
+        <div className="w-full shrink-0">
+          <SlideViewer {...slideLogic} viewMode="mobile-screen" />
+        </div>
+
+        {/* 2. 컨트롤 바 (2단 구조로 변경) */}
+        <div className="flex flex-col gap-3 p-3 bg-gray-900 shrink-0">
+          {/* 윗줄: < 1/5 > 네비게이션 */}
+          <div className="flex items-center justify-between">
+            <button
+              onClick={goPrev}
+              disabled={isFirst}
+              className={`grid h-8 w-8 place-items-center rounded-full ${
+                isFirst
+                  ? 'bg-gray-800 opacity-30 cursor-not-allowed'
+                  : 'bg-gray-800 hover:bg-gray-700 active:scale-95 transition'
+              }`}
+            >
+              <LeftArrow className="text-white h-5 w-5" />
+            </button>
+
+            {/* 페이지 번호 텍스트 */}
+            <span className="text-body-m-bold text-gray-200 text-center">
+              {slideIndex + 1} / {totalSlides}
+            </span>
+
+            <button
+              onClick={goNext}
+              disabled={isLast}
+              className={`grid h-8 w-8 place-items-center rounded-full ${
+                isLast
+                  ? 'bg-gray-800 opacity-30 cursor-not-allowed'
+                  : 'bg-gray-800 hover:bg-gray-700 active:scale-95 transition'
+              }`}
+            >
+              <RightArrow className="text-white h-5 w-5" />
+            </button>
+          </div>
+
+          {/* 아랫줄: 이모지 리스트 */}
+          <div className="w-full overflow-hidden">
+            <FeedbackInput
+              reactions={reactions}
+              onToggleReaction={toggleReaction}
+              onAddComment={() => {}}
+              viewType="reactions-only"
+            />
+          </div>
+        </div>
+
+        {/* 3. 탭 버튼 */}
+        <div className="flex border-b border-gray-800 shrink-0 bg-gray-900">
+          <button
+            onClick={() => setMobileTab('script')}
+            className={`flex-1 py-3 text-body-m-bold transition-colors relative ${
+              mobileTab === 'script' ? 'text-main-variant1' : 'text-gray-400'
+            }`}
+          >
+            대본
+            {mobileTab === 'script' && (
+              <div className="absolute bottom-0 left-0 w-full h-0.5 bg-main-variant1" />
+            )}
+          </button>
+          <button
+            onClick={() => setMobileTab('comment')}
+            className={`flex-1 py-3 text-body-m-bold transition-colors relative ${
+              mobileTab === 'comment' ? 'text-main-variant1' : 'text-gray-400'
+            }`}
+          >
+            댓글 {comments.length > 0 && `${comments.length}`}
+            {mobileTab === 'comment' && (
+              <div className="absolute bottom-0 left-0 w-full h-0.5 bg-main-variant1" />
+            )}
+          </button>
+        </div>
+
+        {/* 4. 탭 콘텐츠 영역 */}
+        <div className="flex-1 min-h-0 overflow-y-auto bg-gray-900">
+          {mobileTab === 'script' ? (
+            <div className="h-full">
+              <SlideViewer {...slideLogic} viewMode="mobile-script" />
+            </div>
+          ) : (
+            <div className="flex flex-col min-h-full">
+              <div className="flex-1 ">
+                <CommentList
+                  comments={comments}
+                  onAddReply={addReply}
+                  onGoToSlideRef={slideLogic.goToSlideRef}
+                  onDeleteComment={deleteComment}
+                />
+              </div>
+              <div className="sticky bottom-0 bg-gray-900">
+                <FeedbackInput
+                  reactions={reactions}
+                  onToggleReaction={() => {}}
+                  onAddComment={(content) => addComment(content, slideLogic.slideIndex)}
+                  viewType="input-only"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/stores/slideStore.ts b/src/stores/slideStore.ts
index 728fc326..8dabde82 100644
--- a/src/stores/slideStore.ts
+++ b/src/stores/slideStore.ts
@@ -32,18 +32,23 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
-import type { HistoryItem } from '@/types/script';
+import type { EmojiReaction, HistoryItem, OpinionItem } from '@/types/script';
 import type { Slide } from '@/types/slide';
 import { addReplyToFlat, createComment, deleteFromFlat } from '@/utils/comment';
 
 interface SlideState {
   slide: Slide | null;
 
+  // 데이터를 기억하기 위한 저장소
+  currentSlideIndex: number;
+  globalOpinions: OpinionItem[]; // 전체 댓글 유지용
+  reactionMap: Record<number, EmojiReaction[]>; // 슬라이드별 이모지 상태 유지용
+
   /**
    * 슬라이드 데이터를 초기화합니다.
    * @param slide - 초기화할 슬라이드 데이터
    */
-  initSlide: (slide: Slide) => void;
+  initSlide: (slide: Slide, slideIndex: number) => void;
 
   /**
    * 슬라이드 데이터를 부분 업데이트합니다.
@@ -94,9 +99,46 @@ export const useSlideStore = create<SlideState>()(
   devtools(
     (set) => ({
       slide: null,
+      // 초기 상태값
+      currentSlideIndex: 0,
+      globalOpinions: [],
+      reactionMap: {},
+
+      initSlide: (slide, slideIndex) => {
+        set(
+          (state) => {
+            // 1. 댓글 복원 로직
+            // 스토어에 저장된 댓글이 있으면 그걸 쓰고, 없으면(첫 진입) 들어온 slide.opinions 사용
+            let opinionsToUse = state.globalOpinions;
+            if (state.globalOpinions.length === 0) {
+              opinionsToUse = slide.opinions || [];
+            }
+
+            // 2. 이모지 복원 로직
+            // 이 슬라이드 번호(Index)에 저장된 이모지가 있으면 그걸 쓰고, 없으면 들어온 것 사용
+            const savedReactions = state.reactionMap[slideIndex];
+            const reactionsToUse = savedReactions || slide.emojiReactions || [];
 
-      initSlide: (slide) => {
-        set({ slide }, false, 'slide/initSlide');
+            // 3. Map에 현재 상태가 없으면 초기값 등록해두기
+            const nextReactionMap = { ...state.reactionMap };
+            if (!savedReactions) {
+              nextReactionMap[slideIndex] = reactionsToUse;
+            }
+
+            return {
+              currentSlideIndex: slideIndex,
+              globalOpinions: opinionsToUse, // 상태 동기화
+              reactionMap: nextReactionMap, // 맵 업데이트
+              slide: {
+                ...slide,
+                opinions: opinionsToUse, // 복원된 댓글 적용
+                emojiReactions: reactionsToUse, // 복원된 이모지 적용
+              },
+            };
+          },
+          false,
+          'slide/initSlide',
+        );
       },
 
       updateSlide: (updates) => {
@@ -156,14 +198,13 @@ export const useSlideStore = create<SlideState>()(
 
       deleteOpinion: (id) => {
         set(
-          (state) => ({
-            slide: state.slide
-              ? {
-                  ...state.slide,
-                  opinions: deleteFromFlat(state.slide.opinions, id),
-                }
-              : null,
-          }),
+          (state) => {
+            const newOpinions = deleteFromFlat(state.globalOpinions, id);
+            return {
+              globalOpinions: newOpinions, // 영구 저장소 업데이트
+              slide: state.slide ? { ...state.slide, opinions: newOpinions } : null, // 현재 화면 업데이트
+            };
+          },
           false,
           'slide/deleteOpinion',
         );
@@ -172,16 +213,13 @@ export const useSlideStore = create<SlideState>()(
       addReply: (parentId, content) => {
         set(
           (state) => {
-            if (!state.slide) return state;
-
+            const newOpinions = addReplyToFlat(state.globalOpinions, parentId, {
+              content,
+              author: '나',
+            });
             return {
-              slide: {
-                ...state.slide,
-                opinions: addReplyToFlat(state.slide.opinions, parentId, {
-                  content,
-                  author: '나',
-                }),
-              },
+              globalOpinions: newOpinions,
+              slide: state.slide ? { ...state.slide, opinions: newOpinions } : null,
             };
           },
           false,
@@ -192,24 +230,23 @@ export const useSlideStore = create<SlideState>()(
       toggleReaction: (emoji) => {
         set(
           (state) => {
-            // 슬라이드가 없거나 리액션 배열이 없으면 무시
             if (!state.slide) return state;
 
             const currentReactions = state.slide.emojiReactions || [];
-
-            // 해당 이모지 찾아서 업데이트
             const newReactions = currentReactions.map((r) => {
               if (r.emoji !== emoji) return r;
-
-              // 활성 -> 비활성 (카운트 감소)
-              if (r.active) {
-                return { ...r, active: false, count: Math.max(0, r.count - 1) };
-              }
-              // 비활성 -> 활성 (카운트 증가)
+              if (r.active) return { ...r, active: false, count: Math.max(0, r.count - 1) };
               return { ...r, active: true, count: r.count + 1 };
             });
 
+            // 현재 슬라이드 번호에 맞는 맵 업데이트
+            const updatedMap = {
+              ...state.reactionMap,
+              [state.currentSlideIndex]: newReactions,
+            };
+
             return {
+              reactionMap: updatedMap, // 맵에 저장 (다른 슬라이드 갔다 와도 유지됨)
               slide: {
                 ...state.slide,
                 emojiReactions: newReactions,
@@ -217,7 +254,7 @@ export const useSlideStore = create<SlideState>()(
             };
           },
           false,
-          'slide/toggleReaction', // DevTools 액션 이름
+          'slide/toggleReaction',
         );
       },
 
@@ -232,14 +269,13 @@ export const useSlideStore = create<SlideState>()(
         });
 
         set(
-          (state) => ({
-            slide: state.slide
-              ? {
-                  ...state.slide,
-                  opinions: [newComment, ...state.slide.opinions],
-                }
-              : null,
-          }),
+          (state) => {
+            const newOpinions = [newComment, ...state.globalOpinions];
+            return {
+              globalOpinions: newOpinions,
+              slide: state.slide ? { ...state.slide, opinions: newOpinions } : null,
+            };
+          },
           false,
           'slide/addOpinion',
         );

From 65c569a1d32b4c468f0b87c4c653dd876364e4a5 Mon Sep 17 00:00:00 2001
From: sandy <a26948077@gmail.com>
Date: Sun, 18 Jan 2026 23:13:01 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95=20(#49)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/SlideWorkspace.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/slide/SlideWorkspace.tsx b/src/components/slide/SlideWorkspace.tsx
index 711c79b3..79a1152f 100644
--- a/src/components/slide/SlideWorkspace.tsx
+++ b/src/components/slide/SlideWorkspace.tsx
@@ -19,18 +19,19 @@ import { ScriptBox } from './script';
 
 interface SlideWorkspaceProps {
   slide?: Slide;
+  slideIndex: number;
   isLoading?: boolean;
 }
 
-export default function SlideWorkspace({ slide, isLoading }: SlideWorkspaceProps) {
+export default function SlideWorkspace({ slide, slideIndex, isLoading }: SlideWorkspaceProps) {
   const [isScriptCollapsed, setIsScriptCollapsed] = useState(false);
   const { initSlide } = useSlideActions();
 
   useEffect(() => {
     if (slide) {
-      initSlide(slide);
+      initSlide(slide, slideIndex);
     }
-  }, [slide, initSlide]);
+  }, [slide, slideIndex, initSlide]);
 
   if (isLoading) {
     return (

From 55f4cd8f07bd1d4b6bdd6e5757cf706cac5bbd16 Mon Sep 17 00:00:00 2001
From: sandy <a26948077@gmail.com>
Date: Mon, 19 Jan 2026 23:09:43 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20SlidePage=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#49)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SlidePage.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx
index ecc43fdb..fbaf0296 100644
--- a/src/pages/SlidePage.tsx
+++ b/src/pages/SlidePage.tsx
@@ -36,6 +36,9 @@ export default function SlidePage() {
   const currentSlide = slides?.find((s) => s.id === slideId) ?? slides?.[0];
   const basePath = projectId ? `/${projectId}` : '';
 
+  // 현재 슬라이드가 배열의 몇 번째인지 계산 (없으면 0번)
+  const currentSlideIndex = slides?.findIndex((s) => s.id === currentSlide?.id) ?? 0;
+
   return (
     <div className="h-full bg-gray-100">
       <div className="flex h-full gap-12 pl-14 pr-20 pt-6">
@@ -47,7 +50,11 @@ export default function SlidePage() {
         />
 
         <main className="flex-1 h-full min-w-0 overflow-hidden">
-          <SlideWorkspace slide={currentSlide} isLoading={isLoading} />
+          <SlideWorkspace
+            slide={currentSlide}
+            isLoading={isLoading}
+            slideIndex={currentSlideIndex}
+          />
         </main>
       </div>
     </div>