docs: 프론트엔드-로빙 API 연결 트러블슈팅 문서 추가

- frontend-customer와 rb10508_test 연결 과정
- OpenAI → Gemini 전환으로 API 키 문제 해결
- 실시간 채팅 구현 완료

troubleshooting/250730_happybell80_프론트엔드로빙연결.md

@@ -0,0 +1,173 @@
+# 프론트엔드와 로빙 API 연결 구현
+
+**날짜**: 2025-07-30  
+**작업자**: happybell80 & Claude  
+**관련 프로젝트**: frontend-customer, rb10508_test, nginx-deploy
+
+## 오후 1시 00분
+
+### 프론트엔드-로빙 연결 요구사항
+
+**목표**:
+- 51123 서버의 프론트엔드(5173)와 51124 서버의 rb10508_test(10508) 연결
+- 실제 채팅 기능 구현
+
+**현재 상황**:
+- 프론트엔드는 하드코딩된 메시지만 표시
+- 로빙과의 실제 통신 없음
+- DB 기반 사용자-로빙 매핑 시스템 미구축
+
+## 오후 1시 05분
+
+### 아키텍처 분석 및 연결 전략
+
+**nginx 프록시 확인**:
+```nginx
+# /rb10508/ 경로가 이미 설정됨
+location ^~ /rb10508/ {
+    proxy_pass http://192.168.219.52:10508/;
+}
+```
+
+**rb10508_test API 엔드포인트 발견**:
+```python
+# app/api/dev_endpoints.py
+@router.post("/message")
+async def test_message(message: dict):
+    # user_message, user_id 받아서 처리
+```
+
+**연결 전략**:
+1. 환경변수로 임시 하드코딩 (DB 구축 전)
+2. API 서비스 생성
+3. ChatInterface 컴포넌트 수정
+
+## 오후 1시 10분
+
+### 프론트엔드 구현
+
+**1. 환경변수 설정** (`.env.local`):
+```env
+VITE_AUTH_SERVER_URL=https://auth.ro-being.com
+VITE_API_URL=http://localhost:8000
+VITE_ROBING_API_URL=https://ro-being.com/rb10508  # 임시 하드코딩
+```
+
+**2. 로빙 API 서비스 생성** (`src/services/robing-api.ts`):
+- `sendMessage()`: 메시지 전송
+- `checkHealth()`: 연결 상태 확인
+- 에러 처리 클래스 구현
+- TypeScript 타입 정의
+
+**3. ChatInterface 컴포넌트 수정**:
+- 실제 API 호출 통합
+- 로딩 상태 표시
+- 에러 처리 및 토스트 알림
+- Health Check로 연결 상태 표시
+
+## 오후 1시 15분
+
+### 연결 테스트 및 문제 발견
+
+**테스트 결과**:
+- ✅ 프론트엔드 → nginx → rb10508 연결 성공
+- ✅ CORS 설정 정상 작동
+- ❌ OpenAI API 키 문제로 응답 실패
+
+**문제 분석**:
+```
+Error processing message: Error code: 401 - 
+{'error': {'message': 'Incorrect API key provided: your-open*-key'}}
+```
+
+**원인**:
+- rb10508_test의 AI 서비스가 OpenAI 사용
+- `.env`의 OPENAI_API_KEY가 더미값
+- 컨테이너에 환경변수 반영 안됨
+
+## 오후 1시 18분
+
+### AI 서비스를 Gemini로 전환
+
+**해결 방안**:
+- 이미 설정된 GEMINI_API_KEY 활용
+- `/api/dev/message` 엔드포인트 수정
+
+**수정 내용**:
+```python
+# app/api/dev_endpoints.py
+# 변경 전
+response = await ai_service.process_message(user_message, user_id)
+
+# 변경 후  
+response = await gemini_service.process_message(user_message, user_id)
+```
+
+**배포**:
+```bash
+git add -A && git commit -m "fix: AI 서비스를 OpenAI에서 Gemini로 변경"
+git push origin main
+# Gitea Actions가 자동 배포
+```
+
+## 오후 1시 20분
+
+### 프론트엔드 변경사항 푸시
+
+**커밋 내용**:
+- robing-api.ts 서비스 생성
+- ChatInterface 컴포넌트 API 통합
+- Health Check 및 연결 상태 표시
+- 로딩 상태 및 에러 처리
+
+**git 작업**:
+```bash
+git pull --rebase  # 원격 변경사항 동기화
+git push origin main
+```
+
+## 구현 결과
+
+### 완성된 기능
+1. **실시간 채팅**: 프론트엔드에서 메시지 입력 → Gemini AI 응답
+2. **연결 상태 표시**: Health Check로 로빙 상태 확인
+3. **에러 처리**: 네트워크 오류 시 사용자 친화적 메시지
+4. **로딩 상태**: 응답 대기 중 스피너 표시
+
+### 향후 개선사항
+1. **DB 기반 사용자-로빙 매핑**
+   - auth-server에 users, workspace_members 테이블 추가
+   - 동적 로빙 할당 시스템
+   
+2. **실시간 통신**
+   - WebSocket 또는 SSE 구현
+   - 양방향 실시간 메시지
+
+3. **스킬 시스템 통합**
+   - 스킬 사용 시 UI 피드백
+   - 스킬 결과 표시
+
+## 교훈
+
+1. **환경변수 관리의 중요성**
+   - 개발/운영 환경 분리
+   - 민감한 정보는 실제 값으로 설정
+   - 컨테이너 재시작 시 환경변수 반영 확인
+
+2. **단계적 구현의 효과**
+   - 임시 하드코딩으로 빠른 프로토타이핑
+   - DB 구축은 별도 작업으로 분리
+   - 핵심 기능 우선 구현
+
+3. **에러 처리 우선**
+   - API 연결 전 Health Check
+   - 사용자 친화적 에러 메시지
+   - 로딩/오프라인 상태 명확히 표시
+
+4. **서비스 선택의 유연성**
+   - OpenAI → Gemini 전환이 한 줄 수정으로 가능
+   - 서비스 추상화의 장점
+   - 백업 AI 서비스 준비의 중요성
+
+---
+**작성 완료**: 2025-07-30 13:22