smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)



현재 프로젝트에서 AntD 를 사용하고 있는데,
업로드 기능에서 삭제할 때 컨펌창을 띄우기로 했다.
처음에는 쉬울 줄 알고 맘 편히 했는데… 막상 해보니 아니었다…ㅠㅠ
역시 자만하면 안돼….!



function removeConfirm(record) {
    createConfirm({
      iconType: 'warning',
      title: '삭제',
      content: `파일이 영구삭제 됩니다. 삭제 하시겠습니까?`,
      onOk: async () => {
        await removeUpload(record);
      },
      onCancel: () => {},
    });
  }

  async function removeUpload(record) {
    const fileId = ref('');
    if (record.response) {
      fileId.value = record.response.result.id;
    } else {
      fileId.value = record.id;
    }

    await deleteFile(fileId.value, null);
    emit('success');
  }

처음엔 그저, 컨펌창을 띄우고 확인을 눌렀을 때 삭제 작업이 되도록 했다.
그렇게 하니까 확인을 누르기 전에 실제 파일은 삭제가 되진 않았지만…
프론트 상에 나오는 이미지 리스트가 삭제가 되었다.
그러니까, 화면에서는 파일이 삭제가 된 것처럼 나오지만 실제 파일은 삭제가 아닌 상태가 된 것이다!
내가 허락을 안했는데… 왜 이미지 리스트에서 자동으로 삭제하시는데요…ㅠㅠㅠ
확인해보니 삭제가 되는 것은 아니고, 해당 이미지의 status 값이 removed로 변하는 것이었다.



record.status = 'done';



그래서 직접 객체의 값을 바꾸어주었다.
AntD의 file status 상태에는 error | success | done | uploading | removed 다섯개가 존재한다.
그래서 done이나 success로 바꿔주면 될 줄 알았다….
이게 웬걸… 바꿔도 안바뀐다….
다른 값들은 바뀌는데 status 값만 안바뀌었다…
별 짓을 다해도 안됐다 ㅋㅋㅋㅋㅋ
그래서 미친듯이 검색….!!!!!



AntD를 사용하는 사람들이 많은 편은 아니라서 해당 케이스를 찾기가 어려웠다.
그러다가 발견한 블로그에서는 promise를 사용하면 된다고 적혀있었다.
그분은 react, 나는 vue 이기 때문에 코드를 참고할 수는 없었지만 어느정도 힌트를 얻었다.
나는 promise 대신 async-await를 적극적으로 쓰기로 했다.



async function removeTest(record) {
    removeConfirm(record);
    return false;
  }

  async function removeConfirm(record) {
    await createConfirm({
      iconType: 'warning',
      title: '삭제',
      content: '파일이 영구삭제 됩니다. 삭제 하시겠습니까?',
      onOk: async () => {
        await removeUpload(record);
      },
      onCancel: () => {},
    });
  }

  async function removeUpload(record) {
    const fileId = ref('');
    if (record.response) {
      fileId.value = record.response.result.id;
    } else {
      fileId.value = record.id;
    }

    await deleteFile(fileId.value, null);

    for (let i = 0; i < fileList.value?.length; i++) {
      if (fileList.value[i].response) {
        if (fileList.value[i].response.result.id == fileId.value) {
          fileList.value.splice(i, 1);
        }
      } else {
        if (fileList.value[i].id == fileId.value) {
          fileList.value.splice(i, 1);
        }
      }
    }
    emit('success');
  };



컨펌을 띄우고 바로 return false를 날렸다.
공식 문서를 살펴보면 remove 이벤트는 callback function이다.
return false나, promise resolve(false), reject 를 하면 삭제 이벤트가 방지된다고 한다.
나는 일단 화면 리스트에서 삭제되는 것을 막아야했기에 바로 return false를 했다.
그 다음 컨펌창에서 ok를 누르면 api 통신을 통해 실제 데이터를 삭제 작업했다.
실제 데이터가 삭제되고 난 다음에야 프론트에서 해당 이미지를 지워야하기 때문에,
fileList에서 id값을 찾아 삭제를 진행했다.
이렇게 했더니 성공!!!!



진짜 만만치 않은 작업이었다…ㅠㅠ….
내가 async-await, promise 에 능숙했다면 금방 끝낼 수도 있었을 것 같기도 하고…
폭풍 검색이 아니었다면 나는 힌트조차 얻지도 못하고 해결을 못했겠지 ㅠ_ㅜ…
그래도 해결을 해내서 다행이다!!!
오늘도 새로 배워간다 ㅎㅎ

참고