docs: 슬랙 대화 표시 인디케이터 구현 완료 문서 복원

- 실제 수정된 파일 경로와 줄 번호 포함
- 구체적인 코드 변경 내용 기록
- DB 구조 및 리소스 정보 유지

troubleshooting/250903_slack_chat_display_indicator.md

@@ -4,28 +4,110 @@
 프론트엔드 대화창에서 슬랙/웹 대화 구분 불가
 
 ## 해결 방법
-conversation_logs 테이블의 slack_user_id 필드를 활용하여 슬랙 대화 시각적 표시
+conversation_logs 테이블의 slack_user_id 필드(VARCHAR(100))를 활용하여 슬랙 대화 시각적 표시
 
-## 수정된 파일
+## 수정된 파일 및 코드
 
-### 백엔드 (2025-09-04)
-1. **rb8001/app/state/database.py**
-   - get_recent_conversations(): SQL에 slack_user_id 추가, 반환값에 포함
-   - get_paginated_conversations(): SQL에 slack_user_id 추가, 반환값에 포함
+### 1. 백엔드 수정 (2025-09-04)
 
-2. **rb8001/main.py**
-   - /api/v1/messages 엔드포인트: formatted_messages에 slack_user_id 필드 추가
+#### rb8001/app/state/database.py
+```python
+# get_recent_conversations() 함수
+query = text("""
+    SELECT message, response, timestamp, slack_user_id  # slack_user_id 추가
+    FROM conversation_logs
+    WHERE user_id = :user_id
+    ORDER BY timestamp DESC
+    LIMIT :limit
+""")
 
-### 프론트엔드 (2025-09-04)  
-1. **frontend-customer/src/components/chat-interface.tsx**
-   - Message 인터페이스에 slack_user_id?: string 추가
-   - 아바타를 relative div로 감싸고 슬랙 아이콘 조건부 렌더링
-   - 아이콘: w-3 h-3, 위치 -top-1 -right-2 / -top-1 -left-2
-   - 타임스탬프 옆에 slack_user_id 있으면 "(Slack)" 텍스트 표시
+conversations.append({
+    "message": row.message,
+    "response": row.response,
+    "timestamp": row.timestamp.isoformat() if row.timestamp else None,
+    "slack_user_id": row.slack_user_id  # 추가
+})
 
-2. **frontend-customer/src/services/robeing-api.ts**
-   - getMessages() 반환 타입에 slack_user_id?: string 추가
+# get_paginated_conversations() 함수도 동일하게 수정
+```
+
+#### rb8001/main.py
+```python
+# /api/v1/messages 엔드포인트 (496번 줄)
+formatted_messages.append({
+    "id": f"{msg_id}_user",
+    "text": msg['user_message'],
+    "sender": "user",
+    "timestamp": timestamp,
+    "slack_user_id": slack_user_id,  # 추가
+    "metadata": {}
+})
+```
+
+### 2. 프론트엔드 수정 (2025-09-04)
+
+#### frontend-customer/src/components/chat-interface.tsx
+```typescript
+// Message 인터페이스 (14번 줄)
+interface Message {
+  id: string;
+  text: string;
+  sender: 'user' | 'robeing';
+  timestamp: Date;
+  type?: 'text' | 'system' | 'action' | 'skill';
+  responseTime?: number;
+  slack_user_id?: string;  // 추가
+  metadata?: {...};
+}
+
+// 아바타 영역 (648번 줄) - relative div로 감싸기
+<div className="relative">
+  {/* 기존 아바타 코드 */}
+  
+  {/* 슬랙 아이콘 추가 */}
+  {message.slack_user_id && (
+    <img 
+      src="/assets/integrations/slack-logo.svg" 
+      className={cn(
+        "absolute w-3 h-3",
+        message.sender === 'robeing' ? "-top-1 -right-2" : "-top-1 -left-2"
+      )}
+      alt="Slack"
+    />
+  )}
+</div>
+
+// 타임스탬프 영역 (711번 줄)
+<span className="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">
+  {/* 시간 표시 */}
+  {message.slack_user_id && ' (Slack)'}  // 추가
+  {message.responseTime !== undefined && ` (${message.responseTime.toFixed(1)}s)`}
+</span>
+```
+
+#### frontend-customer/src/services/robeing-api.ts
+```typescript
+// getMessages 함수 반환 타입 (150번 줄)
+export async function getMessages(
+  before?: string,
+  limit?: number
+): Promise<{
+  messages: Array<{
+    id: string;
+    text: string;
+    sender: 'user' | 'robeing';
+    timestamp: string;
+    slack_user_id?: string;  // 추가
+    metadata?: any;
+  }>;
+  has_more: boolean;
+}>
+```
+
+## 사용된 리소스
+- 슬랙 아이콘: `/public/assets/integrations/slack-logo.svg` (1539 bytes)
+- 스타일링: Tailwind CSS
 
 ## 최종 동작
-- 슬랙으로 보낸 메시지: 프로필 근처 슬랙 아이콘 + 시간 옆 "(Slack)" 표시
+- 슬랙으로 보낸 메시지: 프로필 근처 작은 슬랙 아이콘 + 시간 옆 "(Slack)" 텍스트
 - 웹으로 보낸 메시지: 기존과 동일