ivada-infra/DOCS

happybell80 1c5c876608 프론트엔드 대화 순서 문제 해결 완료

- reverse() 제거로 대화 순서 정상화
- 커밋 878be9b 적용
- 사용자 발화 → 로빙 답변 순서로 표시

2025-09-03 14:48:37 +09:00

2.4 KiB

Raw Blame History

프론트엔드 대화 순서 역전 문제

작성일: 2025-09-03

작성자: 51123 서버 관리자

상태: ✅ 해결 완료

영향: 대화 흐름 이해 어려움, UX 저하

1. 문제 상황

프론트엔드 이전 대화 표시창에서 대화 순서 반대로 표시
현재: 로빙 답변 → 사용자 발화 순
정상: 사용자 발화 → 로빙 답변 순

2. 증상 예시

9/2 오후 2:24
로빙 하이.            ← 사용자 발화 (두 번째 표시)

9/2 오후 2:24
RoBeing
김종태님, 안녕하세요!   ← 로빙 답변 (철 번째 표시)

3. 확인된 원인

이중 역전 문제: chat-interface.tsx 라인 157, 227에서 response.messages.reverse() 사용
서버 응답 순서: 최신 메시지부터 내림차순 (최신→과거)
클라이언트 처리: reverse()로 뒤집어서 과거→최신 순으로 변경
신규 메시지 추가: [...newMessages.map(), ...prev] 새 메시지를 앞에 추가

4. 확인된 정보

컴포넌트 파일: frontend-customer/src/components/chat-interface.tsx
API 호출: robeing-api.ts:150-162 getMessages() 함수
API 엔드포인트: /api/conversations
timestamp 필드: 문자열 타입
sender 구분: 'user' | 'robeing'

5. 해결 방안 (로컬 개발자 작업)

5.1 reverse() 제거

// 현재 코드 (chat-interface.tsx:157, 227)
response.messages.reverse()  // 이 부분 제거

// 수정 후
response.messages  // reverse() 없이 그대로 사용

5.2 메시지 추가 로직 수정

// 현재: 새 메시지를 앞에 추가
[...newMessages.map(), ...prev]

// 수정: 순서 조정 필요시
[...prev, ...newMessages.map()]

6. 해결 완료

수정 내역

커밋: 878be9b - 대화 순서 정상화
수정 파일: chat-interface.tsx
라인 157: response.messages.reverse() → response.messages
라인 227: prevMessages.messages.reverse() → prevMessages.messages
메시지 추가 로직: [...newMessages.map(), ...prev] 유지
결과: 사용자 발화 → 로빙 답변 순서로 정상 표시

7. 추가 확인 사항

DB 저장 문제: conversation_logs 테이블에 Slack 대화 저장 안 됨 (별개 이슈)
API 엔드포인트: /api/conversations/recent 404 에러 (51124 서버)
테이블 컬럼: message, response, timestamp 사용 (user_message 컬럼 없음)