플럭시티

3D·지도 기반 관제 SI의 프론트엔드를 맡았습니다. 그 전 1년간 부트캠프와 스터디에서 익힌 것을 실무에서 본격적으로 쓴 곳입니다. 폐쇄망 현장에서 WebRTC CCTV를 운영까지 올렸고, 탄천 악취 관제는 화면·수집 API·DB·배포까지 혼자 맡아 마무리했으며, 프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 옮겼습니다.

1. 01

   3D 역사 관제

   자체 엔진으로 GLTF 모델을 띄우고 층별 전환·POI·장치 상태를 하나의 실시간 관제 화면에 통합

2. 02

   다중 CCTV 동시 스트리밍과 ICE 상태 기반 재연결 로직 구현

3. 03

   부산 도시철도 통합 관제

   협업처 관제 플랫폼 API 스펙에 맞춰 시설물 9종(조명·셔터·CCTV·화재감지·엘리베이터 등)과 제어 인터페이스를 타입으로 고정해 연결

4. 04

   WebRTC CCTV

   RTCPeerConnection recvonly 트랜시버로 게이트웨이와 SDP를 교환해 RTSP 카메라를 브라우저에서 재생, 현장 운영 적용

5. 05

   현장 대응

   지하철 현장에서 배포 후 즉시 발생하는 실시간 버그·데이터 오류를 직접 디버깅·수정·재배포

6. 06

   모노레포 디자인 시스템(plug-platform)

   머지 PR 17건 · +13,391/−9,701줄. @plug/ui 컴포넌트를 Storybook과 함께 패키지화하고 atom/molecule 구조로 재편

7. 07

   공통 API 계층

   fetch를 ky로 리팩토링해 인터셉터·에러 처리·prefix URL을 수렴하고, useApi/useSWRApi 훅과 요청·응답 타입 체계를 api-hooks 패키지로 분리

8. 08

   도메인 서비스 공통화

   auth·user·role·building·file 서비스를 common-services로 이관해 프로젝트 간 중복 제거

9. 09

   Plug Atlas(Cesium 실외 지도 IoT 관제)

   머지 PR 11건 · +8,239/−2,227줄. 센서 종류별 이벤트 조건 관리부터 조회·통계·실시간 알람·조치 이력까지 이벤트 도메인 전반을 구현

10. 10

    탄천 악취 모니터링 단독 개발

    화면·수집 API·DB 스키마·온프레미스 배포까지 전 범위. 고정 센서 8대·드론 측정·CALPUFF 대기확산 모델링을 Cesium 3D 지형 하나에 통합

11. 11

    탄천

    하루치 격자×고도×분 확산 데이터를 분 단위 집계 + compact 튜플 응답으로 줄여 브라우저에서 재생 가능한 크기로 축소

12. 12

    탄천 수집 API

    Express·Prisma·PostgreSQL로 센서 단건·배치 수집과 임계값 알람을 구현하고, SSE로 관제 화면에 실시간 브로드캐스트

13. 13

    다수 관제 SI (탄천·성남 AIOT·GS 인증)

    프로젝트별 폐쇄망·내부망 환경에 맞는 배포 전략 수립 및 서버 프록시 보안 설정 (탄천은 Docker 이미지를 파일로 옮겨 적재하는 온프레미스 배포)

• 부산 도시철도 통합 관제(사상하단선)
• Plug Platform (모노레포 디자인 시스템)
• Plug Atlas (Cesium IoT 관제)
• 탄천 악취 모니터링
• GS 인증 플랫폼
• 성남 AIOT 관제

React/TypeScript/Three.js/WebGL/CesiumJS/WebRTC/SSE/WebSocket/WebView/Storybook/Zustand/ky/pnpm/Express/Prisma/PostgreSQL/Docker