회사 프로젝트· 아이엔지스토리· 2023 — 2024

아이엔지스토리 키오스크 모더나이제이션

PHP 모놀리식 → REST API + React 분리, 전국 2,000개 매장 배포

역할: 프론트엔드 리드 · 코드 80% 기여

ReactTypeScriptElectronWebSocketMobXMUISocket.ioPHP

회사 코드 (NDA) — 핵심 코드 스니펫과 아키텍처로 갈음합니다

Headline

1,947개 소스 · 28만 줄 · React 컴포넌트 1,837개의 키오스크 시스템

PHP에 비즈니스 로직과 프론트엔드가 혼재된 모놀리식 구조를 REST API + React로 재설계. 7개 React 프로젝트(키오스크/어드민/예약/디스플레이/Electron 출입문 제어 등)를 동시에 운영 리드.

코드 기여

전국 매장

소스 파일

React 컴포넌트

Problem

· PHP 단일 파일에 비즈니스 로직과 프론트가 결합 — 유지보수 불가능 수준의 결합도
· VAN 단말기·바이오 스캐너 등 레거시 하드웨어 연동을 그대로 유지하면서 프론트엔드만 분리해야 함
· 키오스크·POS·어드민·예약·출입문 제어가 각각 독립 앱이지만 동일 도메인 데이터를 공유

Action

· React로 프론트엔드 100% 재작성 + REST API로 PHP 백엔드 책임 분리
· Electron 데스크탑 래퍼 + WebSocket 브로드캐스트로 매장 내 다중 자동문 동시/개별 제어
· VAN 단말기·생체인식 연동은 인터페이스 계층 표준화로 유지
· 7개 React 프로젝트(backoffice, pickko-kiosk-react, smart-reservation-admin, space-force-electron, nginx-single-page, zaksim-display) 통합 리드

Result

· 전체 코드 80% 기여
· 200개 시범 매장 → 전국 2,000개 매장 확산 배포 완수
· 총 1,947개 소스 / 28만 2천 줄 / React 컴포넌트 1,837개 규모

7개 React 프로젝트 구성

backoffice

어드민 대시보드 (MobX · MUI · Socket.io)

pickko-kiosk-react

키오스크 POS · 결제 · 지문인식 · 락커

smart-reservation-admin

예약 시스템 (1,327 컴포넌트)

space-force-electron

Electron 출입문 제어 앱

nginx-single-page

멀티앱 모노레포 (16 TSX)

zaksim-display

매장 디스플레이 앱

Core Code

핵심 코드 스니펫

WebSocket — 매장 어드민에서 다중 자동문 직접 제어

const wss = new WebSocketServer({ port: 8080 });

function broadcastDoorControl(command: string, target: "all" | string) {
  // target = "all"   → 매장 전체 자동문 동시 제어
  // target = doorId  → 특정 문만 개별 제어
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(
        JSON.stringify({ type: command, target, ts: Date.now() })
      );
    }
  });
}

// 정전 감지 → 매장 전체 자동문 Fail-safe 해제
powerMonitor.on("power-off", () =>
  broadcastDoorControl("UNLOCK_ALL", "all")
);

도입 배경: CS팀이 매장 요청마다 수동 제어하던 자동문을 매장 어드민에서 직접 제어하도록 전환 (매장 자동문에 릴레이 추가 설치). 매장 내 다수의 문 → 전체 동시 제어 + 개별 제어 모두 필요해 broadcast 패턴 채택.

다른 프로젝트 보기