main_project_007team(19)

나혼자 review 데이터 불러온 코드

import { useState } from 'react';
import { TYPE_ReviewAll } from 'Types/common/product';

const INITIALVALUE = {
  reviewId: 0,
  reviewTitle: '',
  rating: 0,
  memberName: '',
  reviewImage: '',
  productName: '',
  createdAt: '',
  modifiedAt: '',
};

const ReviewRead: React.FC = () => {
  const [review, setReview] = useState<TYPE_ReviewAll>(INITIALVALUE);
  const onClickHandler = () => {
    fetch(`${process.env.REACT_APP_BACKEND_URL}/reviews/all`, {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'GET',
    })
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setReview(response);
      });
  };

  return (
    <>
      <button onClick={onClickHandler}>이거 눌러봐</button>
      {/* <div>{review}</div> */}
    </>
  );
};

export default ReviewRead;

=> 여기서 문제는 데이터를 뿌려줄 때 map으로 뿌려주지 않아서 문제였다.

팀원분과 함께 useCustomQuery를 이용해 데이터를 가져오고 map으로 뿌려줬다.

import { useCustomQuery } from 'CustomHook/useCustomQuery';
import { TYPE_ReviewAll } from 'Types/common/product';
import styled from 'styled-components';
import styles from './Styles/Review.module.css';
import { useRef } from 'react';
import { SimpleReadOnlyComment } from 'Components/Editor/EditComment';
import ReadOnlyComment from '../Editor/ReadOnlyComment';
import { RatingView } from '../ProductPage/Rating';
import { customTime } from 'Utils/commonFunction';

interface Props {
  review: TYPE_ReviewAll;
}

const CommentItem = ({ reviewContent }: { reviewContent: string }) => {
  const review = JSON.parse(reviewContent);

  const node = useRef<HTMLDivElement>(null);

  return (
    <div className={styles.Comment_List_Wrapper}>
      <div className={styles.Comment} ref={node}>
        {review.length > 4 ? (
          <SimpleReadOnlyComment data={review} />
        ) : (
          <ReadOnlyComment data={review} />
        )}
      </div>
    </div>
  );
};

const ReviewItem: React.FC<Props> = ({ review }) => {
  console.log(review.reviewImage);
  return (
    <a
      href={`/product/${review.productId}`}
      className={styles.Review_Detail_Content}
    >
      <div className={styles.Review_Image_Container}>
        <img
          src={
            review.reviewImage
              ? review.reviewImage
              : 'https://cdn-icons-png.flaticon.com/128/7078/7078329.png'
          }
          alt={'reviewImage'}
          className={styles.Review_Image_Content}
        />
      </div>
      <div>
        <h3 className={styles.Review_Product_Container}>
          {review.reviewTitle}
        </h3>
        <div className="">
          <Product>
            <p className={styles.Review_Product_Title}>
              <CommentItem reviewContent={review.reviewContent} />
            </p>
          </Product>
          <User>
            <p className={styles.Review_User}>{review.memberName}</p>
            <p className={styles.Review_Rating}>
              <RatingView num={review.rating} />
            </p>
            <p className={styles.Review_Date}>{customTime(review.createdAt)}</p>
          </User>
        </div>
      </div>
    </a>
  );
};

const Review: React.FC = () => {
  const { isLoading, data, error } = useCustomQuery('/reviews/all', [
    'reviewsAll',
  ]);
  if (isLoading || error) return <></>;

  return (
    <div className={styles.Review_Container}>
      <div className={styles.Review_Content}>
        <h2 className={styles.Review_Title}>고객만족후기</h2>
        <div className={styles.Review_Data}>
          {data.map((el: TYPE_ReviewAll) => {
            return <ReviewItem key={el.reviewId} review={el} />;
          })}
        </div>
      </div>
    </div>
  );
};

export default Review;

const User = styled.div`
  display: flex;
  margin-top: 20px;
  p {
    display: block;
  }
`;

const Product = styled.div`
  margin-top: 8px;
`;