[TIL]Product upload

오늘 공부한것 & 기억할 내용

1. form을 사용해 product이미지 업로드 만들기

//product/add/page.tsx
//이미지 미리보기 만들기 위해 preview 빈값 만들어주고
const [preview, setPreview] = useState("")
//input에 파일 첨부되었을때 해당 파일 url 생성하기 위해 onchange이벤트 생성
const onImageChange = (e:React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.files)
  //업로드된 파일 목록 가져오기
  const {files} = e.target;
  //파일이 없으면 끝냄
  if(!files){
    return
  }
  const file = files[0]
  //파일의 url을 생성함
  const url = URL.createObjectURL(file)
  //preview에 생성된 url 저장
  setPreview(url)
}

2. server action을 사용해 form에서 입력한 값을 가져온다.

//product/add/action.ts
"use server"

export async function uploadProduct(formData:FormData) {
    const data = {
        photo:formData.get('photo'),
        title:formData.get('title'),
        price:formData.get('price'),
        description:formData.get('description')
    }
}

3. form validation성공시 db에 session id값 확인 후 product 생성

const session = await getSession()
if(session.id){
  const product = await db.product.create({
    data:{
      title:result.data.title,
      description:result.data.description,
      price:result.data.price,
      photo:result.data.photo,
      user:{
        connect:{
          //참고하고 있는 user의 id값에 session id값 저장
          id:session.id
        }
      }
    },
    select:{
      id:true
    }
  })
  redirect(`/products/${product.id}`)
}

배운점 & 느낀점

간단한거 같지만 간단하지 않은 db와 세션을 사용하여 작업하는게 아직은 익숙하지 않아서 헷갈리는 부분들이 있지만 천천히 해보면 해나갈 수 있는거 같다. 아직은 어려움 투성이지만 더 반복해봐야겠다.