Review 컴포넌트

[asdfqaz74]

Review

리뷰의 갯수를 카운터 해주는 컴포넌트 입니다.

Method

• id
  recipes의 record 의 아이디를 기입하시면 됩니다.

• caseType
  literal 방식과 number 방식이 있습니다.

사용예시

<Review id="ka5sini1xvt9itq" caseType="literal"/>

전체코드

아직 수정이 더 필요한 컴포넌트입니다.

export default function Review({
  id,
  caseType,
}: {
  id: string;
  caseType: 'literal' | 'number';
}) {
  const [{ data: recipesData, loading, error }] = useAtom(
    getDataAtomFamily({
      item: 'recipes',
      typeOfGetData: 'getOne',
      options: { expand: 'rating' },
      setting: id,
    })
  );

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생: {error.message}</p>;
  if (!recipesData || !('expand' in recipesData && recipesData.expand))
    return <p>데이터를 불러올 수 없습니다.</p>;

  const count: number = recipesData.expand.rating?.length ?? 0;

  const renderTextMap = {
    literal: (count: number) => `리뷰 ${count}개`,
    number: (count: number) => `(${count > 100 ? '100+' : count})`,
  };

  const renderText = renderTextMap[caseType](count);

  return (
    <>
      <p className="text-foot">{renderText}</p>
    </>
  );
}