Project (09.30) - 발표정리(기능 시연)

목표

1. 여행 계획에 보다 직관적이고, 효율적인 계획을 세울 수 있도록 돕는 것을 목표
2. 여행 준비 과정에서의 시간 절약과 스트레스 감소 기대

ERD

사용기술 및 개발환경

메인페이지

로그인 & 회원가입 (유효성 검사)

항공 및 숙박 예약

체크리스트

일정추가

카카오맵API 사용 - 키워드로 장소검색하고 목록으로 표출하기
코드 안에는 장소검색, 마커표시 기능만 제공 / 리스트에 추가하는 기능 X / 그리고 검색 시 전국 기준으로 나옴

자바스크립트
localStorage.setItem('selectedRegion', selectedRegion);

const savedRegion = localStorage.getItem('selectedRegion');
if (savedRegion && keyword) {
	keyword = savedRegion + ' ' + keyword;
}

카카오맵에서 제공하는 keyword와 로컬 스토리지에 저장한 region 연결

목적지 검색 시 해당 지역 내에서만 보일 수 있도록 함

addDestination 함수 -> 목적지 로컬 스토리지 저장, 지도에 마커 추가

li.innerHTML = destination + `<i class="bi bi-dash-square-dotted" style="cursor: pointer; margin-left: 10px;"></i>`;

Date Range Picker -> 라이브러리 사용 (달력)

/ 저장할 데이터를 하나의 객체로 구성
	const dataToSend = {
		places : savedPlaces,
		startDate : startDate,
		endDate : endDate,
		region : selectedRegion
};

-> ajax POST 타입

상세보기

카카오맵API 사용 - 선의 거리 계산하기, 키워드로 장소검색하기

https://github.com/yeosang0508/project_tripset/blob/main/src/main/webapp/WEB-INF/jsp/user/plans/planDetail.jsp

var travelPlaces = [
    <c:forEach var="place" items="${travelPlaces}">
    {
        placeName: "${place.placeName}"
    }<c:if test="${!status.last}">,</c:if>
    </c:forEach>
];

서버에서 전달받은 여행 장소 목록을 JavaScript 배열로 변환
전달받은 travelPlaces 배열에 있는 각 장소에 대해 키워드 검색하여 지도에 마커 추가

경로를 시각적으로 보여주기 위해 폴리라인

여행지 추천

1. gpt API 동작흐름
   https://velog.io/@haze0225/Project-09.16-gpt-API-Pythonflask

2. 버전이슈
   https://velog.io/@haze0225/Project-09.17-Python%EC%9C%BC%EB%A1%9C-openAI-%EC%97%B0%EA%B2%B02

3. JSON 파싱
   https://velog.io/@haze0225/Project-09.18-recommended-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%ED%98%84-openAI

4. 연결 성공
   https://velog.io/@haze0225/Project-09.19

---

향후 개선할 점

1. update, delete
2. 네이버 플레이스 리뷰 크롤링
3. 게시글