Today

1. 아웃소싱 프로젝트

평점 계산

우리가 달린 리뷰를 바탕으로 평점을 계산해서 그려줘야 하는 부분을 내가 담당했다.

리뷰를 다는 팀원분께서 supabase 내 comments 테이블에 해당 가게의 id값과 평점을 넣어주셨기 때문에
활용하기로 했다.

1. 평점 불러오기
   useGetAverageRating에서 데이터를 불러오면 아래 커스텀 훅에서 슈퍼베이스에서 데이터를 불러오는 queryFn이 실행되면서 데이터를 불러오고 해당 데이터를 가공해서 정리가 된다.

코드

const DetailInfo = ({ shop }) => {
  const { data: rating, error, isLoading } = useGetAverageRating(shop.id);

  return (...)

export default DetailInfo;

// useGetAverageRating

import { useQuery } from '@tanstack/react-query';
import supabase from '../supabase/supabaseClient';

const fetchAverageRating = async (shopId) => {
  const { data, error } = await supabase.from('comments').select('rating').eq('shopId', shopId);

  if (error) {
    throw new Error(error.message);
  }

  if (data && data.length > 0) {
    const totalRating = data.reduce((acc, comment) => acc + comment.rating, 0);
    const avgRating = totalRating / data.length;
    return avgRating;
  } else {
    return null;
  }
};

export const useGetAverageRating = (shopId) => {
  return useQuery({
    queryKey: ['averageRating', shopId],
    queryFn: () => fetchAverageRating(shopId)
  });
};

이후 받아온 data:rating을 별로 그려주는 함수에 넣어 가공하고 다시 렌더링 되는 부분에 기재하면 끝

추후 tanstackquery를 활용하여 해당 점수를 다시 다른 테이블에 넣어 실시간 반영되도록 하는 것을 개선과제로 남김

const renderStars = (rating) => {
  const stars = [];
  for (let i = 1; i <= 5; i++) {
    if (i <= Math.floor(rating)) {
      stars.push(<Star key={i}>★</Star>);
    } else {
      stars.push(<Star key={i}>☆</Star>);
    }
  }
  return stars;
};

.
.
.

return({renderStars(rating)} {`${rating.toFixed(1)}점`}
)

작업 종료

팀원들과 같이 열심히 작업하여 벌써 결과물이 만들어졌다.
👉 사이트 보러가기

• 메인 페이지
  

• 상세 정보
  

발표

역시나 다른 조들의 발표를 들으면서 여전히 배울게 많았다.

• 유튜브 API를 활용하여 웹 사이트 내에서 동영상을 직접 보여줌
  ⇒ 유저 이탈률 방지(한번 다른 사이트로 가면 돌아오지 않는다)
• 슈퍼베이스 어나니머스 로그인 활용
  ⇒ 로그인 기능 없이 댓글을 달고 자신만 해당 댓글 수정/삭제 가능

---

Learn

배포 간 직면한 문제사항

• 문제사항
  평소와 같이 배포를 했지만 지도가 보이지 않는 문제 발생

• 원인
  도메인 등록 필요
  평소 우리가 작업하던 5173 환경은 팀원분께서 미리 도메인 등록을 해주셨지만, 배포된 사이트는 도메인 등록을 하지 않았다.

• 해결
  

저곳에서 vercel에서 배포한 도메인을 등록해주면 이상없이 kakaomap 지도가 나타난다.

---

주절주절

날은 후덥지근..