📍

사용자 요구사항

• 게시글 작성시, 다중의 이미지를 한꺼번에 올릴 수 있어야 합니다.
  → 사용자가 올린 다중 이미지를 받아 supabase storage에 저장하고 게시글 데이터 베이스에도 저장해야 합니다.
• 업로드 중 올린 파일들을 사용자가 보고 선택할 수 있도록 미리 보여주어야 합니다.
• 업로드한 이미지를 삭제할 수 있어야 합니다.
  → storage와 form객체, 미리보기에서 모두 삭제해야 합니다.
• 올린 다중 이미지 중에서 대표사진을 선택할 수 있어야 합니다.
  → 처음 이미지 업로드시 | 대표이미지 선택 전에는 첫번째 사진이 대표이미지로 지정됩니다.
  → 라디오 버튼을 통해 대표이미지를 선택하고, 따로 게시글 데이터베이스에 저장합니다.

📌 react, supabase 외에 'react-hook-form'도 사용해 form을 작성하고 있습니다.

Supabase Storage

Supabase Storage 는 파일을 저장하고 관리하는 기능을 제공하는 컴포넌트입니다. 파일은 데이터 용량이 크기 때문에 데이터 베이스 외부에 따로 저장하는 것이 좋습니다.

• 모든 종류의 미디어 파일 및 폴더를 저장할 수 있습니다. 주로 이미지, 동영상, 문서와 같은 파일을 애플리케이션에서 효율적으로 관리할 수 있도록 도와줍니다.

• storage 내부에서 프로젝트에 적합한 폴더구조를 만들어 파일을 정리해서 저장할 수 있습니다.

• 다양한 보안 및 액세스 규칙에 따라 별도의 버킷을 생성합니다.

Create Storage Bucket (버킷 만들기)

supabase dashboard를 통해 버킷을 생성합니다.

• upload된 사진을 넣어둘 버킷을 만들어 줍니다. supabase에서 storage 페이지로 이동해 New bucket을 눌러 새로운 버킷을 만듭니다.
  

  • 이 때 'Public bucket' 을 체크하면 누구나 승인 없이 모든 객체를 읽을 수 있도록 합니다. 개발 중에는 체크하여 테스트를 용이하게 할 수 있습니다.
  • 'Allowed MIME types' 에 업로드 크기를 제한하거나, 허용하는 유형을 제한할 수 있습니다. 이미지 파일만 받으려면 image/*라고 적어서 제한할 수 있습니다.
    

• Policies 에서 New policy 버튼을 눌러 버킷의 규칙을 설정합니다.
  

  • For full customization 버튼을 눌러 새 설정을 추가합니다.
    
  • 'Policy name' 을 정하고, 'Allowed operation' 에서 모든 작업이 가능하도록 모두 체크해준 뒤 'Target roles' 에서 authenticated를 선택해 인증된 사용자만 사용가능하도록 설정합니다.(해당 프로젝트는 게시글을 인증된 사용자만 작성할 수 있도록 하기 때문입니다.)
    
  • Review > Save policy 를 눌러 설정을 저장합니다.

Bucket directory structure (버킷 폴더 구조)

프로젝트에 따라 버킷내에 이미지를 저장할 폴더 구조를 정해줍니다.

− images  👈🏻 애플리케이션에서 사용하는 image파일들을 담을 버킷(위에서 생성)
   ⎿ post  👈🏻 게시글 관련 이미지만 모아두는 폴더
		⎿ {user_id}  👈🏻 사용자별 폴더
        	⎿ {post_id}  👈🏻 게시글 별 폴더
            ⎿ temporary  👈🏻 임시로 이미지를 저장하는 폴더

• 게시글에 관련된 사진을 저장할 것이므로 post' 폴더를 생성합니다.

• 게시글 데이터에서 storage의 사진을 가져다 렌더링할 수 있도록 구조를 짜야합니다.

  • 따라서 게시글을 우선 '사용자ID' 별로 폴더를 나눕니다.
  • 사용자가 여러 게시글을 올릴 수도 있으므로, 사용자 폴더 내에서 '게시글ID'별로 폴더를 나누기로 합니다.

• 작성 중 업로드되는 이미지를 우선 'temporary'에 저장하고, 게시글을 생성했을 때 '게시글ID' 폴더로 옮기기로 합니다.

  • 작성 중에는 아직 '게시글ID'가 없기 때문에 처음부터 '게시글ID'폴더를 생성할 수 없기 때문입니다.

---

Image Upload (이미지 업로드)

Multi Image Upload Form (다중 이미지 업로드 폼)

Form 작성

• 부모 컴포넌트에서 react-hook-form으로 form객체를 만들면서 이미지를 저장할 빈배열을 만듭니다.(react-hook-form을 사용하지 않는다면 빈 배열 state를 만들어 내려줍니다.)

• 자식 컴포넌트에서 wireFrame에 맞춰 form을 작성합니다.

  • 첫번째 박스 : 언제든 클릭시 파일을 올릴 수 있는 file input 버튼 입니다.
  • 나머지 박스 : 이미지가 없다면 클릭시 파일을 올리는 버튼이고, 이미지가 있다면 이미지를 3개씩 미리 보여줍니다.

const MultiImageForm = (form) => {
  // 받은 파일을 보여주기 위해 이미지URL을 저장할 배열 상태
  const [displayedImages, setDisplayedImages] = useState<string[]>([]);
  // react-hook-form의 form객체에서 대표사진 & 이미지 값을 감지(state와
  const selectedRepresentativeImage = form.watch('representative_img');
  const uploadedImages = useWatch({
    control: form.control,
    name: 'post_img',
  });
  
  return (
    <div>
      {/* 👇🏻 우선 이미지를 올릴 수 있는 input box를 만듭니다. */}
      <label htmlFor='post_img'>
        <CameraIcon />
        <input 
          type='file' 
          id='post_img' 
          name='post_img'
          accept=".jpg, .jpeg, .png"
          mutiple 
          hidden />
      </label>
    </div>
  )
}

