평가 분석 및 이력 관리 허브

P1 MVP 이후 확장 방향으로, 연도별 평가 이력 조회·비교 분석, 부서·그룹별 상세 통계, 다차원 차트 시각화, 엑셀 보고서 내보내기를 통합한 분석 허브를 React + Node.js + PostgreSQL + Redis 기반으로 설계·구현합니다.

Materialized View 기반 집계 파이프라인 설계PostgreSQL Materialized View 4개로 연도별·분기별·부서별·지표별 평균 사전 계산, pg_cron 일 1회 증분 갱신으로 집계 조회 최적화

Bull Queue 비동기 엑셀 생성 아키텍처 구현900건 이상 대용량 보고서를 Bull Queue 잡으로 위임, Redis 잡 상태 폴링으로 완료 알림 전달, 멱등 잡 ID로 중복 생성 방지

부서 비교 레이더 차트 컴포넌트 설계Recharts RadarChart 위에 최대 3개 부서 오버레이 비교 모드 구현, 동적 색상 할당과 토글 범례 커스텀 컴포넌트 설계

서비스 타입Web

업종CRM 서비스

기술 스택

ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaRedisRecharts

주요 기능

이력 조회
상세 분석
보고서 내보내기
설정

Overview

프로젝트 개요

범위: 개발, 디자인, 기획

P1 MVP 이후 확장 방향으로, 연도별 평가 이력 조회·비교 분석, 부서·그룹별 상세 통계, 다차원 차트 시각화, 엑셀 보고서 내보내기를 통합한 분석 허브를 React + Node.js + PostgreSQL + Redis 기반으로 설계·구현합니다. 분할 모니터 레이아웃으로 트렌드 차트와 이력 목록을 동시에 조망하는 운영 분석 환경을 구현합니다.

요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

연도별·분기별 집계 쿼리가 850명 × 다년도 데이터에서 성능 저하 없이 동작하

Materialized View와 Redis 캐싱 레이어를 설계해야 합니다

부서 비교 레이더 차트에서 최대 3개 부서를 오버레이할 때 색상 가독성과 범례 인터랙션을 Recharts 커스텀 컴포넌트로 구현해야 합니다

900건 이상 엑셀 보고서 생성 시 HTTP 응답 타임아웃을 피하기 위한 Bull Queue 비동기 처리와 완료 알림 폴링 구조를 설계해야 합니다

평가 사이클 개설 API가 운전원 전원 레코드를 일괄 생성할 때 중복 개설과 부분 실패를 Prisma 트랜잭션으로 원자적으로 처리해야 합니다

핵심 기능 1

이력 조회

연도·분기·부서 필터로 과거 평가 결과를 조회하고 등급 분포 변화 추이, 부서별 평균 점수 변동을 시각화합니다

핵심 기능 2

상세 분석

부서·그룹별 평균 점수, 지표별 점수 분포, 상위·하위 운전원 랭킹을 다차원으로 분석하는 전용 분석 뷰를 제공합니다

핵심 기능 3

보고서 내보내기

평가 결과를 연도·부서·등급 조건으로 필터링해 엑셀 보고서로 내보내고, 관리자가 원하는 컬럼 구성을 커스터마이징합니다

핵심 기능 4

설정

관리자 계정 관리, 평가 사이클 설정(연도·분기 정의), 수식 변경 이력 조회, 시스템 감사 로그를 통합 관리합니다

구현 과정

프로젝트 진행 단계

STEP 1

집계 데이터 모델 및 뷰 설계

PostgreSQL Materialized View 4개(연도별·분기별·부서별·지표별) 설계, pg_cron 증분 갱신 정책 수립, Redis 캐시 TTL 전략 설계

STEP 2

분석 API 및 비동기 엑셀 생성 개발

연도별 트렌드·부서 비교·랭킹 집계 API 구현, Bull Queue 기반 엑셀 보고서 비동기 생성 잡 구현

STEP 3

split-monitor 대시보드 및 차트 UI 개발

Recharts ComposedChart·RadarChart·BoxPlot 컴포넌트 구현, split-monitor CSS grid 레이아웃, 부서 비교 오버레이 모드

STEP 4

사이클 관리·감사 로그 및 통합 테스트

평가 사이클 개설 API, JWT 감사 미들웨어, 수식 변경 diff 뷰 구현, API 통합 테스트 80+ 케이스 작성

프로젝트 성과

부서 비교 레이더 차트 컴포넌트 설계Recharts RadarChart 위에 최대 3개 부서 오버레이 비교 모드 구현, 동적 색상 할당과 토글 범례 커스텀 컴포넌트 설계

JWT 감사 로그 미들웨어 구축Express 미들웨어로 관리자 액션(사이클 개설·수식 변경·대량 삭제)을 audit_log 테이블에 자동 기록, IP·사용자 ID·타임스탬프 적재

Review

기술적 주안점

연도 필터 변경 시 트렌드 차트와 등급 피드 두 패널이 독립적으로 데이터를 갱신하는 분리된 query 키 구조를 설계하고, split-monitor 레이아웃의 두 패널 크기를 CSS grid로 1:1 비율 반응형으로 구현합니다
부서 비교 모드에서 최대 3개 부서의 레이더 차트를 오버레이할 때 각 부서별 색상을 동적으로 할당하고, 범례와 상호작용으로 개별 부서를 토글 표시하는 커스텀 범례 컴포넌트를 설계합니다
대용량 엑셀 생성을 Bull Queue 비동기 잡으로 위임하고 Redis에 잡 상태를 저장해 프론트엔드에서 폴링으로 완료 여부를 확인하는 비동기 내보내기 아키텍처를 구현합니다