통신 상품 가입·상담 영업 플랫폼
매장·판매점 직원이 홈(인터넷·TV·인터넷전화·스마트홈)과 모바일 상품을 상담하고 가입 신청까지 처리하는 React 기반 영업 플랫폼. 프론트엔드 개발자로 참여해 홈 가입(신규가입·약정갱신·소호)의 고객정보·본인인증·가입마무리 흐름과, 고객이 링크로 직접 신청하는 온세일(홈/모바일) 신청서를 개발했다.
공개일프로젝트 개요
매장과 판매점 직원이 통신 상품을 상담하고 가입 신청까지 처리하는 영업 플랫폼의 프론트엔드입니다. 홈 상품(인터넷·TV·인터넷전화·스마트홈·CCTV)과 모바일 상품을 다루고, 고객이 URL 링크로 들어와 직접 가입을 신청하는 온세일 채널도 함께 운영합니다. 기존 시스템을 새 구조로 옮기는 프로젝트입니다.
- 기간: 2025.11 ~ 진행 중
- 형태: 팀 프로젝트, 프론트엔드 개발
- 주요 담당: 홈 가입(신규가입·약정갱신·소호) 고객정보·본인인증·가입마무리, 온세일 홈/모바일 신청서
서비스 전체 기능
영업 업무 흐름
상담(상품 선택·제안) → 가입 신청서 작성(고객정보·상품·서비스정보·혜택) → 동의/서명(전자서명) → 구비서류 첨부 → 가입마무리(즉시청약·예약·고객과의 약속) → 가입서류 발송
주요 메뉴
| 구분 | 기능 |
|---|---|
| 메인 | 고객 사전 조회, 최근 상담 이어하기, 자주 찾는 고객 등록, 공지사항, 매장 연락처 |
| 상담 | 홈·모바일·소호·다회선 상담, 상담 제안서, 즐겨찾기, 롤플레이 |
| 홈 가입 | 신규가입·약정갱신·원스톱 전환가입, 상품 섹션(인터넷·TV·인터넷전화·스마트홈·CCTV), 고객정보, 개통정보, 혜택 |
| 소호 가입 | 소상공인 대상 가입유형, 업종/업태, 고객정보, 서비스정보 |
| 모바일 가입 | 모바일 가입 신청, 동의서, 결합 서명 |
| 동의/서류 | 이용약관, 전자서명(eformsign), 구비서류 첨부·이미지 마스킹, 가입서류 발송(문자·PC출력·무선출력) |
| 가입마무리 | 고객과의 약속(약속일·사은품·제휴카드), 가입안내서 메모, 가입 상태 확인 |
| 온세일 | 고객용 온라인 신청서(홈·모바일·M2M·커넥티드카), 예약판매 |
| 가이드북 | 공지, 이달의 상품, 개선 요청, 검색, 미디어 콘텐츠 |
| 내 계정 | 간편 로그인, 서명 관리, 메모 관리, 개선 제안 |
담당 업무
홈 가입 — 고객정보 영역
- 고객 유형별 고객정보 입력과 저장: 개인, 개인사업자, 법인, 기관, 외국인(국적·선호언어), 법정대리인/미성년자
- 통신/비통신 서비스 전환 시 고객정보·인증 정보 초기화, 고객 유형 변경 시 의존 필드 초기화
- 신분증 인증(스캔 목록 불러오기·촬영·직접 입력): 나이 제한(만 4세 미만·미성년자) 검증, 발급일자 검증, 개통 불가 고객 처리
- 휴대폰 본인인증 팝업: 인증번호 시간 초과, 번호 형식 검증, 고객정보 자동 바인딩. 이후 본인인증 서비스(iivs) 방식으로 전환
- 요금 납부방법(계좌·카드·지로): 카드번호 자릿수별 포맷·마스킹, 유효기간 검증, 은행 목록 정렬, 계좌/카드 인증
- 부가세 납부정보, 사업자번호·법인등록번호 검증, 기존 고객 데이터 자동 바인딩 및 입력 잠금
- 고객 생성 API v2 전환, 응답 방어 로직, 판매점·마당 계정별 분기
홈 가입 — 이어하기 · 약정갱신 · 전환가입
홈 가입 — 구비서류 · 가입마무리
- 마당 계정 구비서류: 다회선 승인요청 팝업(공휴일 체크 API), 신분증 인증 흐름, 전자문서번호 채번
- 구비서류 전송 방법별 분기(예약완료·전송·즉시청약), 가입서류 제공방법(문자·PC출력·무선출력) API 연동과 리팩토링
- 고객과의 약속 화면(홈/모바일 탭, 사은품, 제휴카드 할인, 약속일), 가입안내서 메모 불러오기
- 가입안내서와 결합(투게더·참 쉬운 가족) 전자서명(eformsign) 연동, 페이지 이동 시 iframe 정리
소호 가입
- 가입유형, 고객정보(개인·개인사업자·법인·기관·외국인) 화면 개발, 저장·수정·이어하기 정책 반영
- 업종/업태 팝업, 업종코드 조회와 가입 가능 여부 API 연동, 신분증 인증 API v2
온세일 (고객용 온라인 가입 신청서)
- 초기 화면 개발 후 홈/모바일 구조로 분리, URL 생성기 링크로 들어오면 판매점 정보 자동 바인딩
- 온세일 홈: 유치점 정보·검색, 고객정보, 서비스정보, 이용약관, 인터넷전화 번호이동, 추가가입 시 기존 가입내역 조회, 신청서 저장과 완료 페이지
- 온세일 모바일: 신규가입·기기변경 단계별(step 0~4) 신청서, 고객정보·법정대리인, 요금 납부방법과 납부정보 검증 API, 배송지, 보안설정, 이용약관 매핑
- 본인인증(iivs) 팝업 연동과 postMessage 결과 처리, 안면인증 연동(PC는 QR, 모바일은 팝업으로 분기, 대상 여부·생략 조건 처리), 신분증 진위 확인
- 예약판매 캠페인 조회·신청, 단말기 할인내역·월별 청구 금액, M2M·커넥티드카·휴대폰보험 등 상품 유형별 분기
- 가입신청내역 최종 확인·상세보기, 가입 완료 메일 발송, 주민등록번호 마스킹
- 모의해킹 결과에 따른 보안 취약점 조치, 저장 실패 시 다시 인증하는 흐름 추가, 운영 환경 진입 차단 처리
기술 스택
| 구분 | 기술 |
|---|---|
| Framework | React 19, TypeScript, Vite 7, React Router 6 |
| UI | Mantine 7, CSS Modules, Pretendard |
| 상태 관리 | Zustand (클라이언트 상태), TanStack Query 5 (서버 상태, 공통 Query/Mutation 래퍼 훅) |
| API | Axios 커스텀 인스턴스, 공통 응답 타입·에러 핸들러 |
| 라이브러리 | Recharts, html2canvas, qrcode.react, react-toastify, react-error-boundary, react-intersection-observer, Day.js |
| 테스트 | Vitest, Playwright (E2E, 이슈 재현) |
| 코드 품질 | ESLint, Prettier, TypeScript strict 빌드 |
| 연동 | eformsign 전자서명, 본인인증(iivs), 안면인증, 네이티브 앱 WebView(신분증 촬영) |
기술적 포인트
- 고객 유형 × 서비스 조합 처리: 개인·개인사업자·법인·기관·외국인·법정대리인, 통신/비통신, 신규/약정갱신/전환가입이 겹치는 경우마다 검증·초기화·잠금 규칙을 정리하고, 통합 테스트(QA)에서 나온 결함 대응
- 이어하기 데이터 복원: 여러 섹션으로 나뉜 신청서를 임시저장 데이터로 정확히 복원하고, 앞 섹션을 수정하면 뒤 섹션의 의존 데이터를 초기화하는 시점 관리
- 외부 인증 연동: 본인인증 팝업과 postMessage 결과 처리, 안면인증의 PC/모바일 분기, 인증 결과를 저장 파라미터에 매핑
- 고객용 화면의 보안: 모의해킹 결과 조치, 정보 누출 방지, 저장 실패 시 다시 인증, 개인정보 마스킹
- 레거시 이관: 기존 시스템 흐름을 분석해 새 화면에 맞추고, 업무별 분석 문서 작성