📌여행 계획 생성

컨트롤러

📜PlannerController.java

@Controller
@RequestMapping("/planner")
@RequiredArgsConstructor
public class PlannerController {
   private final PlannerService plannerService;

   // 여행 계획 생성
   @PostMapping
   public String create(@RequestParam String title, @AuthenticationPrincipal MemberDetails memberDetails){
      Member member = memberDetails.getMember();
      Planner planner = plannerService.save(title, member);
      
      return "redirect:/planner/" + planner.getId();
   }

   // 여행 계획 작성 페이지로 이동
   @GetMapping("/{plannerId}")
   public String wirtePage(@PathVariable Long plannerId, Model model){
      model.addAttribute("planner", plannerService.findById(plannerId));
      return "/planner/writePlan";
   }
}

서비스단과 리포지토리는 코드 설명 생략 - 좋아요, 북마크, 댓글 발표 파트와 구현이 거의 비슷하기 때문.

📌여행 계획 내 메모 기능

여행 계획 메모 추가

📜choicePlace.js

// 여행 계획 중복 선택 확인
const choicePlaceCheck = (id)=> {return contents.get(id) !== undefined};

// 장소가 선택될 경우
const choicePlace = (place)=> {
   const placeId = parseInt(place.id);
   kakaoMap.setCenter(new kakao.maps.LatLng(place.y, place.x));
   if(choicePlaceCheck(placeId)) {
      alert('이미 선택한 항목 입니다.');
      return;
   }
   
   let data = {
      memo : null,
      date : null,
      place : {
         id : placeId,
         name : place.place_name,
         address : place.address_name,
         road_address : place.road_address_name,
         url : place.place_url,
         phone : place.phone,
         x : parseFloat(place.x),
         y : parseFloat(place.y),
      },
   }

   $.ajax({
      type: "POST",
      url: location.pathname + "/content",
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      success: function(resp) {
         console.table(resp);
         createPlace(resp.place.id, resp);
      },
      error: function(xhr, status, error) {
         console.log(status, error);
         alert("여행지 추가 실패!");
      }
   })
};

📅여행 계획 메모 내용 반영및 수정

// 내용 수정
const updateContent = (e, id) => {
   $.ajax({
      type: "POST",
      url: location.pathname + "/content/" + id,
      data: {
         memo : e.target.memo.value,
         date : e.target.date.value,
      },
      success: function(resp) {
         console.table(resp);
         alert("메모 작성 완료");
      },
      error: function(xhr, status, error) {
         console.log(status, error);
         alert("수정 실패!");
      }
   })
   return false;
};

여행 계획 메모 삭제

// 내용 삭제
const deleteContent = (id, placeId, el) => {
   $.ajax({
      type: "DELETE",
      url: location.pathname + "/content/" + id,
      contentType: "application/json; charset=utf-8",
      success: function(resp) {
         console.table(resp);
         if(resp){
            el.empty();
            contents.delete(placeId);
         }
      },
      error: function(xhr, status, error) {
         console.log(status, error);
         alert("삭제 실패!");
      }
   })
   return false;
};

해당 여행 계획의 메모 내용들 조회

// 페이지 시작 시, 여행 계획 메모 불러오기
window.onpageshow = () => {
   $.ajax({
      type: "GET",
      url: location.pathname + "/content",
      contentType: "application/json; charset=utf-8",
      success: function(resp) {
         console.table(resp);
         for(let i = 0, l = resp.length; i < l; i++){
            createPlace(resp[i].place.id, resp[i]);
         }
      },
      error: function(xhr, status, error) {
         console.log(status, error);
         alert("불러오기 실패!");
      }
   })
};

컨트롤러

📜ContentController.java

@Controller
@RequestMapping("/planner/{plannerId}/content")
@RequiredArgsConstructor
public class ContentController {

   private final PlannerService plannerService;
   private final ContentService contentService;

   // 메모 내용 추가
   @ResponseBody
   @PostMapping
   public Content addContent(@PathVariable Long plannerId, @RequestBody Content content) {
      Planner planner = plannerService.findById(plannerId);
      return contentService.save(content, planner);
   }

   // 메모 내용 수정
   @ResponseBody
   @PostMapping("/{placeId}")
   public Content updateContent(@PathVariable Long placeId, 
         @RequestParam String memo, @RequestParam String date) {
      return contentService.update(placeId, memo, date);
   }

   // 메모 내용 삭제
   @ResponseBody
   @DeleteMapping("/{placeId}")
   public boolean deleteContent(@PathVariable Long placeId) {
      return contentService.delete(placeId);
   }

   // 메모 리스트 조회
   @ResponseBody
   @GetMapping
   public List<Content> getContentList(@PathVariable Long plannerId) {
      Planner planner = plannerService.findById(plannerId);
      return contentService.findAll(planner);
   }
}

서비스단과 리포지토리는 코드 설명 생략

여행 계획을 짜는 프로젝트이다.
경복궁이라는 이름을 가진 플래너를 만들어보려 한다.

서울로 검색하여 api를 모두 가져온다.

플래너를 이용해 날짜를 설정한다.

다음으로 메모를 저장해준다.

다수의 메모가 가능하다. 롯데월드로 지정하여 플래너를 추가해 보았다.

다른 '광화문'이라는 이름을 가진 게시판도 생성해보았다.
'광화문'과 '경복궁'이라는 글자를 클릭하면 메모의 url로 연결되어 수정 가능하다.