From fca7138eca307208f7e15eb5eecb34aa84940a27 Mon Sep 17 00:00:00 2001
From: jmj <waysoleward01@naver.com>
Date: Wed, 3 Jun 2026 12:01:36 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat(session):=20=EB=A9=94=EC=8B=9C?=
 =?UTF-8?q?=EC=A7=80=20=EC=9D=91=EB=8B=B5=EC=97=90=20=EC=9E=AC=EC=83=9D?=
 =?UTF-8?q?=EC=9A=A9=20presigned=20URL=20=EB=8F=99=EB=B4=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

음성 면접 재생을 위해 ttsAudioPath/audioFilePath(원시 S3 키)를
조회 응답에서 presigned URL(ttsAudioUrl/audioFileUrl)로 변환.
문서 다운로드 presign 패턴과 동일, TTL 30분.

- MessageResult/MessageResponse: ttsAudioUrl/audioFileUrl 필드 추가
- InterviewMessageService.list: ObjectStorageClient 주입,
  TTS SUCCEEDED 질문 + 음성 답변 원본을 presign (개별 try/catch)
- openapi.json 재생성

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 backend/openapi.json                          |  6 ++++
 .../application/InterviewMessageService.java  | 34 ++++++++++++++++++-
 .../application/dto/MessageResult.java        | 13 +++++--
 .../presentation/dto/MessageResponse.java     |  9 +++--
 4 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/backend/openapi.json b/backend/openapi.json
index ca31a921..4772afe0 100644
--- a/backend/openapi.json
+++ b/backend/openapi.json
@@ -2613,6 +2613,12 @@
           },
           "targetEvidence" : {
             "type" : "string"
+          },
+          "ttsAudioUrl" : {
+            "type" : "string"
+          },
+          "audioFileUrl" : {
+            "type" : "string"
           }
         }
       },
diff --git a/backend/src/main/java/com/stackup/stackup/session/application/InterviewMessageService.java b/backend/src/main/java/com/stackup/stackup/session/application/InterviewMessageService.java
index 58e9944e..16bb145b 100644
--- a/backend/src/main/java/com/stackup/stackup/session/application/InterviewMessageService.java
+++ b/backend/src/main/java/com/stackup/stackup/session/application/InterviewMessageService.java
@@ -2,6 +2,7 @@
 
 import com.stackup.stackup.common.exception.ApiErrorCode;
 import com.stackup.stackup.common.exception.DomainException;
+import com.stackup.stackup.common.storage.ObjectStorageClient;
 import com.stackup.stackup.session.application.dto.MessageResult;
 import com.stackup.stackup.session.application.event.AnswerSubmittedEvent;
 import com.stackup.stackup.session.domain.InterviewMessage;
@@ -11,8 +12,13 @@
 import com.stackup.stackup.session.domain.MessageRole;
 import com.stackup.stackup.session.domain.MessageStatus;
 import com.stackup.stackup.session.domain.SessionStatus;
