이때까지 작성했던 폼을 제출해본다.

• react-hook-form의 handleSubmit을 이용

  • handleSubmit(onSubmit) 이런식으로 사용한다.

• onSubmit은 개발자가 직접 제출하는 함수를 만들어준다.

  • 유효성 체크
  • axios post로 요청보내기
  • 제출중일때는 버튼 막기

  <aside> 💡 여기 onSubmit 함수에서의 핵심은 STEPS가 마지막이 아니면, STEPS.price 가 아니면 다음 스텝으로 보내는 onNext()를 실헹 시켜준다.

  </aside>

  • onSubmit 함수

  const onSubmit: SubmitHandler<FieldValues> = (data) => {
      // 마지막 스텝이 아니면 onNext 실행
      if (step !== STEPS.PRICE) {
        return onNext();
      }
  
      setIsLoading(true);
      // post 제출
      axios
        .post('/api/listings', data)
        .then(() => {
          toast.success('Listing Created!');
          router.refresh();
          // 폼 제출후 모든 폼 리셋 react-hook-form
          reset();
          setStep(STEPS.CATEGORY);
          rentModal.onClose();
        })
        .catch(() => {
          toast.error('Something went wrong');
        })
        .finally(() => {
          setIsLoading(false);
        });
    };
  

실제 DB에 저장하는 백엔드 코드 작성 흐름

• 클라이언트에서 data를 전달받는다.
• 해당 데이터 추출하여, DB 폼에 맞게 정제한다.
• prisma를 통해 mongoDB에 저장한다.

import { NextResponse } from 'next/server';

import prisma from '@/app/libs/prismadb';
import getCurrentUser from '@/app/actions/getCurrentUser';

export async function POST(request: Request) {
  // 현재 로그인 되어있는 사용자의 정보가져오기
  const currentUser = await getCurrentUser();
  // 없으면 에러
  if (!currentUser) {
    return NextResponse.error();
  }
  // 클라이언트에서 받아온 정보
  const body = await request.json();
  const {
    category,
    location,
    guestCount,
    roomCount,
    bathroomCount,
    imageSrc,
    price,
    title,
    description,
  } = body;

  // You can remove this if you want to
  Object.keys(body).forEach((value: any) => {
    if (!body[value]) {
      NextResponse.error();
    }
  });

  const listing = await prisma.listing.create({
    data: {
      category,
      locationValue: location.value,
      guestCount,
      roomCount,
      bathroomCount,
      imageSrc,
      price: parseInt(price, 10),
      title,
      description,
      userId: currentUser.id,
    },
  });

  return NextResponse.json(listing);
}