Merge pull request #91 from SOPT-all/feat/#83/review-api-api

[FEAT] 리뷰 api 연결

src/apis/productPage/review/getReview.ts

@@ -0,0 +1,36 @@
+import instance from '@apis/instance';
+import { AxiosError } from 'axios';
+
+export interface Review {
+	reviewId: number;
+	username: string;
+	rating: number;
+	isMonth: boolean;
+	contentKorean: string;
+	contentOriginal: string;
+	reviewImage: string;
+	usefulCount: number;
+	recommendCount: number;
+	likeCount: number;
+}
+
+export interface GetReviewResponse {
+	success: boolean;
+	data: {
+		goodReviews: Review[];
+		badReviews: Review[];
+	};
+	error: null | string;
+}
+
+export const getReview = async (productId: number): Promise<GetReviewResponse> => {
+	try {
+		const response = await instance.get<GetReviewResponse>(`/api/products/${productId}/reviews`);
+		return response.data;
+	} catch (error) {
+		if (error instanceof AxiosError) {
+			throw error.response?.data || new Error('An error occurred');
+		}
+		throw error;
+	}
+};

src/apis/productPage/review/reviewQueries.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getReview, GetReviewResponse } from './getReview';
+
+const useReviewQueries = ({ productId }: { productId: number }) => {
+	const QUERY_KEY = {
+		PRODUCT_REVIEW: 'review',
+	};
+
+	const { data, error } = useQuery<GetReviewResponse>({
+		queryKey: [QUERY_KEY.PRODUCT_REVIEW, productId],
+		queryFn: () => getReview(productId),
+	});
+
+	return { data, error };
+};
+
+export default useReviewQueries;

src/components/productPage/review/review/Card.tsx

@@ -1,14 +1,14 @@
 import { IcShieldWhite12, IcMeatballLightgray20 } from '@assets/icons/index';