+import com.stackup.stackup.session.domain.TtsStatus;
+import java.net.URI;
+import java.time.Duration;
 import java.util.List;
 import lombok.RequiredArgsConstructor;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.context.ApplicationEventPublisher;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -24,17 +30,43 @@
 @Transactional(readOnly = true)
 public class InterviewMessageService {
 
+    private static final Logger log = LoggerFactory.getLogger(InterviewMessageService.class);
+    private static final Duration AUDIO_URL_TTL = Duration.ofMinutes(30);
+
     private final InterviewSessionRepository sessionRepository;
     private final InterviewMessageRepository messageRepository;
+    private final ObjectStorageClient storage;
     private final ApplicationEventPublisher events;
 
     public List<MessageResult> list(Long userId, Long sessionId) {
         ownedSession(userId, sessionId);
         return messageRepository.findBySession_IdOrderBySequenceNumberAsc(sessionId).stream()
-            .map(MessageResult::of)
+            .map(this::toResultWithAudioUrls)
             .toList();
     }
 
+    // 재생용 presigned URL 동봉: 질문 TTS(SUCCEEDED) + 음성 답변 원본.
+    // presign 실패가 메시지 조회 전체를 깨뜨리지 않도록 개별 try/catch.
+    private MessageResult toResultWithAudioUrls(InterviewMessage m) {
+        String ttsUrl = m.getTtsStatus() == TtsStatus.SUCCEEDED
+            ? presign(m.getTtsAudioPath()) : null;
+        String audioUrl = presign(m.getAudioFilePath());
+        return MessageResult.of(m, ttsUrl, audioUrl);
+    }
+
+    private String presign(String key) {
+        if (key == null || key.isBlank()) {
+            return null;
+        }
+        try {
+            URI url = storage.createPresignedGetUrl(key, AUDIO_URL_TTL);
+            return url == null ? null : url.toString();
+        } catch (RuntimeException e) {
+            log.warn("presigned audio URL creation failed. key={}", key, e);
+            return null;
+        }
+    }
+
     @Transactional
     public MessageResult submitAnswer(Long userId, Long sessionId, String content, String idempotencyKey) {
         InterviewSession session = ownedSession(userId, sessionId);
diff --git a/backend/src/main/java/com/stackup/stackup/session/application/dto/MessageResult.java b/backend/src/main/java/com/stackup/stackup/session/application/dto/MessageResult.java
index a4ef63cd..8a199e03 100644
--- a/backend/src/main/java/com/stackup/stackup/session/application/dto/MessageResult.java
+++ b/backend/src/main/java/com/stackup/stackup/session/application/dto/MessageResult.java
@@ -20,10 +20,17 @@ public record MessageResult(
     MessageStatus status,
     Instant createdAt,
     String category,
-    String targetEvidence
+    String targetEvidence,
+    // 재생용 presigned URL. 조회(list) 경로에서만 채우고, 그 외에는 null.
+    String ttsAudioUrl,
+    String audioFileUrl
     // expectedSignal 은 의도적으로 제외 — 정답 유출 방지(라이브 비노출).
 ) {
     public static MessageResult of(InterviewMessage m) {
+        return of(m, null, null);
+    }
+
+    public static MessageResult of(InterviewMessage m, String ttsAudioUrl, String audioFileUrl) {
         return new MessageResult(
             m.getId(),
             m.getSession().getId(),
@@ -38,7 +45,9 @@ public static MessageResult of(InterviewMessage m) {
             m.getStatus(),
             m.getCreatedAt(),
             m.getCategory(),
-            m.getTargetEvidence()
+            m.getTargetEvidence(),
+            ttsAudioUrl,
+            audioFileUrl
         );
     }
 }
diff --git a/backend/src/main/java/com/stackup/stackup/session/presentation/dto/MessageResponse.java b/backend/src/main/java/com/stackup/stackup/session/presentation/dto/MessageResponse.java
index b2a9f9e5..67bbd03a 100644
--- a/backend/src/main/java/com/stackup/stackup/session/presentation/dto/MessageResponse.java
+++ b/backend/src/main/java/com/stackup/stackup/session/presentation/dto/MessageResponse.java
@@ -20,7 +20,10 @@ public record MessageResponse(
     MessageStatus status,
     Instant createdAt,
     String category,
-    String targetEvidence
+    String targetEvidence,
+    // 재생용 presigned URL (질문 TTS / 음성 답변 원본). 조회 응답에서만 채움.
+    String ttsAudioUrl,
+    String audioFileUrl
     // expectedSignal 은 노출하지 않음 — 자기연습 시 정답 유출 방지.
 ) {
     public static MessageResponse from(MessageResult r) {
@@ -38,7 +41,9 @@ public static MessageResponse from(MessageResult r) {
             r.status(),
             r.createdAt(),
             r.category(),
-            r.targetEvidence()
+            r.targetEvidence(),
+            r.ttsAudioUrl(),
+            r.audioFileUrl()
         );
     }
 }

From fd5bae3fc36d8eac52e1a37816979672d704310a Mon Sep 17 00:00:00 2001
From: jmj <waysoleward01@naver.com>
Date: Wed, 3 Jun 2026 12:07:22 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat(interview):=20=EC=9D=8C=EC=84=B1=20?=
 =?UTF-8?q?=EB=A9=B4=EC=A0=91=20=E2=80=94=20=EC=A7=88=EB=AC=B8=20TTS=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20+=20=EC=9D=8C=EC=84=B1=20=EB=8B=B5?=
 =?UTF-8?q?=EB=B3=80=20=EB=85=B9=EC=9D=8C/=EC=97=85=EB=A1=9C=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

백엔드 음성 파이프라인(STT/TTS)이 이미 있었으나 프론트가 텍스트만
사용. 풀 음성 경험을 연결한다.

질문 음성 재생:
- QuestionBubble: ttsStatus=SUCCEEDED + ttsAudioUrl 이면 "음성 듣기"
  버튼 + <audio>. 최신 질문은 자동재생 시도(차단 시 조용히 폴백)
- ConversationThread: 마지막 질문에만 autoPlay 전달

음성 답변:
- useVoiceRecorder(lib/media): getUserMedia + MediaRecorder, 권한
  거부/미지원 감지 → 텍스트 폴백
- messageApi.submitVoiceAnswer: multipart 업로드(/messages/voice)
- useLiveInterview: 음성 업로드 mutation + 성공 시 메시지 무효화
- AnswerComposer: 마이크 버튼 + 녹음/업로드 바(취소·전송)
- AnswerBubble: content 없는 placeholder 는 "음성 인식 중…",
  STT 실패 시 안내 + 본인 음성(audioFileUrl) 재생

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/features/interview/api/messageApi.ts  |  23 ++++
 .../interview/lib/media/useVoiceRecorder.ts   |  90 +++++++++++++++
 .../interview/model/useLiveInterview.ts       |  20 +++-
 .../interview/ui/live/AnswerBubble.tsx        |  23 +++-
 .../interview/ui/live/AnswerComposer.tsx      | 104 +++++++++++++++---
 .../interview/ui/live/ConversationThread.tsx  |   5 +-
 .../interview/ui/live/LiveInterview.tsx       |  16 ++-
 .../interview/ui/live/QuestionBubble.tsx      |  71 +++++++++++-
 frontend/src/shared/api/generated.ts          |   2 +
 9 files changed, 329 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/features/interview/lib/media/useVoiceRecorder.ts

diff --git a/frontend/src/features/interview/api/messageApi.ts b/frontend/src/features/interview/api/messageApi.ts
index 3a32cd95..a6785975 100644
--- a/frontend/src/features/interview/api/messageApi.ts
+++ b/frontend/src/features/interview/api/messageApi.ts
@@ -6,3 +6,26 @@ type S = components['schemas']
 export async function listMessages(sessionId: number): Promise<S['MessageResponse'][]> {
   return (await apiClient.get<S['MessageResponse'][]>(`/api/sessions/${sessionId}/messages`)).data
 }
+
+// 음성 답변 업로드(multipart). 응답은 transcribing placeholder 메시지.
+// STT 완료 후 SESSION_MESSAGE SSE 로 transcript 가 도착한다.
+export async function submitVoiceAnswer(
+  sessionId: number,
+  audio: Blob,
+  idempotencyKey?: string,
+): Promise<S['MessageResponse']> {
+  const form = new FormData()
+  const ext = audio.type.includes('ogg') ? 'ogg' : 'webm'
+  form.append('audio', audio, `answer.${ext}`)
+  const { data } = await apiClient.post<S['MessageResponse']>(
+    `/api/sessions/${sessionId}/messages/voice`,
+    form,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        ...(idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : {}),
+      },
+    },
+  )
+  return data
+}
diff --git a/frontend/src/features/interview/lib/media/useVoiceRecorder.ts b/frontend/src/features/interview/lib/media/useVoiceRecorder.ts
new file mode 100644
index 00000000..f4a1bde2
--- /dev/null
+++ b/frontend/src/features/interview/lib/media/useVoiceRecorder.ts
@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export type RecorderStatus = 'idle' | 'requesting' | 'recording' | 'denied' | 'unsupported'
+
+// MediaRecorder 가 만들 수 있는 후보. 백엔드 허용 목록(webm/ogg/mpeg/mp4/wav)과 교집합.
+const PREFERRED_MIME = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/ogg']
+
+function pickMimeType(): string | undefined {
+  if (typeof MediaRecorder === 'undefined') return undefined
+  return PREFERRED_MIME.find((t) => MediaRecorder.isTypeSupported(t))
+}
+
+// 라이브 면접 음성 답변 녹음. start → 마이크 권한 요청 + 녹음, stop → 오디오 Blob 반환.
+// 권한 거부/미지원 시 status 로 알려서 호출부가 텍스트 입력으로 fallback 한다.
+export function useVoiceRecorder() {
+  const [status, setStatus] = useState<RecorderStatus>(() =>
+    typeof MediaRecorder === 'undefined' || !navigator.mediaDevices?.getUserMedia
+      ? 'unsupported'
+      : 'idle',
+  )
+
+  const recorderRef = useRef<MediaRecorder | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+
+  const cleanup = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop())
+    streamRef.current = null
+    recorderRef.current = null
+    chunksRef.current = []
+  }, [])
+
+  useEffect(() => cleanup, [cleanup])
+
+  const start = useCallback(async (): Promise<boolean> => {
+    if (status === 'unsupported' || status === 'recording') return false
+    setStatus('requesting')
+    let stream: MediaStream
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    } catch {
+      setStatus('denied')
+      return false
+    }
+    const mimeType = pickMimeType()
+    const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
+    chunksRef.current = []
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunksRef.current.push(e.data)
+    }
+    recorder.start()
+    streamRef.current = stream
+    recorderRef.current = recorder
+    setStatus('recording')
+    return true
+  }, [status])
+
+  // 녹음 중지 후 Blob 반환. 녹음 중이 아니면 null.
+  const stop = useCallback((): Promise<Blob | null> => {
+    const recorder = recorderRef.current
+    if (!recorder || recorder.state === 'inactive') {
+      cleanup()
+      setStatus('idle')
+      return Promise.resolve(null)
+    }
+    return new Promise((resolve) => {
+      recorder.onstop = () => {
+        const type = recorder.mimeType || chunksRef.current[0]?.type || 'audio/webm'
+        const blob = new Blob(chunksRef.current, { type })
+        cleanup()
+        setStatus('idle')
+        resolve(blob.size > 0 ? blob : null)
+      }
+      recorder.stop()
+    })
+  }, [cleanup])
+
+  // 녹음 폐기(업로드 안 함).
+  const cancel = useCallback(() => {
+    const recorder = recorderRef.current
+    if (recorder && recorder.state !== 'inactive') {
+      recorder.onstop = null
+      recorder.stop()
+    }
+    cleanup()
+    setStatus('idle')
+  }, [cleanup])
+
+  return { status, start, stop, cancel }
+}
diff --git a/frontend/src/features/interview/model/useLiveInterview.ts b/frontend/src/features/interview/model/useLiveInterview.ts
index 9c635b00..101f5108 100644
--- a/frontend/src/features/interview/model/useLiveInterview.ts
+++ b/frontend/src/features/interview/model/useLiveInterview.ts
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { currentTurn } from '@/domain/session'
 import type { Message } from '@/domain/session'
