[Dap JI - issue] 동영상 삭제에 관하여

1. 기존 구현 방법 및 고민

• 삭제를 하는 기존 구현 방식은 매우 간단하게 이루어졌었다. 사용자가 수정 페이지에서 동영상마다 있는 x아이콘을 클릭하면 해당 동영상의 url이 서버로 전송되어 바로 삭제되었다. 하지만 이 방식에는 문제점이 있었다. .
  
  • 1. 실수로 삭제된 동영상을 다시 업로드 하는 것 외에는 돌릴 방법이 없다는것
  • 2. 서버에서 완전히 제거되므로 데이터 복구 불가능  

const updatedVideos = mediaUrl.videoUrl.filter((_, i) => i !== index);
const updatedThumbnailUrl = mediaUrl.thumbnailUrl.filter(
  (_, i) => i !== index,
);

setMediaUrl({
  videoUrl: updatedVideos,
  thumbnailUrl: updatedThumbnailUrl,
});

• x아이콘을 클릭하면 videoUrl과 thumbnailUrl에서 해당 영상의 url을 제거하고 변경된 상태를 저장하는 방식

2. 이슈

• 이 문제는 동영상 삭제가 즉시 서버에 반영되는 구조로 인해 발생했다. 만약 사용자가 실수로 동영상을 삭제한 경우 취소할 방법이 없었으며 삭제된 동영상은 완전히 서버에서 제거되므로 복구할 방법이 없었다. 당연하게 생각했어야 할 문제였지만 너무 기능 구현에만 집중하느라 사용자 경험에 대한 부분까지 신경쓰지 못해서 발생했다. 

 3. 개선 방안

• 그렇다면 해결 방법은 ? 
• x아이콘을 눌렀을때 삭제는 브라우저에서만 이루어지도록 하고 실제 데이터 삭제는 사용자가 다른 수정할 데이터와 함게 수정 버튼을 눌렀을때만 서버에 반영되도록 변경하는게 좋겠다고 생각했다.  
• 이러한 방법으로 사용자는 실수로 동영상을 삭제하거나 수정하기 싫을 때 이를 취소할 수 있는 기회를 가지게 된다. 

4. 구현

• 우선 x 아이콘을 눌렀을 때 해당 동영상과 썸네일의 url을 브라우저에서만 제거하도록 수정해야한다
  deletedVideos라는 state를 하나 만들어 삭제된 동영상의 url을 배열로 state에 담아준다. 

  const [deletedVideos, setDeletedVideos] = useState<
    { videoUrl: string; thumbnailUrl: string }[]
  >([]);

• 그리고 setDeleteVideos에 이전값과 현재값을 담을 수 있도록 설정하고  기존에 있는 mediaUrl을 사용해 브라우저에서 삭제되도록 한다. 

const videoToRemove = mediaUrl.videoUrl[index];
const thumbnailToRemove = mediaUrl.thumbnailUrl[index];

// 삭제할 동영상과 썸네일 URL을 deletedVideos 배열에 추가
setDeletedVideos((prev: string[]) => [
  ...prev,
  { videoUrl: videoToRemove, thumbnailUrl: thumbnailToRemove },
]);

const updatedVideos = mediaUrl.videoUrl.filter((_, i) => i !== index);
const updatedThumbnailUrl = mediaUrl.thumbnailUrl.filter(
  (_, i) => i !== index,
);

setMediaUrl({
  videoUrl: updatedVideos,
  thumbnailUrl: updatedThumbnailUrl,
});

• 그리고 상위 컴포넌트인 업로드 폼에서 해당 state를 사용해 deletedVideos배열에 모든 요소에 대해 삭제할 수 있도록 foreach사용, 배열의 길이에 맞게 자동으로 반복을 종료하도록 설정한다. 
  결국 deletedVideos 모든 배열에 대해서 videoDelete 함수 적용(삭제하는것)

const handleVideoDeletion = () => {
      deletedVideos.forEach(({ videoUrl, thumbnailUrl }) => {
        const videoToDelete = {
          videoUrl: videoUrl,
          thumbnailUrl: thumbnailUrl,
        };
        videoDelete(videoToDelete);
      });
    };

 

• 처음에 deleteVideos에 대해 콘솔을 찍어보면 빈배열이었다가 삭제를 누르면 url이 잘 담기는것을 볼 수 있다. 
   

• 그리고 onSubmit에 담에서 전송하면 성공적으로 수정과 함께 삭제된다.

5. 결론

• 어찌보면 당연한 내용이었다. 사용자가 동영상을 실수로 삭제하더라도 수정버튼을 누르기 전까지는 데이터를 유지해야 한다는 점은 기본적인 ux 고려사항이다. 프론트는 단순히 데이터를 다르는 것만 아니라 사용자와 직접 상호작용하는 분야이다. 기능 구현에만 집중할게 아니라 기능 구현 시 어떻게 상호작용할지, 다양한 예외처리에 대해서도 충분한 고민을더 해야한다는 점을 상기하게 된 부분이다.