← 포트폴리오 목록
흡연부스 현장 점검 통합 관리 시스템
Next.js 15 App Router · Supabase · PWA 기반 현장 점검 SaaS 플랫폼
단일 코드베이스 통합 (작업자 PWA + 관리자 웹)Next.js 15 App Router route group으로 PWA와 관리자 SPA를 단일 코드베이스에서 분리·운영해 배포·인증·DB를 일원화했습니다.
DB 레벨 3단 역할 권한 + 감사 추적모든 테이블 Supabase RLS 정책과 audit_logs 자동 기록으로 권한 우회·데이터 노출을 원천 차단하고 컴플라이언스 추적을 확보했습니다.
오프라인 무손실 현장 점검Serwist + IndexedDB 오프라인 큐와 자동 동기화로 통신 두절 현장에서도 점검 데이터 손실 없이 기록·복구되도록 구현했습니다.
Overview
프로젝트 개요
현장 작업자용 PWA(설치형 모바일 웹앱)와 통합 관리자 웹을 단일 Next.js 15 App Router 코드베이스로 분리·운영하는 시설 점검 SaaS 플랫폼을 실제 구축·납품했습니다. 작업자는 모바일에서 자산을 QR로 식별하고 체크리스트와 현장 사진으로 점검을 기록하며, 관리자는 Kakao Maps 기반 통합 대시보드로 전국 자산을 실시간 모니터링하고 작업자·점검 이력·감사 로그를 한 화면에서 관리합니다. 통신이 불안정한 현장을 고려해 오프라인 큐와 자동 동기화를 구현했고, 운영 시스템 구조는 시설·자산 관리·현장 작업자 SaaS·감사/QA 관제 등 다양한 도메인에 동일한 골격으로 응용할 수 있도록 설계했습니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
작업자 앱과 관리자 웹을 분리하면서도 배포·인증·DB를 일원화해야 하는 구조 과제
단일 Next.js 15 App Router 앱의 route group `(worker)`/`(admin)`으로 PWA와 관리자 SPA를 분리하면서 배포·인증·DB를 일원화해 운영 비용과 유지보수 부담을 최소화했습니다.
통신이 불안정한 현장에서도 점검 데이터 손실을 막아야 하는 오프라인 과제
Serwist Service Worker와 IndexedDB로 오프라인 큐를 구성해 통신 두절 현장에서도 점검을 임시 저장하고, 네트워크 복구 시 자동 동기화로 데이터 손실을 방지했습니다.
다중 역할의 권한 우회·데이터 노출을 원천 차단해야 하는 보안 과제
ADMIN·REGION_ADMIN·WORKER 3단 역할에 대해 모든 테이블에 Supabase RLS 정책을 적용하고, 계정·배정·자산 변경을 감사 로그로 자동 기록해 컴플라이언스 추적이 가능한 운영 감사 체계를 갖췄습니다.
핵심 기능 1
지도 기반 통합 관제 대시보드
운영 부스·재떨이·활성 작업자·금일 점검 KPI와 최근 7일 점검 추이 차트, Kakao Maps 위 전체 자산 위치를 한 화면에 통합한 관리자 메인 대시보드입니다. ADMIN·REGION_ADMIN·WORKER 3단 역할 권한은 Supabase RLS로 DB 레벨에서 제어합니다.
핵심 기능 2
부스·재떨이 자산 관리
현장 부스·재떨이 자산을 코드·지역·상태로 등록·검색·관리하고, 운영중/일시중지/폐쇄 상태와 점검 항목을 관리자가 직접 설정합니다. 자산별 고유 QR 토큰을 발급해 작업자 모바일 스캔으로 즉시 식별하도록 구현했습니다.
핵심 기능 3
현장 작업자 모바일 앱 (PWA)
작업자가 담당 부스·재떨이 목록을 확인해 현장에서 바로 점검을 시작하는 설치형 모바일 PWA입니다. Serwist Service Worker와 IndexedDB 오프라인 큐로 통신 불안정 현장에서도 15항목 체크리스트·현장 사진 점검을 임시 저장하고, 네트워크 복구 시 자동 동기화하며 VAPID 기반 Web Push 알림을 지원합니다.
핵심 기능 4
점검 이력 통합 조회 + 사진 갤러리
작업자·자산·기간·상태로 모든 점검 이력을 통합 조회하고, 각 점검의 15항목 체크리스트·메모·현장 사진을 사이드패널 라이트박스 갤러리로 검토합니다. 계정·배정·자산 변경은 audit_logs에 자동 기록해 컴플라이언스 추적이 가능한 운영 감사 체계를 구축했습니다.
프로젝트 성과
단일 코드베이스 통합 (작업자 PWA + 관리자 웹)Next.js 15 App Router route group으로 PWA와 관리자 SPA를 단일 코드베이스에서 분리·운영해 배포·인증·DB를 일원화했습니다.
DB 레벨 3단 역할 권한 + 감사 추적모든 테이블 Supabase RLS 정책과 audit_logs 자동 기록으로 권한 우회·데이터 노출을 원천 차단하고 컴플라이언스 추적을 확보했습니다.
오프라인 무손실 현장 점검Serwist + IndexedDB 오프라인 큐와 자동 동기화로 통신 두절 현장에서도 점검 데이터 손실 없이 기록·복구되도록 구현했습니다.
Review
기술적 주안점
- 작업자 PWA와 관리자 웹을 단일 Next.js 15 App Router 코드베이스로 분리·운영해 배포·인증·DB를 일원화했습니다
- Supabase RLS 3단 역할 정책과 감사 로그 자동 기록으로 권한 우회·데이터 노출을 DB 레벨에서 원천 차단했습니다
- Serwist Service Worker와 IndexedDB 오프라인 큐로 통신 불안정 현장에서도 점검 데이터 손실을 방지하는 자동 동기화를 구현했습니다
- 흡연부스에 한정되지 않고 시설·자산 관리·현장 작업자 SaaS·감사/QA 관제 등 다양한 도메인에 응용 가능한 골격으로 설계했습니다