+import { submitVoiceAnswer } from '../api/messageApi'
 import { sessionKeys, useSession } from './useSession'
 import { messageKeys, useSessionMessages } from './useSessionMessages'
 import { useSessionLifecycle } from './useSessionLifecycle'
@@ -68,6 +69,20 @@ export function useLiveInterview(sessionId: number) {
     [socketSubmit],
   )
 
+  // 음성 답변은 REST 업로드(multipart). 성공 시 placeholder 메시지를
+  // 받으므로 목록을 무효화해 "음성 인식 중…" 버블을 띄운다.
+  // 이후 STT 완료는 callback.voice → SESSION_MESSAGE SSE 로 갱신된다.
+  const voiceMutation = useMutation({
+    mutationFn: (audio: Blob) => submitVoiceAnswer(sessionId, audio, crypto.randomUUID()),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: messageKeys.list(sessionId) }),
+  })
+
+  const submitVoice = useCallback(
+    (audio: Blob) => voiceMutation.mutate(audio),
+    [voiceMutation],
+  )
+
   return {
     session: sessionQuery.data,
     status,
@@ -75,6 +90,9 @@ export function useLiveInterview(sessionId: number) {
     turn: currentTurn(items),
     connection,
     submitAnswer,
+    submitVoice,
+    voiceUploading: voiceMutation.isPending,
+    voiceError: voiceMutation.isError,
     endSession: () => end.mutate(),
     isLoading: sessionQuery.isLoading,
   }
diff --git a/frontend/src/features/interview/ui/live/AnswerBubble.tsx b/frontend/src/features/interview/ui/live/AnswerBubble.tsx
index e0a49966..95f6af47 100644
--- a/frontend/src/features/interview/ui/live/AnswerBubble.tsx
+++ b/frontend/src/features/interview/ui/live/AnswerBubble.tsx
@@ -1,11 +1,30 @@
 import type { Message } from '@/domain/session'
 
 export function AnswerBubble({ message }: { message: Message }) {
+  const transcribing = !message.content?.trim()
+  const failed = transcribing && message.status === 'FAILED'
+
   return (
-    <div className="flex justify-end">
+    <div className="flex flex-col items-end gap-1">
       <div className="max-w-[80%] whitespace-pre-wrap rounded-lg rounded-tr-sm bg-primary px-4 py-3 text-body text-fg-on-primary shadow-sm">
-        {message.content}
+        {message.content?.trim() ? (
+          message.content
+        ) : (
+          <span className="inline-flex items-center gap-2 text-fg-on-primary/80">
+            {failed ? (
+              '음성 인식에 실패했어요. 다시 답변해 주세요.'
+            ) : (
+              <>
+                <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-fg-on-primary" />
+                음성 인식 중…
+              </>
+            )}
+          </span>
+        )}
       </div>
+      {message.audioFileUrl && (
+        <audio controls src={message.audioFileUrl} className="max-w-[80%]" preload="none" />
+      )}
     </div>
   )
 }
diff --git a/frontend/src/features/interview/ui/live/AnswerComposer.tsx b/frontend/src/features/interview/ui/live/AnswerComposer.tsx
index b2864eaf..a93a3856 100644
--- a/frontend/src/features/interview/ui/live/AnswerComposer.tsx
+++ b/frontend/src/features/interview/ui/live/AnswerComposer.tsx
@@ -2,15 +2,42 @@ import { useState } from 'react'
 import type { KeyboardEvent } from 'react'
 import { TextArea } from '@/shared/ui/TextArea'
 import { Button } from '@/shared/ui/Button'
+import { useVoiceRecorder } from '../../lib/media/useVoiceRecorder'
+
+function MicIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Z"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5 11a7 7 0 0 0 14 0M12 18v3"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
 
 export function AnswerComposer({
   disabled = false,
   onSubmit,
+  onSubmitVoice,
+  voiceUploading = false,
 }: {
   disabled?: boolean
   onSubmit: (content: string) => void
+  onSubmitVoice?: (audio: Blob) => void
+  voiceUploading?: boolean
 }) {
   const [value, setValue] = useState('')
+  const { status: recStatus, start, stop, cancel } = useVoiceRecorder()
+  const recording = recStatus === 'recording' || recStatus === 'requesting'
+  const voiceSupported = recStatus !== 'unsupported' && Boolean(onSubmitVoice)
 
   const submit = () => {
     const trimmed = value.trim()
@@ -26,20 +53,71 @@ export function AnswerComposer({
     }
   }
 
+  const finishRecording = async () => {
+    const blob = await stop()
+    if (blob && onSubmitVoice) onSubmitVoice(blob)
+  }
+
+  // 녹음/업로드 중에는 전용 바를 보여준다.
+  if (recording || voiceUploading) {
+    return (
+      <div className="flex items-center justify-between gap-3 border-t border-border bg-surface-raised px-4 py-3">
+        <span className="flex items-center gap-2 text-body text-fg">
+          {voiceUploading ? (
+            '음성 답변 업로드 중…'
+          ) : (
+            <>
+              <span className="inline-block h-2.5 w-2.5 animate-pulse rounded-full bg-danger" />
+              녹음 중… 답변이 끝나면 전송을 누르세요
+            </>
+          )}
+        </span>
+        {!voiceUploading && (
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" onClick={cancel}>
+              취소
+            </Button>
+            <Button onClick={finishRecording}>전송</Button>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
-    <div className="flex items-end gap-2 border-t border-border bg-surface-raised px-4 py-3">
-      <TextArea
-        value={value}
-        onChange={setValue}
-        onKeyDown={onKeyDown}
-        disabled={disabled}
-        maxLength={8000}
-        aria-label="답변 입력"
-        placeholder={disabled ? '질문을 기다리는 중…' : '답변을 입력하세요 (Enter 전송, Shift+Enter 줄바꿈)'}
-      />
-      <Button onClick={submit} disabled={disabled || value.trim().length === 0}>
-        전송
-      </Button>
+    <div className="flex flex-col gap-1 border-t border-border bg-surface-raised px-4 py-3">
+      <div className="flex items-end gap-2">
+        <TextArea
+          value={value}
+          onChange={setValue}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          maxLength={8000}
+          aria-label="답변 입력"
+          placeholder={
+            disabled ? '질문을 기다리는 중…' : '답변을 입력하세요 (Enter 전송, Shift+Enter 줄바꿈)'
+          }
+        />
+        {voiceSupported && (
+          <Button
+            variant="secondary"
+            onClick={start}
+            disabled={disabled}
+            aria-label="음성으로 답변"
+            title="음성으로 답변"
+          >
+            <MicIcon />
+          </Button>
+        )}
+        <Button onClick={submit} disabled={disabled || value.trim().length === 0}>
+          전송
+        </Button>
+      </div>
+      {recStatus === 'denied' && (
+        <span className="text-caption text-fg-muted">
+          마이크 권한이 거부되어 텍스트로만 답변할 수 있어요.
+        </span>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/features/interview/ui/live/ConversationThread.tsx b/frontend/src/features/interview/ui/live/ConversationThread.tsx
index 0d21640b..841c565f 100644
--- a/frontend/src/features/interview/ui/live/ConversationThread.tsx
+++ b/frontend/src/features/interview/ui/live/ConversationThread.tsx
@@ -17,11 +17,14 @@ export function ConversationThread({
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [items.length, awaitingQuestion])
 
+  // 가장 마지막 질문만 자동재생(초기 로드 시 과거 질문 일괄 재생 방지).
+  const lastQuestionKey = [...items].reverse().find(isQuestion)?.key
+
   return (
     <div className="flex h-full flex-col gap-3 overflow-y-auto px-4 py-6">
       {items.map((item) =>
         isQuestion(item) ? (
-          <QuestionBubble key={item.key} message={item} />
+          <QuestionBubble key={item.key} message={item} autoPlay={item.key === lastQuestionKey} />
         ) : (
           <AnswerBubble key={item.key} message={item} />
         ),
diff --git a/frontend/src/features/interview/ui/live/LiveInterview.tsx b/frontend/src/features/interview/ui/live/LiveInterview.tsx
index 78b5aa44..0de93778 100644
--- a/frontend/src/features/interview/ui/live/LiveInterview.tsx
+++ b/frontend/src/features/interview/ui/live/LiveInterview.tsx
@@ -8,8 +8,18 @@ import { SessionEndedPanel } from './SessionEndedPanel'
 import { InterviewLobby } from './InterviewLobby'
 
 export function LiveInterview({ sessionId }: { sessionId: number }) {
-  const { session, status, items, turn, connection, submitAnswer, endSession, isLoading } =
-    useLiveInterview(sessionId)
+  const {
+    session,
+    status,
+    items,
+    turn,
+    connection,
+    submitAnswer,
+    submitVoice,
+    voiceUploading,
+    endSession,
+    isLoading,
+  } = useLiveInterview(sessionId)
 
   if (isLoading || !session) {
     return (
@@ -36,6 +46,8 @@ export function LiveInterview({ sessionId }: { sessionId: number }) {
       <AnswerComposer
         disabled={turn !== 'AWAITING_ANSWER' || connection !== 'open'}
         onSubmit={submitAnswer}
+        onSubmitVoice={submitVoice}
+        voiceUploading={voiceUploading}
       />
     </div>
   )
diff --git a/frontend/src/features/interview/ui/live/QuestionBubble.tsx b/frontend/src/features/interview/ui/live/QuestionBubble.tsx
index 183fde30..62ef23a7 100644
--- a/frontend/src/features/interview/ui/live/QuestionBubble.tsx
+++ b/frontend/src/features/interview/ui/live/QuestionBubble.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import type { Message } from '@/domain/session'
 import { StatusBadge } from '@/shared/ui/StatusBadge'
 
@@ -8,11 +9,50 @@ const CATEGORY_LABEL: Record<string, string> = {
   BEHAVIORAL: '인성·행동',
 }
 
-export function QuestionBubble({ message }: { message: Message }) {
+function PlayIcon({ playing }: { playing: boolean }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+      {playing ? <path d="M8 6h3v12H8zM13 6h3v12h-3z" /> : <path d="M8 5v14l11-7z" />}
+    </svg>
+  )
+}
+
+// ttsAudioUrl 이 생기면(최신 질문일 때) 한 번 자동재생 시도.
+// 브라우저 자동재생 차단 시 조용히 실패 → 사용자가 버튼으로 재생.
+function useTtsPlayer(url: string | undefined, autoPlay: boolean) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playing, setPlaying] = useState(false)
+  const autoPlayedFor = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!url || !autoPlay || autoPlayedFor.current === url) return
+    autoPlayedFor.current = url
+    audioRef.current?.play().catch(() => {})
+  }, [url, autoPlay])
+
+  const toggle = () => {
+    const el = audioRef.current
+    if (!el) return
+    if (el.paused) el.play().catch(() => {})
+    else el.pause()
+  }
+
+  return { audioRef, playing, setPlaying, toggle }
+}
+
+export function QuestionBubble({
+  message,
+  autoPlay = false,
+}: {
+  message: Message
+  autoPlay?: boolean
+}) {
   const categoryLabel = message.category
     ? (CATEGORY_LABEL[message.category] ?? message.category)
     : null
   const hasMeta = Boolean(categoryLabel || message.targetEvidence)
+  const ttsUrl = message.ttsStatus === 'SUCCEEDED' ? message.ttsAudioUrl : undefined
+  const { audioRef, playing, setPlaying, toggle } = useTtsPlayer(ttsUrl, autoPlay)
 
   return (
     <div className="flex justify-start">
@@ -21,14 +61,33 @@ export function QuestionBubble({ message }: { message: Message }) {
           <div className="flex flex-wrap items-center gap-2">
             {categoryLabel && <StatusBadge tone="info">{categoryLabel}</StatusBadge>}
             {message.targetEvidence && (
-              <span className="text-caption text-fg-muted">
-                근거: {message.targetEvidence}
-              </span>
+              <span className="text-caption text-fg-muted">근거: {message.targetEvidence}</span>
             )}
           </div>
         )}
-        <div className="whitespace-pre-wrap rounded-lg rounded-tl-sm bg-surface-raised px-4 py-3 text-body text-fg shadow-sm">
-          {message.content}
+        <div className="rounded-lg rounded-tl-sm bg-surface-raised px-4 py-3 text-body text-fg shadow-sm">
+          <p className="whitespace-pre-wrap">{message.content}</p>
+          {ttsUrl && (
+            <div className="mt-2 flex items-center gap-2 border-t border-border pt-2">
+              <button
+                type="button"
+                onClick={toggle}
+                aria-label={playing ? '음성 일시정지' : '질문 음성 재생'}
+                className="inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 text-caption text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+              >
+                <PlayIcon playing={playing} />
+                {playing ? '일시정지' : '음성 듣기'}
+              </button>
+              <audio
+                ref={audioRef}
+                src={ttsUrl}
+                preload="none"
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onEnded={() => setPlaying(false)}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/src/shared/api/generated.ts b/frontend/src/shared/api/generated.ts
index f75192c0..f1fbee4c 100644
--- a/frontend/src/shared/api/generated.ts
+++ b/frontend/src/shared/api/generated.ts
@@ -845,6 +845,8 @@ export interface components {
             createdAt?: string;
             category?: string;
             targetEvidence?: string;
+            ttsAudioUrl?: string;
+            audioFileUrl?: string;
         };
         VoiceStreamBeginResponse: {
             /** Format: int64 */

From 2d02d7fc708b87ef9ab0655780e8e302e1bfd4c5 Mon Sep 17 00:00:00 2001
From: jmj <waysoleward01@naver.com>
Date: Wed, 3 Jun 2026 12:09:30 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix(interview):=20=EC=9D=8C=EC=84=B1=20plac?=
 =?UTF-8?q?eholder=20content=20=EC=84=BC=ED=8B=B0=EB=84=AC=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

음성 답변 placeholder 의 임시 content 가 null 이 아니라 리터럴
"(transcribing)" 임(백엔드 VOICE_TRANSCRIPTION_PENDING_TEXT).
빈 값 체크로는 못 걸러 "(transcribing)" 이 그대로 노출됨.

- domain/session: VOICE_TRANSCRIBING_TEXT 상수 + isTranscribing() 헬퍼
- AnswerBubble: isTranscribing 으로 판별 → "음성 인식 중…" 표시

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/domain/session/index.ts                  | 10 +++++++++-
 frontend/src/domain/session/lib/turn.ts               | 11 +++++++++++
 .../src/features/interview/ui/live/AnswerBubble.tsx   |  5 +++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/domain/session/index.ts b/frontend/src/domain/session/index.ts
index bd0488de..8b359c08 100644
--- a/frontend/src/domain/session/index.ts
+++ b/frontend/src/domain/session/index.ts
@@ -7,5 +7,13 @@ export type {
   JobCategory,
   MessageRole,
 } from './model/types'
-export { isQuestion, isAnswer, currentTurn, canSubmitAnswer, sessionProgress } from './lib/turn'
+export {
+  isQuestion,
+  isAnswer,
+  isTranscribing,
+  VOICE_TRANSCRIBING_TEXT,
+  currentTurn,
+  canSubmitAnswer,
+  sessionProgress,
+} from './lib/turn'
 export type { Turn } from './lib/turn'
diff --git a/frontend/src/domain/session/lib/turn.ts b/frontend/src/domain/session/lib/turn.ts
index f5e340f6..f3f455b0 100644
--- a/frontend/src/domain/session/lib/turn.ts
+++ b/frontend/src/domain/session/lib/turn.ts
@@ -10,6 +10,17 @@ export function isAnswer(message: Message): boolean {
   return message.role === 'INTERVIEWEE'
 }
 
+// 음성 답변 placeholder 의 임시 content (백엔드 InterviewMessage.VOICE_TRANSCRIPTION_PENDING_TEXT 와 동일).
+// STT 완료 전까지 이 값이 들어 있고, 완료되면 실제 transcript 로 교체된다.
+export const VOICE_TRANSCRIBING_TEXT = '(transcribing)'
+
+// STT 대기 중(transcript 아직 없음)인 음성 답변인지.
+export function isTranscribing(message: Message): boolean {
+  if (!isAnswer(message)) return false
+  const c = (message.content ?? '').trim()
+  return c === '' || c === VOICE_TRANSCRIBING_TEXT
+}
+
 export function currentTurn(messages: Message[]): Turn {
   const last = messages[messages.length - 1]
   // 마지막이 '내용이 있는' 면접관 질문일 때만 답변 차례. 질문 생성 중(빈 content)
diff --git a/frontend/src/features/interview/ui/live/AnswerBubble.tsx b/frontend/src/features/interview/ui/live/AnswerBubble.tsx
index 95f6af47..407ecb1f 100644
--- a/frontend/src/features/interview/ui/live/AnswerBubble.tsx
+++ b/frontend/src/features/interview/ui/live/AnswerBubble.tsx
@@ -1,13 +1,14 @@
+import { isTranscribing } from '@/domain/session'
 import type { Message } from '@/domain/session'
 
 export function AnswerBubble({ message }: { message: Message }) {
-  const transcribing = !message.content?.trim()
+  const transcribing = isTranscribing(message)
   const failed = transcribing && message.status === 'FAILED'
 
   return (
     <div className="flex flex-col items-end gap-1">
       <div className="max-w-[80%] whitespace-pre-wrap rounded-lg rounded-tr-sm bg-primary px-4 py-3 text-body text-fg-on-primary shadow-sm">
-        {message.content?.trim() ? (
+        {!transcribing ? (
           message.content
         ) : (
           <span className="inline-flex items-center gap-2 text-fg-on-primary/80">