From 777fad570dee3d5a056e69125d24094cc16dd6b3 Mon Sep 17 00:00:00 2001
From: jmj <waysoleward01@naver.com>
Date: Wed, 3 Jun 2026 12:14:16 +0900
Subject: [PATCH] =?UTF-8?q?feat(feedback):=20=ED=94=BC=EB=93=9C=EB=B0=B1?=
 =?UTF-8?q?=20=ED=99=94=EB=A9=B4=EC=97=90=20=EC=A7=88=EB=AC=B8/=EB=8B=B5?=
 =?UTF-8?q?=EB=B3=80=20=EC=9B=90=EB=AC=B8(transcript)=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

피드백 응답엔 종합 점수·요약만 있어 문항별 내용이 없음. 종료된
세션의 메시지를 그대로 보여달라는 요청 반영.

- features/interview: InterviewTranscript(읽기 전용) 추가 —
  GET /messages 로 시퀀스 정렬, 라이브 질문/답변 버블 재사용
  (음성 질문 TTS 재생·음성 답변 재생도 그대로 노출)
- SessionFeedbackPage: 리포트 아래 transcript 렌더

공개 공유 페이지(/share)는 메시지 API가 인증 전용이라 제외.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/features/interview/index.ts      |  1 +
 .../interview/ui/InterviewTranscript.tsx      | 39 +++++++++++++++++++
 .../ui/SessionFeedbackPage.tsx                |  8 +++-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/interview/ui/InterviewTranscript.tsx

diff --git a/frontend/src/features/interview/index.ts b/frontend/src/features/interview/index.ts
index ecc69d87..37eab52b 100644
--- a/frontend/src/features/interview/index.ts
+++ b/frontend/src/features/interview/index.ts
@@ -1,4 +1,5 @@
 export { LiveInterview } from './ui/live/LiveInterview'
+export { InterviewTranscript } from './ui/InterviewTranscript'
 export { InterviewSetupForm } from './ui/setup/InterviewSetupForm'
 export type { DocOption } from './ui/setup/ContextDocumentPicker'
 export { useCreateSession } from './model/useCreateSession'
diff --git a/frontend/src/features/interview/ui/InterviewTranscript.tsx b/frontend/src/features/interview/ui/InterviewTranscript.tsx
new file mode 100644
index 00000000..9a1a10e2
--- /dev/null
+++ b/frontend/src/features/interview/ui/InterviewTranscript.tsx
@@ -0,0 +1,39 @@
+import { isQuestion } from '@/domain/session'
+import { Spinner } from '@/shared/ui/Spinner'
+import { useSessionMessages } from '../model/useSessionMessages'
+import { QuestionBubble } from './live/QuestionBubble'
+import { AnswerBubble } from './live/AnswerBubble'
+
+// 종료된 세션의 질문/답변 원문(읽기 전용). 라이브 버블을 재사용해
+// 음성 질문 재생(TTS)·음성 답변 재생도 그대로 노출한다.
+export function InterviewTranscript({ sessionId }: { sessionId: number }) {
+  const { data, isLoading } = useSessionMessages(sessionId)
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Spinner />
+      </div>
+    )
+  }
+
+  const items = [...(data ?? [])].sort(
+    (a, b) => (a.sequenceNumber ?? 0) - (b.sequenceNumber ?? 0),
+  )
+  if (items.length === 0) return null
+
+  return (
+    <section className="flex flex-col gap-4">
+      <h2 className="text-h6 text-fg">질문 &amp; 답변</h2>
+      <div className="flex flex-col gap-3">
+        {items.map((m) =>
+          isQuestion(m) ? (
+            <QuestionBubble key={m.id} message={m} />
+          ) : (
+            <AnswerBubble key={m.id} message={m} />
+          ),
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/pages/SessionFeedback/ui/SessionFeedbackPage.tsx b/frontend/src/pages/SessionFeedback/ui/SessionFeedbackPage.tsx
index 5abc9035..299733fa 100644
--- a/frontend/src/pages/SessionFeedback/ui/SessionFeedbackPage.tsx
+++ b/frontend/src/pages/SessionFeedback/ui/SessionFeedbackPage.tsx
@@ -3,6 +3,7 @@ import { SiteNav } from '@/widgets/site-nav'
 import { SiteFooter } from '@/widgets/site-footer'
 import { Button } from '@/shared/ui/Button'
 import { FeedbackReport, useFeedback } from '@/features/feedback'
+import { InterviewTranscript } from '@/features/interview'
 
 export default function SessionFeedbackPage() {
   const { id } = useParams<{ id: string }>()
@@ -38,7 +39,12 @@ export default function SessionFeedbackPage() {
           </div>
         )}
 
-        {data && <FeedbackReport feedback={data} shareable />}
+        {data && (
+          <>
+            <FeedbackReport feedback={data} shareable />
+            <InterviewTranscript sessionId={sessionId} />
+          </>
+        )}
       </main>
       <SiteFooter />
     </div>