19_메인 > 지도 API & 선택 지역 세션 저장

이제 공동구매 목록 띄우는 부분은 모두 클리어 했으니....

 

⑦ 메인>지도에서 특정 지역 선택 시, 선택 지역구를 세션에 저장하도록 처리

     → 사용자가 메인의 지도에서 특정 지역 선택 시, 목록 6개 모두 그 지역의 게시물만 나오도록 처리하려고 한다. 

         지역을 선택하지 않을 경우에는 모든 지역 게시물 다 나옴

 

를 할 차례!~!~!!!

 

메인에서 [장소를 선택해주세요] 부분의 input 박스를 클릭하면 지도팝업이 뜬다. (지도API는 카카오지도를 사용)

 

카카오지도API 사용하는 방법은 사이트에 잘 나와있어서, 필요한 코드를 가져와서 사용했다!

https://apis.map.kakao.com/web/guide/

 

지도가 뜨도록 설정하고, 사이트에 컨셉에 맞게끔 CSS 작업했다.

지도 팝업이 브라우저 창 가운데 부분으로 뜨도록 스크립트 코드를 작성했다.

function map()
{
    window.open("map_main.lion", "_blank", "top=150,left=550,width=1000,height=700");
}

그 결과로 지도를 클릭하면, 아래와 같은 지도 팝업이 뜬다. 

 

지도에서 위치를 선택하면, 해당 지역구의 공동구매 게시물을 볼 수 있도록 세션에 지역구 정보를 저장해놓을 계획!

선택하지 않고 <위치 선택 완료>를 누르면, 지역을 선택하지 않았을 때와 마찬가지로 모든 지역의 공동구매를 볼 수 있다.

『마포구』를 클릭하고 <위치 선택 완료>를 누르면,

 

🔥 아,,,,지도 클릭한 위치정보 잘 가져와지다가....갑자기 계속 안돼서 어제 새벽부터 계속 코드 수정한 부분 다시 고치면서 난리치다가...ㅎㅎ 인터넷에 쳐보니 캐시 지워보라고 해서 지웠더니...잘 된다...ㅎvㅎ....휴우우우우

https://devtalk.kakao.com/t/api/120733/22

카카오 지도 API 질문드립니다

 

이래저래 해결해서.....다시....

『마포구』 중 아무데나 클릭하면, 선택한 지역이 마포구라고 아래 글씨가 뜬다.

그리고 『마포구』를 클릭하고 <위치 선택 완료> 버튼을 누르면, 아래 사진과 같은 알림창이 뜬다.

안내멘트처럼 아무 장소도 선택하지 않고, <위치 선택 완료> 버튼을 누르면, 모든 지역에서 진행 중인 공동구매 게시물을 볼 수 있다. 아래 사진과 같은 알림창이 뜬다.

 

🔥 지도에서 해당 지역값을 가져오는 것까지는 완료했는데, 이 정보를 세션에 저장하려고 

자바스크립트 sessionStorage 를 사용하려고 했는데,,,! Controller에서 불러와지지가 않았다,,!

sessionStorage 는 서버 측 session이 아니라 브라우저 세션 스토리지여서

서버측 컨트롤러에서 접근이 불가능하다고 한다.

JAVA 에서 사용하는 session에 대한 정보는 서버에서 관리하고, JavaScript 에서 사용하는 sessionStrorage는 브라우저에 저장되는 것..!  서로 관련없음..!

 

자바스크립트에서 <위치선택완료>  후, <확인>을 눌러 지도 팝업창이 닫히고 메인의 주소값에 지역정보를 controller로 보내줬다.

window.close();
opener.parent.location.href = 'main.lion?region=' + region;

그리고 메인 컨트롤러에서 받은 지역값을 세션으로 저장!

다른 컨트롤러들에서는 그 지역값 세션에서 빼와서 지역정보가 있으면 해당지역 공동구매 게시물만 가져오고

지역정보가 없다면, 모든지역 공동구매 게시물 가져오도록 했다.

 

// 메인 컨트롤러 지역구 관련 코드
HttpSession session = request.getSession();
String user_region = (String)session.getAttribute("user_region");
String region = request.getParameter("region");

if (user_region == null || (region != null && !user_region.equals(region)))
{
    user_region = region;
    if (user_region == null || user_region == "") 
        user_region = "";
    session.setAttribute("user_region", user_region);
}

---

 

! 완 성 !

『모든지역』의 공동구매 목록 -------- 『마포구』 선택 후 공동구매 목록   을 비교해서 보면

 

1-1) 『모든지역』 선택 : 메인

1-2) 『마포구』 선택 : 메인

2-1) 『모든지역』 선택 : 카테고리 > 쌀/면/빵/떡

2-2) 『마포구』 선택 : 카테고리 > 쌀/면/빵/떡

3-1) 『모든지역』 선택 : 마감임박

3-2) 『마포구』 선택 : 마감임박

4-1) 『모든지역』 선택 : 'ㅎㅎ' 검색 시

4-2)  『마포구』 선택 : 'ㅎㅎ' 검색 시

다른지역 혹은 다시 모든지역의 공동구매 목록을 보고 싶다면, 지도에서 선택하면 된다,,!!

 

공동구매 목록 + 사용자 선택 지역 세션 처리까지 모두 완성~!~!~!~!