← 포트폴리오 목록

주거 공조 시공 매칭 관리자 백오피스

고객 웹 이후 단계로, 관리자가 AI 모듈 3종의 호출 상태를 확인하고 접수된 상담·견적 요청을 처리하며 CSV로 내보내는 백오피스 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종모니터링
기술 스택
ReactTypeScriptTailwind CSSRechartsNode.jsExpressPostgreSQLPrismaRedis
주요 기능
  • AI 연동 호출 모니터링
  • 상담·견적 접수 관리
  • 배포·인프라 현황
  • 확장 제안 로드맵

프로젝트 개요

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

고객 웹 이후 단계로, 관리자가 AI 모듈 3종의 호출 상태를 확인하고 접수된 상담·견적 요청을 처리하며 CSV로 내보내는 백오피스 구현한 프로젝트입니다. 배포·인프라 현황 화면과 결제, 실시간 채팅, 시공 파트너 자동 매칭을 제안 범위의 확장 로드맵으로 함께 제시합니다.

작업 범위

  • AI 연동 호출 모니터링: 청약, 자동설계, 상담 챗봇 모듈의 호출 지연 추이를 왼쪽 차트로, 최근 호출 로그와 오류를 오른쪽 피드로 확인합니다
  • 상담·견적 접수 관리: 접수된 상담과 견적 요청을 목록에서 검색하고 상세를 확인하며 처리 상태를 바꾸고 CSV로 내보냅니다
  • 배포·인프라 현황: 서비스 구성 요소별 상태와 배포 이력, 환경별 설정 점검 항목을 한 화면에서 확인합니다
  • 확장 제안 로드맵: 계약 범위 밖 제안 항목인 결제와 에스크로 정산, 실시간 1:1 채팅, 시공 파트너 전용 페이지와 자동 매칭을 단계별 화면 예시와 함께 제시합니다

주요 업무

  • AI 연동 호출 모니터링 화면: AI 호출을 서버에서 기록하는 로그 테이블과 집계 쿼리를 두고, 주기 갱신되는 이중 패널 화면으로 모듈별 상태를 보여주는 구조를 반영합니다
  • 상담·견적 접수 관리 화면: 신청 건을 DB 기준으로 조회하는 목록·상세 API와 상태 전이 규칙, 필터 조건이 반영된 CSV 생성 구조를 반영합니다
  • 배포·인프라 현황 화면: 컨테이너 구성과 CI/CD 단계 상태를 기록하는 테이블을 두고, 타 업체 이관을 고려한 구성 정보와 점검 체크리스트를 화면으로 정리하는 구조를 반영합니다
  • 확장 제안 로드맵 화면: 각 확장 항목의 데이터 모델과 연동 지점을 미리 설계하고, 현재 구조에서 추가되는 모듈 범위를 로드맵 화면으로 보여주는 구조를 반영합니다
주거 공조 시공 매칭 관리자 백오피스
요구사항 정의

프로젝트 핵심 과제

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

AI 모듈별 응답 시간 편차가 커서 모듈 단위 집계와 오류 유형 분류 기준을 정해 차트에 의미 있게 표현할 필요가 있습니다

신청 건에 사진과 견적 결과가 함께 붙어 목록 조회가 무거워질 수

목록용 요약 조회와 상세 조회를 분리합니다

CSV에 개인 연락처가 포함되므로 내보내기 권한과 항목 마스킹 정책을 서버에서 검증하는 구조를 설계할 계획입니다

결제와 파트너 매칭은 범위와 PG 계약 조건이 확정되지 않아 인터페이스 추상화와 설정 테이블로 분리해 대응할 계획입니다

타 업체 이관을 고려해 구성 요소와 환경 설정

배포 절차를 화면과 문서로 함께 정리하는 구조로 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

AI 연동 호출 모니터링

청약, 자동설계, 상담 챗봇 모듈의 호출 지연 추이를 왼쪽 차트로, 최근 호출 로그와 오류를 오른쪽 피드로 확인합니다.

  • AI 프록시 미들웨어에서 호출 시각, 모듈, 소요 시간, 오류 코드를 로그 테이블에 기록하는 구조 설계
  • Recharts 영역 차트로 모듈별 지연 추이를 그리고 SSE로 최신 로그를 피드에 추가하는 화면 구현
  • 오류 유형별 필터와 모듈 선택으로 하단 호출 목록을 좁혀 보는 조회 API 설계

호출 기록을 프록시 한 곳에서 남기도록 설계해 모듈이 늘어나도 모니터링 화면과 집계 쿼리를 그대로 재사용합니다.

AI 연동 호출 모니터링
AI 연동 호출 모니터링 실제 화면
핵심 기능 2

상담·견적 접수 관리