Event Handler (이벤트 핸들러)

• input으로 file을 업로드 받는 이벤트 핸들러를 작성합니다.

• 다중 이미지를 받으므로 File[]을 받게됩니다. 받은 이미지 배열을 순회하며 각 이미지를 인수로 하여 uploadImages() 함수(이미지를 storage에 저장하고 상태를 정제하는 함수)를 호출합니다.

const handleFiles = async (e: React.ChangeEvent<HTMLInputElement>) => {
  // 받아온 이미지 파일들을 fileList 변수에 저장합니다.
  const fileList = e.target.files;
  // 받아온 파일이 있으면
  if(fileList) {
    // 리스트를 배열로 저장합니다.
    const fileArray = Array.from(fileList);
    // 배열을 순회하며 이미지 업로드 함수에 각 이미지를 인수로 하여 호출합니다.
    fileArray.forEach(file => {
      uploadImages(file);
    });
  }
};

...
  // 이벤트 핸들러를 onChange로 연결합니다.
  <input 
     type='file' 
     id='post_img' 
     name='post_img'
     ...
     onChange={handleFiles}
  />
...

storage upload (스토리지 업로드)

• uploadImages
  • 받은 이미지를 인자로 하여 uploadStorage() 함수를 호출합니다.
  • form객체의 post_img 배열을 업데이트 합니다.
  • storage에 올린 이미지의 URL을 가져와 renderImg 배열에 저장합니다.
    • storage의 이미지 URL은 '버킷명/폴더 경로/이미지 이름'으로 되어 있습니다.
• uploadStorage : 이미지 파일을 supabase storage에 업로드 하는 함수입니다.

const uploadStorage = async(file:File, fileName: string) => {
  // images 버킷 내 post > userId 폴더 내에 저장합니다.
  // temporary폴더에 받은 파일명으로 file을 저장합니다.
  const { error } = await supabase.storage
  	.from(`images/post/${userId}`)
  	.upload(`temporary/${fileName}`, file);
  
  if (error) alert('이미지 업로드에 실패했습니다.');
}

const uploadImages = async (file:file) => {
  // 이미지 파일을 uuid()함수를 통해 새로 이름을 짓습니다.
  const newFileName = uuid();
  // file과 새이름을 인자로 upload 함수를 호출합니다.
  await uploadStorage(file, newFileName);
  
  // form객체의 post_img 상태를 업데이트 합니다.
  const updatedImages = [...form.getValues('post_img'), newFileName];
  form.setValue('post_img', updatedImages);
  
  // temporary에 저장된 새로운 이미지의 url을 가져와 renderImg 상태를 업데이트합니다.
  const newFileUrl = `${POST_STORAGE_URL}/${userId}/temporary/${newFileName}`;
  setDisplayedImages(prev => [...prev, newFileUrl]);
}

Preview Images (이미지 미리보기)

