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

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

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

## 구현 아이디어

### 1. 시각적 표시 방법
- **위치**: 각 대화 풍선의 프로필 사진 근처 상단
- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기와 유사, **확인 필요**: 정확한 px 크기)
- **배치**: 대화 풍선과 50% 겹치게 배치하여 자연스럽게 통합

### 2. 기술적 구현 방향
```
대화 컴포넌트 구조:
├── 프로필 영역 (확인 필요: 실제 구조)
│   └── 슬랙 인디케이터 (position: absolute 추천)
└── 메시지 풍선
```

### 3. 데이터 흐름
1. 백엔드: **확인 필요**: source 필드 추가 vs slack_user_id 활용 결정
2. 프론트엔드: 슬랙 메시지 판별 로직 구현
3. CSS: position absolute로 프로필 상단에 배치 (Tailwind CSS 활용 가능)

### 4. 구현 예상 파일
- **확인됨**: `frontend-customer/src/components/chat-interface.tsx` (ChatMessage.tsx 아님)
- **확인됨**: `/assets/integrations/slack-logo.svg` 아이콘 존재
- **확인 필요**: CSS 파일 구조 (별도 chat.css 없음, index.css 또는 Tailwind 사용)

### 5. 고려사항
- 모바일/데스크톱 반응형 크기 조정 (**확인 필요**: 반응형 요구사항)
- **확인 필요**: 다크모드 지원 여부 및 아이콘 색상 조정
- **확인 필요**: 애니메이션 필요성 (현재 요구사항에 없음)

### 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 사용 중

## 다음 단계
1. chat-interface.tsx에서 프로필/메시지 구조 확인
2. 백엔드 API 응답에서 slack_user_id 포함 여부 확인
3. 슬랙 메시지 판별 로직 결정 (slack_user_id vs channel_id)
4. 프론트엔드 컴포넌트 수정
5. 테스트 및 반응형 확인