상담사는 통화 중 생성되는 전사를 확인하고, 관리자는 여러 상담의 진행 상황을 함께 살펴볼 수 있어야 했습니다. 통화 시작과 종료, 연결 중단에 따라 달라지는 상태를 화면에 반영하고, 복구 중에도 읽던 대화를 유지하도록 구현했습니다.

• 통화 감지와 실시간 전사 수신 대기 중에는 1초 간격으로 현재 통화를 조회하고, 통화가 시작되면 폴링을 멈추고 해당 통화의 SSE를 구독했습니다. 통화가 종료되거나 연결 복구를 중단한 경우에는 폴링을 재개해 다음 통화를 감지하도록 구현했습니다.

• 임시 전사 갱신과 확정 발화 반영 인식 중인 문장은 PARTIAL 수신에 따라 실시간으로 갱신하고, 서버에서 ITN 등 후처리를 거친 FINAL 결과를 받으면 해당 문장을 확정 전사로 대체했습니다. 후처리 결과의 도착 순서가 달라도 대화 흐름을 유지하도록 확정 발화를 시작 시각순으로 정렬했습니다. 재연결 중에는 기존 확정 전사를 유지하고, 서버 스냅샷에 포함된 누적 발화와 현재 인식 중인 문장으로 화면 상태를 맞췄습니다.

• 유지보수성을 고려한 공통 컴포넌트 설계 상담사와 관리자 화면의 유지보수성을 높이기 위해, 전사 화면을 카드 틀, 검색, 대화 목록과 스크롤, 분석 결과와 연결 안내 영역으로 나누어 공통 컴포넌트로 구성했습니다. 전사 수신과 검색 로직은 공통 훅으로 분리해 변경 사항을 한곳에서 반영하고, 역할별 통화 정보와 추가 기능은 각 화면에서 조합하도록 설계했습니다.

• 연결 중단 원인에 따른 복구와 안내 일시적인 통신 중단에는 제한된 횟수로 자동 재연결을 시도하고, 인증이 만료되면 토큰을 갱신한 뒤 다시 연결하도록 구현했습니다. 권한이 없거나 통화를 찾을 수 없는 경우에는 재시도를 중단하고 안내 메시지를 표시했습니다. 다른 탭으로 이동할 때도 연결을 유지해 불필요한 재연결이 발생하지 않도록 설정했습니다.

상담사가 통화의 시작부터 종료까지 전사를 확인하고, 관리자가 여러 상담의 진행 상황을 함께 살펴볼 수 있는 화면을 구현했습니다. 재연결 중에도 기존 확정 전사를 유지해 복구를 기다리면서 대화 내용을 확인할 수 있도록 했습니다.

통화 종료 후 상담사가 AI가 생성한 분류와 요약을 확인하고, 지난 상담은 대화 내용과 녹취를 함께 살펴볼 수 있어야 했습니다. 통화 직후의 분석 결과 확인부터 상담 이력 검색과 문장별 녹취 재생까지 이어지는 화면 흐름을 구현했습니다.

• AI 원본과 저장된 확정 결과 구분 분류와 요약은 AI가 생성한 이후에도 수정될 수 있어, 원본과 저장된 최종 결과를 구분했습니다. SSE로 받은 AI 결과는 즉시 표시하고, 분석 종료 후 상세 API를 조회해 저장된 결과를 반영했습니다.

• 분석 종료 이벤트를 놓친 경우 보완 통화 종료 후 연결이 끊겨 분석 완료 이벤트를 받지 못한 경우에도 상세 API로 결과를 확인하도록 구성했습니다. 조회가 실패하면 기존 표시를 유지하고 제한적으로 재시도하도록 처리했습니다.

• 전사 문장과 녹취 재생 시점 연결 상담 이력에서 전사 문장을 선택하면 녹취를 해당 발화의 시작 시점으로 이동하도록 구현했습니다. 재생 중인 발화를 표시하고, 사용자가 직접 과거 대화를 탐색할 때는 자동 따라가기를 중단하도록 구성했습니다.

통화 종료 후 AI 원본과 저장된 최종 결과를 구분해 확인하고, 상담 이력에서는 대화 내용과 녹취를 함께 살펴볼 수 있도록 구현했습니다.

여러 탭에서 사용하는 상담 환경에서는 토큰 갱신 요청이 겹치거나, 다른 탭의 비활성 상태로 인해 상담 중 로그아웃되는 문제를 처리해야 했습니다. 탭 간 인증 상태를 조율하고 실제 통화 여부를 세션 관리에 반영했습니다.

• 토큰 갱신 요청 조율과 결과 공유 Web Lock으로 탭 간 갱신 요청을 직렬화하고, BroadcastChannel로 갱신된 Access Token을 전달했습니다. 수신 탭은 전달받은 토큰을 별도의 갱신 요청 없이 적용하도록 구성했습니다.

• 로그아웃 이후 토큰 적용 차단 로그아웃이 시작된 탭은 늦게 도착한 갱신 응답이나 다른 탭이 전달한 토큰을 적용하지 않도록 했습니다. 토큰의 만료 시각을 비교해 오래된 값이 현재 상태를 덮지 않도록 처리했습니다.

• 통화 상태를 반영한 비활성 처리 탭 간 활동 시간과 로그아웃 상태를 동기화하고, 실제 통화 중에는 비활성 타이머를 일시정지했습니다. 네트워크와 서버 오류는 인증 무효와 구분해 일시적인 통신 실패가 전체 로그아웃으로 확대되는 경로를 수정했습니다.

여러 탭의 인증 갱신과 로그아웃을 동기화하고, 통화 중에는 비활성 로그아웃을 일시정지하도록 구성했습니다. 로그아웃 이후 늦게 도착한 응답으로 인증 상태가 다시 적용되는 경로도 차단했습니다.