← 포트폴리오 목록
시설 성능관리 통합 플랫폼
단일 현장 점검 앱을 전국 다수 현장·팀·담당자를 통합 관제하는 플랫폼으로 확장하여, 실시간 현장 모니터링·설비별 부적합 통계 분석·팀 성과 추적·클라우드 사진 스토리지까지 운영 전반을 하나의 관제 콘솔에서 처리하는 구조를 설계할 예정입니다.
Recharts 복합 차트로 설비별 부적합 현황 시각화 구현PieChart(설비별 부적합 분포)와 AreaChart(월별 추이)를 결합한 관제 대시보드로 전국 현장의 점검 현황을 한눈에 파악하는 구조를 설계합니다.
부적합 빈도 히트맵으로 반복 문제 항목 시각화 구현설비 항목별 월간 부적합 빈도를 intensity 색상 그라데이션 히트맵으로 시각화하여 반복 부적합 패턴을 즉각 식별하는 분석 화면을 설계합니다.
30초 자동 갱신 실시간 현장 모니터링 구조 구현setInterval 기반 30초 폴링으로 현장 점검 세션 상태를 자동 갱신하고, S3 클라우드 사진 스토리지와 연동하여 현장 진행 상황을 원격으로 모니터링하는 구조를 설계합니다.
Overview
프로젝트 개요
단일 현장 점검 앱을 전국 다수 현장·팀·담당자를 통합 관제하는 플랫폼으로 확장하여, 실시간 현장 모니터링·설비별 부적합 통계 분석·팀 성과 추적·클라우드 사진 스토리지까지 운영 전반을 하나의 관제 콘솔에서 처리하는 구조를 설계할 예정입니다. P1 스택에 Recharts 분석 차트와 S3 클라우드 스토리지를 추가합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
전국 다수 현장의 점검 데이터를 30초 폴링으로 실시간 갱신할 때 불필요한 리렌더링을 최소화하는 React 상태 업데이트 최적화 전략 설계
S3 사진 파일의 서명 URL 만료(15분) 전후 사용자가 접근할 때 URL을 자동 재발급하는 클라이언트 사이드 폴백 처리 설계
설비 항목별 월간 부적합 빈도 히트맵 데이터를 대량 점검 이력에서 집계할 때 Supabase 집계 쿼리 성능과 캐싱 전략 설계
핵심 기능 1
전국 현장 통합 관리 대시보드
전국 현장별 점검 진행 상황, 부적합 설비별 파이 차트, 월별 점검 완료 추이 Area 차트를 한 화면에서 모니터링하는 통합 관제 대시보드를 구현합니다
핵심 기능 2
점검 이력 통계 분석
기간 필터(4주/8주/6개월/1년)로 주간 적합·부적합 판정 추이 BarChart, 반복 부적합 항목 TOP 5 순위표, 설비 항목별 월간 부적합 빈도 히트맵을 분석하고 CSV로 내보내는 화면을 구현합니다
핵심 기능 3
팀별 성과 추적 및 배정 관리
팀별(A/B/C/D팀) 완료 건수·부적합 수·적합률을 카드로 비교하고, 담당자 현황 테이블에서 개인별 성과를 조회하며, 현장 배정 모달로 담당자·점검 유형·날짜를 지정하는 팀 관리 화면을 구현합니다
핵심 기능 4
현장 모니터링 및 S3 사진 스토리지
실시간 점검 세션 카드(항목 완료 수·업로드 사진 수·최근 갱신 시각)와 클라우드 S3 사진 스토리지(현장·설비 필터
구현 과정
프로젝트 진행 단계
STEP 1
멀티 현장·팀 데이터 모델 및 통계 집계 스키마 설계
현장·팀·담당자·점검 세션·사진 스토리지 테이블 ERD 설계, Supabase 스키마 확장, S3 버킷 구조 및 서명 URL 발급 정책 정의
STEP 2
전국 현장 통합 대시보드 및 Recharts 차트 구현
Recharts PieChart·AreaChart로 설비별 부적합 분포 및 월별 추이 시각화, 지역 필터 및 현장 선택 상태 관리, 관제 대시보드 레이아웃 구현
STEP 3
통계 분석 히트맵·팀 관리 슬라이드오버 구현
BarChart 주간 판정 추이·히트맵 부적합 빈도 분석 화면, 팀 성과 카드·담당자 슬라이드오버·현장 배정 모달 구현, CSV 내보내기
STEP 4
실시간 모니터링·S3 사진 스토리지 및 통합 테스트
30초 자동 갱신 점검 세션 모니터링, S3 사진 썸네일 그리드 필터·서명 URL 접근, 전체 흐름 E2E 테스트
프로젝트 성과
Recharts 복합 차트로 설비별 부적합 현황 시각화 구현PieChart(설비별 부적합 분포)와 AreaChart(월별 추이)를 결합한 관제 대시보드로 전국 현장의 점검 현황을 한눈에 파악하는 구조를 설계합니다.
부적합 빈도 히트맵으로 반복 문제 항목 시각화 구현설비 항목별 월간 부적합 빈도를 intensity 색상 그라데이션 히트맵으로 시각화하여 반복 부적합 패턴을 즉각 식별하는 분석 화면을 설계합니다.
30초 자동 갱신 실시간 현장 모니터링 구조 구현setInterval 기반 30초 폴링으로 현장 점검 세션 상태를 자동 갱신하고, S3 클라우드 사진 스토리지와 연동하여 현장 진행 상황을 원격으로 모니터링하는 구조를 설계합니다.
팀 성과 카드·담당자 슬라이드오버 인력 관리 UI 구현팀별 적합률·완료 건수 비교 카드와 담당자 개인별 성과 슬라이드오버, 현장 배정 모달로 다수 현장 인력 배치를 효율적으로 관리하는 구조를 설계합니다.
Review
기술적 주안점
- Recharts 복합 차트(파이+에어리어)로 전국 현장 점검 현황을 시각화하고, 지역 필터와 현장 선택으로 드릴다운하는 관제 대시보드 구조를 설계합니다
- Recharts BarChart와 인라인 히트맵 테이블로 설비별 반복 부적합 패턴을 시각화하고, 기간 필터와 CSV 내보내기로 분석 데이터를 운영에 활용하는 구조를 설계합니다
- 팀별 성과 카드와 담당자 슬라이드오버로 인력 운영 현황을 파악하고, 현장 배정 모달로 점검 일정을 즉시 편성하는 팀 관리 구조를 설계합니다
