[TIL] 09/06 :: 채팅 - 사진 전송

* 문제상황

스토리지의 버킷에는 image 가 잘 삽입되는데, 데이터테이블의 image_url 칼럼에는 { } 빈 객체가 삽입됨.

❗코드에서의 원인 파악

문제를 발생시키는 이유는 handleFileUpload 함수에서 이미지 업로드 후 반환된 URL을 제대로 처리하지 못하고 있기 때문이다.
handleFileUpload 함수는 비동기 함수로, 파일을 업로드한 후 URL을 반환해야 하는데, handleSubmit 함수에서 이 비동기 함수의 반환 값을 기다리지 않고 진행하고 있다.
따라서 imageUrl 변수가 아직 할당되지 않은 상태로 빈 객체가 전달되고 있는 것!!

// 수정 전
 const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    let imageUrl = null;

    if (imageFile) {
      imageUrl = handleFileUpload();
      setImageFile(null);
    }

    if (imageUrl) {
      await sendMessageWithImage(imageUrl);
    } else {
      sendMessage(e);
    }
  };

// 수정 후 => await handleFileUpload(); 추가
 const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    let imageUrl = null;

    if (imageFile) {
      imageUrl = await handleFileUpload();
      setImageFile(null);
    }

    if (imageUrl) {
      await sendMessageWithImage(imageUrl);
    } else {
      sendMessage(e);
    }
  };

• await 키워드를 사용하여 파일 업로드 후 URL을 받아올 수 있도록 수정

---

* 문제상황2

• publicUrl 접근 문제
  

사진을 보여주는 메세지 리스트 컴포넌트에서 사용하는 next/image 컴포넌트에 전달된 src 값이 잘못된 형식이어서 발생한 에러.
-> next/image는 상대 경로가 "/"로 시작하거나, 절대 URL (http:// 또는 https://) 형식이어야 한다. 빈 문자열이나 잘못된 URL 형식이 전달될 경우 이 오류가 발생함

❗코드에서의 원인 파악

지금 문제는 handleFileUpload 함수가 Supabase 스토리지에서 publicURL을 반환할 때, 객체 형태로 반환하고 이를 그대로 데이터베이스에 삽입하고 있기 때문이다.
publicURL이 객체로 삽입되면, 해당 필드를 사용할 때 src가 올바르게 파싱되지 않아서 오류가 발생할 수 있다.
-> publicURL 객체의 값 중 URL 문자열만 추출해서 데이터베이스에 삽입하는 것으로 수정
-> imageUrl -> data -> publicUrl 로 접근했어야 했다..!