From da1fc41acbc02fbf79b3bb1979567252791b14b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 5 Mar 2026 14:56:42 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[cm-song]=20=EB=82=98=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=A0=9C=EC=9E=91=20TTS=20=EC=98=A4=EB=94=94?=
 =?UTF-8?q?=EC=98=A4=20=EC=9E=AC=EC=83=9D=20=EB=B2=84=ED=8A=BC=20=EB=AF=B8?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TTS try-catch 블록 누락 수정 (JS 구문 오류 해결)
- audioReady display:flex 명시적 설정 (hidden 제거 후 레이아웃 보장)
---
 resources/views/rd/cm-song/create.blade.php | 125 +++++++++++++-------
 1 file changed, 79 insertions(+), 46 deletions(-)

diff --git a/resources/views/rd/cm-song/create.blade.php b/resources/views/rd/cm-song/create.blade.php
index a2bccb03..6427ef9b 100644
--- a/resources/views/rd/cm-song/create.blade.php
+++ b/resources/views/rd/cm-song/create.blade.php
@@ -141,27 +141,44 @@ class="w-full py-3.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 disa
                 </div>
 
                 <!-- 오디오 플레이어 -->
-                <div id="audioSection" class="hidden">
+                <div id="audioSection">
                     <div class="flex flex-col items-center gap-4">
                         <audio id="audioPlayer" class="hidden"></audio>
-                        <button
-                            type="button"
-                            id="playBtn"
-                            class="w-16 h-16 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition hover:scale-105"
-                        >
-                            <i id="playIcon" class="ri-play-fill text-3xl ml-0.5"></i>
-                        </button>
-                        <p id="playLabel" class="text-sm text-gray-500 font-medium">들어보기</p>
 
-                        <!-- 다운로드 버튼 -->
-                        <button
-                            type="button"
-                            id="downloadBtn"
-                            class="flex items-center gap-2 px-5 py-2.5 border-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 rounded-xl text-sm font-medium transition"
-                        >
-                            <i class="ri-download-line"></i>
-                            음성 파일 다운로드
-                        </button>
+                        <!-- 음성 로딩 중 -->
+                        <div id="audioLoading" class="flex flex-col items-center gap-2">
+                            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
+                                <i class="ri-loader-4-line text-2xl text-gray-400 animate-spin"></i>
+                            </div>
+                            <p class="text-sm text-gray-400 font-medium">음성 생성 중...</p>
+                        </div>
+
+                        <!-- 재생 버튼 (음성 준비 완료 후) -->
+                        <div id="audioReady" class="hidden" style="flex-direction: column; align-items: center; gap: 1rem;">
+                            <button
+                                type="button"
+                                id="playBtn"
+                                class="w-16 h-16 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition hover:scale-105"
+                            >
+                                <i id="playIcon" class="ri-play-fill text-3xl ml-0.5"></i>
+                            </button>
+                            <p id="playLabel" class="text-sm text-gray-500 font-medium">들어보기</p>
+
+                            <!-- 다운로드 버튼 -->
+                            <button
+                                type="button"
+                                id="downloadBtn"
+                                class="flex items-center gap-2 px-5 py-2.5 border-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 rounded-xl text-sm font-medium transition"
+                            >
+                                <i class="ri-download-line"></i>
+                                음성 파일 다운로드
+                            </button>
+                        </div>
+
+                        <!-- 음성 생성 실패 -->
+                        <div id="audioError" class="hidden text-center">
+                            <p class="text-sm text-red-400">음성 생성에 실패했습니다.</p>
+                        </div>
                     </div>
                 </div>
 
@@ -210,6 +227,9 @@ class="flex items-center gap-1.5 px-5 py-2 bg-white hover:bg-gray-50 text-gray-6
     const playBtn = document.getElementById('playBtn');
     const playIcon = document.getElementById('playIcon');
     const playLabel = document.getElementById('playLabel');
