플러스프로젝트 배경
1) 문제점 - 분양 평면도 이미지의 고해상도 원본(5000px+)을 업로드 시 sharp 리사이징 3종 생성과 WebP 변환을 비동기 큐로 처리하며 업로드 완료 응답을 먼저 반환하는 비동기 파이프라인 설계 필요 - 고객 문의 폼에서 동일 고객(연락처 기준)의 중복 접수를 감지하여 기존 문의와 병합 표시하면서 신규 문의로도 기록하는 고객 식별 및 연관 문의 그루핑 로직 설계 필요 - 관리자 대시보드의 지
프로젝트 성과
분양 문의 4단계 상태 머신 워크플로우 설계
신규→확인→상담→완료 4단계 전환을 Express 미들웨어 패턴으로 구현하여 역전 방지 및 잘못된 상태 변경을 차단하고, Prisma Transaction으로 상태 변경과 이력 기록을 원자적으로 처리하는 구조 설계
Prisma groupBy 기반 다차원 문의 통계 집계 설계
일별/주별/월별 기간 필터 + 지역별/평형별/유입경로별 3개 축으로 문의 데이터를 서버사이드 집계하여 대시보드 KPI와 분석 차트에 동시 제공하는 집계 쿼리 아키텍처 구현
sharp 기반 분양 이미지 3종 자동 리사이징 파이프라인 구축
평면도·갤러리 이미지 업로드 시 sharp로 원본(2400px)·썸네일(400px)·웹 최적화(1200px) 3종 사이즈를 자동 생성하고, WebP 변환으로 용량을 최적화하는 이미지 처리 파이프라인 설계
TanStack Table 서버사이드 페이지네이션 + 다중 필터 구현
이름·연락처·관심 평형·처리 상태·접수일 5개 필터를 URL SearchParams와 동기화하고, 서버사이드 정렬·페이지네이션과 결합하여 대용량 문의 데이터를 효율적으로 조회하는 테이블 구조 구현
분양 홍보 섹션별 CMS 콘텐츠 에디터 구축
단지 개요·입지 분석·평면도·갤러리 4개 섹션을 React Hook Form 동적 폼으로 구현하고, Zod 스키마로 섹션별 필드 검증을 자동화하여 비개발자도 홍보 콘텐츠를 편집할 수 있는 CMS 설계
핵심 기능
관리자 대시보드
분양 문의 현황 KPI 카드 + 일별/주별 문의 추이 차트 + 최근 문의 목록 위젯을 통합한 대시보드
진행 단계
분양 문의 DB 스키마 및 홍보 콘텐츠 데이터 모델 설계
2025.04.
고객 문의·처리 이력·홍보 섹션(단지 개요/입지/평면도/갤러리) 데이터 구조를 PostgreSQL 8개 테이블로 정의, Prisma ORM 모델 및 마이그레이션 작성
프로젝트 상세
1) 포트폴리오 소개 프리미엄 아파트 분양 프로젝트의 홍보 랜딩페이지와 고객 문의 관리 시스템을 설계·구현한 프로젝트입니다. 단지 개요·입지 분석·평면도·갤러리 4개 섹션으로 구성된 분양 홍보 페이지, 고객 문의 접수 폼 및 DB 확보 기능, 문의 내역 조회/상세/처리 상태 관리 관리자 대시보드를 React + Node.js + Express + PostgreSQL + Prisma 기반으로 구축했습니다.
