fix(fe): 프론트 녹음 화자 분리 처리 수정 #199

frontend/src/components/checklist/RecordingModals.test.js

@@ -46,7 +46,7 @@ describe('RecordingTextModal', () => {
     [{ isLoading: true }, '녹음 내용을 불러오고 있어요.'],
     [{ errorMessage: '조회 실패' }, '조회 실패'],
     [{ text: '' }, '변환된 녹음 텍스트가 아직 없어요.'],
-    [{ text: '첫 줄\n둘째 줄' }, '첫 줄\n둘째 줄'],
+    [{ text: '화자 정보 없는 녹음' }, '화자 정보 없는 녹음'],
   ])('조회 상태에 맞는 본문을 표시한다', (state, message) => {
     const wrapper = mount(RecordingTextModal, {
       props: { open: true, ...state },
@@ -55,6 +55,23 @@ describe('RecordingTextModal', () => {
     expect(wrapper.text()).toContain(message);
   });
 
+  test('백엔드 화자 번호를 A와 B로 바꾸고 화자마다 별도 줄로 표시한다', () => {
+    const wrapper = mount(RecordingTextModal, {
+      props: {
+        open: true,
+        text: '화자 1: 첫 번째 발화 이어지는 발화\n화자 2: 두 번째 발화\n화자 1: 다시 첫 번째 화자',
+      },
+    });
+
+    expect(
+      wrapper.findAll('.recording-text-modal__speaker-line').map((line) => line.text()),
+    ).toEqual([
+      'A: 첫 번째 발화 이어지는 발화',
+      'B: 두 번째 발화',
+      'A: 다시 첫 번째 화자',
+    ]);
+  });
+
   test('모달 shell 닫힘을 상위로 전달한다', async () => {
     const wrapper = mount(RecordingTextModal, { props: { open: true } });
     await wrapper.get('.shell-close').trigger('click');

frontend/src/components/checklist/RecordingTextModal.vue

@@ -10,7 +10,28 @@ const props = defineProps({
   errorMessage: { type: String, default: '' },
 });
 const emit = defineEmits(['close']);
-const hasText = computed(() => Boolean(props.text.trim()));
+const transcriptLines = computed(() => {
+  const speakerAliases = new Map();
+
+  return props.text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const speakerLine = line.match(/^화자\s+([^:]+):\s*(.*)$/);
+      if (!speakerLine) return line;
+
+      const [, speaker, content] = speakerLine;
+      if (!speakerAliases.has(speaker)) {
+        speakerAliases.set(
+          speaker,
+          String.fromCharCode(65 + speakerAliases.size),
+        );
+      }
+      return `${speakerAliases.get(speaker)}: ${content}`;
+    });
+});
+const hasText = computed(() => transcriptLines.value.length > 0);
 </script>
 
 <template>
@@ -29,7 +50,13 @@ const hasText = computed(() => Boolean(props.text.trim()));
         class="recording-text-modal__error mb-0 text-center"
         role="alert"
       >{{ errorMessage }}</p>
-      <p v-else-if="hasText" class="recording-text-modal__text mb-0">{{ text }}</p>
+      <div v-else-if="hasText" class="recording-text-modal__text">
+        <p
+          v-for="(line, index) in transcriptLines"
+          :key="`${index}-${line}`"
+          class="recording-text-modal__speaker-line mb-0"
+        >{{ line }}</p>
+      </div>
       <p v-else class="recording-text-modal__empty mb-0 text-center">
         변환된 녹음 텍스트가 아직 없어요.
       </p>
@@ -52,6 +79,9 @@ const hasText = computed(() => Boolean(props.text.trim()));
   line-height: 1.75;
   white-space: pre-wrap;
 }
+.recording-text-modal__speaker-line + .recording-text-modal__speaker-line {
+  margin-top: 12px;
+}
 .recording-text-modal__empty {
   padding: 24px 0;
   color: var(--black-300);