feat: [cm-song] 나레이션 제작 시 자동 저장

- 저장 버튼 제거, 제작 완료 시 서버에 자동 저장
- 자동 저장 상태 표시 (저장 중.../자동 저장됨/저장 실패)
- 불필요한 나레이션은 목록에서 삭제하는 방식으로 변경
This commit is contained in:
김보곤
2026-03-05 20:13:33 +09:00
parent e28077745f
commit 5ae9db5842

View File

@@ -182,15 +182,11 @@ class="flex items-center gap-2 px-5 py-2.5 border-2 border-indigo-200 text-indig
</div>
</div>
<!-- 저장 / 다시 만들기 -->
<!-- 자동 저장 상태 / 다시 만들기 -->
<div class="flex items-center justify-center gap-4 pt-2">
<button
type="button"
id="saveBtn"
class="flex items-center gap-1.5 px-5 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition"
>
<i class="ri-save-line"></i> 저장하기
</button>
<span id="autoSaveStatus" class="flex items-center gap-1.5 text-sm text-gray-400 hidden">
<i class="ri-check-line text-green-500"></i> 자동 저장됨
</span>
<button
type="button"
id="retryBtn"
@@ -231,7 +227,7 @@ class="flex items-center gap-1.5 px-5 py-2 bg-white hover:bg-gray-50 text-gray-6
const audioReady = document.getElementById('audioReady');
const audioError = document.getElementById('audioError');
const downloadBtn = document.getElementById('downloadBtn');
const saveBtn = document.getElementById('saveBtn');
const autoSaveStatus = document.getElementById('autoSaveStatus');
const retryBtn = document.getElementById('retryBtn');
let selectedMood = '신나는';
@@ -407,6 +403,9 @@ function showState(state) {
audioError.classList.remove('hidden');
}
// 3. 자동 저장
await autoSave();
} catch (error) {
console.error('나레이션 생성 오류:', error);
alert('생성 중 오류가 발생했습니다: ' + error.message);
@@ -431,12 +430,12 @@ function showState(state) {
URL.revokeObjectURL(url);
});
// 저장
saveBtn.addEventListener('click', async function () {
// 자동 저장
async function autoSave() {
if (!currentLyrics) return;
saveBtn.disabled = true;
saveBtn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> 저장 중...';
autoSaveStatus.classList.remove('hidden');
autoSaveStatus.innerHTML = '<i class="ri-loader-4-line animate-spin text-gray-400"></i> <span class="text-gray-400">저장 중...</span>';
try {
const res = await fetch('{{ route("rd.cm-song.store") }}', {
@@ -458,18 +457,15 @@ function showState(state) {
const data = await res.json();
if (data.success) {
alert('나레이션이 저장되었습니다.');
window.location.href = '{{ route("rd.cm-song.index") }}';
autoSaveStatus.innerHTML = '<i class="ri-check-line text-green-500"></i> <span class="text-green-600">자동 저장됨</span>';
} else {
throw new Error(data.error || '저장 실패');
autoSaveStatus.innerHTML = '<i class="ri-error-warning-line text-red-400"></i> <span class="text-red-400">저장 실패</span>';
}
} catch (error) {
alert('저장 오류: ' + error.message);
} finally {
saveBtn.disabled = false;
saveBtn.innerHTML = '<i class="ri-save-line"></i> 저장하기';
console.error('자동 저장 오류:', error);
autoSaveStatus.innerHTML = '<i class="ri-error-warning-line text-red-400"></i> <span class="text-red-400">저장 실패</span>';
}
});
}
// 재생/정지
playBtn.addEventListener('click', function () {