[팀플 - Travel Jeju] 2nd course - Modal

[ 오늘 할 일 ]

• 멀티 폴리곤 클릭 시 해당 구역의 정보를 DB에서 가져와 모달에 띄워주기 

[ 전체적인 흐름 ]

• Modal을 hidden으로 숨겨서 미리 띄어놓는다 

=> Modal을 미리 띄어 놓는 이유는 ajax로 json 데이터만 넘어오게 만들 예정이기 때문이다

     

• 멀티폴리곤에 클릭 이벤트를 적용한다

 

• 이벤트 발생 시 ajax로 페이지 이동 없이 데이터를 DB에서 가져온다 

=> 단순히 폴리곤을 클릭 시에 데이터만 수정해주면 되기 때문에 ajax를 이용하였다 

 

• 모달 UI 및 transform 구성 

---

처음에는 카카오에서 발급받은 키를 이용하여 카카오 맵을 가져왔다 

그 후로 미리 만든 폴리곤을 적용시킨 결과

- 폴리곤 만드는 방법 1일차 참조 

https://woongbin96.tistory.com/207

 

그 후에 모달을 hidden으로 안 보이게 만들고 여러 css를 적용시켰다 (위치,크기 등등)

 

그리고 값을 ajax를 이용하여 DB에서 데이터를 받아와 자바스크립트 단에서 데이터를 쏴줄 예정이기 때문에 

각각의 컬럼에 맞게 html단에서 id를 주고 아래에서는 document.getElementById를 써서 

해당 컬럼에 맞는 html에 id값에 값을 자동으로 넣어줄 예정이다 

 

그렇게 하기 위해서는 DB를 연동해서 값을 가져와야 하기 때문에

첫 번째로는 DB 테이블에 칼럼과 맞게 모델을 구성하였다

 

만약 롬복 라이브러리를 사용하면 어노테이션 하나로 모델 구성을 끝낼 수 있다 

 

XML 문법을 이용하여 DB에서 데이터를 가져올 것이기 때문에

인터페이스로 구성하였고, 리스트를 가져오는 getList를 선언하였다 

(후에는 리스트가 아닌 특정 모델로 수정하였다)

그리고 위 사진 제네릭 modal => Modal로 수정함.

 

[ 순서 ]

• 폴리곤 클릭 (view -> controller로 클릭한 구역 이름 데이터 GET Method로  전송 )
• RestController에서 DB갔다와서 구역 이름으로 정보 가져옴 
• RestController에서 가져온 정보를 json 형식으로 view로 다시 리턴 
• view에서 받은 정보를 자바스크립트,html 이용하여 모달에 정보 입력 

1. 자바스크립트 단에서 폴리곤 클릭 시 XMLHttpRequest 클래스에 

   GET 방식으로 파라미터에 값을 넣어 전송한다 

2. RestController에서는 파라미터로 받아온 값을 @PathVariable 어노테이션을 이용해서 값을 받는다 

    사진상에는 안보이지만 @Autowired한 xml 인터페이스를 mapper라고 선언하였음 

    mapper를 이용해서 DB에 다녀와 정보를 가져옴 

3. SQL문은 SELECT로 조회하고, resultType은 미리 선언한 모델 경로에 맞춰서 작성함 

    tilte값을 그대로 쓸 수 있기 때문에, (title값 = 폴리곤 클릭한 구역명)

    가져오고 싶은 정보들을 SQL 쿼리문을 작성한다 

4. 컨트롤러를 거쳐서 view까지 데이터가 넘어왔다 

    자바스크립트단에서 document.querySelector / document.getElementById로 

    html단에서의 id를 가져온다 

    그리고 innerHTML로 원하는 id에 가져온 정보들을 붙혀 넣는다 

5. html단 id값 위치들 

결과 : 미리 띄어둔 Modal에 값을 가져올 수 있었다. 하지만 지도보다 뒤에 있는 문제점 발견 

z-index css값을 수정하여 모달이 active일 때 최상단에 오게끔 수정하였다 

그리고 한가지 issue가 있었는데,

모달을 추가하니 지도의 아래 구역들이 클릭이 안 되는 문제가 발생했었다 

처음에는 데이터가 많이 무거운가? 생각해서 DB를 안 갔다 오는 방면으로 수정해봤지만 결론은 똑같았다 

 

다음으로 든 생각은 맵 자체가 로딩이 많이 걸리는 걸까? 

생각해서 구글링해보다가 어떠 한 블로그에서 2G를 사용하면 맵에 렉이 걸릴 수도 있다 라는 글을 보게 되었고,

wifi도 바꿔보고 핫스팟으로도 바꿔보고.. 해봤지만 역시나 동일하게 작동이 안 되었다 

 

왜 안되는 거야 하면서 지도 아래 구역을 광클하는데..

돌하르방 사진이 마우스로 끌려왔다

..?

모달이 안 보이는 것뿐이지 클릭이 되어서 지도랑 겹쳐서 생긴 문제였다 

그래서 pointer-events 속성으로 모달이 클릭되지 않게 함으로써 오류 수정!

 

그리고 모달이 한 번에 팍! 뜨는 것보다는 스르륵 내려오는 느낌을 주고 싶어서 

transform 속성을 이용하여 구현하였다 

 

이 밖의 bootstrap, fontawesome 등을 이용하여 

UI화면단을 구성하였다 

다음으로는 상세보기를 누르면 지역명을 컨트롤러로 넘길 것이고

다른 팀원이 만들고 있는 맛집 카드 게시판으로 URL이 수정되는 작업을 진행할 것 같다