소개
나만의 웹서비스 청강으로 반중력 플레이그라운드로 만들어 봤습니다.
간단하게 부동산 입력하고 조회하는 사이트예요.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Antigravity playground에게 시켰어요.
"부동산을 등록하고 소개하는 사이트를 만들어줘. 회원 로그인이 필요하고 등록된 부동산은 모든 사람이 열람 가능하게 구현해줘. 등록된 부동산은 시도별로 정리가 되서 시도를 선택하면 해당 시도의 부동산만 나오게 해줘. 예를 들면 서울특별시를 선택하면 서울특별시 부동산만 나오는거지. 부동산 등록은 도로명주소 api를 연결해서 검색하고 선택하게 해줘."
아래는 Antigravity가 세운 계획이예요.
부동산 플랫폼 구현 계획
목표 설명
사용자가 회원가입 및 로그인을 하고, 주소 검색 API를 통해 부동산 매물을 등록하며, 지역별로 필터링하여 매물을 볼 수 있는 플랫폼을 구축합니다.
사용자 검토 필요 사항
IMPORTANT
로컬 개발의 편의성을 위해 데이터베이스는 SQLite를 사용합니다. 인증은 표준 이메일/비밀번호 방식을 사용합니다. 주소 검색 기능은 다음 우편번호 서비스(Daum Postcode Service)를 사용합니다.
변경 제안 사항
기술 스택
프레임워크: Next.js 14+ (App Router)
스타일링: Tailwind CSS
데이터베이스: SQLite (via Prisma ORM)
인증: NextAuth.js (Credentials Provider 사용)
데이터베이스 스키마 (Prisma)
Users (사용자)
id: Int/Stringemail: String (고유값)password: String (해싱됨)name: StringcreatedAt: DateTime
Properties (매물)
id: Int/Stringtitle: String (제목)description: String (설명)price: Float/String (가격)address: String (전체 주소)region: String (예: "서울특별시", "경기도") - 주소에서 파싱하거나 선택.imageUrl: String (선택 사항)ownerId: Int/String (User와 관계)createdAt: DateTime
컴포넌트
[NEW]
components/AddressSearch.tsx
주소 선택을 위한 다음 우편번호 API 래퍼 컴포넌트.
[NEW]
components/PropertyCard.tsx
매물 요약을 보여주는 카드 컴포넌트.
[NEW] components/RegionFilter.tsx
시/도를 선택하는 UI 컴포넌트.
페이지 (App Router 라우트)
/- 매물 목록 및 필터가 있는 홈페이지./login- 로그인 페이지./signup- 회원가입 페이지./properties/new- 매물 등록 페이지 (로그인 필요)./properties/[id]- 매물 상세 페이지./properties/[id]/edit- 매물 수정 페이지 (로그인 & 본인 소유만).
검증 계획
자동화 테스트
빌드 확인:
npm run build린트 확인:
npm run lint
수동 검증
새 사용자로 회원가입을 진행합니다.
로그인을 합니다.
주소 검색 기능을 사용하여 매물 주소를 입력합니다.
매물을 등록합니다.
홈페이지로 이동하여 등록한 매물의 지역으로 필터링합니다.
등록된 매물이 목록에 나타나는지 확인합니다.
매물을 클릭하여 상세 페이지 내용을 확인합니다.결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
-> 요구사항을 좀 더 상세히 기술하는게 좋겠어요.
과정 중에 어떤 시행착오를 겪었나요?
-> 세밀한 기능은 수정이 필요해요.
도움이 필요한 부분이 있나요?
-> 그냥 다 허용 하긴 했는데 내 노트북 보안에 뚫린건 아니겠죠? ㅠ.ㅜ
앞으로의 계획이 있다면 들려주세요.
-> 막무가내로 써봤는데 앞으론 좀 이해하고 쓰고 싶네요. ^^
