Merge pull request #72 from Team-StackUp/feature/feedback-transcript

feat(feedback): 피드백 화면에 질문/답변 원문(transcript) 표시

Author: i3months

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'

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>
+  )
+}

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>