map 메소드로 <img> 렌더링

• 이미지가 없거나 3개 이하라면 남은 영역은 <label> 박스로 채웁니다.

• 이미지가 있다면 map 메소드로 <img>로 렌더링합니다.

  • 이 때, 박스 크기대로 사진이 보이게 하려면 css로 'object-fit'속성＊을 설정해주어야 합니다.

  return (
    ...
      {/* 👇🏻 이미지가 있다면 렌더링하고 */}
      {displayedImages.map((imgSrc, index) => (
		  <div key={uuid()}>
              <Img src={imgSrc} />
          </div>
      ))}
      {/* 👇🏻 이미지가 3개보다 적다면 남는 칸은 label로 채운다. */}
      {uploadedImages.length < 3 &&
            Array.from(3 - uploadedImages.length).map(_ => (
              <label
                key={uuid()}
                htmlFor="post_img"
              />
       ))}
    ...
  )

📍

object-filt

img, video 등의 요소에 비율을 유지한 채 크기를 조정하는 속성입니다.

• fill(default): 박스 크기에 맞춰 조절해 박스를 채우는 속성값입니다. (비율이 박스와 다르면 이미지가 늘어나거나 줄어든 채로 채워집니다.)
• contain: 이미지 비율을 유지한 채 박스를 채우는 속성값입니다. (비율이 다르면 박스에 빈공간이 생깁니다.)
• cover: 이미지의 비율을 유지하면서 박스를 채우는 속성값입니다. (비율이 다르면 박스크기에 맞춰지도록 확대되어 남는 이미지 부분이 잘립니다.)
• none : 이미지크기를 조절하지 않은 채, 원본 크기대로 올라갑니다.

---

👉🏻 cover 속성값을 추천합니다. 이 때 objectPosition: 'center'로 하여 사진을 가운데 위치하게 할 수 있습니다.

이미지를 세개씩 보이게 하기

• currentPageIndex > 0
  : 이미지 페이지가 첫번째가 아닐 때만(이전 버튼이 필요한 때) 이전 버튼이 나타납니다.

• totalImageCount > 3
  & currentPageIndex < Math.ceil(totalImageCount / 3) - 1
  : 이미지가 3개 이상이고 현재 페이지가 마지막 페이지가 아닐 때만(다음 버튼이 필요한 때) 다음 버튼이 나타납니다.

• 이미지를 3개씩 나누어 보여주기 위해 전체 이미지 배열에서 3개씩 잘라내어 map 메소드로 렌더링합니다.

  • currentPageIndex * 3 : slice를 시작할 인덱스로, 현재 페이지에 3을 곱하면 이전까지 보여준 사진의 갯수가 되어 이전에 보여준 사진 다음부터 slice합니다.
  • (currentPageIndex + 1) * 3 : slice를 끝낼 인덱스로, 다음 페이지에 보일 마지막 3번째 사진까지 자르게 됩니다.

// 3개씩 보이게 할 것이므로 이미지 숫자를 상수로 저장하고 페이지를 state로 만듭니다.
const IMAGE_PER_PAGE = 3
const [currentPageIndex, setCurrentPageIndex] = useState(0);
// 이미지의 총 길이는 자주 쓰이므로 따로 선언해 둡니다.
const totalImageCount = uploadedImages?.length || 0;

