diff --git a/troubleshooting/250903_slack_chat_display_indicator.md b/troubleshooting/250903_slack_chat_display_indicator.md index 045d7d2..00626e9 100644 --- a/troubleshooting/250903_slack_chat_display_indicator.md +++ b/troubleshooting/250903_slack_chat_display_indicator.md @@ -12,32 +12,34 @@ ## 구현 아이디어 ### 1. 시각적 표시 방법 -- **위치**: 각 대화 풍선의 프로필 사진 근처 상단 -- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기와 유사, **확인 필요**: 정확한 px 크기) -- **배치**: 대화 풍선과 50% 겹치게 배치하여 자연스럽게 통합 +- **위치**: 사용자/로빙 프로필 근처, 말풍선 위쪽 +- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기의 1.3배) +- **배치**: 프로필 영역에 position absolute로 배치 ### 2. 기술적 구현 방향 ``` 대화 컴포넌트 구조: -├── 프로필 영역 (확인 필요: 실제 구조) -│ └── 슬랙 인디케이터 (position: absolute 추천) +├── 프로필 영역 (robeingAvatar 이미지 사용) +│ └── 슬랙 인디케이터 (position: absolute) └── 메시지 풍선 ``` ### 3. 데이터 흐름 -1. 백엔드: **확인 필요**: source 필드 추가 vs slack_user_id 활용 결정 -2. 프론트엔드: 슬랙 메시지 판별 로직 구현 -3. CSS: position absolute로 프로필 상단에 배치 (Tailwind CSS 활용 가능) +1. DB: conversation_logs 테이블의 slack_user_id 필드 활용 +2. 백엔드: get_recent_conversations()에서 slack_user_id 포함하여 반환 +3. 프론트엔드: slack_user_id가 있으면 슬랙 아이콘 표시 ### 4. 구현 예상 파일 -- **확인됨**: `frontend-customer/src/components/chat-interface.tsx` (ChatMessage.tsx 아님) +- **확인됨**: `frontend-customer/src/components/chat-interface.tsx` - **확인됨**: `/assets/integrations/slack-logo.svg` 아이콘 존재 -- **확인 필요**: CSS 파일 구조 (별도 chat.css 없음, index.css 또는 Tailwind 사용) +- **확인됨**: Tailwind CSS 사용 +- **확인됨**: ThemeProvider로 다크모드 구현됨 -### 5. 고려사항 -- 모바일/데스크톱 반응형 크기 조정 (**확인 필요**: 반응형 요구사항) -- **확인 필요**: 다크모드 지원 여부 및 아이콘 색상 조정 -- **확인 필요**: 애니메이션 필요성 (현재 요구사항에 없음) +### 5. 구현 결정 사항 (2025-09-04) +- **애니메이션**: 불필요 +- **반응형**: 글자 크기에 비례하여 조정 +- **판별 로직**: slack_user_id 존재 여부로 판별 (DM 포함) +- **다크모드**: 이미 구현됨 (theme-context.tsx) ### 6. 예상 효과 - 사용자가 대화 출처를 한눈에 파악 가능 @@ -56,9 +58,52 @@ - 슬랙 아이콘 경로: `/assets/integrations/slack-logo.svg` - CSS 프레임워크: Tailwind CSS 사용 중 -## 다음 단계 -1. chat-interface.tsx에서 프로필/메시지 구조 확인 -2. 백엔드 API 응답에서 slack_user_id 포함 여부 확인 -3. 슬랙 메시지 판별 로직 결정 (slack_user_id vs channel_id) -4. 프론트엔드 컴포넌트 수정 -5. 테스트 및 반응형 확인 \ No newline at end of file +## 구현 작업 (TODO) + +### 1. 백엔드 수정 +**파일**: `rb8001/app/state/database.py` +```python +# get_recent_conversations() 및 get_paginated_conversations() 함수 수정 +# SQL 쿼리에 slack_user_id 추가 +SELECT id, message, response, timestamp, user_id, slack_user_id + +# 반환 데이터에 추가 +conversations.append({ + "message": row.message, + "response": row.response, + "timestamp": row.timestamp.isoformat(), + "slack_user_id": row.slack_user_id # 추가 +}) +``` + +### 2. 프론트엔드 수정 +**파일**: `frontend-customer/src/components/chat-interface.tsx` + +1) Message 인터페이스 확장: +```typescript +interface Message { + // 기존 필드들... + slack_user_id?: string; // 추가 +} +``` + +2) 슬랙 아이콘 표시 로직: +```tsx +// 사용자 메시지: 프로필 근처 +// 로빙 메시지: 프로필 오른쪽, 말풍선 상단 경계 +{message.slack_user_id && ( + Slack +)} +``` + +### 3. 테스트 확인 사항 +- 슬랙 DM으로 대화 → 아이콘 표시 확인 +- 웹 프론트엔드 대화 → 아이콘 미표시 확인 +- 다크모드 전환 시 아이콘 가시성 확인 \ No newline at end of file