- {[0, 1, 2, 3].map((idx) => {
- const isMine = idx < 2;
- const hasReply = idx === 2;
+ {/* 의견 목록 */}
+
+
);
-};
-
-export default Opinion;
+}
diff --git a/src/components/script-box/ScriptBox.tsx b/src/components/script-box/ScriptBox.tsx
index 1fe85770..dae66eef 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 ScriptBoxEmogi from './ScriptBoxEmogi';
-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 [isEmogiClick, setEmogiClick] = useState(false);
+interface ScriptBoxProps {
+ slideTitle?: string;
+}
- const handleEmogiClick = () => {
- setEmogiClick((prev) => !prev);
- };
-
- // 2. 변경기록 버튼
- const scriptHistory = useToggle(false);
- // 3. 의견 버튼
- const opinion = useToggle(false);
- // 3-1. 답변 (나중에 피드백id랑 매칭해야됨)
- // 어떤 댓글에 답글 입력창이 열려있는지
- const [activeReplyIdx, setActiveReplyIdx] = useState
(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 (
- <>
-
- {/* 변경: 상단바 내부 레이아웃(좌/우 정렬) */}
-
- {/* 슬라이드 제목 변경 */}
-
-
- {/* 우측 컨트롤 영역 */}
-
- {/* 이모지 카운트 영역 -> 컴포넌트로 분리 */}
-
-
- {/* 변경기록/의견 버튼 그룹 */}
-
- {/* 변경기록 */}
-
-
- {/* 전체 Script Box 열림 닫힘 버튼*/}
-
-
-
-
-
- {/* "대본 입력 영역" textarea */}
-
-
-
-
+
);
-};
-
-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..e18ea108
--- /dev/null
+++ b/src/components/script-box/ScriptBoxContent.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+export default function ScriptBoxContent() {
+ const [script, setScript] = useState('');
+
+ return (
+
+