11.30_플래너 작성폼 드디어 완성,,,,(ver.1) with mustache,,, ① 일정 작성하기 전 모달

ver1인건,,,세세하게 더 처리해야 할 부분이 남아있어서...ㅎㅎ!

나중에 다른 부분에서 할 거 다 하고나서 추가로 작업할 예정,,,이다,,

 

플래너 insertForm 을 완성하기까지 오랜 시간이 걸렸따........ 😂

 

일단 모달창 부터 차근차근 흐름을 적어보자면,

 

메인에서 [일정만들기]를 클릭하면,

- 비회원일 경우에는 알림창과 함께 로그인폼으로 이동시키고,

- 회원일 경우에만 제목/지역/기간을 입력할 수 있는 모달창을 띄워준다.

 

✔ 모달 정보를 입력하고 <일정 만들기>를 누르면 하는 작업,

① 해당 지역으로 zoom이 된 지도를 띄워준다. (위도, 경도, zoom 필요)

     지도 javascript 코드에는 default로 지역을 선택하지 않았을 경우의 위도, 경도, zoom 으로 설정해놨음

② 선택한 지역의 관광지 목록을 조회순으로 띄워준다.

     selectbox option의 value에는 지역코드를 넣어놨다.

     Tour API에서 목록을 가져오기 위해 해당 지역코드를 사용한다. 

③ 여행의 시작일과 마지막일을 선택하면 선택한 일수만큼 여행 장소를 선택할 수 있는 공간과 지도가 만들어진다.

 

 

 

✔ 일정 만들기에서 제목, 기간은 반드시 입력해야하는 사항이고, 지역은 선택사항이다.

    지역을 선택하면, 해당 위치로 지도를 띄워주고,

    지역을 선택하지 않을 시, 대한민국이 그냥 다 보이게 지도 띄워줌

 

mustache 문법도 볼 겸 코드 올리자면,

{{#areaList}}    ~~    {{/areaList}} → areaList가 있으면 있는만큼 아래 코드 반복

{{^areaList}}    ~~    {{/areaList}} → areaList가 없으면  ~

<select id="areacode" class="form-select form-select-sm"
        aria-label=".form-select-sm example">
    <option selected value="">--- 지역 ---</option>
    {{#areaList}}
        <option value="{{code}}" data-loc_x="{{loc_x}}" data-loc_y="{{loc_y}}" data-zoom="{{zoom}}">{{name}}</option>
    {{/areaList}}
</select>

 

 

 

 

✔ 여행 날짜는 시작일을 선택하면, 여행의 마지막 날짜는 시작일부터 선택할 수 있도록 Datepicker를 설정했다.

   여행 마지막 날짜를 먼저 선택하고, 시작 날짜를 해당 날짜보다 더 뒤에 있는 날짜를 선택하면 알아서

   마지막 날짜도 시작 날짜로 바뀜

 

Datepicker 관련 코드

$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    yearSuffix: '년'
});
$(function(){
    $('.datepicker').datepicker();
});

// 여행 마지막 날짜는 선택한 시작 날짜부터 선택 가능하도록 처리
$('#start_dt').datepicker({
    onClose: function(selectedDate) {
        $('#end_dt').datepicker("option", "minDate", selectedDate);
    }
});

 

 

 

 

✔  모달 창에서 지역 선택 안 할 시, 지도의 위,경도와 zoom을 한국 전체가 보이도록 설정

 

✔  모달 창에서 지역 선택 했을 시, 지도의 위, 경도와 zoom을 해당 지역에 맞춰서 설정 (ex. 인천 선택)

 

모달 창에서 지역 선택 안 할 시, 지도의 위,경도와 zoom을 한국 전체가 보이도록 설정

아까 모달창에서 받아온 지역의 위도, 경도, zoom을 TMap API의 js 코드로 전달해줬다.

모달창과 지도의 html 파일이 달라서 javascipt의 localStorage 를 사용해서 값을 전달해줬다.

 

plan_modal.js 파일 코드

// 위에서 값 설정하고, 여행플래너 작성 페이지에서 사용하기 위해 localStorage에 저장해놓음
let planInfo = {
    "title" : title,
    "start_dt" : start_dt,
    "end_dt" : end_dt,
    "area_code" : area_code,
    "loc_x" : loc_x,
    "loc_y" : loc_y,
    "zoom" : zoom
};
localStorage.setItem("planInfo", JSON.stringify(planInfo));

 

map.js 파일 코드

// localStorage 에 저장해둔 거 꺼내옴
let mapInfo = JSON.parse(localStorage.getItem('planInfo'));
let x = mapInfo.loc_x;
let y = mapInfo.loc_y;
let zoom = mapInfo.zoom;

// TMap API 코드
function initTmap(){

  // 지도 띄우기
  for (let i = 1; i <= days; i++) {

    mapId = 'map_div' + i;
    markerArr[i] = new Array();

    mapArr[i] = new Tmapv2.Map(mapId, {
      center: new Tmapv2.LatLng(x, y),		//-- x, y로 위/경도 값 설정
      width : "100%",
      height : "745px",
      zoom : zoom,				//-- zoom으로 zoom 값 설정
      zoomControl : true,
      scrollwheel : true
    });
  }
}