본문으로 건너뛰기
김찬호

D'Live CONA

완료

딜라이브 코나

진행률100%
WebAndroid
2025.12 ~ (2026.04 합류)
4명 (프론트엔드 개발)

프로젝트 설명

케이블TV 방송사 D'Live의 현장 설치/AS 기사가 사용하는 모바일 업무 시스템입니다. 기존 Windows 기반 MiPlatform 레거시를 React 모바일 웹앱으로 재개발하여, 스마트폰에서 작업지시 수신부터 완료 처리까지 현장 업무 전체를 수행할 수 있습니다.

  • MiPlatform 레거시 → React 19 + TypeScript 모바일 웹앱 전면 재개발
  • Express 프록시 서버로 레거시 Java/WebSphere/Oracle 백엔드 연동
  • 작업관리/고객관리/장비관리/신호연동 등 5대 업무 모듈 구현

기술 스택

React 19TypeScriptViteTailwind CSSZustandReact QueryCapacitorExpressOpenLayersJava 6Spring 2.5

아키텍처

현장기사 스마트폰 (PWA / Android)
  └─ React 19 + TypeScript + Vite
       ├─ 작업관리 (설치/해지/AS/이전 워크플로우)
       ├─ 고객관리 (조회/상담/납부/재약정)
       ├─ 장비관리 (보유/이관/반납/OTT)
       ├─ OpenLayers 지도 (현장 위치)
       ├─ zxing-wasm 바코드 스캔
       └─ Capacitor (Android 네이티브)

EC2 Express 프록시 (api-proxy.js)
  └─ D'Live 레거시 CONA 서버
       └─ Java 6 / Spring 2.5 / WebSphere / Oracle

D'Live의 기존 MiPlatform(Windows ActiveX) 기반 현장기사 업무 시스템을 React 모바일 웹앱으로 재개발. EC2 Express 프록시를 통해 레거시 Java/WebSphere 백엔드와 연동하며, Capacitor로 Android 네이티브 앱도 지원합니다.

주요 기능

작업관리

설치/해지/AS/이전 작업지시 수신 → 현장 작업 프로세스 → 완료 처리. 작업 워크플로우 전체 모바일 대응

고객관리

고객조회, 상담접수, AS접수, 납부정보, 요금내역, 재약정 등 고객 관련 업무 통합 관리

장비관리

보유장비 조회, 장비이관, 반납요청, 검사대기, OTT 장비 관리

신호연동

STB 신호전송, 연동이력 조회, 집선등록 등 케이블TV 신호 관련 현장 작업 지원

레거시 연동

Express 프록시 서버가 레거시 Java/WebSphere/Oracle 백엔드의 API를 중계. 기존 데이터 구조 호환

바코드 스캔

zxing-wasm으로 장비 바코드를 스마트폰 카메라로 스캔하여 장비 정보 자동 입력

기능

#작업관리 (설치/해지/AS/이전)#고객관리 (조회/상담/재약정)#장비관리 (이관/반납/OTT)#출퇴근/시간외근무#신호연동 (STB 전송)#바코드 스캔
D'Live CONA (딜라이브 코나) 스크린샷