프론트엔드 대화 순서 문제 해결 완료
- reverse() 제거로 대화 순서 정상화 - 커밋 878be9b 적용 - 사용자 발화 → 로빙 답변 순서로 표시
This commit is contained in:
parent
c90c3b1c99
commit
1c5c876608
@ -0,0 +1,70 @@
|
||||
# 프론트엔드 대화 순서 역전 문제
|
||||
|
||||
## 작성일: 2025-09-03
|
||||
## 작성자: 51123 서버 관리자
|
||||
## 상태: ✅ 해결 완료
|
||||
## 영향: 대화 흐름 이해 어려움, UX 저하
|
||||
|
||||
---
|
||||
|
||||
## 1. 문제 상황
|
||||
- 프론트엔드 이전 대화 표시창에서 대화 순서 반대로 표시
|
||||
- **현재**: 로빙 답변 → 사용자 발화 순
|
||||
- **정상**: 사용자 발화 → 로빙 답변 순
|
||||
|
||||
## 2. 증상 예시
|
||||
```
|
||||
9/2 오후 2:24
|
||||
로빙 하이. ← 사용자 발화 (두 번째 표시)
|
||||
|
||||
9/2 오후 2:24
|
||||
RoBeing
|
||||
김종태님, 안녕하세요! ← 로빙 답변 (철 번째 표시)
|
||||
```
|
||||
|
||||
## 3. 확인된 원인
|
||||
1. **이중 역전 문제**: chat-interface.tsx 라인 157, 227에서 `response.messages.reverse()` 사용
|
||||
2. **서버 응답 순서**: 최신 메시지부터 내림차순 (최신→과거)
|
||||
3. **클라이언트 처리**: reverse()로 뒤집어서 과거→최신 순으로 변경
|
||||
4. **신규 메시지 추가**: `[...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() 제거
|
||||
```javascript
|
||||
// 현재 코드 (chat-interface.tsx:157, 227)
|
||||
response.messages.reverse() // 이 부분 제거
|
||||
|
||||
// 수정 후
|
||||
response.messages // reverse() 없이 그대로 사용
|
||||
```
|
||||
|
||||
### 5.2 메시지 추가 로직 수정
|
||||
```javascript
|
||||
// 현재: 새 메시지를 앞에 추가
|
||||
[...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 컬럼 없음)
|
||||
Loading…
x
Reference in New Issue
Block a user