DOCS/troubleshooting/250818_happybell80_대화히스토리구현.md

카톡 스타일 대화 히스토리 구현

날짜: 2025-08-18
작업자: happybell80 & Claude
관련 프로젝트: rb10508_micro, frontend-customer

오후 12시 00분 - 요구사항 분석

사용자 요구사항

• 카카오톡처럼 대화 히스토리를 볼 수 있도록 구현
• 날짜 구분선 표시 (오늘, 어제, 날짜 형식)
• 무한 스크롤로 이전 대화 로드
• 읽지 않은 메시지나 대화방 개념은 불필요

시스템 구조 파악

• 독립적인 로빙들 (rb8001, rb10508_micro, rb10408)
• 로그인 시 사용자별 로빙 배정
• Gateway가 라우팅 (프론트엔드 → Gateway → 로빙)
• 각 로빙이 독립적인 ChromaDB 보유

오후 12시 30분 - 백엔드 구현

1. 환경변수 설정 추가

# app/config.py
MESSAGE_BATCH_SIZE: int = int(os.getenv("MESSAGE_BATCH_SIZE", 30))
SCROLL_THRESHOLD: int = int(os.getenv("SCROLL_THRESHOLD", 100))
MAX_MESSAGES_IN_DOM: int = int(os.getenv("MAX_MESSAGES_IN_DOM", 200))

2. API 엔드포인트 구현

# app/api/endpoints.py
@router.get("/messages")  # 페이지네이션된 메시지 조회
@router.get("/config")    # 프론트엔드 설정 동기화

함수형 프로그래밍 원칙 준수:

• 환경변수로 설정 관리 (하드코딩 없음)
• 순수 함수로 구현
• 불변성 유지

오후 1시 00분 - 프론트엔드 구현

1. robing-api.ts 확장

• getConfig(): 백엔드 설정 가져오기
• getMessages(): 페이지네이션 지원 메시지 조회

2. ChatInterface 컴포넌트 개선

• Intersection Observer로 무한 스크롤
• 날짜 구분선 렌더링 로직
• 기존 파일 수정만으로 구현 (새 파일 생성 없음)

오후 1시 15분 - API 경로 문제 발견

문제

• API 호출 시 404 Not Found
• /rb10508/api/config 접근 불가

원인

# app/main.py
app.include_router(api_router, prefix="/api")  # 라우터 프리픽스

# app/api/endpoints.py
@router.get("/api/config")  # 잘못된 경로 (중복)

결과: /api + /api/config = /api/api/config

해결

@router.get("/config")    # 올바른 경로
@router.get("/messages")  # 올바른 경로

교훈

1. 라우터 프리픽스 확인 필수

• 엔드포인트 추가 전 main.py에서 라우터 등록 방식 확인
• 프리픽스와 엔드포인트 경로 중복 주의

2. 함수형 프로그래밍 원칙

• 설정값 하드코딩 금지 → 환경변수 사용
• 새 파일 생성 최소화 → 기존 파일 수정
• 코드 재사용성 확인

3. 테스트 환경 관리

• 로컬 포트 충돌 주의 (서버 포트와 겹치지 않도록)
• 테스트 파일은 즉시 삭제
• 불필요한 의존성 추가 금지 (Playwright 같은)

4. Git 커밋 원칙

• git add . 사용 (선택적 add 대신)
• 의존성 변경은 신중하게 검토

최종 결과

구현된 기능

1. 무한 스크롤: 위로 스크롤 시 이전 메시지 30개씩 로드
2. 날짜 구분선: "오늘", "어제", "2024년 12월 25일 월요일" 형식
3. 설정 동기화: 백엔드에서 배치 크기 등 설정 제공

배포 상태

• rb10508_micro: b0003cd (API 경로 수정)
• frontend-customer: c3a38e7 (카톡 스타일 UI)

API 엔드포인트

• GET /rb10508/api/config - 설정 조회
• GET /rb10508/api/messages?before={timestamp}&limit={number} - 메시지 조회