Modal (3) 썸네일형 리스트형 [팀플 - Travel Jeju] 11th course - Travel Course VIII [ 오늘 할 일 ] 여행경로 저장 클릭 시 추가했던 카드들을 모달에 순서대로 띄워주기 모달 UI 재구성 지도 마커 이미지 변경 [ 전체적인 흐름 ] 모달에 들어갈 카드 UI 만들어 놓기 여행경로 저장 버튼 클릭 시 순서대로 이름값 가져오기 지도 마커 이미지 변경 ajax를 통해 원하는 데이터만 가져와서 카드 형식으로 모달에 추가 카드 사이사이에 화살표 이미지 넣기 모달에 들어갈 카드 UI는 부트스트랩에서 제공하는 디자인 카드를 가져왔다 각 클래스에 css를 가져와서 아래 이미지처럼 모달에 띄울 카드 UI를 구성했다 그다음으로는 기존 카드 UI를 이용하여 순서대로 카드들을 배치해주는지 테스트를 해봤다 하지만 선택한 순서대로 카드들을 가져오지 않았고 여행경로 저장을 누를 때마다 중복해서 들어가는 문제가 발생.. [팀플 - Travel Jeju] 10th course - Travel Course VII [ 오늘 할 일 ] 전체적으로 css 부분 수정 여행경로 보기 클릭 시 사용자가 카드를 추가한 순서대로 마커끼리 점선을 이어준다 여행경로 저장 클릭 시 모달을 띄워 선택 목록 카드들을 리스트 형식으로 보여준다 [ 전체적인 흐름 ] css 수정 버튼 생성 및 버튼에 이벤트 달기 마커끼리 선 이어주기 (마커들의 좌표를 이용해서) 모달 구현하기 여행경로 보기 버튼을 자바스크립트 단에서 이벤트를 추가하여 addLine 함수를 실행시킨다 addLine 함수는 markers(현재까지 추가된 카드들의 마커들을 담은 배열)를 매개변수로 받아서 반복문을 돌면서 각 마커들의 getPosition(좌표)을 linePath 배열에 push 해준다 카카오 맵 API에서 제공하는 선 만드는 코드를 가져와서 마커끼리 이어주는 선을.. [팀플 - Travel Jeju] 2nd course - Modal [ 오늘 할 일 ] 멀티 폴리곤 클릭 시 해당 구역의 정보를 DB에서 가져와 모달에 띄워주기 [ 전체적인 흐름 ] Modal을 hidden으로 숨겨서 미리 띄어놓는다 => Modal을 미리 띄어 놓는 이유는 ajax로 json 데이터만 넘어오게 만들 예정이기 때문이다 멀티폴리곤에 클릭 이벤트를 적용한다 이벤트 발생 시 ajax로 페이지 이동 없이 데이터를 DB에서 가져온다 => 단순히 폴리곤을 클릭 시에 데이터만 수정해주면 되기 때문에 ajax를 이용하였다 모달 UI 및 transform 구성 처음에는 카카오에서 발급받은 키를 이용하여 카카오 맵을 가져왔다 그 후로 미리 만든 폴리곤을 적용시킨 결과 - 폴리곤 만드는 방법 1일차 참조 https://woongbin96.tistory.com/207 그 후에.. 이전 1 다음