접수된 상담과 견적 요청을 목록에서 검색하고 상세를 확인하며 처리 상태를 바꾸고 CSV로 내보냅니다.

  • 상태, 기간, 키워드 조건을 조합하는 서버 측 필터와 페이지네이션 쿼리 설계
  • 신청 상세에서 견적 결과, 현장 사진, 처리 이력을 한 화면에 묶어 보여주는 상세 패널 구현
  • 현재 필터 조건을 그대로 반영해 스트림 방식으로 CSV를 생성하는 내보내기 API 구현

목록 화면의 필터 상태를 CSV 내보내기 조건과 동일하게 사용해 화면에 보이는 건과 내려받는 파일이 일치하도록 설계합니다.

상담·견적 접수 관리
상담·견적 접수 관리 실제 화면
핵심 기능 3

배포·인프라 현황

서비스 구성 요소별 상태와 배포 이력, 환경별 설정 점검 항목을 한 화면에서 확인합니다.

  • Docker Compose 구성과 GitHub Actions 워크플로 단계를 상태 모델로 정리한 배포 이력 화면 구현
  • 서버, DB, 캐시, 스토리지 구성 요소의 헬스 체크 결과를 카드로 모아 보여주는 점검 API 설계
  • 환경 변수 목록과 필수 설정 누락 여부를 점검하는 이관 체크리스트 화면 구현

구성 요소와 배포 절차를 문서가 아닌 화면 데이터로 관리해 인수인계 시 현재 구성을 그대로 확인할 수 있게 설계합니다.

배포·인프라 현황
배포·인프라 현황 실제 화면
핵심 기능 4

확장 제안 로드맵

계약 범위 밖 제안 항목인 결제와 에스크로 정산, 실시간 1:1 채팅, 시공 파트너 전용 페이지와 자동 매칭을 단계별 화면 예시와 함께 제시합니다.

  • 토스페이먼츠 연동 인터페이스를 추상화한 결제 승인과 정산 대기 상태 모델 설계
  • Socket.io 기반 고객과 시공 파트너 1:1 채팅 채널과 읽음 상태 모델 구현 범위 정의
  • 지역, 공종, 일정 조건으로 후보 파트너를 점수화하는 매칭 규칙을 설정 테이블로 분리

필수 과업의 구조 위에 결제, 채팅, 파트너 매칭을 모듈로 얹을 수 있도록 데이터 모델과 연동 지점을 먼저 정리해 단계적 확장 경로를 제안합니다.

확장 제안 로드맵
확장 제안 로드맵 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

호출 로그 모델링 및 집계 쿼리 설계 · 2026.10

AI 프록시 호출 로그 스키마, 모듈별 지연 집계 쿼리와 인덱스 설계

STEP 2

이중 패널 모니터링 화면 구현 · 2026.10

지연 추이 차트, SSE 로그 피드, 하단 호출 목록과 오류 필터 화면 구현

STEP 3

접수 관리·CSV 내보내기 구현 · 2026.10

접수 목록 필터, 상세 패널, 상태 전이 규칙과 스트림 CSV 생성 구현

STEP 4

인프라 현황 및 확장 모듈 범위 정리 · 2026.10

배포 이력·헬스 체크 화면, 이관 체크리스트, 결제·채팅·매칭 확장 모델 정리

개발 결과

프록시 단일 지점 AI 호출 로깅 구조 설계프록시 미들웨어에서 호출 시각, 모듈, 소요 시간, 오류 코드를 기록해 모듈 추가에도 재사용되는 로그 구조를 설계합니다.
SSE 기반 실시간 로그 피드 구현서버 전송 이벤트로 최신 호출 로그를 피드에 추가하고 Redis Pub/Sub으로 다중 인스턴스 전달을 설계합니다.
필터 연동 스트림 CSV 내보내기 구현목록 필터 조건을 그대로 사용해 스트림으로 CSV를 생성하고 화면 건수와 파일 건수가 일치하는 구조를 구현합니다.
결제·채팅·매칭 확장 모듈 모델 설계결제 승인, 채팅 채널, 파트너 매칭 규칙의 테이블과 연동 지점을 사전 설계해 단계별 추가 범위를 정리합니다.

기술적 주안점

  • 호출 기록을 프록시 한 곳에서 남기도록 설계해 모듈이 늘어나도 모니터링 화면과 집계 쿼리를 그대로 재사용합니다
  • 목록 화면의 필터 상태를 CSV 내보내기 조건과 동일하게 사용해 화면에 보이는 건과 내려받는 파일이 일치하도록 설계합니다
  • 구성 요소와 배포 절차를 문서가 아닌 화면 데이터로 관리해 인수인계 시 현재 구성을 그대로 확인할 수 있게 설계합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의