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 ( +
+ +
+ ) + } + + const items = [...(data ?? [])].sort( + (a, b) => (a.sequenceNumber ?? 0) - (b.sequenceNumber ?? 0), + ) + if (items.length === 0) return null + + return ( +
+

질문 & 답변

+
+ {items.map((m) => + isQuestion(m) ? ( + + ) : ( + + ), + )} +
+
+ ) +} 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() { )} - {data && } + {data && ( + <> + + + + )}