Spring boot를 이용한 다방 홈페이지만들기

 

코로나19와 함께한 프로젝트였다.

 

 

이번 프로젝트는 아래의 다방페이지를 참고하여 구현했다.

https://www.dabangapp.com/

부동산 필수 앱 다방

 

다방의 페이지는 세입자, 방주인, 공인중개사 이 셋의 주체별로 가입경로 등의 페이지가 달랐는데

함께하는 조원이 3명이라 한페이지에 권한별로 볼수있는 페이지를 만들고 권한이 있는 사람만 페이지를 볼수있도록 구현하였다.

 

스프링부트 툴을 사용, DB는 Mysql 5.7버전을 사용하였다.

mvc model 2 방식으로 구조를 잡았고 JSP기술을 이용하였다.

또한 jstl, lombok, jasper, mybatis등의 라이브러리를 사용하여 다음 카카오지도 API등을 활용하여 구현하였다.

 

AWS amazon EC2를 이용하여 배포 할 예정이다.

 

* 주체

(1) 세입자 : 방(매물)을 확인 할 수 있다.

(2) 방주인 : 방(매물)을 등록 할 수 있다.

(3) 공인중개사 : 관리자를 통해 인증받은 공인중개사만 방(매물)을 승인 할 수 있다.

(4) 관리자 : 공인중개사의 정보를 확인하고 승인 할 수 있다.

 

 

 

데이터베이스 구조

조원이 총 3명이고, git에 올리면서 작업물을 합치는 과정이 있어

초반 작업은 충돌을 피하기 위해 디비를 기준으로 최대한 자기 몫만큼의 파일만 추가하고 수정하도록 진행했다.

초반의 주요 작업은 윤정이는 방 올리기, 향미는 방 검색, 서하는 유저기능을 맡아 주요 기능의 뼈대를 잡고 추가기능을 구현하였다.

 

 

 

 

1. 메인화면

 

 

 

메인화면

- 검색기능을 이용해서 검색한 지역에 대한 방(매물) 정보를 찾을 수 있다.

- 카카오 주소찾기 API를 사용하여 도로명주소, 구주소 정보를 함께 찾을 수 있다.

 

 

대표사진 삭제

 

유저의 최근 본 방

- 로그인을 한 유저의 최근본 방을 최대 3개까지 볼 수 있다.

- 로그인하지 않으면 메인화면서 이 화면은 활성화 되지 않는다.

 

2. 회원가입

 

회원가입

- email 유효성검사, 중복확인, 비밀번호 일치여부, 길이확인, 이름, 전화번호 등의 유효성을 확인하여 ajax기술로 바로 안내할수 있게 구현 되었다.

- 회원가입을 하면 그 정보로 session을 생성하여 바로 로그인 된 상태가 된다.

 

3. 로그인 및 비밀번호 찾기

 

 

로그인

- 이메일과 비밀번호 일치여부 확인하여 로그인할 수 있다.

- cookie를 이용하여 아이디를 기억 할 수 있다.(일주일 보관)

 

 

 

 

비밀번호 변경하기

 

- 이메일과 핸드폰번호를 통해 본인확인을 할수 있다.

- 본인확인이 되면 ajax기술을 통해 새로 비밀번호를 설정 할 수 있다.

- 추후 이메일 인증여부기술을 사용하여 비밀번호 찾기 화면을 변경 할 예정

 

4. 마이페이지

마이페이지

- 세입자, 방주인은 별 다른 인증정보를 필요로 하지않는다.

- 공인중개사 인증하기 버튼을 클릭하여 인증정보를 입력 할 수 있다.

- 관리자의 승인을 받은 공인중개사만이 매물 승인하기 메뉴가 활성화 된다.

 

 

중개사무소 정보 업로드

- 중개사무소 정보를 입력할 수 있다.

 

 

 

5. 공인중개사 승인하기

 

공인중개사 승인페이지

- 페이지 관리자만 공인중개사 승인페이지를 볼 수 있다.

- 공인중개사 승인을 하면 승인여부가 Y로 바뀐다.

 

 

중개사무소 정보 보기

 

 

6. 방내놓기

 

 

방내놓기

- 주소찾기를 클릭하여 주소팝업창이 뜨면 주소를 입력할 수 있다.

- 카카오맵 API를 통해 위치를 마커로 표시하고 WCONG 좌표계의 경도, 위도의 값을 받아온다.

 

 

 

- 거래정보 등을 입력 할 수 있다.

- 추가정보의 옵션항목등을 중복선택하여 아이콘으로 출력이 가능하다.

 

 

- 파일을 다중으로 선택하여 업로드 할 수 있다.(commons-fileupload, commons-io 라이브러리 사용)

 

 

7. 매물 승인하기

 

 

 

- 방등록을 하면 매물승인요청글이 올라간다.

- 공인중개사는 매물을 직접 확인하고 매물을 승인하면 미승인 -> 승인 상태로 변경이 된다.

 

 

 

- 매물 확인하고 승인하면 공인중개사가 확인한 매물이라는 것을 확인 할 수 있다.

 

 

8. 방찾기

 

 

- 방 종류, 매물종류별로 올라온 방을 확인할 수 있다.

- 지도에서 매물의 위치를 확인할 수 있다.

 

- 위치 별 클러스터링

 

 

대표사진 삭제

사진 설명을 입력하세요.

- 매물 사진의 오른쪽 상단의 하트버튼을 클릭하면 관심목록에 추가된다.

 

 

- 하트버튼을 누른 관심목록 매물을 확인 할 수 있다.

 

 

 

 

 

 

- 공인중개사가 확인한 매물인지 아닌지 리스트에서 확인 할 수 있다.

 

 

9. 방 상세보기

 

 

 

 

- 기본정보, 매물사진, 옵션사항등을 볼 수 있다.

- 해당 매물을 승인한 공인중개사가 승인한 다른 매물을 최대 3개까지 볼 수 있다.

 

 

 

 

 

추가로 카카오톡 로그인하기, 이메일인증을 통한 비밀번호 찾기, 클러스터링 기술 등의 업데이트, 시큐리티가 필요하여 버전 업로드 하여 AWS 배포 예정이다.

 

2주동안 수고많았어 친구들:-)

 

 

 

 

ㅠㅠ포폴용이라 계속 열어두고 있었는데 AWS 과금으로 인해 닫아야겟따

속상하다.. 만사천오백원 나갓다 흑..