← 포트폴리오 목록

인프라 점검 통합 운영 콘솔

인프라 점검 데이터 업로드 플랫폼의 MVP 이후를 확장한 관리자 운영 콘솔 구현한 프로젝트입니다.

상태 전환·결과 업로드 트랜잭션 통합 설계결과 HTML 업로드와 상태 전환, 알림 발송을 하나의 트랜잭션 경계로 묶어 부분 실패 없는 업로드 파이프라인을 구현합니다.
API 키 기반 외부 연동 인증 체계 구축관리자 인증과 분리된 API 키 발급·검증 미들웨어를 설계해 외부 분석 서버가 내부 API를 안전하게 호출하도록 구현합니다.
권한 변경 감사 로그 체계 설계권한 토글마다 변경 이력을 기록하는 로그 테이블과 조회 화면을 구현해 관리자 조작을 추적 가능하도록 설계합니다.
서비스 타입Web
업종데이터 분석
기술 스택
React + TypeScriptTailwind CSSNode.js + ExpressPostgreSQL + PrismaRedisBull QueueAWS S3 SDKRecharts
주요 기능
  • 관리자 작업 상태 보드
  • 회원·권한 관리
  • 결과물 업로드 및 자동 상태 전환
  • 외부 분석 서버 연동 API 및 통계 현황
Overview

프로젝트 개요

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

인프라 점검 데이터 업로드 플랫폼의 MVP 이후를 확장한 관리자 운영 콘솔 구현한 프로젝트입니다. 접수완료→분석중→분석완료→보완요청 상태를 칸반 보드로 관리하고, 회원·권한 관리, 결과물 업로드 자동화, 외부 분석 서버 연동 API와 처리 현황 통계까지 React + Node.js 기반으로 통합 구현합니다.

작업 범위

  • 관리자 작업 상태 보드: 접수완료→분석중→분석완료→보완요청 네 단계로 점검 건을 칸반 보드에 배치해, 관리자가 현재 처리 중인 작업량과 지연 건을 한눈에 파악하고 카드 단위로 상태를 전환할 수 있는 작업 관리 화면입니다
  • 회원·권한 관리: 전체 회원 목록을 조회하고 계정별 이용 권한을 수동으로 부여·회수하는 관리자 화면입니다. 권한 상태는 사용자 화면의 구매 문의 분기와 동일한 데이터를 공유합니다
  • 결과물 업로드 및 자동 상태 전환: 관리자가 분석 완료된 결과 HTML을 업로드하면 해당 점검의 상태가 자동으로 분석완료로 전환되어 사용자에게 즉시 노출되는 처리 화면입니다
  • 외부 분석 서버 연동 API 및 통계 현황: 외부 분석 서버가 신규 작업 조회·입력 데이터 다운로드·상태 갱신·결과 업로드를 동일 API로 자동 처리할 수 있도록 인증 API와 문서를 제공하고, 처리 현황을 통계 위젯으로 함께 보여줍니다

주요 업무

  • 관리자 작업 상태 보드 화면: 컬럼별 카운트 배지와 카드 메타(구조물명·업로드 용량·경과일)를 표시하고, 상태 전환은 내부 API 호출로 처리합니다
  • 회원·권한 관리 화면: 회원 검색·필터, 권한 토글, 변경 이력 로그를 제공합니다
  • 결과물 업로드 및 자동 상태 전환 화면: 업로드 파일 용량·확장자 검증 후 S3 호환 스토리지에 저장하고, 상태 전환과 사용자 알림을 같은 트랜잭션에서 처리합니다
  • 외부 분석 서버 연동 API 및 통계 현황 화면: API 키 기반 인증, 엔드포인트별 사용 로그, 컬럼별 처리 건수·평균 처리 시간 위젯을 구성합니다
인프라 점검 통합 운영 콘솔
요구사항 정의

프로젝트 핵심 과제

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

관리자 보드의 상태 전환과 사용자 화면 상태 표시가 어긋나지 않

단일 소스(내부 API)로 동기화하는 아키텍처 설계 필요

결과 HTML 업로드~상태 전환~알림 발송을 하나의 트랜잭션으로 묶으면서도 대용량 업로드 지연에 안전한 처리 흐름 설계

외부 분석 서버 자동 연동을 대비해 관리자 수동 처리와 API 자동 처리가 같은 데이터 모델을 공유하도록 설계

권한 변경 이력·API 호출 로그 등 다양한 감사 데이터를 성능 저하 없이 누적·조회하는 로깅 전략 설계

구현 내용

핵심 기능 상세

핵심 기능 1

관리자 작업 상태 보드

접수완료→분석중→분석완료→보완요청 네 단계로 점검 건을 칸반 보드에 배치해, 관리자가 현재 처리 중인 작업량과 지연 건을 한눈에 파악하고 카드 단위로 상태를 전환할 수 있는 작업 관리 화면입니다.

  • 칸반 컬럼별 상태 전환을 내부 REST API로 처리해 사용자 화면의 상태 배지와 동일 소스로 동기화
  • 카드 메타(경과일·업로드 용량·구조물 유형)를 활용한 지연 건 하이라이트 로직 구현
  • 드래그 없이 카드 내 버튼으로 상태 전환 가능한 접근성 우선 인터랙션 설계

칸반 보드의 컬럼 이동을 내부 API 단일 경로로 처리해, 이후 외부 분석 서버가 같은 API로 상태를 자동 갱신할 수 있는 확장 구조를 설계합니다.

