[팀플 - Travel Jeju] 10th course - Travel Course VII

[ 오늘 할 일 ]

• 전체적으로 css 부분 수정 
• 여행경로 보기 클릭 시 사용자가 카드를 추가한 순서대로 마커끼리 점선을 이어준다 
• 여행경로 저장 클릭 시 모달을 띄워 선택 목록 카드들을 리스트 형식으로 보여준다 

 

[ 전체적인 흐름 ]

• css 수정 
• 버튼 생성 및 버튼에 이벤트 달기 
• 마커끼리 선 이어주기 (마커들의 좌표를 이용해서)
• 모달 구현하기 

---

여행경로 보기 버튼을 자바스크립트 단에서 이벤트를 추가하여 addLine 함수를 실행시킨다 

 

addLine 함수는 

markers(현재까지 추가된 카드들의 마커들을 담은 배열)를 매개변수로 받아서 

반복문을 돌면서 각 마커들의 getPosition(좌표)을 linePath 배열에 push 해준다 

 

카카오 맵 API에서 제공하는 선 만드는 코드를 가져와서 마커끼리 이어주는 선을 만들고

후에 선을 제거해야 하는 경우도 생기기 때문에 lines라는 배열에 추가해준다 

 

그리고 만든 선들을 map에 띄워준다 

여행경로 보기 버튼을 클릭하였을 때 카드들을 순차적으로 점선으로 이어주는 모습

 

여행경로 저장 버튼을 클릭하였을 때는 

모달을 띄어주어야 하기 때문에 jQuery 문법을 이용하여 모달과 오버레이(주변 배경)에 active 클래스를 추가해준다 

그리고 모달 안에 추가한 카드들의 제목(식당 이름이나 관광명소 이름)을 innerHTML로 붙여준 상태이다

 

후에는 appendChild를 이용하여 카드를 만들어서 모달에 띄워줄 예정이다 

그리고 지도를 가리지 않으면서 모달을 띄우기 위해서

여행경로 저장 버튼을 클릭 시 맵의 포커스를 살짝 아래로 옮기면서 몯라을 띄우는 방식으로 구현하였다 

여행경로 저장 버튼 클릭 시 맵 이동 및 모달에 내용채워 띄운 모습 

 

[ 현재까지 경우의 수 제거 ]

 

1. 날씨 비동기처리 방식으로 socket exception 처리 (날씨 데이터를 가져오지 못했을 때 페이지 로딩 자체가 안 되는 것을 방지함)

 

2. 오른쪽 카드리스트에서 카드 +버튼 클릭 시 추가한 것을 한번 더 추가히지 못하게 카드를 삭제해줌

 

3. 하지만 검색해서 한번 더 동일카드를 가져올 수 있기 때문에 중복검사를 하여 추가되지 못하게 방지해줌

 

4. 카드들을 선택하고 여행경로 보기를 선택했을 때 여행경로가 선으로 표시되는데, 여기서 선택 목록 전체 삭제를 했을 시

marker/overlay/polyline 들이 배열에 남아있어서 한번 더 여행경로 보기를 재 클릭했을 때,

3가지의 것들이 기존처럼 선이 그어지는 문제 방지

 

5. 카드 한개에 marker/overlay/polyline들이 같이 삭제되거나 추가해야 하기 때문에

각각의 것들을 배열로 정의하여 함께 처리되는것으로 코드 설계

 

6. 카드를 2개이상 선택하여, 여행경로 보기를 클릭하여 선을 그은 후에 선택 목록에서 임의의 카드를 x버튼을 눌러 삭제를 하고

그 후에 여행경로 보기를 다시 재클릭 했을 시 선이 남아있는 경우의 수 방지

 

7. 선택목록에 추가된 카드들 중에 오른쪽 검색 기능을 이용하거나 맛집&관광지 버튼을 이용하여

카드를 다시 불러서 추가하려고 할 때 중복검사를 함과

동시에 오른쪽 카드리스트에서 삭제 전체적으로 오른쪽에서 카드를 선택하면 가운데 메인 맵에 마커를 찍어주고

동시에 overlay에 추가한 카드의 제목을 같이 붙여주며, 해당 카드는 오른쪽 카드 리스트에서 삭제됨과

동시에 왼쪽 선택목록에 추가된다(추가될 때 +버튼이 x버튼으로 변경되며 기능 또한 변경된다)

원하는 카드들을 모두 선택한 후에 여행경로 보기를 누르면

각 지점들을 추가한 순서에 맞게 점선으로 여행경로를 표시해주고,

각 카드들은 개인삭제,전체삭제를 통해 왼쪽 카드 리스트에서 사라짐과 동시에 메인 맵에 표시되었던

마커와 오버레이, 마커를 잇는 선 들이 동시에 사라진다

7가지의 경우의 수가 있었다