본문 바로가기

카테고리 없음

08.28 TIL

보드 페이지에서 카드를 누르면 카드 디테일 모달 창 뿐만이 아닌 카드 수정 모달이 같이 뜨는 오류가 발생

// 카드 세부 정보 모달을 열기 위한 함수
function openCardDetailModal(columnId, cardId) {
  // 카드 세부 정보를 서버에서 가져오는 API 호출
  DetailCardGet(columnId, cardId);
  cardAllUpdate(columnId, cardId);
}

카드 업데이트 모달에 칼럼, 카드 아이디를 넘겨주기 위한 코드를 카드를 클릭했을때 같이 실행하게 만들어서 생겼던 문제로 생각

 

 

// 카드 세부 정보 모달을 열기 위한 함수
function openCardDetailModal(columnId, cardId) {
  // 카드 세부 정보를 서버에서 가져오는 API 호출
  DetailCardGet(columnId, cardId);
}​

위의 코드에서 카드 업데이트 부분을 빼고 

// 업데이트 모달을 열기 위한 함수
function openUpdateCardModal(columnId, cardId) {
  // 모달 내부의 필드들을 초기화 (빈 값으로)
  document.getElementById('cardTitleUdpate').value = '';
  document.getElementById('cardContentUpdate').value = '';
  document.getElementById('cardfileUpdate').value = '';
  document.getElementById('cardUpdateMembers').innerHTML = '';
  document.getElementById('cardColorUpdate').value = '#000000';

  // 컬럼 아이디와 카드 아이디를 모달의 data 속성에 설정
  document.getElementById('updateCardButton').setAttribute('data-column-id', columnId);
  document.getElementById('updateCardButton').setAttribute('data-card-id', cardId);

  // 업데이트 모달을 열기
  $('#updateCardModal').modal('show');
}

document.getElementById('CardUpdateBtn').addEventListener('click', () => {
  // 컬럼 아이디와 카드 아이디 가져오기
  const columnId = document.getElementById('updateCardButton').getAttribute('data-column-id');
  const cardId = document.getElementById('updateCardButton').getAttribute('data-card-id');

  // 업데이트할 데이터 수집
  const updatedCardName = document.getElementById('cardTitleUdpate').value;
  const updatedCardContent = document.getElementById('cardContentUpdate').value;
  // 파일 업로드를 위한 코드 추가
  const updatedCardFileInput = document.getElementById('cardfileUpdate');
  const updatedCardFile = updatedCardFileInput.files[0];

  // 멤버는 이미 선택된 것을 사용하므로 selectedMemberNumber를 그대로 사용
  const updatedCardMembers = selectedMemberNumber;
  const updatedCardColor = document.getElementById('cardColorUpdate').value;

  // 업데이트할 데이터를 객체로 만들어서 전송
  const updatedData = {
    name: updatedCardName,
    content: updatedCardContent,
    fileUrl: updatedCardFile ? URL.createObjectURL(updatedCardFile) : null, // 파일이 있는 경우에만 처리
    members: updatedCardMembers,
    color: updatedCardColor,
  };

  // 업데이트 함수 호출
  CardAllUpdate(columnId, cardId, updatedData);
});

CardUpdateButton 업데이트버튼을 눌렀을때 업데이트 버튼에 할당되어 있는 칼럼, 카드 id가 전송되도록 변경하여 해결