반응형
💡Front End 관통 프로젝트
1️⃣ 메인 화면 - 아파트 실거래가 조회 및 상세 페이지 구현



select box에서 선택한 시 + 구군 + 동
을 바탕으로 좌표 생성
let address = "";
address += document.getElementById("sido").options[document.getElementById("sido").selectedIndex].text + " " + document.getElementById("gugun").options[document.getElementById("gugun").selectedIndex].text + " " + document.getElementById("dong").options[document.getElementById("dong").selectedIndex].text;
// 주소로 좌표를 검색합니다
//console.log(address);
geocoder.addressSearch(address, function (result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
2️⃣ 주변 상가 정보 페이지
상가 검색 시, 정보 출력
3️⃣ 회원가입 페이지
회원가입 미입력 → 회원가입 불가 및 알림 메시지 출력
4️⃣ 로그인 페이지


가입된 회원정보와 불일치 → ‘올바르지 않습니다’ 출력
5️⃣ 회원정보 변경


정보 변경 클릭 시 → 회원정보 변경 가능하도록 enable
그러나, 아이디의 경우 변경 불가능하게 객체 동결
그 외 모든 객체는 변경 가능하도록 구현함
6️⃣ 회원정보 삭제

회원 정보 삭제 시 한번 더 확인을 위한 ‘삭제를 원합니다’
입력 후에 삭제 가능
반응형
'Web > Front' 카테고리의 다른 글
[CSS] CSS 선택자 (0) | 2022.09.17 |
---|---|
[HTML] Form태그 (0) | 2022.09.17 |
[Web] Servlet 기초2 | Servlet Life-Cycle (0) | 2022.09.16 |
[Web] Servlet 기초 1 (0) | 2022.09.15 |
[ HTML 기초] HTML 기초_시맨틱 태그 (0) | 2022.08.30 |