• 앞의 AuthModal을 만들어 준것 처럼 똑같이 UploadModal을 만들어준다.

• 추가로 AuthModal을 ModalProvider에 등록해 준다.

  'use client';
  
  import { useEffect, useState } from 'react';
  
  // import Modal from '@/components/Modal';
  import AuthModal from '@/components/AuthModal';
  import UploadModal from '@/components/UploadModal';
  
  function ModalProvider() {
    const [isMounted, setIsMounted] = useState(false);
  
    // 모달은 서버에서 실행안되니깐 트릭걸어줘야함
    useEffect(() => {
      setIsMounted(true);
    }, []);
  
    if (!isMounted) {
      return null;
    }
  
    return (
      <>
        <AuthModal />
        <UploadModal />
      </>
    );
  }
  
  export default ModalProvider;
  

• 업로드 Form을 만들기 위해 사용할 패키지

  npm i react-hook-form
  npm i uniqid
  npm i -D @types/uniqid
  

업로드 Modal의 흐름!

• react-hook-form을 사용해서 기본적인 Form 제출을 실행한다.

  • title
  • author
  • song (.mp3)
  • image (.jpg)

• supabase Storage에 노래와 이미지를 업로드 한후, songData, imageData를 await로 기다려 받는다.

  <aside> 💡 추가로 저장할때 uniqId라는 패키지를 써서 파일명을 지정해 준 것을 기억하자!

  </aside>

• 마지막으로 supabaseClient로 title, author, song, image를 songs라는 테이블에 저장을한다.

  const { error: supabaeError } = await supabaseClient
          .from('songs')
          .insert({
            user_id: user.id,
            title: values.title,
            author: values.author,
            image_path: imageData.path,
            song_path: songData.path,
          });
  

  

  

<aside> 💡 실제로 POST 요청이가며, 201 성공 응답을 내려준다.

</aside>

• supbase storage에 들어가보면 이미지와 노래가 저장된것 + songs테이블에 우리가 올린 데이터가 저장된 것을 볼 수 있다.

  

  

  

• 저장을 한후에 성공했을때의 후속 처리를 해준다.

  • router.refresh()
  • setIsLoading(false)
  • toast.success('Song Created!')
  • reset() : 이건 react-hook-form의 reset을 해주는 것
  • uploadModal.onClose() : upload 모달을 닫아 준다.