// 💡 [수정] 프로그램 실행 시 기본으로 1단계가 존재하도록 초기값 설정 let currentScript = [{ credit: "출처 입력\n@username", idiom: "✓ 핵심 표현", meaning: "; 뜻을 입력하세요", en: "", ko: "", pron: "", prompt_top: "stand-up comedian, highly detailed", prompt_bottom: "audience reacting, cinematic lighting" }]; let assetStates = {}; let currentPreviewTurn = 0; // 🎨 숏폼 자막 타이포그래피 글로벌 설정 (별표 효과 포함) let styleConfig = { english: { font: 'SUIT', size: 80, baseColor: '#FFFFFF', bgColor: '#000000', bgOpacity: 0.85, highlights: { 1: { color: '#FFF200', desc: '주제(노랑)' }, 2: { color: '#00E5FF', desc: '패턴(시안)' }, 3: { color: '#FF3B30', desc: '주의(빨강)' }, 4: { color: '#4CD964', desc: '어휘(초록)' }, 5: { color: '#FF2D55', desc: '뉘앙스(핑크)' } } }, korean: { font: 'SeoulNamsanM', size: 55, color: '#FFFFFF', outlineColor: '#000000', outlineWidth: 3 }, pronunciation: { font: 'SchoolSafeDictation', size: 65, color: '#FF3B30', outlineColor: '#000000', outlineWidth: 2 } }; // ✨ [엔진] 별표 개수 기반 멀티 스타일 자막 변환 함수 function parseAsteriskToHTML(text) { if (!text) return ""; let html = text; html = html.replace(/\*{5}(.*?)\*{5}/g, `$1`); html = html.replace(/\*{4}(.*?)\*{4}/g, `$1`); html = html.replace(/\*{3}(.*?)\*{3}/g, `$1`); html = html.replace(/\*{2}(.*?)\*{2}/g, `$1`); html = html.replace(/\*(.*?)\*/g, `$1`); return html; } // [패널 1] AI 대본 생성 엔진 async function generateScript() { const topic = document.getElementById('topicInput').value; if(!topic) { alert("주제를 입력해주세요."); return; } const btn = event.currentTarget; btn.innerHTML = ' 생성 중...'; btn.disabled = true; try { const response = await fetch('/api/studio/generate-script', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ topic: topic }) }); if (!response.ok) throw new Error(`서버 오류: ${response.status}`); const data = await response.json(); currentScript = data.dialogue.map((turn) => ({ credit: turn.credit || "지미 카\n@jimmycarr", idiom: turn.idiom || "✓ 핵심 표현", meaning: turn.meaning || "; 뜻을 입력하세요", en: turn.en || "", ko: turn.ko || "", pron: turn.ko_pron || turn.pron || "", prompt_top: turn.image_prompt_top || turn.image_prompt || "stand-up comedian, highly detailed", prompt_bottom: turn.image_prompt_bottom || "audience reacting, cinematic lighting" })); renderScriptPanel(); renderAssetPanel(); } catch (error) { console.error("대본 생성 에러:", error); // 💡 [수정] AI 생성 실패 시(Mock 데이터) 기본 4단계 기획에 맞춰 출력 currentScript = [ { credit: "지미 카\n@jimmycarr", idiom: "✓ test the water(s)", meaning: "; 분위기를 살피다 / 반응을 떠보다", en: "I'll just, I'll *test the water* first.", ko: "그냥 분위기 한 번 볼게", pron: "아을저스, 아을테스더 워럴 퍼스더", prompt_top: "stand-up comedian holding a microphone", prompt_bottom: "crowd of people smiling" }, { credit: "지미 카\n@jimmycarr", idiom: "✓ make a move", meaning: "; 행동을 취하다 / 다가가다", en: "Before I actually **make a move**, you know?", ko: "본격적으로 행동하기 전에 말이야.", pron: "비포 아이 액츄얼리 메이커 무브, 유 노?", prompt_top: "man looking thoughtful, cinematic lighting", prompt_bottom: "close up of a person's eyes" }, { credit: "지미 카\n@jimmycarr", idiom: "✓ play it safe", meaning: "; 안전하게 가다 / 무리하지 않다", en: "It's always better to ***play it safe***.", ko: "언제나 안전하게 가는 게 낫지.", pron: "이츠 올웨이즈 베러 투 플레이 잇 세이프.", prompt_top: "a cautious person, dark background", prompt_bottom: "audience nodding in agreement" }, { credit: "지미 카\n@jimmycarr", idiom: "✓ go all in", meaning: "; 올인하다 / 다 걸다", en: "Then I'll just ****go all in****.", ko: "그러고 나서 싹 다 걸어버릴 거야.", pron: "덴 아을저스 고 올 인.", prompt_top: "casino chips, aggressive lighting", prompt_bottom: "people cheering loudly" } ]; renderScriptPanel(); renderAssetPanel(); } finally { btn.innerHTML = ' AI 생성'; btn.disabled = false; } } // [패널 1] 대본 에디터 UI 렌더링 function renderScriptPanel() { const container = document.getElementById('scriptContainer'); container.innerHTML = ""; currentScript.forEach((turn, idx) => { // 💡 [수정] 카드 우측 상단에 X(삭제) 버튼 추가 const html = `

