Route Handler

기존에 커스텀훅으로 로직을 분리했었는데 한번더 리팩토링을 진행했다

• 리팩토링 전

1. supabase에 데이터를 저장하는 로직이 커스텀훅에 있음
2. formData를 별도로 만들지 않음

• 리팩토링 후

1. 라우트 핸들러로 POST 로직을 분리함
2. formData를 사용
3. 가져온 public url을 uploadedImageUrls에 업로드 할 때 Promise.all 를 사용해 병렬로 처리함

  try {
    const supabase = createClient();
    const formData = await request.formData();

    const title = formData.get('title') as string;
    const description = formData.get('description') as string;
    const language = JSON.parse(formData.get('language') as string);
    const images = formData.getAll('images') as File[];

    const uploadedImageUrls = await Promise.all(images.map(image => uploadImageAndGetUrl(supabase, image)));

    const { error } = await supabase.from('Request Posts').insert([
      {
        user_id: crypto.randomUUID(),
        title,
        content: description,
        lang_category: language,
        price: '0',
        post_img: uploadedImageUrls
      }
    ]);

• request.formData() 로 폼 데이터를 호출함
• title, description 필드는 문자열로 가져옴
• language 필드는 문자열로 가져와 JSON 파싱을 통해 객체로 변환시킴
• images 필드는 파일배열로 가져옴
• 모든 images 파일을 uploadedImageUrls 에 업로드하고 각 이미지의 URL을 비동기적으로 가져옴
  Promise.all() 을 사용하여 모든 업로드 작업이 완료될 때 까지 기다림

커스텀 훅

    try {
      const formData = new FormData()
      formData.append('title', title)
      formData.append('description', description)
      formData.append('language', JSON.stringify(language))
      images.forEach((image) => {
        formData.append('images', image)
      })

      const response = await fetch('/api/createCard', {
        method : 'POST',
        body : formData
      })
      if (response.ok) {
        alert('게시글이 작성되었습니다 !')
        setTitle('')
        setLanguage([])
        setImages([])
        setDescription('')

• new FormData() 로 새로운 폼 데이터 객체를 생성함
• 폼 데이터에 title, description, language, images 필드를 추가
• language는 JSON 문자열로 변환하여 값을 설정함
• images는 images의 배열을 순회하며 각 이미지 파일들을 추가함
• api url로 post요청을 보내고 body(본문)에는 formData를 넣어줌
• 서버로 부터 응답이 성공적이면 메세지를 띄우고 상태를 초기화함

props type

원래는 types/ 폴더안에 파일을 하나 만들어 props 타입들을 지정해주고 import하는 방식으로 코드를 만들었다.
하지만 props들이 각 컴포넌트에서만 사용되기 때문에 굳이 파일 분리를 할 필요가 없다고 피드백을 받았다. 그래서 파일을 삭제하고 각 컴포넌트에서 props 타입을 지정해줬다.

interface DescriptionInputProps {
  description : string
  setDescription : (description : string) => void
}

export default function DescriptionInput({description, setDescription} : DescriptionInputProps) {
  return (
    <div className="border-2 border-slate-400 mb-[20px] rounded-md">
      <textarea
        name="text"
        id="text"
        className="w-full h-[500px] p-5"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      ></textarea>
    </div>
  )
}