happybell80
9d8b989273
- Redis TTL, PostgreSQL 소유권, 로그 모니터링 해결 상태 기록 - python-multipart, nginx 권한 문제 해결 완료 표시 - 환경변수 하드코딩 제거 상태 업데이트 - Slack chat display indicator 문서 추가
64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# 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. 테스트 및 반응형 확인 |