${idx+1}

🏷️ 상단 출처 표기 (Credit)

⭐ 핵심 표현 (Idiom)

💬 표현 뜻 (Meaning)

🇺🇸 영어 문장 (Sentence)

🇰🇷 한국어 해석 (Translation)

🗣️ 한글 발음 표기 (Pronunciation)

`; container.insertAdjacentHTML('beforeend', html); }); } // 🗑️ [신규 추가] 수동으로 특정 단계(Turn) 삭제 함수 function deleteScriptTurn(idx) { if (currentScript.length <= 1) { alert("최소 1개의 단계는 유지해야 합니다."); return; } if (confirm(`정말로 ${idx + 1}단계를 삭제하시겠습니까?`)) { // 해당 인덱스의 대본 및 에셋 데이터 삭제 currentScript.splice(idx, 1); // 에셋 데이터도 동기화하여 삭제하고 인덱스 재정렬 const newAssetStates = {}; currentScript.forEach((_, newIdx) => { newAssetStates[newIdx] = assetStates[newIdx >= idx ? newIdx + 1 : newIdx]; }); assetStates = newAssetStates; // 프리뷰 인덱스가 범위를 벗어나면 조정 if (currentPreviewTurn >= currentScript.length) { currentPreviewTurn = Math.max(0, currentScript.length - 1); } localStorage.setItem('studio_current_script', JSON.stringify(currentScript)); renderScriptPanel(); renderAssetPanel(); updatePreviewScreen(); } } function updateScriptData(idx, field, value) { currentScript[idx][field] = value; localStorage.setItem('studio_current_script', JSON.stringify(currentScript)); updatePreviewScreen(); } // 💊 [패널 1] 수동으로 새로운 대본 단계(Turn) 추가 함수 function addScriptTurn() { // 1. 빈 데이터 배열에 밀어넣기 currentScript.push({ credit: "출처 입력\n@username", idiom: "✓ 핵심 표현", meaning: "; 뜻을 입력하세요", en: "", ko: "", pron: "", prompt_top: "stand-up comedian, highly detailed", prompt_bottom: "audience reacting, cinematic lighting" }); // 2. 패널 다시 그리기 (1번, 2번 패널 동시 동기화) renderScriptPanel(); renderAssetPanel(); // 3. 사용자가 방금 추가한 맨 아래쪽으로 스크롤 부드럽게 이동 setTimeout(() => { const container = document.getElementById('scriptContainer'); if (container) { container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); } }, 50); } // 🎨 테마 프리셋 적용 함수 function applyThemePreset(theme) { if (theme === 'variety') { // 예능형: 강렬한 흰색 + 두꺼운 검은 테두리, 발음은 빨간색 styleConfig.korean.color = '#FFFFFF'; styleConfig.korean.outlineColor = '#000000'; styleConfig.pronunciation.color = '#FF3B30'; styleConfig.pronunciation.outlineColor = '#000000'; } else if (theme === 'docu') { // 다큐형: 차분한 연회색 + 테두리 없음, 발음은 어두운 회색 styleConfig.korean.color = '#E5E5E5'; styleConfig.korean.outlineColor = 'transparent'; styleConfig.pronunciation.color = '#A3A3A3'; styleConfig.pronunciation.outlineColor = 'transparent'; } else if (theme === 'trendy') { // 트렌디팝: 네온 느낌의 시안색 + 어두운 보라색 테두리 styleConfig.korean.color = '#00E5FF'; styleConfig.korean.outlineColor = '#1A0B2E'; styleConfig.pronunciation.color = '#FF2D55'; styleConfig.pronunciation.outlineColor = '#1A0B2E'; } // 변경된 설정을 미리보기 화면에 즉시 렌더링 updatePreviewScreen(); }