← 포트폴리오 목록

AI 추천형 주거 공조 시공 매칭 플랫폼

주거 조건 입력, AI 공조 시스템 추천, 시공 업체 탐색, 실시간 1:1 채팅, 시공 예약과 에스크로 안전 결제까지 이어지는 고객 흐름을 React + Node.js 기반으로 설계·구현하는 맞춤 MVP 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종AI 서비스
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaSocket.io포트원
주요 기능
  • AI 추천
  • 업체 탐색
  • 실시간 채팅
  • 예약·결제

프로젝트 개요

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

주거 조건 입력, AI 공조 시스템 추천, 시공 업체 탐색, 실시간 1:1 채팅, 시공 예약과 에스크로 안전 결제까지 이어지는 고객 흐름을 React + Node.js 기반으로 설계·구현하는 맞춤 MVP 프로젝트입니다. AI 모듈은 어댑터 계층으로 분리해 API 스펙이 확정되면 교체할 수 있는 구조로 구현합니다.

작업 범위

  • AI 추천: 주거 형태·평수·현재 공조 상태를 선택형 폼으로 입력하면 추천 공조 시스템과 예상 견적, 필요 사양이 카드로 표시됩니다
  • 업체 탐색: AI 추천 사양에 맞는 시공 업체를 지역·평점·경력 필터로 좁히고, 카드 퀵뷰에서 시공 사례와 리뷰를 확인합니다
  • 실시간 채팅: 고객과 시공 업체가 1:1 채팅으로 현장 상황을 상담하고, 사진을 첨부해 견적 범위를 조율합니다
  • 예약·결제: 업체를 선택해 시공 일정을 요청하고, 예약 확정 후 에스크로 안전 결제 단계를 거쳐 예약 상태를 확인합니다

주요 업무

  • AI 추천 화면: 조건 입력값을 정규화해 AI 어댑터 계층으로 전달하고, 응답을 추천 카드와 사양 비교 표로 시각화합니다
  • 업체 탐색 화면: 필터 레일과 카드 그리드, 퀵뷰 drawer로 구성된 마켓플레이스 탐색 화면을 구현합니다
  • 실시간 채팅 화면: Socket.io 기반 방 단위 채팅과 이미지 업로드, 채팅 이력 저장을 구현합니다
  • 예약·결제 화면: 예약 요청 → 업체 확정 → 에스크로 결제 → 시공 완료 확인으로 이어지는 상태 머신과 PG 연동 인터페이스를 구현합니다
AI 추천형 주거 공조 시공 매칭 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

AI 모듈 API 스펙이 확정되지 않은 상태이므로 어댑터 계층과 목업 서버로 화면을 먼저 구동하고 변경 대응 범위를 명시할 계획입니다

에스크로 결제는 PG 가맹 심사 일정에 좌우되므로 결제 인터페이스를 추상화하고 테스트 모드로 흐름을 먼저 검증할 계획입니다

고객과 업체가 동시에 같은 예약을 수정하는 경우를 대비해 낙관적 잠금과 상태 전이 검증으로 충돌을 막을 계획입니다

현장 사진이 포함된 채팅에서 대용량 이미지 업로드 실패를 대비해 재시도와 임시 저장 구조를 설계할 계획입니다

구현 내용

핵심 기능 상세

핵심 기능 1

AI 추천

주거 형태·평수·현재 공조 상태를 선택형 폼으로 입력하면 추천 공조 시스템과 예상 견적, 필요 사양이 카드로 표시됩니다.

  • 선택지 기반 쿼리 빌더로 주거 조건을 정규화하고 zod 스키마로 입력값 검증
  • AI 호출을 Adapter 패턴으로 분리하여 요청·응답 DTO 변환과 스펙 변경 대응 범위를 한 계층에 집중
  • 타임아웃·파싱 실패 시 규칙 기반 폴백 추천으로 전환하는 Circuit Breaker 구조 적용

외부 AI REST API를 어댑터 계층으로 감싸 스펙 미확정 상태에서도 목업 응답으로 전체 화면을 구동하고, 실제 API 연결 시 어댑터만 교체하는 구조를 설계합니다.

AI 추천
AI 추천 실제 화면
핵심 기능 2

업체 탐색

AI 추천 사양에 맞는 시공 업체를 지역·평점·경력 필터로 좁히고, 카드 퀵뷰에서 시공 사례와 리뷰를 확인합니다. 필터 레일과 카드 그리드, 퀵뷰 drawer로 구성된 마켓플레이스 탐색 화면을 구현합니다.

  • URL 쿼리 상태와 필터 조건을 동기화하여 검색 결과 공유 링크 지원
  • PostgreSQL 복합 인덱스와 Prisma 동적 where 절로 지역·평점·경력 필터 조합 조회 구현
  • Intersection Observer 기반 무한 스크롤과 debounce 검색 적용

