[팀 프로젝트] 페이지 라우팅 구현

Hyowmls·2024년 7월 30일
0
post-thumbnail

게시물 작성 페이지에서 게시물을 업로드하고 나면 그대로 페이지에 남아 있었는데 이 부분을 개선했다

  • 게시물 작성 페이지에서 업로드 후 해당 게시물의 페이지로 이동
try {
    const formData = new FormData();
    formData.append('title', title);
    formData.append('description', description);
    formData.append('language', JSON.stringify(language));
    formData.append('price', price.toString());
    formData.append('userId', userId);
    images.forEach((image) => {
      formData.append('images', image);
    });

    const response = await fetch('/api/createCard', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const data = await response.json();
      console.log('Data received from server:', data); // 디버깅 로그
      alert('게시글이 작성되었습니다!');
      setTitle('');
      setLanguage([]);
      setImages([]);
      setPrice("");
      setDescription('');
      return data.id; // 새로 생성된 게시물 ID 반환
    } else {
      alert('오류 발생');
      return null;
    }
  } catch (error) {
    alert(error);
    return null;
  }

POST 요청을 보내고 요청이 성공하면 폼 필드를 초기화 시키고 return data.id 로 새로 생성된 게시물의 id 를 반환 시킨다

const handleFormSubmit = async () => {
  const newPostId = await handleSubmit();
  if (newPostId !== null && newPostId !== undefined) {
    route.push(`/pro/proDetail/${newPostId}`);
  }
};

그리고 handleSubmit() 함수를 호출해 새로운 게시물의 id를 반환 받는다
새로운 게시물의 id가 null 또는 undefined 가 아닌경우 해당 게시물의 상세 페이지로 라우팅 시킨다

0개의 댓글