diff --git a/client/static/app.js b/client/static/app.js index c3fe907..0dbe2e2 100644 --- a/client/static/app.js +++ b/client/static/app.js @@ -1,6 +1,7 @@ const listEl = document.getElementById("tts-list"); const textInput = document.getElementById("text-input"); const saveBtn = document.getElementById("save-btn"); +const voiceSelect = document.getElementById("voice-select"); const editBtn = document.getElementById("edit-btn"); const deleteBtn = document.getElementById("delete-btn"); const cancelBtn = document.getElementById("cancel-btn"); @@ -111,6 +112,7 @@ async function loadList() { async function handleSave() { const text = (textInput.value || "").trim(); + const voice = (voiceSelect?.value || "male").trim(); if (text.length < 11) { alert("10개 글자 이상이어야 합니다"); return; @@ -120,7 +122,7 @@ async function handleSave() { const res = await fetch("/api/tts", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ text }), + body: JSON.stringify({ text, voice }), }); if (!res.ok) { diff --git a/client/static/styles.css b/client/static/styles.css index 9b70272..5d0e5f1 100644 --- a/client/static/styles.css +++ b/client/static/styles.css @@ -42,6 +42,21 @@ textarea { flex: 1; } +.save-row { + display: flex; + gap: 12px; + align-items: center; +} + +.voice-select { + border: 1px solid #c9c9c9; + border-radius: 4px; + padding: 10px 12px; + font-size: 14px; + background: #ffffff; + color: #333; +} + button { border: none; padding: 12px 18px; diff --git a/client/templates/index.html b/client/templates/index.html index a49ecf7..e8256e5 100644 --- a/client/templates/index.html +++ b/client/templates/index.html @@ -11,7 +11,13 @@
입력 텍스트
- +
+ + +