+    const audioLoading = document.getElementById('audioLoading');
+    const audioReady = document.getElementById('audioReady');
+    const audioError = document.getElementById('audioError');
     const downloadBtn = document.getElementById('downloadBtn');
     const saveBtn = document.getElementById('saveBtn');
     const retryBtn = document.getElementById('retryBtn');
@@ -306,7 +326,10 @@ function showState(state) {
         generateBtn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> 나레이션 제작 중...';
         showState('loading');
         loadingText.textContent = 'AI가 나레이션을 작성하고 있어요...';
-        audioSection.classList.add('hidden');
+        audioLoading.classList.remove('hidden');
+        audioReady.classList.add('hidden');
+        audioReady.style.display = '';
+        audioError.classList.add('hidden');
         currentAudioData = null;
         currentAudioMimeType = null;
         currentAudioBlob = null;
@@ -340,38 +363,48 @@ function showState(state) {
             showState('result');
 
             // 2. TTS 음성 생성
-            loadingText.textContent = '목소리를 녹음하고 있어요...';
-            const audioRes = await fetch('{{ route("rd.cm-song.generate-audio") }}', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
-                },
-                body: JSON.stringify({ lyrics: lyricsData.lyrics }),
-            });
+            try {
+                const audioRes = await fetch('{{ route("rd.cm-song.generate-audio") }}', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                    },
+                    body: JSON.stringify({ lyrics: lyricsData.lyrics }),
+                });
 
-            const audioData = await audioRes.json();
-            if (audioData.success && audioData.audio_data) {
-                currentAudioData = audioData.audio_data;
-                currentAudioMimeType = audioData.mime_type || 'audio/L16;rate=24000';
+                const audioData = await audioRes.json();
+                if (audioData.success && audioData.audio_data) {
+                    currentAudioData = audioData.audio_data;
+                    currentAudioMimeType = audioData.mime_type || 'audio/L16;rate=24000';
 
-                const mimeType = currentAudioMimeType;
-                let audioUrl;
+                    const mimeType = currentAudioMimeType;
+                    let audioUrl;
 
-                if (mimeType.includes('L16') || mimeType.includes('pcm')) {
-                    const rateMatch = mimeType.match(/rate=(\d+)/);
-                    const rate = rateMatch ? parseInt(rateMatch[1]) : 24000;
-                    const pcmBytes = base64ToUint8Array(audioData.audio_data);
-                    currentAudioBlob = pcmToWav(pcmBytes, rate);
-                    audioUrl = URL.createObjectURL(currentAudioBlob);
+                    if (mimeType.includes('L16') || mimeType.includes('pcm')) {
+                        const rateMatch = mimeType.match(/rate=(\d+)/);
+                        const rate = rateMatch ? parseInt(rateMatch[1]) : 24000;
+                        const pcmBytes = base64ToUint8Array(audioData.audio_data);
+                        currentAudioBlob = pcmToWav(pcmBytes, rate);
+                        audioUrl = URL.createObjectURL(currentAudioBlob);
+                    } else {
+                        const rawBytes = base64ToUint8Array(audioData.audio_data);
+                        currentAudioBlob = new Blob([rawBytes], { type: mimeType });
+                        audioUrl = URL.createObjectURL(currentAudioBlob);
+                    }
+
+                    audioPlayer.src = audioUrl;
+                    audioLoading.classList.add('hidden');
+                    audioReady.classList.remove('hidden');
+                    audioReady.style.display = 'flex';
                 } else {
-                    const rawBytes = base64ToUint8Array(audioData.audio_data);
-                    currentAudioBlob = new Blob([rawBytes], { type: mimeType });
-                    audioUrl = URL.createObjectURL(currentAudioBlob);
+                    audioLoading.classList.add('hidden');
+                    audioError.classList.remove('hidden');
                 }
-
-                audioPlayer.src = audioUrl;
-                audioSection.classList.remove('hidden');
+            } catch (audioErr) {
+                console.error('음성 생성 오류:', audioErr);
+                audioLoading.classList.add('hidden');
+                audioError.classList.remove('hidden');
             }
 
         } catch (error) {