Skip to content

ujeans/find-holmes-frontend

 
 

Repository files navigation

🏠구해줘 홈즈🏠

스크린샷 2024-12-29 오후 10 39 36 - 배포 URL: https://find-holmes.vercel.app

1. 프로젝트 소개

구해줘, 홈즈사용자 맞춤형 매물 추천 서비스입니다. 이사를 준비하지만 어디로 가야 할지 고민이 되는 사용자들을 위해 구해줘, 홈즈는 사용자가 원하는 조건에 맞는 최적의 동네와 매물을 추천합니다.

  1. 간단한 정보 입력만으로 추천 매물 리스트를 확인할 수 있습니다.
  2. 사용자 조건에 맞는 상위 매물 5개를 그룹화하여 보여줍니다.
  3. 매물의 주변 시설과 교통 정보를 함께 제공합니다. -> 추후 개발 예정

2. 팀원 구성

김민호 홍유진

@klaus9267

백엔드 개발

@ujeans

프런트엔드 개발

3. 개발 환경

Front-End

  • Next.JS, Tailwind CSS, Zustand, Storybook

Back-End

  • Spring Boot, Kotlin, AWS, MongoDB

4. 개발 기간

2024.09 ~ 2024.12


5. 페이지별 기능

[초기화면]

  • 서비스 접속 초기 화면이 나오면 클릭을 통해 다음 페이지를 볼 수 있습니다.
초기 화면

[필터 적용]

  • react-daum-postcode 라이브러리를 이용하여 학교/회사와 같은 목적지를 입력합니다.
  • 목적지까지의 희망 소요시간을 설정합니다.
  • 원하는 매물 유형거래 유형을 다중 선택할 수 있습니다.
  • 거래 유형에서 선택한 전세, 월세에 해당하는 가격 슬라이드바를 볼 수 있습니다.
  • 해당 슬라이드바에서 원하는 가격을 설정합니다.
  • 시간, 예산 중에 더 중요한 것을 선택 후 지역 추천 버튼을 누르면 다름 페이지로 이동합니다.
필터 적용

[TOP5]

  • 필터를 적용한 조건에 맞는 매물들을 모아 지역을 기준으로 Top 5 순위를 매겨서 보여줍니다.
  • 해당 지역에 속하는 매물 개수도 보여줍니다.
  • 매물이 없는 경우는 매물이 없다는 텍스트를 보여줍니다.
TOP5 리스트 매물이 없을 때
스크린샷 2024-12-29 오후 11 02 52 스크린샷 2024-12-29 오후 11 12 14

[매물 상세 목록]

  • TOP5에서 보러가기를 클릭하면 상세 매물 목록이 보입니다.
  • 상세 매물의 거래 유형, 가격, 지역, 소요시간을 볼 수 있습니다.
매물 상세 목록
스크린샷 2024-12-29 오후 11 05 34

[매물 상세 정보]

  • 매물 목록에서 원하는 매물을 클릭하면 해당 매물의 상세 정보를 알 수 있습니다.
  • 아파트/오피스텔/빌라명과 주소를 볼 수 있습니다.
  • 지도에서 해당 위치를 파악할 수 있습니다.
매물 상세 목록
스크린샷 2024-12-29 오후 11 08 38

About

구해줘, 홈즈 프런트엔드 레포입니다.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 79.5%
  • MDX 18.2%
  • CSS 2.0%
  • JavaScript 0.3%