리뷰 기능 - Part2 포토리뷰만 보기 및 별점 순으로 소트하기

포토리뷰만 보기와 별점 순으로 정렬하는 기능 구현 방법 기록

---

 

 

1. ReviewTag 컴포넌트

먼저, ReviewTag 컴포넌트는 사용자가 모든 리뷰를 볼지 포토리뷰만 볼지 선택할 수 있도록 해줍니다.

import React from "react";
import styled from "styled-components";

// 스타일 생략

const ReviewTag = ({ changeShowPhotosOnly, showPhotosOnly }) => {
  return (
    <ReviewTagBlock>
      <button
        className={!showPhotosOnly ? "on" : ""}
        onClick={() => changeShowPhotosOnly(false)}
      >
        모든 리뷰 보기
      </button>
      <button
        className={showPhotosOnly ? "on" : ""}
        onClick={() => changeShowPhotosOnly(true)}
      >
        포토리뷰만 보기
      </button>
    </ReviewTagBlock>
  );
};

export default ReviewTag;

• changeShowPhotosOnly: 부모 컴포넌트로부터 전달받은 함수로, 리뷰 보기 방식을 변경합니다.
• showPhotosOnly: 포토리뷰만 보기 상태를 나타내는 불리언 값입니다.

 

2. ReviewList 컴포넌트

다음으로, ReviewList 컴포넌트는 리뷰를 필터링하고 정렬하는 기능을 구현합니다.

 

정렬 순서가 변경될 때마다 리뷰를 정렬하고 업데이트

 useEffect(() => {
    if (sortOrder !== "") {
      const sortedReviews = sortReviews(sortOrder);
      dispatch({ type: "SET_REVIEWS", payload: sortedReviews }); // 리덕스 스토어 업데이트
    }
  }, [sortOrder, dispatch]);

  useEffect(() => {
    dispatch(fetchReview());
  }, [dispatch]);

  const onRemove = (e, item) => {
    e.preventDefault();
    kuwazawa_reviewDB.child(item).remove();
    navigate(`/product`);
  };

 

실제로 정렬된 리뷰를 사용하도록 수정

 let sortedReviews = filteredReviews;
  if (sortOrder !== "") {
    sortedReviews = sortReviews(sortOrder);
  }

 

포토리뷰만 보기가 활성화되었을 때

 if (showPhotosOnly) {
    sortedReviews = sortedReviews.filter(
      (review) => review.reviewPhotos && review.reviewPhotos.length > 0
    );
  }

 

포토리뷰만 필터링된 리스트의 길이를 기준으로 페이지 계산

 const lastPage = Math.ceil(sortedReviews.length / reviewsPerPage);

 

---

 

요약

1. ReviewTag 컴포넌트는 사용자가 모든 리뷰를 볼지 포토리뷰만 볼지 선택할 수 있도록 합니다.
2. ReviewList 컴포넌트는 리뷰를 필터링하고 정렬하여 보여줍니다.
3. 리뷰는 현재 상품에 해당하는 것만 필터링되며, 별점 순으로 정렬되고 포토리뷰만 보기 옵션이 적용될 수 있습니다.