docs: 슬랙 채팅 표시 인디케이터 구현 방안 업데이트

- get_paginated_conversations() 함수도 수정 필요 확인
- 로빙 응답 메시지에도 슬랙 아이콘 표시 위치 명확화
- 백엔드 API 수정 사항 구체화

troubleshooting/250903_slack_chat_display_indicator.md

@@ -12,32 +12,34 @@
 ## 구현 아이디어
 
 ### 1. 시각적 표시 방법
-- **위치**: 각 대화 풍선의 프로필 사진 근처 상단
+- **위치**: 사용자/로빙 프로필 근처, 말풍선 위쪽
-- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기와 유사, **확인 필요**: 정확한 px 크기)
+- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기의 1.3배)
-- **배치**: 대화 풍선과 50% 겹치게 배치하여 자연스럽게 통합
+- **배치**: 프로필 영역에 position absolute로 배치
 
 ### 2. 기술적 구현 방향
 ```
 대화 컴포넌트 구조:
-├── 프로필 영역 (확인 필요: 실제 구조)
+├── 프로필 영역 (robeingAvatar 이미지 사용)
-│   └── 슬랙 인디케이터 (position: absolute 추천)
+│   └── 슬랙 인디케이터 (position: absolute)
 └── 메시지 풍선
 ```
 
 ### 3. 데이터 흐름
-1. 백엔드: **확인 필요**: source 필드 추가 vs slack_user_id 활용 결정
+1. DB: conversation_logs 테이블의 slack_user_id 필드 활용
-2. 프론트엔드: 슬랙 메시지 판별 로직 구현
+2. 백엔드: get_recent_conversations()에서 slack_user_id 포함하여 반환
-3. CSS: position absolute로 프로필 상단에 배치 (Tailwind CSS 활용 가능)
+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 사용 중
 
-## 다음 단계
+## 구현 작업 (TODO)
-1. chat-interface.tsx에서 프로필/메시지 구조 확인
+
-2. 백엔드 API 응답에서 slack_user_id 포함 여부 확인
+### 1. 백엔드 수정
-3. 슬랙 메시지 판별 로직 결정 (slack_user_id vs channel_id)
+**파일**: `rb8001/app/state/database.py`
-4. 프론트엔드 컴포넌트 수정
+```python
-5. 테스트 및 반응형 확인
+# 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 && (
+  <img 
+    src="/assets/integrations/slack-logo.svg" 
+    className={cn(
+      "absolute w-5 h-5",
+      message.sender === 'robeing' ? "top-0 -right-2" : "top-0 right-0"
+    )}
+    alt="Slack"
+  />
+)}
+```
+
+### 3. 테스트 확인 사항
+- 슬랙 DM으로 대화 → 아이콘 표시 확인
+- 웹 프론트엔드 대화 → 아이콘 미표시 확인
+- 다크모드 전환 시 아이콘 가시성 확인