필터 조건을 URL 상태와 서버 쿼리에 동일하게 매핑하여 검색 결과 공유와 새로고침 복원을 지원하는 탐색 구조를 구현합니다.

업체 탐색
업체 탐색 실제 화면
핵심 기능 3

실시간 채팅

고객과 시공 업체가 1:1 채팅으로 현장 상황을 상담하고, 사진을 첨부해 견적 범위를 조율합니다. Socket.io 기반 방 단위 채팅과 이미지 업로드, 채팅 이력 저장을 구현합니다.

  • Socket.io 룸 단위 메시지 브로드캐스트와 읽음 표시 이벤트 구현
  • AWS S3 presigned URL 방식의 사진 첨부 업로드와 썸네일 미리보기 적용
  • 메시지 전송 실패 시 재전송 큐와 Optimistic UI로 입력 흐름 유지

룸 단위 WebSocket 채널과 메시지 이력 테이블을 결합해 새로고침 후에도 대화가 복원되고 사진 첨부가 끊김 없이 이어지는 채팅을 구현합니다.

실시간 채팅
실시간 채팅 실제 화면
핵심 기능 4

예약·결제

업체를 선택해 시공 일정을 요청하고, 예약 확정 후 에스크로 안전 결제 단계를 거쳐 예약 상태를 확인합니다.

  • 예약 상태 머신(요청·확정·결제 보관·시공 완료)을 Prisma 트랜잭션과 함께 설계
  • 포트원 결제 모듈 연동과 웹훅 검증으로 결제 상태 동기화 구현
  • 결제 요청에 멱등성 키를 적용하여 중복 결제 요청 방지

예약 상태 머신과 PG 웹훅 검증을 결합해 에스크로 보관·해제 시점이 서버 상태와 항상 일치하는 결제 흐름을 설계합니다.

예약·결제
예약·결제 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

고객 여정 분석 및 예약·결제 ERD 설계 · 2026.09

조건 입력부터 결제까지의 고객 흐름 정의, 예약 상태 머신과 PostgreSQL 핵심 테이블 설계

STEP 2

AI 어댑터 및 업체 탐색 API 구현 · 2026.09

AI 응답 DTO 변환 어댑터, 폴백 추천, 필터 조합 조회 API 구현

STEP 3

Socket.io 채팅 및 S3 사진 첨부 구현 · 2026.09

룸 단위 실시간 채팅, 이력 저장, presigned URL 이미지 업로드 구현

STEP 4

포트원 에스크로 결제 연동 및 반응형 통합 검증 · 2026.09

결제 요청·웹훅 검증·예약 상태 동기화 구현, 모바일·태블릿·데스크톱 레이아웃과 예약 흐름 E2E 시나리오 검증

개발 결과

AI 모듈 어댑터 계층 설계요청·응답 DTO 변환과 타임아웃 폴백을 한 계층에 모은 Adapter 패턴 구현, 스펙 변경 시 수정 범위를 어댑터로 한정
예약·에스크로 상태 머신 구축요청·확정·결제 보관·시공 완료 4단계 상태 전이를 Prisma 트랜잭션으로 설계, 웹훅 검증으로 결제 상태 동기화
룸 단위 실시간 채팅 구현Socket.io 룸 채널과 메시지 이력 테이블, S3 presigned 사진 첨부, 재전송 큐를 결합한 1:1 채팅 구현
URL 동기화 복합 필터 검색 설계지역·평점·경력 등 필터 조건을 URL 쿼리와 Prisma 동적 쿼리에 동일 매핑, 공유 링크로 결과 복원

기술적 주안점

  • 외부 AI REST API를 어댑터 계층으로 감싸 스펙 미확정 상태에서도 목업 응답으로 전체 화면을 구동하고, 실제 API 연결 시 어댑터만 교체하는 구조를 설계합니다
  • 필터 조건을 URL 상태와 서버 쿼리에 동일하게 매핑하여 검색 결과 공유와 새로고침 복원을 지원하는 탐색 구조를 구현합니다
  • 룸 단위 WebSocket 채널과 메시지 이력 테이블을 결합해 새로고침 후에도 대화가 복원되고 사진 첨부가 끊김 없이 이어지는 채팅을 구현합니다

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

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

프로젝트 문의