AI 주거 공조 시공 매칭 고객 웹

회원가입과 소셜 로그인 후 청약 정보를 입력하면 AI 모듈이 계산한 예상 가점과 분양가 예측 결과를 카드와 차트로 보여줍니다.

• OAuth2 소셜 로그인과 JWT 세션을 결합하고 약관 동의 이력을 별도 테이블에 저장하는 가입 흐름 설계
• 외부 청약 AI API를 서버 프록시로 감싸 키 노출을 막고 응답 스키마를 런타임 검증하는 구조 구현
• 가점 항목별 점수와 분양가 구간을 Recharts 막대·범위 차트로 표현하는 결과 컴포넌트 설계

외부 AI 모듈의 응답 스키마가 바뀌어도 어댑터 계층만 수정하면 되도록 검증과 변환 단계를 분리해 설계합니다.

단지, 동, 호수를 검색해 평면도를 불러오고 시공할 방을 선택하면 자동설계 AI가 예상 견적과 맞춤 패키지를 제안합니다.

• 단지·동·호 3단계 자동완성 검색을 디바운스 요청과 React Query 캐시로 구성
• SVG 평면도 위에서 방 영역을 선택하고 선택 결과를 자동설계 API 요청 모델로 변환하는 매핑 구현
• 견적 결과를 패키지 카드와 항목별 내역표로 나눠 보여주는 결과 화면 설계

평면도 DB의 제공 형태가 확정되지 않은 상황을 고려해 평면도 조회를 어댑터로 분리하고 선택 영역 좌표를 표준 모델로 저장합니다.

상담 에이전트 API와 연결된 챗봇에서 시공 관련 질문을 주고받고, 응답 대기와 실패 상황도 대화 화면 안에서 안내합니다.

• AI 호출 공통 훅에서 로딩, 타임아웃, 재시도, 오류 분류 상태를 일괄 관리하는 구조 구현
• 메시지 전송 시 낙관적 표시와 실패 메시지 재전송 버튼을 제공하는 대화 목록 설계
• 대화 이력을 세션 단위로 저장해 마이페이지와 연결하는 데이터 모델 설계

청약, 자동설계, 챗봇 호출이 같은 예외 처리 계층을 공유하도록 설계해 화면마다 다른 에러 표현이 생기지 않게 합니다.

견적 결과를 확인한 고객이 이름, 연락처, 현장 사진을 입력해 시공 상담을 신청하고 마이페이지에서 견적과 상담 내역을 조회합니다.

• 다중 이미지 업로드를 Multer와 서명 URL 방식으로 처리하고 파일 형식과 용량을 서버에서 검증
• 신청 폼 입력값을 Zod 스키마로 검증하고 견적 결과 식별자와 함께 트랜잭션으로 저장
• 회원 식별자 조건으로 견적·상담 내역을 필터링하는 본인 데이터 조회 API 설계

견적 결과, 상담 신청, 업로드 사진을 하나의 신청 건으로 묶어 저장해 관리자 화면과 마이페이지가 같은 데이터를 참조하도록 설계합니다.