문제 상황

사용자가 이미지를 업로드한 후 간혈적으로 blob:<https://uuno.vercel.app/xxx:1> GET blob:<https://uuno.vercel.app/xxx> net::ERR_FILE_NOT_FOUND와 같은 오류가 발생하며 이미지가 표시되지 않는 현상이 발생했습니다.

원인 분석

1. 임시 URL 사용 : 파일 선택 직후 URL.createObjectURL(file)을 통해 임시 blob URL을 생성하여 이미지 미리보기에 사용함
2. URL 교체 누락 : 파일 업로드 성공 후 이 임시 URL을 서버의 영구 URL로 교체하는 명시적인 로직이 누락됨
3. 간접적 갱신 의존 : 현재 코드는 refetchImages()호출을 통한 간접적인 갱신에 의존하고 있음
4. 타이밍 이슈 : refetchImages()완료 전에 이미지에 접근하면 무효화된 blob URL을 참조하게 됨

해결 방안

1. uploadMultipleImages함수를 수정하여 파일 업로드 시 publicUrl까지 함께 반환하도록 수정

export const uploadMultipleImages = async (
  files: File[],
  bucketName: string = 'images',
  userId: string
) => {
  try {
    const supabase = createClient();
    const uploadPromises = files.map(async (file) => {
      ... // (파일 업로드 로직)

      // 서버 URL로 직접 교체
      const { data: urlData } = supabase.storage
        .from(bucketName)
        .getPublicUrl(filePath);

      return {
        path: filePath,
        fileName: file.name,
        size: file.size,
        type: file.type,
        publicUrl: urlData.publicUrl, // publicUrl 추가
      };
    });

    // 모든 파일 업로드 병렬 실행
    const results = await Promise.all(uploadPromises);
    return results;
  } catch (error) {
    console.error('다중 이미지 업로드 오류:', error);
    throw error;
  }
};

…