DOCS/troubleshooting/250903_slack_chat_display_indicator.md

250903 슬랙 대화 표시 인디케이터 구현 아이디어

목적

프론트엔드 대화창에서 슬랙을 통해 입력된 메시지를 시각적으로 구분하여 사용자가 대화 채널을 쉽게 인식할 수 있도록 함

현재 상황

• 대화 메시지가 슬랙/웹 구분 없이 동일하게 표시됨
• 사용자가 어떤 채널로 대화가 이루어졌는지 알기 어려움
• 확인됨: conversation_logs 테이블에 slack_user_id 컬럼 존재 (VARCHAR(100))
• 확인됨: channel_id가 'C'로 시작하면 슬랙 채널 (tables.md 참조)

구현 아이디어

1. 시각적 표시 방법

• 위치: 사용자/로빙 프로필 근처, 말풍선 위쪽
• 표시: 슬랙 SVG 아이콘 (크기: 글자 크기의 1.3배)
• 배치: 프로필 영역에 position absolute로 배치

2. 기술적 구현 방향

대화 컴포넌트 구조:
├── 프로필 영역 (robeingAvatar 이미지 사용)
│   └── 슬랙 인디케이터 (position: absolute)
└── 메시지 풍선

3. 데이터 흐름

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
• 확인됨: /assets/integrations/slack-logo.svg 아이콘 존재
• 확인됨: Tailwind CSS 사용
• 확인됨: ThemeProvider로 다크모드 구현됨

5. 구현 결정 사항 (2025-09-04)

• 애니메이션: 불필요
• 반응형: 글자 크기에 비례하여 조정
• 판별 로직: slack_user_id 존재 여부로 판별 (DM 포함)
• 다크모드: 이미 구현됨 (theme-context.tsx)

6. 예상 효과

• 사용자가 대화 출처를 한눈에 파악 가능
• 멀티채널 지원 시스템임을 시각적으로 어필
• UX 개선으로 사용자 혼란 감소

검증된 정보

데이터베이스

• conversation_logs 테이블에 slack_user_id 컬럼 존재 (VARCHAR(100))
• channel_id 패턴: 'C'로 시작 = 슬랙 채널, 'web' = 프론트엔드
• JWT에서 user_id(UUID) 추출 가능 (chat_history_flow.md 참조)

프론트엔드

• 메인 컴포넌트: chat-interface.tsx
• 슬랙 아이콘 경로: /assets/integrations/slack-logo.svg
• CSS 프레임워크: Tailwind CSS 사용 중

구현 작업 (TODO)

1. 백엔드 수정

파일: rb8001/app/state/database.py

# 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 인터페이스 확장:

interface Message {
  // 기존 필드들...
  slack_user_id?: string;  // 추가
}

2. 슬랙 아이콘 표시 로직:

// 사용자 메시지: 프로필 근처
// 로빙 메시지: 프로필 오른쪽, 말풍선 상단 경계
{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으로 대화 → 아이콘 표시 확인
• 웹 프론트엔드 대화 → 아이콘 미표시 확인
• 다크모드 전환 시 아이콘 가시성 확인