Smart CS — 통신사 매장 CS 업무 태블릿 웹앱
통신사 매장 직원이 태블릿으로 명의변경·단말/상품변경·청구계정변경·단말 분실/파손·일시정지 등 고객 CS 업무를 처리하는 Next.js 기반 웹앱. 프론트엔드 개발자로 참여해 공통 UI 컴포넌트 설계, 업무 화면 퍼블리싱, API 연동, 본인인증·동의서명·구비서류 플로우를 개발
공개일프로젝트 개요
통신사 매장 직원이 태블릿으로 고객 CS 업무를 처음부터 끝까지 처리하는 웹 애플리케이션입니다. 고객을 조회하고 업무를 고른 뒤, 정보 입력, 본인인증, 동의/서명, 구비서류 제출까지 하나의 단계형 흐름으로 이어집니다. 네이티브 앱 WebView 안에서 동작하고, AppBridge로 카드·신분증 스캔 같은 단말 기능과 연동합니다.
- 기간: 2025.01 ~ 2025.11
- 형태: 팀 프로젝트, 프론트엔드 개발
- 주요 담당: 단말/상품변경, 청구계정변경, 단말 분실/파손
서비스 전체 기능
업무 흐름
고객 조회 → CS 업무 선택 → 업무별 정보 입력 → 본인인증 → 동의/서명 → 구비서류·신청서 → 완료
공통 기능
- 로그인: 아이디/비밀번호 로그인, 2차 인증, 간편 비밀번호(PIN) 설정·입력
- 메인: 고객 조회(대면/비대면), 가입상품 검색, 가입정보 조회(청구요금, 월별 청구내역, 유무선 결합), 남은 CS 업무 목록
- 공지사항: 목록·검색·구분 태그, 최근 공지 팝업
- 본인인증: 휴대폰 인증, 비대면 인증, 행안부 QR 인증, 실명 등록
- 동의/서명: 약관 보기·상세 모달, 전자서명, 법정대리인 조회
- 구비서류: 첨부 서류 관리, 유치자 정보, 신청서 공유·수령 방법, OZ e-Form 신청서
- 외부 페이지: 고객용 서류 확인 페이지, 앱 다운로드 페이지
CS 업무 (9종)
| 업무 | 설명 |
|---|---|
| 고객정보변경 | 이름·주소·이메일·사업자·외국인·법인/기관 정보 변경, 대리인 입력 |
| 납부/청구 정보변경 | 청구 주소/연락처, 출금일, 청구서 유형, 부가세 정보(NICE 평가조회), 카드 스캔 |
| 단말/상품변경 | 단말기·SIM 변경, 요금제·부가서비스 즉시/예약 변경 |
| 단말 분실/파손 | 분실·파손 접수, 보험 처리 여부 확인 |
| 명의변경 | 양도인/양수인 정보, 가입상품·부가서비스, USIM, 잔여 할부금/위약금 납부, 신분증 스캔·진위 확인 |
| 선택약정할인 | 약정 현황 그래프, 선택약정 신청 |
| 일시정지 | 정지 신청/해제, 정지 사유, 정지 이력 |
| 청구계정변경 | 청구계정 분리/통합, 예금주 조회 |
| 프리미어/약정할인 | 프리미어·약정할인 신청 |
담당 업무
단말/상품변경
- 요금제·부가서비스 변경 영역 퍼블리싱, 요금제/부가서비스 등록 팝업 개발 (검색어 하이라이팅, 유료/무료 필터링, 검색 결과 건수 표시)
- 즉시변경·예약변경·만기예약·예약취소 흐름과 각 저장 API 연동
- 단말기/SIM 변경과 요금제·부가서비스 변경을 조합한 체크서비스 API 연동, 응답에 따라 상황별 얼럿(아이콘·문구) 분기
- 특수 케이스: 미디어서비스
- 예약변경 특수권한 체크, 보험상품 가입 상태에 따라 처음 들어올 때 팝업 노출, 비대면으로 들어오면 단말기/SIM 칩 비활성화
- 동의/서명으로 넘어가기 전 확인 팝업, 이전 단계로 돌아갈 때 데이터 유지, 신청서 USIM 일련번호 마스킹
청구계정변경
- 업무 탭·섹션 구성, 양수 청구계정 조회 입력 폼, 상품 목록 컴포넌트 개발
- 새 청구계정으로 분리 / 기존 청구계정으로 통합 흐름, 같은 청구계정번호의 상품 목록 API 연동
- 예금주 조회(개인/사업자 입력 폼), 미납(연체) 시 안내 얼럿, 납부방법이 간편결제일 때 청구서 유형·납부방법 노출 처리
- 고객 유형·부가세 정보·분리청구 여부에 따른 얼럿/팝업 분기, 통합청구 특수권한 처리
- Zustand 전역 상태로 단계별 입력값을 저장하고 이전 단계로 돌아갈 때 다시 바인딩, 최종 저장 API 연동
단말 분실/파손
- 업무 탭, 상품 목록(고객 정보 마스킹), 고객정보 영역, 신고자 정보·상품 상태 입력 폼 개발
- 접수구분/접수여부 칩 선택 로직, 분실 보험 처리 이력에 따른 칩 비활성화 조건
- 시간 선택(HourPicker) 컴포넌트 개발·연동, 연락 가능 번호 검증과 다음 버튼 활성화 조건
- 약정할인·이통사 지원금 안내 팝업, 선택 케이스별 팝업 분기, 유효성 검사와 저장 API 연동
그 외 참여
- 공통 UI 컴포넌트: Input, Select, SelectList, Drawer, Stepper, Tabs, Modal Footer, Checkbox, 버튼 로더, 휴대폰번호·숫자 포맷 입력, 날짜·시간 선택, 주소 검색, PIN 입력 / Storybook 문서화
- 로그인·인증: 로그인 화면·검증·API 연동, 2차 인증 팝업, 간편 비밀번호, 휴대폰·비대면·행안부 QR 인증 팝업
- 동의/서명·구비서류: 약관 뷰, 서명 박스, 법정대리인 조회, 구비서류 첨부 테이블, 유치자 정보, 신청서 공유(이메일 인증)
- 기타 업무 지원: 납부/청구(부가세 NICE 평가조회, 출금일, 카드 스캔), 명의변경(잔여 할부금/위약금 납부, 카드 승인), 가입정보조회, 일시정지, 공지사항
기술 스택
| 구분 | 기술 |
|---|---|
| Framework | Next.js 15 (App Router), React 19, TypeScript |
| UI | Mantine 7, Tailwind CSS, PostCSS |
| 상태 관리 | Zustand (클라이언트 상태), TanStack Query 5 (서버 상태) |
| API | Axios, OpenAPI Generator (typescript-axios 클라이언트 자동 생성) |
| 라이브러리 | react-pdf, Recharts, Tiptap, Day.js, @uiw/react-signature, qrcode.react, Lottie |
| 문서/테스트 | Storybook 8, Jest, React Testing Library |
| 코드 품질 | ESLint, Prettier, Husky |
| 연동 | AppBridge(네이티브 WebView), OZ e-Form |
기술적 포인트
- 복잡한 조건 처리: 즉시/예약/만기예약/예약취소와 단말기·SIM 변경이 섞인 조합을 체크서비스 API 응답에 맞춰 분기하고, 무한 로딩·버튼 활성화 오류 같은 예외 상황 대응
- 단계형 업무의 상태 관리: 여러 단계로 나뉜 업무에서 Zustand 스토어로 단계 간 데이터를 유지하고, 업무 유형이 바뀔 때의 초기화 시점 관리
- 개인정보 보호: 고객 이름·휴대폰번호·USIM 일련번호 등 화면과 신청서 마스킹 처리
- API 타입 안정성: OpenAPI 명세로 API 클라이언트·타입을 자동 생성하고 TanStack Query로 캐싱·로딩 상태 관리
- 모바일 WebView 대응: 입력 타입별 키패드(iOS 숫자 키패드), 포맷 입력 삭제 오류, 디자인 QA 반영
- 컴포넌트 설계: Feature 기반 폴더 구조(api / components / hooks / stores / helpers / types)와 Storybook으로 공통 컴포넌트 재사용성 확보