웹 프론트엔드(Web Front-end) Happy House 프로젝트

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

---

1. 주제

- 전국 아파트 실거래가(보증금액, 월세, 면적, 거래일자 등)를 보여주는 웹 Front

 

2. 개발인원

- 2명

 

3. 개발 기간

- 2021년 3월 12일 10AM ~ 2021년 3월 14일 11PM

 

4. 사용 언어 / 툴

- HTML, CSS, JavaScript, Jquery / VScode

---

1. Main.html

- BootStrap을 사용하여 아래 프론트 화면 구성

- Select 이용 전국구 Option 적용

- Google Map API 사용하여 Display

- Menu bar에는 로그인과 회원가입 기능 구현

- 지도 위의 Marker 구현

Main.html

 

Main.html(2)

Main.html(3)

 

2. register.html

- 회원가입창 구현

- 회원가입 html에는 사용자 이름, Email 주소, 비밀번호, 비밀번호 확인의 input이 있다.

- 회원가입한 정보들은 Local Storage에 저장이 된다.

- 이미 아이디가 있으면 로그인을 눌러 로그인 창으로 페이지 이동이 된다.

- 회원가입이 되면 자동으로 로그인이 되며, 우측 상단처럼 바뀌게 된다.

 

3. 마이페이지

- 마이페이지를 누르면 회원정보 확인이 나온다.

- 회원정보 확인에는 사용자 이름과 이메일이 나오고, 수정 버튼과 삭제 버튼이 있다.

- 삭제 버튼을 누르게 되면 Local Storage의 item이 삭제가 된다.

- 수정 버튼을 누르면 회원정보 이메일을 확인하고, 맞으면 회원정보를 수정할 수 있다.

 

 

 

 

 

 

4. 시/구/동 선택

- 시/구/동 선택을 하면 위치에 맞게 Google Map이 바뀐다.

 

 

 

 

5. 시/군/구를 선택 후 데이터 출력

- 거래 정보가 있으면 왼쪽에 거래 정보를 출력하고, 거래 정보의 주소 위치를 구글 Map에 Marker로 찍음