HAPPY HOUSE | 프로젝트

개요

주택 실거래가 조회 화면 1

사용자 맞춤형 주택 실거래가 정보 서비스를 만드는 것을 목표로 프로젝트를 수행했습니다.

프로젝트 자체는 커리큘럼을 진행하면서 천천히 만들어 나갔기 때문에 주택 실거래가 조회와 같은 주요 기능은 이미 완성이 된 상태였지만, 2인 1조로 페어를 짜서 프로젝트에 살을 붙일 때마다 매번 페어가 바뀌었고, 각자 팀에서 구현한 기능이나 컨벤션, 변수 및 함수 이름과 파일명 등의 차이가 계속해서 생길 수밖에 없었습니다. 차이를 줄이면서 기능을 더 많이 구현한 페어의 소스 코드에 맞추기 위해 기존의 코드를 매번 수정하는 작업을 거쳤지만, 갈수록 코드는 더러워지고, 기능도 어설프게 구현되었다는 것을 최종 프로젝트 개발 기간에 다다라서야 깨달았습니다. 결국 기존 작업물을 갈아엎고 주요 기능부터 하나씩 만들어보기로 했습니다.

저는 이 프로젝트에서 프론트엔드를 총괄했으며, 로그인 및 회원가입과 같은 회원 관리 파트와 관심 지역 및 주택 관리 기능, 주택 랭킹 페이지, 주택 거래 변동량 시각화 기능을 담당했습니다. 그리고 팀원과 공동으로 주택 실거래가 조회 기능, 공지사항 및 QnA 게시판을 구현했습니다.

주요 기능

주택 실거래가 조회

주택 실거래가 조회 화면 2

본 프로젝트의 핵심 기능인 주택 실거래가 조회 기능입니다.

시/군/구 단위로 주소를 검색하면, 해당 지역에 존재하는 모든 상가나 아파트의 가장 최근 실거래가를 조회할 수 있습니다. 좌측 상단에서 조회할 주소의 시/도와 구/군을 선택하면, 우측 상단에 검색 결과 창이 뜨고, 검색된 아이템 하나를 클릭하면 우측 하단에 해당 주택의 이름과 상세 주소, 그리고 가장 최근의 실거래가를 확인할 수 있습니다. 그 아래는 상세 정보 버튼과 관심 주택에 추가 버튼이 있는데, 후자의 경우는 아래에서 자세히 설명하도록 하겠습니다.

가격대 기준 검색 화면

가격 필터 영역의 슬라이드를 조절하여 검색할 주택의 실거래가 범위를 선택할 수 있습니다. 슬라이드는 vue-range-slider를 사용했습니다.

주택 상세 정보 화면

상세 정보 버튼을 클릭하면 위와 같이 모달 창이 뜹니다. 상단 영역에서는 해당 주택의 이름과 상세 주소, 가장 최근 실거래가와 기타 정보(건축년도, 전용면적, 층수)를 확인할 수 있습니다. 그 아래로 두 개의 이미지를 볼 수 있는데, 원래는 주택마다 1~2개의 이미지를 받아서 보여줄 예정이었지만, 제공받은 DB에서는 이미지를 받아올 수 없어서 왼쪽에는 Trianglify로 생성한 패턴 이미지를, 오른쪽에는 이미지가 존재하지 않을 경우에 뜨는 이미지를 표시하도록 했습니다. 이미지 영역 아래에는 평균 실거래가 변동률 그래프와 그 아래에 있는 0명이 관심 있어 합니다. 메시지를 확인할 수 있는데, 이 부분도 아래에서 자세히 설명해 드리도록 하겠습니다.

원래는 주택 실거래가 정보를 공공 API로부터 직접 받아와서 사용할 예정이었지만, 데이터를 가공해서 DB로 제공해준 다른 팀 덕분에 DB를 거치는 방식으로 변경하게 되었습니다. (감사합니다!)

주변 상권 정보 조회

주변 상권 정보 조회 화면

현재 선택된 주택의 반경 500m를 붉은색 원으로 강조하여 근처에 어떤 시설이 있는지 파악할 수 있습니다. 왜 500m냐 하면, O세권의 대표적인 예시인 역세권, 특히 직접역세권의 기준이 최대 반경 500m로 알려져 있기 때문입니다. (출처) 하지만 범위를 원으로만 강조하면 어떤 시설이 주변에 존재하는지 파악하기 어렵기 때문에 좌측 하단에 각 시설의 위치를 토글할 수 있는 버튼 그룹을 만들었습니다. 은행, 마트, 약국, 주유소, 카페, 편의점 총 6종류의 시설 위치를 확인할 수 있습니다. 그뿐만 아니라 주변 교통정보 보기를 체크하면 주변 도로의 정체/원활 여부를 확인할 수 있도록 했습니다.