dpdpdndn 블로그

STK6-06-FE-챗봇-UI

NEW2 min read

[STK6-06] FE 챗봇 UI 컴포넌트

작업 내용 (설계 의도)

변경 사항

기존 FE(Next.js)에 챗봇 페이지(/chat)를 추가한다. 메시지 입력창, 대화 목록, SSE 스트리밍 수신을 구현한다. sessionId는 crypto.randomUUID()로 생성해 로컬 세션 동안 유지한다.

선행 티켓: STK6-05 (Chat API 완료 후 연동)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant UI as ChatPage
    participant BE as ChatApiController
    U->>UI: 메시지 입력 후 전송
    UI->>BE: POST /api/chat/message (SSE)
    BE-->>UI: 스트리밍 텍스트 청크
    UI-->>U: 실시간 타이핑 효과로 표시

클래스 의존

flowchart LR
    ChatPage --> MessageList
    ChatPage --> MessageInput
    ChatPage -->|fetch SSE| ChatAPI[/api/chat/message]

테스트 케이스

  • 메시지 전송 시 사용자 메시지가 즉시 목록에 추가된다.
  • SSE 청크 수신 중 어시스턴트 메시지가 점진적으로 표시된다.
  • 빈 메시지 전송 버튼이 비활성화된다.
  • 스트리밍 중 에러 발생 시 “응답 중 오류가 발생했습니다” 메시지를 표시한다.
  • 새로고침 후 새 sessionId로 시작된다 (히스토리 초기화 허용).

그래프 뷰