채무조정·상담 업무 플랫폼 · 2025.10–2026.09 · 프리랜서
담당: 프론트엔드 전체 구현과 API 연동. 고객·상담·조직 관리·분석 화면 및 직원 간 내부 채팅을 구현했습니다.
React · TypeScript · TanStack Query · Socket.IO
중첩 모달에서는 클릭·포커스·스크롤이 충돌했습니다. 공통 동작을 수정하면 여러 업무 화면에 영향을 줄 수 있어, 화면별 상태를 확인하는 과정도 필요했습니다.
46개 모달의 공통 동작을 정비하고 실제 컴포넌트를 불러오는 개발용 수동 확인 페이지를 만들었습니다. 업무 흐름을 매번 처음부터 반복하는 대신, 확인할 UI 상태를 직접 열어볼 수 있게 했습니다.
이 과정에서 이미지가 포함된 모달의 간격 오류도 발견해 수정했습니다. 여기서 만든 확인 페이지는 사람이 화면을 조작하는 수동 검증 도구입니다.
팀장 교체가 성공한 뒤에도 관련 정보가 화면에 반영되는 순서 때문에 깜빡임이 생겼습니다. 변경 성공 이후의 캐시 보정과 후속 조회 순서를 조정했습니다.
| 순서 | 구현한 처리 |
|---|---|
| 변경 성공 직후 | 상세 캐시의 역할·팀 정보를 보정 |
| 후속 조회 | 상세 쿼리 무효화를 기다림 |
| 관련 화면 갱신 | 조직·팀 조회 결과를 반영 |
드래그 기반 구성원 이동과 팀장 교체를 구현하면서 관계 변경 확인·안내, 처리 중 조작 제한, 변경 후 데이터 갱신도 연결했습니다. 이 작업으로 화면 깜빡임을 보완했습니다.
상담원의 공통 메모 사용 패턴을 계기로 직원 간 내부 채팅이 필요하다는 논의가 팀에서 나왔습니다. 고객 상세 모달은 유지하고 공통 메모의 글자 수 상한을 늘리는 한편, 직원 간 대화는 내부 채팅으로 구현했습니다.
백엔드와 규약을 맞춰 WebSocket 연결과 프론트엔드 채팅 화면, 메시지·사진·파일 전송을 구현했습니다. 테스트 채팅을 확인하고 내부 채팅을 서비스에 적용했습니다.
실사용 중 태블릿에 맞지 않는 화면 배율과 플로팅 채팅창의 포인터 좌표 어긋남을 발견했습니다.
해당 구간의 0.8 배율 적용 제외를 제안하고 기획 담당자와 논의해 반영했습니다. 플로팅 창의 좌표·경계를 보정하고 위치·크기 저장과 복원도 구현했습니다.