파트너 실시간 문의용 PIP 채팅 위젯 구현
목차
feat: PIP 채팅 위젯 기능 추가
관리자 채팅 기능 추가 작업임. 파트너가 관리자에게 실시간으로 문의할 수 있는 PIP 채팅 위젯 구현.
채팅 아키텍처
WebSocket 대신 Polling 방식으로 구현함. 실시간성이 중요한 채팅이 아니라 문의/답변 형태여서 30초 폴링으로 충분함.
// 30초마다 새 메시지 확인
setInterval(async () => {
const resp = await fetch('/api/chat/messages?after=' + lastId);
appendMessages(await resp.json());
}, 30000);
PIP 위젯
| 상태 | 동작 |
|---|---|
| 최소화 | 화면 우하단 버튼만 표시 |
| 열림 | 300x400px 채팅창 |
| 새 메시지 | 뱃지 숫자 표시 |
| 드래그 | 화면 내 위치 변경 가능 |
채팅 메시지 구조
CREATE TABLE chat_message (
msg_sn BIGINT PRIMARY KEY AUTO_INCREMENT,
room_sn BIGINT NOT NULL,
sender_type ENUM('ADMIN', 'PARTNER'),
content TEXT,
created_at DATETIME DEFAULT NOW()
);
개발 원칙 정리
이 작업을 진행하면서 재확인한 원칙들:
작은 커밋: 변경 단위를 작게 유지해서 코드 리뷰와 롤백이 쉽게.
테스트 먼저: 변경 전 현재 동작을 파악하고, 변경 후 동일하게 동작하는지 확인.
문서 동기화: 코드가 바뀌면 관련 주석과 문서도 같이 업데이트.
| 원칙 | 이유 |
|---|---|
| 단일 책임 | 하나의 함수/클래스는 하나의 역할만 |
| 명시적 코드 | 영리한 코드보다 읽기 쉬운 코드 |
| 실패 우선 처리 | happy path보다 에러 케이스 먼저 설계 |
끝
댓글 0
첫 댓글 달아줘.