ivada-infra/DOCS

happybell80 9d8b989273 docs: 100% 해결된 인프라 문제 문서화 및 업데이트

- Redis TTL, PostgreSQL 소유권, 로그 모니터링 해결 상태 기록
- python-multipart, nginx 권한 문제 해결 완료 표시
- 환경변수 하드코딩 제거 상태 업데이트
- Slack chat display indicator 문서 추가

2025-09-04 13:41:04 +09:00

2.8 KiB

Raw Blame History

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

목적

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

현재 상황

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

구현 아이디어

1. 시각적 표시 방법

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

2. 기술적 구현 방향

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

3. 데이터 흐름

백엔드: 확인 필요: source 필드 추가 vs slack_user_id 활용 결정
프론트엔드: 슬랙 메시지 판별 로직 구현
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 사용 중

다음 단계

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