관리자 작업 상태 보드
관리자 작업 상태 보드 실제 화면
핵심 기능 2

회원·권한 관리

전체 회원 목록을 조회하고 계정별 이용 권한을 수동으로 부여·회수하는 관리자 화면입니다. 권한 상태는 사용자 화면의 구매 문의 분기와 동일한 데이터를 공유합니다.

  • 권한 토글 액션마다 변경 이력을 별도 로그 테이블에 기록하는 감사 추적 구조 구현
  • 회원 검색에 debounce와 서버 사이드 페이지네이션을 적용한 대량 회원 목록 처리
  • 권한 변경 API를 사용자 라우트 가드와 동일한 판정 로직으로 재사용해 데이터 정합성 유지

권한 변경 API와 사용자단 라우트 가드가 동일한 판정 함수를 공유하도록 설계해 관리자 조작과 사용자 화면 노출이 항상 일치하도록 구현합니다.

회원·권한 관리
회원·권한 관리 실제 화면
핵심 기능 3

결과물 업로드 및 자동 상태 전환

관리자가 분석 완료된 결과 HTML을 업로드하면 해당 점검의 상태가 자동으로 분석완료로 전환되어 사용자에게 즉시 노출되는 처리 화면입니다.

  • 결과 HTML 업로드 완료 시 상태 전환과 저장을 하나의 트랜잭션으로 묶어 부분 실패를 방지
  • 업로드 파일 확장자·용량 검증 후 S3 호환 오브젝트 스토리지에 저장하는 업로드 파이프라인 구현
  • 상태 전환 시점에 이메일 발송 큐에 작업을 적재하는 비동기 알림 트리거 구현

결과 업로드~상태 전환~알림 발송을 하나의 서버 트랜잭션 경계로 묶어, 상태 불일치 없이 사용자에게 결과가 노출되도록 설계합니다.

결과물 업로드 및 자동 상태 전환
결과물 업로드 및 자동 상태 전환 실제 화면
핵심 기능 4

외부 분석 서버 연동 API 및 통계 현황

외부 분석 서버가 신규 작업 조회·입력 데이터 다운로드·상태 갱신·결과 업로드를 동일 API로 자동 처리할 수 있도록 인증 API와 문서를 제공하고, 처리 현황을 통계 위젯으로 함께 보여줍니다.

  • API 키 발급·검증 미들웨어로 외부 분석 서버 전용 인증 경로를 관리자 인증과 분리 구현
  • 엔드포인트 호출 로그를 집계해 컬럼별 처리 건수·평균 처리 시간을 위젯으로 표시
  • OpenAPI 스펙 기반 API 문서를 자동 생성해 외부 연동 시 별도 안내 없이 참조 가능하도록 구성

외부 분석 서버가 관리자와 동일한 내부 API를 API 키로 호출하도록 설계해, 향후 수동 업로드를 자동 처리로 전환할 때 화면 로직 변경 없이 확장 가능한 구조를 구현합니다.

외부 분석 서버 연동 API 및 통계 현황
외부 분석 서버 연동 API 및 통계 현황 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

관리자 데이터 모델 및 상태 전이 설계 · 2026.09

점검 상태 전이 규칙(접수완료→분석중→분석완료→보완요청) 정의, 권한·로그 테이블 스키마 설계

STEP 2

칸반 보드 및 회원·권한 관리 화면 개발 · 2026.09

React 기반 칸반 보드, 회원 검색·권한 토글 화면, 감사 로그 조회 UI 구현

STEP 3

결과 업로드 파이프라인 및 알림 큐 구현 · 2026.09

Bull Queue 기반 비동기 알림, 결과 업로드-상태전환 트랜잭션, Redis 캐시 적용

STEP 4

외부 연동 API 및 통계 위젯 개발 · 2026.09

API 키 인증 미들웨어, OpenAPI 문서 자동화, Recharts 기반 처리 현황 위젯 구현

프로젝트 성과

주요 성과

상태 전환·결과 업로드 트랜잭션 통합 설계결과 HTML 업로드와 상태 전환, 알림 발송을 하나의 트랜잭션 경계로 묶어 부분 실패 없는 업로드 파이프라인을 구현합니다.
API 키 기반 외부 연동 인증 체계 구축관리자 인증과 분리된 API 키 발급·검증 미들웨어를 설계해 외부 분석 서버가 내부 API를 안전하게 호출하도록 구현합니다.
권한 변경 감사 로그 체계 설계권한 토글마다 변경 이력을 기록하는 로그 테이블과 조회 화면을 구현해 관리자 조작을 추적 가능하도록 설계합니다.
칸반 상태 동기화 아키텍처 구현관리자 보드의 상태 전환과 사용자 화면 배지가 같은 내부 API를 공유하도록 설계해 데이터 불일치를 제거합니다.
Highlights

기술적 주안점

  • 칸반 보드의 컬럼 이동을 내부 API 단일 경로로 처리해, 이후 외부 분석 서버가 같은 API로 상태를 자동 갱신할 수 있는 확장 구조를 설계합니다
  • 권한 변경 API와 사용자단 라우트 가드가 동일한 판정 함수를 공유하도록 설계해 관리자 조작과 사용자 화면 노출이 항상 일치하도록 구현합니다
  • 결과 업로드~상태 전환~알림 발송을 하나의 서버 트랜잭션 경계로 묶어, 상태 불일치 없이 사용자에게 결과가 노출되도록 설계합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기