teamproject (20) 썸네일형 리스트형 [팀플 - Travel Jeju] 4th course - Travel Course UI [ 오늘 할 일 ] 여행경로 찾기 기능을 구현하기 위해서 UI부터 구성 기능 추가할 것 정리 팀원 전체 회의 [ 전체적인 흐름 ] 화면단에서 세개의 bar (navbar / left-sidebar / right-sidebar)를 나눈다 메인에 지도를 넣고 나머지 3개의 bar UI 구성 첫 번째 과정으로는 큰 틀을 3개의 bar와 메인(지도 삽입 부분)으로 구성하였다 아직 데이터를 가져오는 코드들은 구상하지 못하였고, css만 이용해서 아래 이미지와 같이 UI를 구성하였다 왼쪽, 오른쪽 사이드바에만 스크롤을 넣어야 하는데 (카드가 많아졌을 때 지도는 스크롤되면 안 되기 때문에 해당 부분에서만 스크롤이 되어야 한다 ) overflow-y 속성에 scroll 값을 주고, 높이를 결정하면 해당 부분에만 스크롤.. [팀플 - Travel Jeju] 3rd course - Map Coordinates [ 오늘 할 일 ] 경로 찾기를 구현하려면 맛집 & 관광지 카드 클릭 시 지도에 마커를 표시하는 기능을 넣어야 한다 (위 이미지의 오른쪽 리스트에서 카드 형식으로 DB에서 데이터를 가져와 만들어줄 예정이다) 지도에 마커를 표시하기 위해서는 좌표를 알아야한다 사용자가 맛집 & 관광지를 등록할 때 좌표를 스스로 넣기에는 많이 부담된다고 판단 사용자가 등록할 때 지도를 삽입해 좌표를 백엔드단에서 알아서 처리해 구해주는 기능을 구현해야 한다 [ 전체적인 흐름 ] 카카오맵을 가져와서 키워드로 장소를 검색해서 원하는 장소를 선택할 수 있게 한다 장소 선택 시 자동으로 위도, 경도를 구해서 DB에 들어갈 값을 채우기 위해 입력값에 자동으로 들어가게 해야 한다 처음으로는 키워드로 장소를 검색하고 목록 리스트를 띄워주는.. [팀플 - Travel Jeju] 2nd course - Modal [ 오늘 할 일 ] 멀티 폴리곤 클릭 시 해당 구역의 정보를 DB에서 가져와 모달에 띄워주기 [ 전체적인 흐름 ] Modal을 hidden으로 숨겨서 미리 띄어놓는다 => Modal을 미리 띄어 놓는 이유는 ajax로 json 데이터만 넘어오게 만들 예정이기 때문이다 멀티폴리곤에 클릭 이벤트를 적용한다 이벤트 발생 시 ajax로 페이지 이동 없이 데이터를 DB에서 가져온다 => 단순히 폴리곤을 클릭 시에 데이터만 수정해주면 되기 때문에 ajax를 이용하였다 모달 UI 및 transform 구성 처음에는 카카오에서 발급받은 키를 이용하여 카카오 맵을 가져왔다 그 후로 미리 만든 폴리곤을 적용시킨 결과 - 폴리곤 만드는 방법 1일차 참조 https://woongbin96.tistory.com/207 그 후에.. [팀플 - movie_kiosk] End 2주간의 첫 팀 프로젝트가 끝나게 되었다 후련하기도 한편으로는 아쉬운 마음도 든다 코드 내용과 트러블슈팅, 화면 캡처본 등은 깃허브 리드미 파일에 작성하였다 https://github.com/kes0421/POS GitHub - kes0421/POS Contribute to kes0421/POS development by creating an account on GitHub. github.com 팀 프로젝트가 끝나고 강사님께서 PPT를 만들어서 발표하는 시간을 갖는다고 하셨다 각 조마다 차례대로 발표가 이루어졌고, 강사님께서 아쉬운 부분들을 피드백해주셨다 우리 조의 가장 큰 문제는 디자인이었다 포스기 프로젝트는 CRUD가 기본적인 기능이어서 기능적인 부분은 잘 만들었는데, 이미지가 이쁘지 않거나, 전체적.. 이전 1 2 3 다음
