[PWA]리뷰관리 admin 페이지 연동

admin 페이지에 작성자, 매장, 평점 나오도록 추가하기

admin 리뷰관리 페이지에서 작성자, 매장명, 평점이 안나오고 내용만 나오는중.
내용외의 속성도 화면에 출력되도록 review에 속성 추가하고 화면에 출력해야 한다.
+참고) 작성자는 아직 login 로직이 구현되기 전이므로 완료이후에 기능 추가할 예정

1. admin 페이지에 매장 이름(shopName)추가

[id]review 에서 매장 이름(shopName)을 추가함.
이것은 이미 shop에 저장되어있는 정보이므로 가져오기만 하면 되는 값이다.
newReviewData에 추가.

  const newReviewData = {
      id: Date.now(), // 고유 ID 생성
      shopId: shopId, // shopId를 추가하여 업체별로 리뷰를 구분
      shopName: shop?.name, // 업체 이름
      content: newReview, // 입력된 리뷰 내용
      rating: rating, // 평점
      date: new Date().toISOString(), // 현재 날짜와 시간
    };

2. 리뷰 페이지에 평점(rating)추가

평점은 시술에 대한 유저 개별만족도이므로, shop.rating으로 가져오면 안되고, 유저가 리뷰를 남길때 직접 입력한 평점이 와야한다. 이후에 이 개별점수들이 합산되어 매장 전체의 평점이 정해진다.

select-option으로 평점을 주는 것을 구현해보았는데, 모양이 어색했다.
올리브영 리뷰는 어떻게 남기는지 레퍼를 확인하기위해 접속해보았고, 별을 클릭하도록 되어져있었다. 그리고 리뷰도 리뷰페이지에서 남기는것이 아니라, 마이페이지에서 구매기록이 있는 것들에 한해서만 리뷰를 남길 수 있는 로직이었다.

StarRatingInput 별점 "주기" !== StartRating

화면에 별점 "조회" 하는것은 공동 컴포넌트에 StarRating 이 구현되어있었기 때문에 이것을 import 해서 사용하면 된다. 대신 이것은 조회용으로만 쓰이고, 리뷰 저장할때의 별점은 아래처럼 구현해주었다.

const StarRatingInput = ({ rating, setRating }) => {
    return (
      <div className="flex items-center space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <span
            key={star}
            onClick={() => setRating(star)} // 별 클릭 시 평점 설정
            className={`cursor-pointer text-5xl ${
              star <= rating ? "text-yellow-400" : "text-gray-300"
            }`}
          >
            ★
          </span>
        ))}
      </div>
    );
  };

년월일 대신 . 으로 구분하도록 수정하기

위의 단계를 하니 별점으로 평점 정하고, 조회하는 것은 완료되었다.
대신 년월일 대신 . 으로 구분하여 조금 더 깔끔한 ui로 수정했다.

// 날짜, 시간 포맷팅 함수
function formatDate(date) {
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
    // hour: "numeric",
    // minute: "numeric",
  };
  return new Date(date).toLocaleString("ko-KR", options);
}

맨 아래 평점과 별점 선택하는 정렬이 안맞아서 한참 보며 찾아보니

label과 StarRatingInput의 위아래 정렬이 맞지 않는 이유는 label이 블록 요소(block)로 설정되어 있고, StarRatingInput은 인라인 요소로 렌더링되기 때문입니다. 이를 해결하려면 flex와 items-center를 사용하여 두 요소를 수직으로 정렬하면 됩니다...

라고하는데, 아무리 별을 수정해도 안되길래 평점의 위아래를 수정했다.