2.5 KiB
2.5 KiB
프론트엔드 대화 순서 역전 문제
작성일: 2025-09-03
작성자: 51123 서버 관리자
상태: ✅ 최종 해결 완료 (2025-09-03 fc83a73)
영향: 대화 흐름 이해 어려움, 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. 해결 완료
1차 수정 (878be9b - 부분 해결)
- reverse() 제거로 대화쌍 내부 순서는 해결
- 전체 시간순 문제 발생 (최신이 위로)
최종 해결 (fc83a73 - 완전 해결)
- reverse() 복구: 시간순 정렬 유지
- 정렬 로직 추가: timestamp 오름차순 + sender:'user' 우선
- 라인 157-167: loadMoreMessages 수정
- 라인 237-251: 초기 로드 수정
- 결과: 과거→최신 시간순 + 사용자→로빙 대화쌍 순서 모두 정상
7. 추가 확인 사항
- DB 저장 문제: conversation_logs 테이블에 Slack 대화 저장 안 됨 (별개 이슈)
- API 엔드포인트: /api/conversations/recent 404 에러 (51124 서버)
- 테이블 컬럼: message, response, timestamp 사용 (user_message 컬럼 없음)