-import userImg from '@assets/images/userImg';
+import profileImages from '@constants/profileImg';
 import ReviewBtn from '@components/button/recommendBtn/reviewBtn';
 import {
 	cardLayout,
 	relativeStyle,
 	nameStyle,
 	dateStyle,
-	colorStyle,
 	sizeStyle,
 	circleStyle,
+	colorStyle,
 	reviewStyle,
 	infoWrapper,
 	monthChipStyle,
@@ -17,11 +17,24 @@ import {
 	nameRightStyle,
 	imgWrapper,
 	reviewBtnWrapper,
+	reviewImgStyle,
 } from '@components/productPage/review/review/CardStyle';
 import RenderStar from '@components/productPage/review/review/RenderStar';
-import { Review } from '@constants/userReview';
 import { useState } from 'react';
 
+interface Review {
+	reviewId: number;
+	username: string;
+	rating: number;
+	isMonth: boolean;
+	contentKorean: string;
+	contentOriginal: string;
+	reviewImage: string;
+	usefulCount: number;
+	recommendCount: number;
+	likeCount: number;
+}
+
 interface CardProps {
 	review: Review;
 	isOriginal: boolean;
@@ -34,13 +47,14 @@ const Card = ({ review, isOriginal }: CardProps) => {
 		<div css={[cardLayout, relativeStyle]}>
 			{/* 작성자 프로필 이미지 */}
 			<div>
-				{userImg.map((image, index) =>
-					index === review.reviewId % userImg.length ? (
-						<img src={image} key={index} alt={`profile-${index}`} css={sizeStyle} />
+				{profileImages.map((image, index) =>
+					index === review.reviewId % profileImages.length ? (
+						<img key={index} src={image} css={sizeStyle} alt={`${review.username}님의 프로필`} />
 					) : null,
-				)}{' '}
+				)}
 				<IcShieldWhite12 css={circleStyle} />
 			</div>
+
 			{/* 리뷰 상세 내용 */}
 			<div css={infoWrapper}>
 				{/* 작성자 정보, 신고기능 */}
@@ -69,8 +83,7 @@ const Card = ({ review, isOriginal }: CardProps) => {
 
 				{/* 리뷰 이미지 데이터 받아오면 한개로 줄일예정 */}
 				<div css={imgWrapper}>
-					<img src={review.reviewImage} alt={`${review.username}님의 리뷰 이미지`} />
-					<img src={review.reviewImage} alt={`${review.username}님의 리뷰 이미지`} />
+					<img src={review.reviewImage} alt={`${review.username}님의 리뷰 이미지`} css={reviewImgStyle} />
 				</div>
 
 				{/* 좋아요 버튼 */}

src/components/productPage/review/review/CardList.tsx

@@ -1,21 +1,31 @@
+import { Review } from '@apis/productPage/review/getReview';
+import useReviewQueries from '@apis/productPage/review/reviewQueries';
 import Card from '@components/productPage/review/review/Card';
 import { reviewContainer, reviewLayout } from '@components/productPage/review/review/CardListStyle';
-import { data } from '@constants/userReview';
 
 interface CardListProps {
 	activeTab: string;
 	isOriginal: boolean;
+	productId: number;
 }
 
-const CardList = ({ activeTab, isOriginal }: CardListProps) => {
-	const { goodReviews, badReviews } = data;
+const CardList = ({ activeTab, isOriginal, productId }: CardListProps) => {
+	const { data, error } = useReviewQueries({ productId });
+
+	if (error) {
+		console.error(error);
+	}
+
+	// 데이터가 없을 경우
+	const goodReviews = data?.data?.goodReviews || [];
+	const badReviews = data?.data?.badReviews || [];
 
 	return (
 		<div css={reviewContainer}>
 			{/* 긍정 리뷰 */}
 			{activeTab !== 'negative' && (
 				<div css={reviewLayout(activeTab)}>
-					{goodReviews.map((review) => (
+					{goodReviews.map((review: Review) => (
 						<Card key={review.reviewId} review={review} isOriginal={isOriginal} />
 					))}
 				</div>
@@ -24,7 +34,7 @@ const CardList = ({ activeTab, isOriginal }: CardListProps) => {
 			{/* 비판 리뷰 */}
 			{activeTab !== 'positive' && (
 				<div css={reviewLayout(activeTab)}>
-					{badReviews.map((review) => (
+					{badReviews.map((review: Review) => (
 						<Card key={review.reviewId} review={review} isOriginal={isOriginal} />
 					))}
 				</div>

src/components/productPage/review/review/CardStyle.ts

@@ -131,3 +131,8 @@ export const reportBtnStyle = (theme: Theme) => css`
 	${theme.fonts.kor.captionMedium10};
 	border-radius: 4px;
 `;
+
+export const reviewImgStyle = css`
+	width: 8rem;
+	height: 8rem;
+`;

src/components/productPage/review/review/ReviewPage.tsx

@@ -1,9 +1,9 @@
 import { DividerMedium } from '@assets/icons/index';
 import TextBtn from '@components/button/textBtn/TextBtn';
 import FilterBtn from '@components/productPage/review/review/FilterBtn';
-import Tab from '@components/productPage/review/review/Tab';
 import OriginalTextBtn from '@components/productPage/review/review/OriginalTextBtn';
 import { reviewContainer, flexStyle, commonBtnStyle } from '@components/productPage/review/review/ReviewPageStyle';
+import Tab from '@components/productPage/review/review/Tab';
 import { reviewNum } from '@constants/userReview';
 import { useState } from 'react';
 

src/components/productPage/review/review/Tab.tsx

@@ -12,6 +12,8 @@ interface TabProps {
 }
 
 const Tab = ({ total, positive, negative, isOriginal }: TabProps) => {
+	const productId = 1;
+
 	const [activeTab, setActiveTab] = useState<string>('total');
 	const theme = useTheme();
 
@@ -33,7 +35,7 @@ const Tab = ({ total, positive, negative, isOriginal }: TabProps) => {
 				</button>
 			</div>
 			{activeTab === 'total' && <ReviewTypeLabel />}
-			<CardList activeTab={activeTab} isOriginal={isOriginal} />
+			<CardList activeTab={activeTab} isOriginal={isOriginal} productId={productId} />
 		</div>
 	);
 };

src/assets/images/userImg.ts → src/constants/profileImg.ts

@@ -6,6 +6,6 @@ import avata5 from '@assets/images/img_avata5.png';
 import avata6 from '@assets/images/img_avata6.png';
 import avata7 from '@assets/images/img_avata7.png';
 
-const userImg: string[] = [avata1, avata2, avata3, avata4, avata5, avata6, avata7];
+const profileImages = [avata1, avata2, avata3, avata4, avata5, avata6, avata7];
 
-export default userImg;
+export default profileImages;

src/constants/userReview.ts

@@ -1,4 +1,4 @@
-import reviewImage from '@assets/images/img_review_4.png'; // 이미지 import
+import reviewImage from '@assets/images/img_review_4.png';
 
 export interface Review {
 	reviewId: number;