// 다음 3개의 이미지 페이지로 넘어가도록 하는 next 버튼의 이벤트핸들러
const handleNextImages = () => {
  // 현재페이지가 마지막 페이지가 아니라면 다음 페이지로 이동합니다.
  if(currentPageIndex < Math.ceil(totalImageCount / IMAGE_PER_PAGE) - 1 {
     setCurrentPageIndex(currentPageIndex + 1);
  }
};

// 이전 3개의 이미지 페이지로 넘어가도록 하는 prev 버튼의 이벤트 핸들러
const handlePrevImage = () => {
  // 현재 페이지가 첫번째 페이지가 아니라면 이전 페이지로 이동합니다.
  if(currentPageIndex > 0) {
    setCurrentPageIndex(currenPageIndex - 1);
  }
};

return (
  ...
  {/* 현재 이미지 페이지가 0보다 클때만 '이전 버튼'이 나오게 합니다 */}
  {currentPageIndex > 0 && (
  	<button onClick={handlePrevImage}>⬅️</button>
  )}
  {/* 이미지를 3개씩 보여줍니다. */}
  {displayedImages
    .slice(currentPageIndex * IMAGE_PER_PAGE, (currentPageIndex + 1) * IMAGE_PER_PAGE)
    .map((imgSrc) => (
    	<img src={imgSrc} />
    ))
  }
  {/* 이미지가 3개 이상이어세 페이지가 필요할 때 '다음 버튼'이 나오게 합니다.*/}
  {totalImageCount > IMAGE_PER_PAGE &&
          currentPageIndex <
            Math.ceil(totalImageCount / IMAGE_PER_PAGE) - 1 && (
            <button onClick={handleNextImage}>➡️</button>
   )}
  )

Remove button (이미지 삭제 버튼)

• 이미지 삭제 버튼을 추가합니다. 버튼을 클릭했을 때 deleteImage()함수를 호출하면서 클릭한 이미지의 src주소를 같이 넘겨줍니다.

• 넘겨받은 이미지의 URL은 업로드시 구조에 따라 images/post/[userId]/temporary/[imgName]으로 되어있습니다.
  

• 해당 URL에 따라 storage에서 삭제해줍니다. 'bucket'에서 '해당 파일'을 삭제해야 합니다. 따라서 .from({bucket명})과 .remove([{이미지 경로}/{이미지 이름}])으로 적어야 합니다.

• form객체에는 imgName만 저장중이므로 여기서 imgName만 추출하여 filter로 배열에서 삭제해 업데이트 합니다.

• displayImages배열에서도 삭제해 미리보기에서도 삭제해 줍니다.

// 이미지 삭제 버튼 이벤트 핸들러
const deleteImage = async(imgSrc) => {
  // imgName 을 추출합니다.
  const imgName = imgSrc.split('/').slice(-1)[0];
  
  // storage bucket에서 삭제해줍니다.
  const { error } = await supabase.storage
  	.from('images')
  	.remove([`post/${userId}/temporary/${imgName}`]);
  if (error) alert('이미지 삭제에 실패했습니다.');
  
  // form객체에서 삭제하고 업데이트 합니다.
  const images = form.watch('post_img').filter(img => img !== imgName);
  form.setValue('post_img', images);
  
  // 미리보기로 보여지는 이미지 배열에서도 삭제해줍니다.
  setDisplayedImages(prev => prev.filter(imgUrl => !imgUrl.includes(imgName)));
}
...
return (
  ...
  {displayImages.slice(...)
	.map((imgSrc) => (
  	  <div>
        {/* 👇🏻 삭제 버튼 추가 */}
    	<button onClick={() => deleteImage(imgSrc)}>❎</button>
    	<img src={imgSrc} />
      </div>
  	)
  }
  ...
)

🚨

이미지를 삭제하여 3의 배수로 남으면 input 버튼 외에 아무것도 없어서 사용자에게 혼란을 야기할 수 있습니다. 이미지를 삭제하여 3의 배수로 남으면 이전 페이지로 이동하도록 로직을 추가했습니다.

• totalImageCount % 3 === 0 : 이미지 개수가 3의 배수로 남았고
• currentPageIndex > 0 : 현재 페이지가 넘어가 있는 상태라면
• setCurrentPageIndex(currentPageIndex - 1) : 이전 페이지로 이동됩니다.

const deleteImage = async (imgSrc: string) => {
  ...
  if (totalImageCount % 3 === 0 && currentPageIndex > 0) {
        setCurrentPageIndex(currentPageIndex - 1);
  }
  ...
}

Select representative image (대표이미지 선택)

라디오 버튼 추가

• setRepresentativeImage(imgSrc)

  • 라디오 버튼 클릭시 실행되는 함수로, 클릭된 이미지의 src주소를 받습니다.
  • 이미지 이름을 추출해 form객체의 대표사진 값으로 해당 이미지의 이름을 저장합니다.

• 라디오 버튼이 체크되었다는 표시(checked)는 해당 이미지 URL에 대표사진 값(이미지 이름)이 포함되어 있는지 여부로 결정합니다.

  • imgSrc.includes(selectedRepresentaiveImage)

• 라디오 버튼과 '대표사진'글씨의 위치를 css로 조정해 줍니다.

// form 객체에서 대표사진 데이터를 추출해 변수에 저장합니다.
const selectedRepresentativeImage = form.watch('representative_img');

// 라디오버튼 선택시 대표사진으로 설정하는 함수
const setRepresentativeImage = (imgSrc) => {
  // 선택된 이미지의 이름을 추출해 대표사진 값으로 업데이트합니다.
  const imgName = imgSrc.split('/').slice(-1)[0];
  form.setValue('representative_img', imgName);
};

return (
  ...
  {displayedImages.slice(...)
	.map((imgSrc, index) => (
  	  <div>
    	<button onClick={() => deleteImage(imgSrc)}>❎</button>
    	<label htmlFor={`img_${index}`}>
          <input 
            type="radio" 
            id={`img_${index}`} 
            checked={imgSrc.includes(selectedRepresentativeImage)}
            onChange{()=>setRepresentativeImage(imgSrc)}
          />
          <img src={imgSrc} />
          {/* 해당 이미지 URL에 대표사진의 이름이 있다면 '대표사진'이라는 글자를 보여줍니다.*/}
          {imgSrc.includes(seletecRepresentativeImage) && (
              <p>대표사진</p>
          )}
        </label>
      </div>
   ))}
   ...
 )

🚨

모든 경우에서 저장될 때 'post_img'와 'representative_img'를 나누어 저장하려고 하니, totalImageCount를 계산하고 추가, 삭제하는 로직이 복잡해졌습니다. (너무 많이 변경하고 삭제하여 이 때의 코드를 추적할 수 없어졌습니다😭)
👉🏻 따라서 representative_img를 따로 저장하되, post_img에는 representative_img를 포함해 저장하고 나중에 데이터베이스에post_img를 넘길 때 representative_img를 제외하고 넘기는 방식을 사용하기로 했습니다.

const onSubmitPost = (formData) => {
  const postImgExcludeRep = formData.post_img.filter(
      imgName => imgName !== formData.representative_img,
    );
  const Data = {
    post_img: postImgExcludeRep, 
    representative_img: formData.representative_img,
    ...
  }
}

첫번째 사진을 대표사진 기본값으로 설정하기

• 업로드 되는 첫번째 이미지를 우선 대표사진의 값으로 설정합니다.
• 라디오 버튼을 클릭했을 때 대표사진의 값과 표시가 변경됩니다.

---

📌 다음은 설정을 하며 겪은 에러들입니다. 뛰어 넘어 읽으셔도 됩니다!

🚨

form객체의 default값으로 post_img[0]으로 설정하려 했으나, 객체가 만들어 지기 전에는 'post_img'가 존재하지 않아 에러가 발생했습니다.

🚨

대표사진을 state로 변경해 초기값으로 post_img[0]으로 설정하고 라디오버튼 핸들러에서 set함수로 변경하도록 했습니다.

// 대표사진 state
const [selectedRepresentativeImage, setSelectedRepresentativeImage] =
    useState(form.watch('house_img')[0]);
// 라디오버튼 이벤트 핸들러
const setRepresentativeImage = (imgSrc: string) => {
  const imgName = imgSrc.split('/').slice(-1)[0];
  setSelectedRepresentativeImage(imgName);
};

👉🏻 state가 생성될 때만 초기값이 설정이 되므로, 페이지 렌더링 후에 이미지가 처음 업로드되는 시점에 설정되는 것이 아니라 첫번째 이미지가 대표사진으로 설정되지 않았습니다.

🚨

이미지 업로드 함수에 이미지 배열의 길이가 0일 때, 즉 첫번째 사진이라면 'post_img'가 아닌 'representative_img'값으로 저장하도록 했습니다.

const uploadImages = async (file: File) => {
	const newFileName = uuid();
    await uploadStorage(file, newFileName);
    if (totalImageCount === 0) {
      form.setValue('representative_img', newFileName);
      setRepresentativeImage(newFileName);
    } else {
      const updatedImages = [...form.getValues('post_img'), newFileName];
      form.setValue('post_img', updatedImages);
    }
}

👉🏻 totalImageCount는 'post_img'만 계산하므로 계산에 포함되지 않아 아래 사진처럼 업로드시마다 박스가 하나씩 늘어났고 페이지 계산이 되지 않았습니다. 또한 업로드를 기준으로 하여 대표사진이 첫번째가 아닌 끝 이미지에 표시가 생겨났습니다.

👉🏻 또한 state를 사용하면서 삭제할 때 대표사진일 경우를 고려해 로직을 추가해야했고, 대표사진으로 지정된 사진이 삭제되었을 때 다시 첫 이미지가 대표사진으로 지정되지 않았습니다.

---

• state가 아닌 기존처럼 form객체의 값을 활용하고, 처음 이미지 업로드시 첫번째 사진을 대표사진으로 지정도록 useEffect를 사용하기로 했습니다.

• 대표사진으로 지정된 이미지 삭제시 다시 첫번째 사진이 대표사진으로 지정되도록 deleteImage()함수에 로직을 추가했습니다.

useEffect(() => {
  if (!selectedRepresentativeImage && totalImageCount > 0) {
    form.setValue('representative_img', uploadedImages[0]);
  }
}, [totalImageCount]);

const deleteImage = async (imgSrc) => {
  const imgName = imgSrc.split('/').slice(-1)[0];
  ...
  // 🌟 대표사진으로 지정된 이미지가 삭제되는 경우, 다시 useEffect가 동작하도록 빈값으로 바꿔줍니다.
  if (imgName === selectedRepresentativeImage) {
    form.setValue('representative_img', '');
  }
  ...
};

Organize storage (스토리지 정리)

🚨

이미지 업로드시에 storage에 올리게 되면서 사진을 업로드하고 게시글 작성을 완료하지 않는 경우(작성 중 페이지 이동 등)에도 temporary폴더에 이미지가 저장되어 있게 되면서 이미지 검증 로직이 필요하게 되었습니다.

• 폼 제출시에 'temporary' 폴더에 저장된 이미지들 중 'post_img'배열에 있는 이미지만 'postID' 폴더로 옮기고 'temporary'폴더에 남은 이미지는 모두 삭제해야 합니다.
  

const moveImageStorage = async (postId) => {
  formData.post_img.forEach(imgName => {
    const { error } = await supabase.storage
      .from('images')
      .move(`${post_id}/${imgName}`, `temporary/${imgName}`);
    
    if (error) alert('이미지 이동에 실패했습니다.');
  };
  // 이동이 끝나면 temporary 폴더를 비우는 함수를 호출합니다.
  removeStorageFile();
};

🚨

이동 후 남은 이미지를 삭제하려고 할 때, 'Empty a bucket' 로직을 사용하면 bucket을 통째로 비우게 되어 'images' 버킷 전체가 삭제되었습니다. ('Delete a bucket'로직 또한 마찬가지로 bucket을 삭제하게되어 적합하지 않았습니다.)

🚨

'Delete files in a bucket'로직을 사용해 'temporary'폴더 내 모든 사진을 삭제하려고 했지만 해당 로직은 하나의 파일만 삭제가 가능해 폴더명이나 .remove([*])로 전체 파일을 지정하는 방법으로는 동작하지 않았습니다.

• 이동 후 'temporary'에 남은 이미지 리스트를 불러와 반복문으로 순회하며 각 파일을 삭제해주어야 합니다.
  

const removeStorageFile = async () => {
  // temporary 폴더 내의 이미지 파일 리스트를 가져옵니다.
  const { data: removeImageList, error: getError} = await supabase.storage
    .from('images')
    .list(`post/${userId}/temporary`, {
      limit: 1000,
      offset: 0
    });
  
  if ( getError ) alert('이미지를 가져오는데 실패했습니다.');
  
  // 가져온 이미지 파일 리스트를 돌면서 하나하나 삭제해줍니다.
  removeImageList.forEach(imgObj => {
    const { error } = await supabase.storage
      .from('images')
      .remove([`post/${userId}/temporary/${imgObj.name}`]);
    
    if ( error ) alert('이미지 삭제에 실패했습니다.');
  };
}

• submit 함수에서 작성한 함수를 호출합니다.
  • moveImageStorage() 로 이미지 이동을 하고나면 해당 함수 내부에서 removeStorageFile() 함수를 호출해 연쇄적으로 temporary 폴더를 비우도록 합니다.

const onSubmitPost = async (formData) => {
  // 게시글을 업로드하며 성공시 데이터와 post의 id를 반환하도록 합니다.
  const { data: insertedData, error } = await supabase
        .from('post')
        .insert(formData)
        .select('id');
  if (error) alert('게시글 업로드에 실패했습니다.');
  
  // 위에서 업로드에 성공한 데이터에서 id를 추출합니다.
  const postId = insertedData[0].id;
  // 이미지 이동 함수를 호출합니다.
  moveImageStorage(postId);
}

---

🔗

해당 컴포넌트에 대한 리팩토링 게시글이 있습니다.

👀 Reference

• supabase docs
• Supabase(4)_Storage(이미지 여러장 넣고 미리보기)
• 이미지 다중 업로드 및 미리보기