작품 상세 페이지에서 컬렉션에 바로 추가하는 기능 구현

 

이렇게까지 제목을 어떻게 써야할지 감이 잡히지 않는 글이 있다니..

작품 상세 페이지에서 컬렉션 추가 버튼을 누르면 해당 작품을 컬렉션에 추가할 수 있는 모달창이 뜨며

그 모달창에는 나의 컬렉션 리스트가 셀렉트 박스 형식으로 나와있어 어떤 컬렉션에 추가할 지 정할 수 있다.

복합적인 기능이라 필요한 것도 많다!

우선 해당 페이지에서 컨텐츠의 아이디를 가져와야 하고, 모달창 이동 코드도 넣어줘야 하며, 나의 컬렉션 리스트까지 받아와야 한다.

사실 아이디 가져오는 부분은 아직 문제가 있는데 일단 올려놓고 해결방법 얼른 찾아서 수정하는 것으로..

 

---

detailContent.ejs

<!-- 모달 시작 -->
      
      <div class="collection_modal" id="collection-modal">
        <span class="close">&times;</span>
        <h3 class="modal_title">컬렉션에 컨텐츠 추가</h3>
        <div class="modal_content">
          <form
            name="add_content_form"
            method="post"
            enctype="multipart/form-data"
            id="addContentForm"
          >
            <h4 class="collection_title">내 컬렉션 목록</h4>
            <select class="collection_select" id="collection-select">
              <!-- <option value="collection">컬렉션 제목</option> -->
            </select>
            <!-- 컨텐츠 id 저장해서 받아오는 부분(숨김) -->
            <input type="hidden" id="contentIdInput" name="contentId" value="" />
            <div class="btn_area">
              <input type="submit" value="완료" />
            </div>
          </form>
        </div>
      </div>

컨텐츠 상세 페이지의 body 제일 아래에 작성했다.

display: none;으로 숨겨두고 버튼 클릭 이벤트가 발생했을 때 나타나게 만들어야 한다.

 

detail-content.js

var modal = document.getElementById('collection-modal');

var btn = document.getElementById('collection-btn');

var span = document.getElementsByClassName('close')[0];

btn.onclick = function () {
  modal.style.display = 'block';
};

span.onclick = function () {
  modal.style.display = 'none';
};

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
};

// 컨텐츠 id 받아오는 코드
// $('.add-to-collection-btn').on('click', function (event) {
//   event.preventDefault();

//   var contentId = $(this).data('content-id');

//   $('#contentIdInput').val(contentId);

//   $('#collectionModal').show();
// });

$(document).ready(function () {
  var url = window.location.href.split('/');
  var contentId = url[url.length - 1];

  $('.close').click(function () {
    $('#collection-modal').hide();
  });

  $('#collection-btn').on('click', function () {
    // 현재 컨텐츠의 ID 가져오기

    $.ajax({
      url: `/collections`,
      type: 'GET',
      dataType: 'json',
      data: $(this).serialize(),
      success: function (data) {
        console.log('가져오기 성공');
        console.log(data);
        $.each(data, function (i) {
          var option = `<option value="${data[i].id}">${data[i].title}</option>`;
          $('#collection-select').append(option);
        });
      },
      error: function (response) {
        alert(response.responseJSON.message);
      },
    });
  });

  // 폼 제출 이벤트
  $('#addContentForm').submit(function (e) {
    e.preventDefault(); // 기본 제출 동작을 방지

    var formData = new FormData(this); // 폼 데이터를 FormData 객체로 생성

    var selectedOption = $('#collection-select').val();

    $.ajax({
      url: `/collections/${selectedOption}/content`, // 데이터를 전송할 서버의 URL -> 컬렉션 컨텐츠 추가
      type: 'POST',
      data: formData,
      processData: false, // processData와 contentType을 false로 설정하여,
      contentType: false, // FormData 객체를 제대로 전송할 수 있게 함
      success: function (data) {
        alert('컨텐츠가 성공적으로 추가되었습니다.');
        //window.location.href = '/collections'; // 컬렉션 페이지로 넘겼는데 이거말고 작품페이지로 이동하는게 나을지
      },
      error: function (response) {
        alert(response.responseJSON.message);
      },
    });
  });

  $('#like-btn').click(function () {
    var url = window.location.href.split('/');
    var contentId = url[url.length - 1];

    $.ajax({
      url: `/likes/change?contentId=${contentId}`,
      type: 'POST',
      data: $(this).serialize(),
      success: function (data) {
        alert('내 보관함에 추가되었습니다.');
        location.reload(true);
      },
      error: function (response) {
        alert(response.responseJSON.message);
      },
    });
  });
});