# 관통프로젝트: HappyHouse_FrontEnd_서울_08반_김민지_배수연
### 📆 제출일: 2021.03.12

### 👩 참여 페어
- 김민지, 배수연

### 📝 처리된 요구사항 목록

|난이도|구현기능|세부|작성여부(O/X)|
|:---:|---|---|:---:|
|기본|메인페이지||O|
|기본|회원관리페이지|회원정보 등록화면|O|
|기본|회원관리페이지|회원정보 수정화면|O|
|기본|회원관리페이지|회원정보 삭제화면|O|
|기본|회원관리페이지|회원정보 검색화면|O|
|기본|로그인/로그아웃 페이지||O|
|기본|실거래가 검색,결과 페이지|전체검색화면|O|
|기본|실거래가 검색,결과 페이지|상세검색화면|O|
|기본|실거래가 검색,결과 페이지|동별화면|O|
|기본|실거래가 검색,결과 페이지|아파트별검색화면|O|
|추가|비밀번호찾기||O|
|추가|사이트맵구현||O|
|추가|메뉴구성||O|
|추가|관심지역 동네 업종 정보||O|
|추가|관심지역 대기 오염 정보||O|
|__추가__|__TOP3 정보__|__이번주 거래가, 부동산 뉴스__|__O__|
|심화|웹사이트 소개 페이지||O|
|심화|공지사항관리 화면||O|

</br></br>

## 🍚 기본 기능
### 1. 메인페이지, 실거래가 검색 및 결과

* `시 / 도`, `구 / 군`, `동` 을 선택해서 실거래가를 확인하는 페이지입니다.
* `동 / 아파트 이름`으로 검색해도 실거래가를 볼 수 있습니다.
### 2. 회원관리
* __관리자__ 로 로그인 시 회원정보를 등록, 삭제, 검색가능한 페이지입니다.
* 회원정보 수정 기능은 사용자에게만 부여했습니다.

### 3. 로그인, 회원정보수정, 로그아웃
* __사용자__ 로 로그인 시 회원정보를 수정할 수 있습니다.
* 로그인 및 로그아웃이 가능합니다.

</br></br>

## 🍳 추가 & 심화 기능

### 1. 비밀번호 찾기, 관심지역

* 로그인 화면에서 비밀번호 찾기 버튼을 누르면 찾기 페이지가 나타납니다.
* 사용자 로그인 시 관심지역의 환경정보, 대기오염정보를 확인할 수 있습니다.

### 2. 웹사이트 소개, 공지사항
* 웹페이지 하단에 개발자 정보와 웹사이트 소개를 작성했습니다.
* 메뉴에서 공지사항을 누르면 정보가 있는 쪽으로 스크롤이 이동합니다.
* 공지사항 버튼을 누르면 게시글 페이지가 나옵니다.

### 3. 이번주 거래가, 부동산 뉴스 TOP3

* 메인페이지 하단에서 이번주 거래가 TOP3 와 부동산 뉴스 TOP3를 볼 수 있습니다.
* __부동산 뉴스 TOP3__ 에서 각 항목을 클릭하면 해당하는 뉴스 페이지로 넘어갑니다.

</br></br>

## 상세 설명
### 접근 가능한 로그인 정보
|권한|접근 가능 메뉴|아이디|비밀번호|
|---|---|---|---|
|방문자|메인페이지, 회원가입, 거래가 TOP3, 부동산뉴스 TOP3, 공지사항, 실거래가 검색|||
|회원|방문자의 접근가능 메뉴, 로그인, 로그아웃, 관심지역 검색|user|user|
|관리자|회원의 접근가능 메뉴, 회원정보 관리|master|master|

### 디렉토리 및 파일 설명
* `/assets`
* 이미지 파일들과 부가적인 파일들이 있습니다.
* `/css`
* styles.css는 부트스트랩에서 작성된 파일이며, 추가적으로 적용해야하는 부분들은 plus.css에 작성했습니다.
* `/js `
* scripts.js는 부트르스탭에서 작성된 파일이며 지도와 관련한 부분은 map.js에, 추가적으로 적용해야 하는 부분들은 plus.js에 작성했습니다.
* `index.html`
* 전체 기능이 동작하는 메인 파일입니다.
* `notice_page.html`
* 공지사항 버튼을 클릭했을 때 생성되는 새 창의 소스입니다.
* `memberInfo_xml.jsp`
* 회원 정보를 저장하는 파일입니다. 임의로 3명의 회원 정보를 등록했으나, 사용하지는 않았습니다.
### 참고
* 전체적인 디자인은 하단 링크의 부트스트랩 테마를 이용했습니다.
> https://startbootstrap.com/theme/agency

* 지도는 __Google Maps API__ 를 이용했습니다.
### 부가 설명

* 상단 Nav Bar의 회원가입, 로그인 버튼 클릭 시 Modal 창이 뜹니다. 로그인 창에는 관리자 여부를 확인하도록 했는데, 관리자로 로그인한 경우에는 회원정보 관리 페이지에 접근할 수 있습니다. 일반 회원으로 로그인한 경우에는 관심지역 페이지에 접근할 수 있습니다.<br>
* 관리자의 회원정보 관리 페이지에서는 회원 정보 검색, 등록, 삭제가 가능합니다. 일반 회원으로 로그인 시 Nav Bar 우측에 이름이 나오는데, 클릭하면 '회원 정보 수정'과 '로그아웃'을 선택할 수 있습니다. '회원정보 수정'을 클릭하면 새 Modal창이 뜨고, '로그아웃'을 클릭하면 Nav Bar에서 접근 가능한 버튼들이 다시 초기 상태로 바뀝니다.<br>
* '공지사항' 버튼을 클릭하면 자동으로 스크롤되어 공지사항 테이블로 옮겨가는데, '공지사항' 버튼을 클릭하면 게시판을 구성하는 새로운 페이지로 이동하게 됩니다. 글쓰기와 목록 확인 버튼이 활성화되어 있어 내용을 확인할 수 있습니다.<br>

<br><br>
* 메인 화면 중앙의 검색 버튼을 클릭하면 실거래가 검색 정보를 보여주는 부분으로 자동 스크롤됩니다. 지역별 상세 검색과 아파트별 상세 검색 결과는 같은 화면에서 보여줄 수 있도록 구현했습니다. 검색 결과는 Bootstrap의 Card를 이용하여 표시했고, Google Maps API를 활용하여 지도를 표시했습니다. 또한 임의로 지정한 세 아파트의 위도 경도 값을 이용해 지도에 Marker로 표시했습니다.
<br><br>
* 하단에는 팀원 정보와 웹사이트 소개를 기재했으며, Footer 부분에 웹페이지에 대한 정보를 기재했습니다. Nav Bar 좌측의 HappyHouse 로고를 클릭하면 항상 최상단으로 자동 스크롤됩니다. 메인 페이지의 가운데에 위치한 글에는 구글에서 제공하는 폰트와 그림자 효과를 적용하여 심미적인 효과를 주었습니다.