🏠웹사이트 흐름
1. 파일 구조
frontend/src/app/
├── api/
│ └── property.ts (API 연동)
├── components/
│ └── ChatBot.tsx (챗봇 컴포넌트 - 추후 개발)
├── property/
│ └── [id]/
│ └── page.tsx (매물 상세 페이지)
└── page.tsx (메인 페이지)
backend/
├── app/
│ ├── main.py # FastAPI 서버 실행 (진입점)
│ ├── routes.py # 매물 조회 + 전세 사기 분석 API
│ ├── database.py # 간단한 데이터 저장 (리스트 활용)
│ ├── scam_check.py # 전세 사기 AI 분석 (랜덤 점수 부여)
│ ├── schemas.py # API 요청/응답 데이터 구조
├── requirements.txt # 필요한 Python 패키지 목록
├── .env # 환경 변수 (DB URL 등)
├── README.md2. 주요 페이지 흐름
2.1. 홈 화면 (page.tsx)
-
구성 요소:
- 매물 검색창:
- 지역, 가격, 면적 등 검색 조건 입력
- 매물 리스트:
- 검색 조건에 맞는 매물 목록 표시
- 각 매물은 간략한 정보 (이름, 가격, 사진) 표시
- 매물 검색창:
-
동작:
- 사용자 접속:
page.tsx로드 - 매물 검색: 사용자가 검색 조건 입력 후 검색
- 매물 리스트 갱신: 검색 조건에 맞는 매물 리스트 표시
- 매물 선택: 사용자가 특정 매물 클릭
- 상세 페이지 이동:
property/[id]/page.tsx로 이동 (해당 매물의id를 파라미터로 전달)
- 사용자 접속:
2.2. 매물 상세 페이지 (property/[id]/page.tsx)
-
구성 요소:
- 매물 기본 정보:
- 매물 이름, 가격, 면적, 층수, 준공 연도, 사진
- 매물 상세 설명
- AI 기반 전세 사기 위험 분석 결과:
- 전세 사기 위험 점수 (0~100): FastAPI에서 계산
- 위험 레벨: 점수에 따라 "안전", "주의", "위험" 표시 (색상으로 구분)
- 상세 분석 내용: (추후 개발)
- 관심 목록 추가 버튼:
- 매물을 관심 목록에 추가/제거 가능
- 매물 기본 정보:
-
AI 기반 전세 사기 위험 분석 (상세)
위험 점수 레벨 색상 설명 0 ~ 30 안전 초록색 전세 사기 위험이 낮은 안전한 매물입니다. 31 ~ 70 주의 주황색 전세 사기 위험이 중간 정도인 매물입니다. 계약 시 주의가 필요합니다. 71 ~ 100 위험 빨간색 전세 사기 위험이 높은 매물입니다. 계약을 신중하게 고려하십시오. -
동작:
- 페이지 로드:
property/[id]/page.tsx로드 (매물id파라미터 전달) - API 호출: 백엔드 API (
api/property.ts)를 호출하여 해당 매물의 상세 정보 및 AI 분석 결과를 가져옴 - 정보 표시: 매물 기본 정보 및 AI 분석 결과 화면에 표시
- 관심 목록 추가/제거: 사용자가 "관심 목록 추가" 버튼 클릭 시, 로컬 스토리지 또는 API를 통해 관심 목록 관리
- 페이지 로드:
3. 데이터 흐름
- 매물 검색:
- 사용자가
page.tsx에서 검색 조건 입력 - 검색 조건과 함께 백엔드 API (
api/property.ts) 호출 - 백엔드는 검색 조건에 맞는 매물 데이터 반환
page.tsx는 반환된 데이터를 화면에 표시
- 사용자가
- 매물 상세 정보 및 AI 분석 결과:
사용자가 특정 매물을 클릭 (property/[id]/page.tsx로드)
property/[id]/page.tsx는 해당 매물id와 함께 백엔드 API (api/property.ts) 호출
백엔드는 매물 상세 정보 및 AI 분석 결과 반환
property/[id]/page.tsx는 반환된 데이터를 화면에 표시
홈
상세 페이지 + AI 분석
.