프로덕트
참여 프로젝트
채널톡 팀 기능과 고객 DB
채널톡에서 팀 단위로 상담을 배정하고 멘션하는 기능을 개발했습니다. 고객 DB의 일괄 작업과 검색도 개선했습니다.
1,000한 번에 처리하는 고객 데이터 작업 한도, 기존 200건의 다섯 배
- 기간
- 2021.11 ~ 2022.09
- 소속
- 주식회사 채널코퍼레이션
- 역할
- 팀 기능 프론트엔드와 고객 DB 기능 개발
- 핵심 기능
- 팀을 한 번에 호출하고 상담을 배정할 수 있게 했습니다. 대량 다운로드는 완료 알림으로 확인할 수 있도록 바꿨습니다.
- 작업과 결과
- 팀 만들기, 팀 목록, 팀 멘션, 팀 검색의 프론트엔드를 혼자 개발
- 상담 배정, 서포트봇, 마케팅 자동화에 팀 조건 추가
- 고객 데이터 일괄 작업 한도를 200건에서 1,000건으로 확대
- 검색 조건을 URL로 공유하고 뒤로 가기에도 유지
- 기술 스택
- ProseMirror
- Playwright
- Gherkin
- WebSocket
배경
채널톡의 채팅팀에서 팀 멘션과 상담 자동 배정 기능을 개발했습니다. 팀 단위로 일할 수 있도록 에디터에서 팀과 멤버를 검색하고 멘션하는 화면을 맡았습니다. 이름뿐 아니라 팀명과 소속을 조합한 검색도 필요했습니다.
고객 DB에서는 한 번에 처리할 수 있는 데이터 양을 늘리고, 검색 조건을 다른 사람에게 공유하거나 뒤로 가기에도 유지할 수 있도록 개선했습니다.
결정과 구현
- 팀 멘션과 자동 배정 에디터: ProseMirror 에디터에 팀과 멤버 멘션, 팝오버 UI, 가상 스크롤 리스트를 합성 패턴으로 조립해, 멤버가 많아도 끊김 없이 렌더링되게 했습니다.
- 팀명과 소속 조건을 조합할 수 있는 표현식 검색으로 자동 완성을 지원해, 이름만 맞춰 보던 검색의 한계를 풀었습니다.
- 코드 리뷰와 Gherkin BDD 테스트 컨벤션을 팀에 정착시켰고, Playwright 멀티 브라우저 E2E로 배포마다 에디터 회귀를 자동으로 검증했습니다.
- 고객 DB 벌크 처리와 검색: 벌크 액션 처리 한계를 200개에서 1,000개로 5배 늘렸습니다. 다운로드 진행률은 WebSocket으로 실시간 추적하고, 다운로드가 끝나면 DM을 자동으로 보내도록 했습니다.
- 검색 상태는 URL SearchParam을 단일 출처(SSOT)로 두고 관리했습니다. 다중 필터 조합과 정렬, 뒤로 가기 복원, 결과 URL 공유가 모두 이 상태를 따르도록 했습니다.