TODO

1. 이미지 추가 시, storage에 업로드하기

file input을 통해 이미지를 추가했을 때, 이미지를 storage에 업로드한다.

기존 로직

1. 파일을 리사이징하여 용량을 줄인다.
2. objectUrl을 이용하여, 로컬에서 이미지를 확인한다.

const handleChangeFileInput = async (event: ChangeEvent<HtmlInputElement>) => {
  const file = e.target.files[0];
  
  const blob = await resizeFile(file);
  const url = URL.createObjectURL(blob);
  // ...
}

변경한 로직

1. 파일을 리사이징하여 용량을 줄인다.
2. blob을 파일로 변환하여, storage에 업로드한다.
3. 업로드한 이미지 경로를 images 테이블에 저장한다.

const handleChangeFileInput = async (event: ChangeEvent<HtmlInputElement>) => {
  const file = e.target.files[0];
  
  const blob = await resizeFile(file);
  
  const fileName = `Date.now()`;
  await supabase
    .storage
    .from('images')
    .upload(fileName, blob)
    .then(({ data, error }) => {
      if (error) {
        throw new Error(error.message);
      }
    });
  
  const imageUrl = `${BASE_URL}/${fileName}`;
  const newImage = await supabase
    .from('images')
    .insert({ url })
    .select('*')
    .single()
    .then(({ data, error }) => {
      if (error) {
        throw new Error(error.message);
      }
      
      return data;
    })
  // ...
}

2. 청첩장 수정 기능 만들기

1. Story 업데이트

스토리는 배열 형태로 이미지 배열도 가지고 있기 때문에, wedding_hall 보다 업데이트 로직이 복잡함.

1. 스토리 분리
   a. 신규 스토리
   b. 기존 스토리
   c. 삭제할 스토리

2. 신규 스토리 추가

   • insta_template.stories.insert → 신규 스토리

     const newStoryId = await supabase
     	.schema('insta_template')
     	.from('stories')
     	.insert({
     		title: story.title,
     		template_id: templateId,
     	})
     	.select('*')
     	.then(({ data, error }) => {
     		if error throw new Error(error.message);
     
     		return data.id;
     	})

   • insta_template.story_image_link.insert → 신규 이미지

     await supabase
     	.schema('insta_template')
     	.from('story_image_link')
     	.insert({
     		story_id: newStoryId,
     		image_id: story.id,
     	});
     // then 생략

   • insta_template.images.update → display_order 업데이트

     await Promise.all(
     	story.images.map(async ({ id }, index) => {
     		return supabase
     			.schema('insta_template')
     			.from('images')
     			.update({ display_order: index })
     			.eq('id', id);
     	})
     )

3. 스토리 업데이트

   • insta_template.stories.update → title 업데이트
     
   • insta_template.story_image_link.insert → 신규 이미지
     
   • insta_template.story_image_link.delete → 삭제된 이미지
     
   • insta_template.images.update → display_order 업데이트
     

4. 스토리 제거

   • insta_template.stories.delete → 삭제된 스토리
     

   → 스토리가 삭제되면 링크 테이블의 데이터도 삭제된다.