index.js

function progress(form, callback) {
  const progressBar = document.getElementById('progressBar');
  let template = getComputedStyle(document.body).gridTemplateColumns.split(' ');
  if (template.length > 1) {
    template = '65px auto 1fr auto';
  } else {
    template = '65px auto auto 1fr auto';
  }
  body.style.gridTemplateRows = template;
  nav.style.display = 'none';
  article.style.display = 'none';
  section.style.display = 'flex';

  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);

  // 비동기적으로 서버에서 받은 데이터를 콜백 함수로 전달
  xhr.addEventListener('load', event => {
    if (xhr.status === 200) {
      callback(xhr.responseText);  // 서버 응답을 콜백으로 전달
    } else if (xhr.status === 204) {
      window.location.reload();
      callback(null);  // 응답이 204일 경우 null 반환
    } else {
      alert('파일 전송에 실패했습니다.');
      callback(null);  // 실패 시 null 반환
    }
  });

  xhr.addEventListener('error', event => {
    alert('에러가 발생했습니다. 관리자에게 문의하세요.');
    callback(null);  // 에러 발생 시 null 반환
  });

  xhr.upload.addEventListener('progress', event => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      progressBar.value = percentComplete;
    }
  });

  xhr.send(formData);
}

client.js

const table = document.getElementById('table');

table.addEventListener('change', (event) => {
  if (event.target.form) {
    const form = event.target.form;

    // progress 함수 호출 시 콜백을 전달
    progress(form, function(response) {
      console.log(response);  // 서버에서 받은 응답 출력
    });
  }
});