[FRT-58] API 연결 (AI 채팅, 탭)

[nahyeongjin1]

JIRA Task 🔖

• Ticket: FRT-58
• Branch : feature/FRT-58

작업 내용 📌

• AI 채팅 UI와 핵심 로직 구현
• 채팅 탭 CRUD 기능 및 백엔드 API 연동
• AI 답변이 실시간처럼 보이는 스트리밍 효과 적용
• 타입 충돌, 렌더링 오류 등 주요 버그 수정

세부 작업 목록 ✅

• AI 채팅 UI 컴포넌트 개발
  • AiChatPanel: 메인 컨테이너
  • ChatHeader: 채팅방 이름, History 접근
  • ChatHistoryPanel: 탭 CRUD 관리
  • ChatMessage: 메시지 유형별 스타일 구분
  • ChatInput: 입력 및 전송 UI
• IPC 기반 스트리밍 구현
  • Main (handlers.ts): AI 응답을 조각으로 나눠 전송 → "Fake Streaming"
  • Renderer (ai-chat-panel.tsx): window.api.on으로 수신 후 점진적 렌더링
• 버그 수정
  • 타입 충돌 해결: preload/renderer 간 window.api 타입 통합, tsconfig 수정
  • 스트리밍 렌더링 오류: 빈 말풍선 배경 미표시 문제 해결
  • 상태 업데이트 문제: useChat + 함수형 setMessages로 stale closure 해결

변경 사항 🖥️

AI 채팅	채팅 탭

테스트 방법 🧑🏻‍🔬

1. 기본 기능

• 앱 실행 시 최신 채팅 자동 로드 확인
• 메시지 전송 후 AI 답변이 실시간으로 채워지는지 확인

2. 채팅 내역 관리

• History 패널 열기 → 새 탭 생성/수정/전환/삭제 확인
• 모든 CRUD 동작 시 UI 즉시 반영 확인

3. 안정성

• 빠른 전송·탭 전환에도 오류 없는지 확인
• 예상 결과: 타입·파싱 오류 없이 안정 동작

참고 사항 📂

- 아직 AI 팀에서의 DB 연동 작업이 완료되지 않아 실제 DB 정보를 가져오는 답변은 확인 불가

[6-keem]

좋아 빠르게 가