팀 프로젝트

진행 상황

오늘부터 본격적으로 기능 개발 시작이다.

내가 맡은 부분은 리뷰의 detail 페이지 전반과 해당 리뷰에 달리는 댓글의 CRUD 구현. 아직 Supabase 데이터베이스를 이용한 CRUD는 경험해 보지 못했기 때문에 분명 많은 공부가 될 것이라고 생각한다.

Supabase Table 정보 가져오기

//src>apis>reviews.ts
import { supabase } from '@/libs/supabase';

export const getReviewById = async (id: string) => {
  const { data: review, error } = await supabase
    .from('reviews')
    .select('*')
    .eq('id', id);
  if (error) {
    throw error;
  }
  return review;
};


//src>components>review_details>ReviewBody.tsx
import { getReviewById } from '@/apis/reviews';
import { useQuery } from '@tanstack/react-query';
import React from 'react';

interface Props {
  reviewId: string;
}

const ReviewBody = ({ reviewId }: Props) => {
  const { data: review, isLoading } = useQuery({
    queryKey: ['review'],
    queryFn: () => getReviewById(reviewId),
  });

  if (isLoading) {
    return <p>로딩중...</p>;
  }

  if (review) {
    const imgUrl = review[0].images_url[0];
    console.log(imgUrl);
    return (
      <>
        <p>{review[0].content}</p>
        <img src={imgUrl} alt='리뷰어가 올린 사진' className='w-[50%]' />
        <p>placeid:{review[0].place_id}</p>
        <p>userid:{review[0].user_id}</p>
      </>
    );
  }
};

export default ReviewBody;

아직 다듬을 부분이 많지만 supabase table의 정보를 읽어오는 코드를 작성해 보았다.
서버통신은 가능하면 전부 tanstack/query를 이용하기로 합의가 되어있어서 도입했고, 실제 서버에서 데이터를 불러오는 코드는 reviews.ts에 있다. .from('reviews') reviews 라고 이름붙은 테이블에서, .select('*')모든 열의 정보를 읽어오되, .eq('id', id); id 열의 value가 인자로 주어진 id와 일치하는 행을 조회하라는 의미의 코드이다.

아직 에러 핸들링 로직은 작성하지 않았는데 이부분은 reviews.ts내에서 작성해야 하는것인지, 아니면 해당 함수를 queryFn으로 활용하는 쿼리 에서 작성해야 하는것인지 확실치 않아서 동료에게 물어보고 진행할 계획이다.

또한 const imgUrl = review[0].images_url[0];처럼 표기 자체가 좀 거슬리게 되어있는 부분도 있는데 이 부분은 당연히 더 가독성 좋게 가공할 생각이다.

마지막으로 if (isLoading) { return <p>로딩중...</p>; } 이런식으로 로딩 처리를 하고 있는 부분은 별도로 로딩 컴포넌트를 만들어서 조건부 렌더링할 계획이다.
이때 쓰기 좋을것 같은 라이브러리도 찾아두었는데, NextUI에서 제공하는 Skeleton 이나 Spinner 등을 활용하면 보기에도 좋고 next.js 에도 최적화된 컴포넌트를 만들 수 있을 것이라는 기대를 하고 있다.