[팀 프로젝트] 기능 구현 및 상세 페이지 데이터 가져오기

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

User_id

기존에 게시물을 작성하게되면 crypto.randomUUID() 를 사용해 임시로 id값을 넣어줬는데 이 부분을 수정했다

  • 게시물을 작성한 유저의 id 값을 넣어준다
const { userId } = useAuthStore.getState()
formData.append('userId', userId)

로그인 중인 유저의 id를 폼데이터에 추가했다

{
	user_id: userId,
	title,
	content: description,
	lang_category: language,
	price: price,
	post_img: uploadedImageUrls
}

라우터 핸들러에 user_id : crypto.randomUUID() 부분을 위와 같이 바꿔주었다

상세 페이지

상세 페이지에서는 작성자의 정보와 게시물의 Post Image가 필요했다

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch(`/api/proDetail?id=${id}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setPost(data.postData);
      setUser(data.userData);
    } catch (error) {
      console.error('Fetch data error:', error);
    }
  };
  fetchData();
}, [id]);
  • 특정 상품의 데이터를 식별하기 위해 fetch요청을 보낼때 id를 함께 보냈다
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const id = searchParams.get('id');

  if (!id) {
    return NextResponse.json({ error: 'ID is required' }, { status: 400 });
  }

  try {
    const supabase = createClient();

    // 게시물 정보 가져오기
    const { data: postData, error: postError } = await supabase
      .from('Request Posts')
      .select('*')
      .eq('id', id)
      .single();

    if (postError) {
      throw postError;
    }

    const userId = postData.user_id;

    // 유저 정보 가져오기
    const { data: userData, error: userError } = await supabase
      .from('Users')
      .select('*')
      .eq('id', userId)
      .single();

    if (userError) {
      throw userError;
    }

    // 게시물 정보와 유저 정보를 함께 반환
    return NextResponse.json({ postData, userData });
  } catch (error) {
    console.error('Error fetching data:', error);
    return NextResponse.json({ error: '데이터 가져오기 실패' }, { status: 500 });
  }
}
  • const {searchParams} = new URL(req.url)
    요청 URL의 쿼리 매개변수를 파싱하여 객체로 만들었다
  • const id = searchPararms.get(id)
    쿼리 매개변수에서 id 값을 가져온다
  • supabase 클라이언트를 사용해서 Request Posts 테이블에서 id와 일치하는 게시물을 가져온다
  • postData(data) 에서 user_id를 추출한다
    postData.user_id 는 Request Posts 테이블에 있는 user_id 를 의미한다
  • postData에서 추출한 user_id (작성자 id)와 Users 테이블에 있는 id (개인 고유의 id)를 비교해서 일치하는 데이터를 가져온다

0개의 댓글