travelcourse (6) 썸네일형 리스트형 [팀플 - Travel Jeju] 15th course - Travel Course XII [ 오늘 할 일 ] 여행경로 모달 구현 [ 전체적인 흐름 ] Oven 웹 페이지를 이용하여 모달에 사용할 이미지들 만들기 Carousel를 사용하여 모달 슬라이드식으로 구현 맵 위에 위치한 이용방법 버튼을 클릭 시 모달 형식으로 이용방법에 대한 설명이 나오는데, Oven을 사용해서 이용방법 이미지를 만들어 슬라이드식으로 구현할 예정이다 이미지는 Oven 페이지에서 쉽게 구현할 수 있었다 https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io https://getbootstrap.com/docs/5.0/components/carousel/ Carousel A slideshow component for.. [팀플 - Travel Jeju] 14th course - Travel Course XI [ 오늘 할 일 ] 경로 저장 클릭 시 로그인한 세션 값을 이용하여 해당 유저의 마이 경로 DB에 저장한 여행 경로 추가 [ 전체적인 흐름 ] DB 설계 JSP에서 모달 값 Controller에 필요한 데이터(제목/이미지) 보내기 Controller에서 받은 데이터를 통해 DB에 INSERT 비로그인시 로그인 페이지로 redirect 여행경로를 모두 선택하고 여행경로 저장 버튼을 클릭 시 위 사진과 같이 모달 창이 뜨면서 선택한 여행경로를 모두 보여준다 이후에 사용자가 저장하기 버튼을 클릭 시 DB에 경로를 리스트 형식으로 저장해주어야 한다 (사용자가 마이페이지에서 저장한 여행경로를 볼 때 DB에 저장한 여행경로를 가져와서 보여주는 형식) 테이블은 2개를 만들었다 mycourse 테이블은 PK 값으로 여.. [팀플 - Travel Jeju] 13th course - Travel Course X [ 오늘 할 일 ] 선택한 카드 Drag & Drop 기능 구현 맵 마커 이미지 변경 & 사이즈 축소 오버레이 카드 순서 기입 Drag & Drop 기능 실행 시 마커/오버레이/카드 순서 해당사항에 맞게 변경 오늘 한 결과물 동영상 첨부 Drag & Drop Js 파일이다 사실 상 드로그앤 드롭 기능은 코드 3줄만 있으면 기능 구현은 가능하다 맨 윗줄 $(function()) , .sortable , 맨 아랫 줄 disableSelection() 하지만, 드로그앤 드롭 기능 후에 맵에 찍혀있는 마커들과 오버레이, 그리고 나중에 모달에 쓸 카드들의 타이틀을 담은 names 배열 등 추가해야 할 코드들이 많았다 stop 함수는 드로그앤 드롭을 한 후에 함수를 실행시키는 것이다 모든 순서가 바뀌기 때문에 좌표.. [팀플 - Travel Jeju] 10th course - Travel Course VII [ 오늘 할 일 ] 전체적으로 css 부분 수정 여행경로 보기 클릭 시 사용자가 카드를 추가한 순서대로 마커끼리 점선을 이어준다 여행경로 저장 클릭 시 모달을 띄워 선택 목록 카드들을 리스트 형식으로 보여준다 [ 전체적인 흐름 ] css 수정 버튼 생성 및 버튼에 이벤트 달기 마커끼리 선 이어주기 (마커들의 좌표를 이용해서) 모달 구현하기 여행경로 보기 버튼을 자바스크립트 단에서 이벤트를 추가하여 addLine 함수를 실행시킨다 addLine 함수는 markers(현재까지 추가된 카드들의 마커들을 담은 배열)를 매개변수로 받아서 반복문을 돌면서 각 마커들의 getPosition(좌표)을 linePath 배열에 push 해준다 카카오 맵 API에서 제공하는 선 만드는 코드를 가져와서 마커끼리 이어주는 선을.. [팀플 - Travel Jeju] 8th course - Travel Course V [ 오늘 할 일 ] 오른쪽 맛집&관광지 카드 리스트에서 카드를 선택했을 때 왼쪽 선택 목록에 선택한 카드를 띄워준다 동시에 오른쪽 카드리스트에서 해당 카드를 삭제한다 동시에 지도에 마커를 생성한다 [ 전체적인 흐름 ] 오늘 할 일을 순서대로 진행 중복제거 및 경우의 수 (총 7가지) 제거 addCard 함수는 반복문을 돌면서 names 배열(선택 목록 배열)과 추가하려는 카드의 Title을 같을 때는 alert으로 추가된 항목인것을 알려주고 그렇지 않을때는 names 배열에 추가한 후에 value(해당 카드의 좌표)를 위도, 경도로 split 한 후에 그 좌표를 가지고 마커를 생성하여 준다 그리고 마커를 만듬과 동시에 position(카드 오버레이)를 만들어주어서 마커 위에 해당 카드의 제목을 같이 띄워.. [팀플 - Travel Jeju] 5th course - Travel Course II [ 오늘 할 일 ] 여행경로 찾기 디자인 수정 맛집 & 관광지 리스트 UI 구성 서비스 이용방법 Modal로 구성 [ 전체적인 흐름 ] Front단은 부트스트랩을 이용하여 각각의 요소 (버튼 디자인, 카드 UI 등)들을 디자인 Modal 만들기 DB-카드리스트 연동 6명의 팀원이 2인 1조로 3개의 조로 나뉘어 계획을 구성하였다 3주라는 짧은 시간 안에 프로젝트를 완성해야 하기 때문에 계획을 방대하게 잡기에는 어려움이 있을 것 같아서 필수적으로 필요한 기능들을 우선순위로 나누어 계획을 구성하였다 내가 속해 있는 조는 지도 API를 많이 이용해야 하는 기능들을 도맡았다 폴리곤, 여행경로 및 리스트, 사용자가 등록하는 게시글 안에서의 map (좌표를 알기 위함), 날씨 API 등 모든 것들이 처음 접해보는 .. 이전 1 다음
