From 2d52ff6f08f1cafb0a613ce4254288f96a61e2d6 Mon Sep 17 00:00:00 2001 From: Chaeyeoncho Date: Thu, 1 Aug 2024 22:04:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=20api=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Store/MenuItemDetail.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Store/MenuItemDetail.js b/src/components/Store/MenuItemDetail.js index 0d21999..94f9a02 100644 --- a/src/components/Store/MenuItemDetail.js +++ b/src/components/Store/MenuItemDetail.js @@ -188,7 +188,7 @@ const MenuItemDetail = ({ menu, onClick = () => {} }) => { quantity: quantity, }); if (response && response.data) { - console.log("굿", response.data); + console.log("굿잡", response.data); } else { console.error("데이터 없음"); } From 6ce51e53359d71c8180ff6c3af35ea0b83b2d7d7 Mon Sep 17 00:00:00 2001 From: Chaeyeoncho Date: Thu, 1 Aug 2024 22:05:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=20api=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Store/ReviewItem.js | 59 ++++++++++++++---------------- src/pages/StorePage.js | 17 +++++---- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/components/Store/ReviewItem.js b/src/components/Store/ReviewItem.js index e0af0fa..d26d3b9 100644 --- a/src/components/Store/ReviewItem.js +++ b/src/components/Store/ReviewItem.js @@ -1,5 +1,6 @@ -import React, { useState } from "react"; +import React, { useState, useCallback } from "react"; import styled from "styled-components"; +import useSyluvAxios from "../../hooks/useSyluvAxios"; // syluvAxios를 임포트합니다 import goodIcon from "../../assets/images/good.png"; import badIcon from "../../assets/images/bad.png"; @@ -205,12 +206,14 @@ const ResponseText = styled.div` color: ${({ theme }) => theme.color.gray800}; `; -const ReviewItem = ({ review, onDelete, userId }) => { +const ReviewItem = ({ review, onDelete }) => { const [helpfulness, setHelpfulness] = useState(review.likeCount); const [isHelpfulClicked, setIsHelpfulClicked] = useState( review.isHelpfulClicked || false ); + const syluvAxios = useSyluvAxios(); // useSyluvAxios 훅을 사용하여 syluvAxios 인스턴스를 가져옵니다 + const formattedTime = formatTime({ beforeHours: review.beforeHours, beforeDay: review.beforeDay, @@ -218,17 +221,14 @@ const ReviewItem = ({ review, onDelete, userId }) => { }); const handleHelpfulnessClick = async () => { - if (!isHelpfulClicked && userId !== review.userId) { - console.log("Attempting to like the review..."); // console.log 추가 + if (!isHelpfulClicked && !review.isMine) { + console.log("Attempting to like the review..."); try { - const response = await fetch(`/review/${review.reviewId}/like`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - }); - const result = await response.json(); - console.log("API response:", result); // console.log 추가 + const response = await syluvAxios.post( + `/review/${review.reviewId}/like` + ); + const result = response.data; + console.log("API response:", result); if (result.result.code === 0) { setHelpfulness( (prevHelpfulness) => parseInt(prevHelpfulness, 10) + 1 @@ -241,25 +241,22 @@ const ReviewItem = ({ review, onDelete, userId }) => { } }; - const handleDelete = async () => { - try { - const response = await fetch(`/review/${review.reviewId}/delete`, { - method: "DELETE", - headers: { - "Content-Type": "application/json", - }, + const handleDelete = useCallback(() => { + syluvAxios + .delete(`/review/${review.reviewId}/delete`) + .then((response) => { + const result = response.data; + if (result.result.code === 0) { + console.log("리뷰가 정상적으로 삭제되었습니다:", result.payload); + onDelete(review.reviewId); + } else { + console.error("리뷰 삭제 중 오류 발생:", result); + } + }) + .catch((error) => { + console.error("리뷰 삭제 중 오류 발생:", error); }); - const result = await response.json(); - if (result.result.code === 0) { - onDelete(review.reviewId); - } else { - console.error("Error deleting the review:", result); - } - } catch (error) { - console.error("Error deleting the review:", error); - } - }; - + }, [review.reviewId, onDelete]); return (
@@ -279,7 +276,7 @@ const ReviewItem = ({ review, onDelete, userId }) => { - {userId === review.userId && ( + {review.isMine && ( 삭제하기 )}
diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js index 15801dd..1a743a0 100644 --- a/src/pages/StorePage.js +++ b/src/pages/StorePage.js @@ -198,20 +198,23 @@ const EmptyReviewContainer = styled.div` align-items: center; justify-content: center; height: 100%; - padding: 20px; + padding: 100px; text-align: center; - color: ${({ theme }) => theme.color.gray500}; + color: ${({ theme }) => theme.color.gray600}; + font-size: 20px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; `; const EmptyReviewImageStyled = styled.img` - width: 100px; - height: 100px; - margin-bottom: 20px; + width: 144px; + height: 124px; + margin-bottom: 25px; `; const EmptyReviewText = styled.p` - font-size: 16px; - font-weight: ${({ theme }) => theme.fontWeight.medium}; + color: ${({ theme }) => theme.color.gray600}; + font-size: 20px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; `; export default StorePage; From 248cce5a11b8d9c3d8e4e18692e62d2e8645c7bd Mon Sep 17 00:00:00 2001 From: Chaeyeoncho Date: Fri, 2 Aug 2024 04:18:02 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat=20:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Store/MenuItemDetail.js | 2 +- src/components/Store/ReviewItem.js | 317 +++++++----------------- src/components/Store/ReviewItemStyle.js | 210 ++++++++++++++++ src/pages/StorePage.js | 61 ++++- 4 files changed, 350 insertions(+), 240 deletions(-) create mode 100644 src/components/Store/ReviewItemStyle.js diff --git a/src/components/Store/MenuItemDetail.js b/src/components/Store/MenuItemDetail.js index 94f9a02..cb0a084 100644 --- a/src/components/Store/MenuItemDetail.js +++ b/src/components/Store/MenuItemDetail.js @@ -75,7 +75,7 @@ const Line = styled.div` align-content: center; height: 1px; border-bottom: 1px solid ${({ theme }) => theme.color.gray100}; - margin-top: 200px; + margin-top: 280px; `; const QuantityContainer = styled.div` diff --git a/src/components/Store/ReviewItem.js b/src/components/Store/ReviewItem.js index d26d3b9..9d169f8 100644 --- a/src/components/Store/ReviewItem.js +++ b/src/components/Store/ReviewItem.js @@ -1,8 +1,35 @@ -import React, { useState, useCallback } from "react"; -import styled from "styled-components"; -import useSyluvAxios from "../../hooks/useSyluvAxios"; // syluvAxios를 임포트합니다 +import React, { useState, useCallback, useEffect } from "react"; +import { + ReviewContainer, + Header, + UserInfo, + UserProfileImage, + UserName, + StarsAndTime, + StarContainer, + Star, + Time, + DeleteButton, + ReviewImageContainerSingle, + ReviewImageContainerMultiple, + SingleReviewImage, + MultipleReviewImage, + MenuName, + ReviewText, + Helpfulness, + HelpfulButton, + Icon, + ReviewResponse, + ResponseHeader, + ResponseTitle, + ResponseTime, + ResponseText, + MyReviewContainer, + MyReviewText, +} from "./ReviewItemStyle"; // 올바른 경로로 수정 + +import useSyluvAxios from "../../hooks/useSyluvAxios"; import goodIcon from "../../assets/images/good.png"; -import badIcon from "../../assets/images/bad.png"; const formatTime = ({ beforeHours, beforeDay, beforeWeek }) => { if (beforeWeek > 0) { @@ -10,255 +37,75 @@ const formatTime = ({ beforeHours, beforeDay, beforeWeek }) => { } else if (beforeDay > 0) { return `${beforeDay}일 전`; } else if (beforeHours > 0) { - return `${beforeHours}시간 전`; + return `${beforeHours}시간 전}`; } else { return `방금 전`; } }; -const ReviewContainer = styled.div` - margin-bottom: 44px; - &:first-child { - margin-top: 0; - } -`; - -const Header = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; -`; - -const UserInfo = styled.div` - display: flex; - align-items: center; -`; - -const UserProfileImage = styled.img` - width: 40px; - height: 40px; - border-radius: 50%; - margin-right: 10px; -`; - -const UserName = styled.span` - font-weight: ${({ theme }) => theme.fontWeight.medium}; - font-size: 14px; -`; - -const StarsAndTime = styled.div` - display: flex; - align-items: center; - width: 100%; -`; - -const StarContainer = styled.div` - display: flex; - align-items: center; - margin-right: 4px; -`; - -const Star = styled.span` - font-size: 14px; /* 별의 크기 */ - color: ${({ filled }) => (filled === "true" ? "gold" : "#CCCCCC")}; - margin-top: 4px; - gap: 1px; -`; - -const Time = styled.div` - font-weight: ${({ theme }) => theme.fontWeight.regular}; - color: ${({ theme }) => theme.color.gray400}; - font-size: 12px; - margin-top: 4px; - margin-right: 4px; /* Time과 DeleteButton 간격 설정 */ -`; - -const DeleteButton = styled.button` - background: none; - border: none; - cursor: pointer; - font-size: 12px; - font-weight: ${({ theme }) => theme.fontWeight.regular}; - outline: none; - color: ${({ theme }) => theme.color.gray400}; - margin-left: auto; /* DeleteButton을 오른쪽 끝으로 이동 */ - margin-right: 0px; /* 화면 오른쪽에서 20px 여백 */ - margin-top: 16px; -`; - -const ReviewImageContainerSingle = styled.div` - width: 100%; - height: auto; - border-radius: 8px; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - margin-top: 19px; - aspect-ratio: 1.6 / 1; -`; - -const ReviewImageContainerMultiple = styled.div` - width: 100%; - height: 180px; - border-radius: 8px; - overflow-x: auto; - display: flex; - margin-top: 19px; - padding-right: 20px; - gap: 6px; - -ms-overflow-style: none; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } -`; - -const SingleReviewImage = styled.img` - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; -`; - -const MultipleReviewImage = styled.img` - width: 250px; - height: 100%; - object-fit: cover; - border-radius: 8px; - flex: 0 0 auto; -`; - -const MenuName = styled.div` - font-weight: ${({ theme }) => theme.fontWeight.semiBold}; - font-size: 14px; - color: ${({ theme }) => theme.color.gray300}; - margin-top: 19px; -`; - -const ReviewText = styled.p` - margin-top: 12px; - font-size: 16px; - font-weight: ${({ theme }) => theme.fontWeight.regular}; - color: ${({ theme }) => theme.color.gray800}; - margin-bottom: 6px; -`; +const ReviewItem = ({ review, onDelete, onHelpful }) => { + const [helpfulness, setHelpfulness] = useState(Number(review.likeCount)); + const [isHelpfulClicked, setIsHelpfulClicked] = useState(false); -const Helpfulness = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - color: ${({ theme }) => theme.color.gray500}; - font-weight: ${({ theme }) => theme.fontWeight.regular}; - font-size: 14px; - margin-top: 10px; - height: 24px; -`; + useEffect(() => { + setIsHelpfulClicked(review.isHelpfulClicked); + }, [review.isHelpfulClicked]); -const HelpfulButton = styled.button` - background: none; - border: 1px solid - ${({ active }) => (active === "true" ? "#ff6b00" : "#9A9A9A")}; - border-radius: 54px; - color: ${({ active }) => (active === "true" ? "#ff6b00" : "#9A9A9A")}; - padding: 5px 10px; - display: flex; - align-items: center; - cursor: pointer; - position: relative; - left: 0px; - outline: none; -`; - -const Icon = styled.img` - width: 16px; - height: 16px; - margin-right: 3px; -`; - -const ReviewResponse = styled.div` - padding: 20px; - margin-top: 20px; - background-color: #fafafa; - border-radius: 8px; -`; - -const ResponseHeader = styled.div` - display: flex; - align-items: center; - margin-bottom: 5px; -`; - -const ResponseTitle = styled.span` - font-weight: ${({ theme }) => theme.fontWeight.semiBold}; - margin-right: 4px; - font-size: 14px; -`; - -const ResponseTime = styled.span` - font-size: 12px; - color: ${({ theme }) => theme.color.gray400}; -`; - -const ResponseText = styled.div` - font-size: 14px; - color: ${({ theme }) => theme.color.gray800}; -`; - -const ReviewItem = ({ review, onDelete }) => { - const [helpfulness, setHelpfulness] = useState(review.likeCount); - const [isHelpfulClicked, setIsHelpfulClicked] = useState( - review.isHelpfulClicked || false - ); - - const syluvAxios = useSyluvAxios(); // useSyluvAxios 훅을 사용하여 syluvAxios 인스턴스를 가져옵니다 - - const formattedTime = formatTime({ - beforeHours: review.beforeHours, - beforeDay: review.beforeDay, - beforeWeek: review.beforeWeek, - }); + const syluvAxios = useSyluvAxios(); const handleHelpfulnessClick = async () => { - if (!isHelpfulClicked && !review.isMine) { - console.log("Attempting to like the review..."); - try { - const response = await syluvAxios.post( - `/review/${review.reviewId}/like` - ); - const result = response.data; - console.log("API response:", result); - if (result.result.code === 0) { - setHelpfulness( - (prevHelpfulness) => parseInt(prevHelpfulness, 10) + 1 - ); - setIsHelpfulClicked(true); - } - } catch (error) { - console.error("Error liking the review:", error); + if (review.isMine || isHelpfulClicked) { + console.log( + "자신의 리뷰에는 도움이 돼요를 누를 수 없거나 이미 누른 리뷰입니다." + ); + return; + } + + setIsHelpfulClicked(true); + setHelpfulness((prevHelpfulness) => prevHelpfulness + 1); + + try { + const response = await syluvAxios.post(`/review/${review.reviewId}/like`); + const result = response.data; + if (result.result.code !== 0) { + // 서버 응답이 실패한 경우 상태 되돌립니다 + setHelpfulness((prevHelpfulness) => prevHelpfulness - 1); + setIsHelpfulClicked(false); + } else { + onHelpful(review.reviewId); } + } catch (error) { + console.error("Error liking the review:", error); + // 서버 요청 중 오류 발생 시 상태 되돌립니다 + setHelpfulness((prevHelpfulness) => prevHelpfulness - 1); + setIsHelpfulClicked(false); } }; const handleDelete = useCallback(() => { + onDelete(review.reviewId); syluvAxios .delete(`/review/${review.reviewId}/delete`) .then((response) => { const result = response.data; - if (result.result.code === 0) { + if (result && result.result && result.result.code === 0) { console.log("리뷰가 정상적으로 삭제되었습니다:", result.payload); - onDelete(review.reviewId); } else { console.error("리뷰 삭제 중 오류 발생:", result); } }) .catch((error) => { - console.error("리뷰 삭제 중 오류 발생:", error); + console.error("Error deleting review:", error); }); }, [review.reviewId, onDelete]); + return ( - + + {review.isMine && ( + + 내가 남긴 리뷰 + + )}
@@ -267,12 +114,21 @@ const ReviewItem = ({ review, onDelete }) => { {[...Array(5)].map((_, index) => ( - + ★ ))} - + @@ -305,9 +161,10 @@ const ReviewItem = ({ review, onDelete }) => {
{helpfulness}명에게 도움이 되었어요
- + 도움이 돼요 diff --git a/src/components/Store/ReviewItemStyle.js b/src/components/Store/ReviewItemStyle.js new file mode 100644 index 0000000..519105b --- /dev/null +++ b/src/components/Store/ReviewItemStyle.js @@ -0,0 +1,210 @@ +import styled from "styled-components"; + +export const ReviewContainer = styled.div` + margin-bottom: 44px; + background-color: ${({ isMine }) => + isMine ? "rgba(255, 107, 0, 0.04)" : "transparent"}; + padding-bottom: 24px; /* 경계선과 도움이 돼요 버튼 사이의 간격 */ + border-bottom: ${({ isMine }) => + isMine ? "1px solid rgba(255, 107, 0, 0.3)" : "none"}; + &:first-child { + margin-top: 0; + } + margin-left: ${({ isMine }) => (isMine ? "-20px" : "0")}; + margin-right: ${({ isMine }) => (isMine ? "-20px" : "0")}; + padding-left: ${({ isMine }) => (isMine ? "20px" : "0")}; + padding-right: ${({ isMine }) => (isMine ? "20px" : "0")}; +`; + +export const MyReviewContainer = styled.div` + margin: 0; /* 좌우, 상하 마진 제거 */ + padding: 0; /* 좌우, 상하 패딩 제거 */ +`; + +export const MyReviewText = styled.span` + display: block; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + color: ${({ theme }) => theme.color.gray900}; + font-size: 18px; + margin-bottom: 20px; /* UserInfo와의 간격을 위해 위쪽 패딩 추가 */ +`; + +export const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +`; + +export const UserInfo = styled.div` + display: flex; + align-items: center; +`; + +export const UserProfileImage = styled.img` + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; +`; + +export const UserName = styled.span` + font-weight: ${({ theme }) => theme.fontWeight.medium}; + font-size: 14px; +`; + +export const StarsAndTime = styled.div` + display: flex; + align-items: center; + width: 100%; +`; + +export const StarContainer = styled.div` + display: flex; + align-items: center; + margin-right: 4px; +`; + +export const Star = styled.span` + font-size: 14px; + color: ${({ $filled }) => ($filled === "true" ? "gold" : "#CCCCCC")}; + margin-top: 4px; + gap: 1px; +`; + +export const Time = styled.div` + font-weight: ${({ theme }) => theme.fontWeight.regular}; + color: ${({ theme }) => theme.color.gray400}; + font-size: 12px; + margin-top: 4px; + margin-right: 4px; +`; + +export const DeleteButton = styled.button` + background: none; + border: none; + cursor: pointer; + font-size: 12px; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + outline: none; + color: ${({ theme }) => theme.color.gray400}; + margin-left: auto; + margin-right: 0px; + margin-top: 16px; +`; + +export const ReviewImageContainerSingle = styled.div` + width: 100%; + height: auto; + border-radius: 8px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + margin-top: 19px; + aspect-ratio: 1.6 / 1; +`; + +export const ReviewImageContainerMultiple = styled.div` + width: 100%; + height: 180px; + border-radius: 8px; + overflow-x: auto; + display: flex; + margin-top: 19px; + padding-right: 20px; + gap: 6px; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +`; + +export const SingleReviewImage = styled.img` + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; +`; + +export const MultipleReviewImage = styled.img` + width: 250px; + height: 100%; + object-fit: cover; + border-radius: 8px; + flex: 0 0 auto; +`; + +export const MenuName = styled.div` + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + font-size: 14px; + color: ${({ theme }) => theme.color.gray300}; + margin-top: 19px; +`; + +export const ReviewText = styled.p` + margin-top: 12px; + font-size: 16px; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + color: ${({ theme }) => theme.color.gray800}; + margin-bottom: 6px; +`; + +export const Helpfulness = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + color: ${({ theme }) => theme.color.gray500}; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + font-size: 14px; + margin-top: 10px; + height: 24px; +`; + +export const HelpfulButton = styled.button` + background: none; + border: 1px solid ${({ $active }) => ($active ? "#9A9A9A" : "#ff6b00")}; + border-radius: 54px; + color: ${({ $active }) => ($active ? "#9A9A9A" : "#ff6b00")}; + padding: 5px 10px; + display: flex; + align-items: center; + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; + outline: none; +`; + +export const Icon = styled.img` + width: 16px; + height: 16px; + margin-right: 3px; +`; + +export const ReviewResponse = styled.div` + padding: 20px; + margin-top: 20px; + background-color: #fafafa; + border-radius: 8px; +`; + +export const ResponseHeader = styled.div` + display: flex; + align-items: center; + margin-bottom: 5px; +`; + +export const ResponseTitle = styled.span` + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + margin-right: 4px; + font-size: 14px; +`; + +export const ResponseTime = styled.span` + font-size: 12px; + color: ${({ theme }) => theme.color.gray400}; +`; + +export const ResponseText = styled.div` + font-size: 14px; + color: ${({ theme }) => theme.color.gray800}; +`; diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js index 1a743a0..3905d37 100644 --- a/src/pages/StorePage.js +++ b/src/pages/StorePage.js @@ -23,7 +23,8 @@ const PageWrapper = styled.div` const Section = styled.section` flex: 1; overflow-y: auto; - padding: 0 20px; + padding: ${({ activeSection }) => + activeSection === "리뷰" ? "0 20px 0px 20px" : "0px 20px 0 20px"}; background-color: white; &::-webkit-scrollbar { display: none; @@ -39,6 +40,7 @@ const StorePage = () => { const axiosInstance = useSyluvAxios(); const queryClient = useQueryClient(); const [selectedMenu, setSelectedMenu] = useState(null); + const [reviews, setReviews] = useState([]); useEffect(() => { console.log("Selected Menu:", selectedMenu); @@ -107,17 +109,57 @@ const StorePage = () => { } = useQuery({ queryKey: ["reviewData", storeId], queryFn: fetchReviewData, + onSuccess: (data) => { + const myReview = data.filter((review) => review.isMine); + const otherReviews = data + .filter((review) => !review.isMine) + .sort((a, b) => b.likeCount - a.likeCount); + + setReviews([...myReview, ...otherReviews]); + }, }); - const handleReviewDelete = (reviewId) => { - queryClient.setQueryData(["reviewData", storeId], (oldData) => - oldData.filter((review) => review.reviewId !== reviewId) - ); + const handleReviewDelete = (reviewId, review) => { + if (reviewId) { + setReviews((prevReviews) => + prevReviews.filter((review) => review.reviewId !== reviewId) + ); + } else { + setReviews((prevReviews) => [...prevReviews, review]); + } + }; + + const handleReviewHelpful = (reviewId) => { + setReviews((prevReviews) => { + const updatedReviews = prevReviews.map((review) => { + if (review.reviewId === reviewId) { + return { + ...review, + likeCount: review.likeCount + 1, + isHelpfulClicked: true, + }; + } + return review; + }); + + const myReview = updatedReviews.filter((review) => review.isMine); + const otherReviews = updatedReviews + .filter((review) => !review.isMine) + .sort((a, b) => b.likeCount - a.likeCount); + + return [...myReview, ...otherReviews]; + }); }; useEffect(() => { if (reviewData) { console.log("Fetched Review Data:", reviewData); + const myReview = reviewData.filter((review) => review.isMine); + const otherReviews = reviewData + .filter((review) => !review.isMine) + .sort((a, b) => b.likeCount - a.likeCount); + + setReviews([...myReview, ...otherReviews]); } }, [reviewData]); @@ -156,20 +198,21 @@ const StorePage = () => { handleSelected={setActiveSection} /> {activeSection === "메뉴" && ( -
+
{storeData.menuDetails.map((item, index) => ( ))}
)} {activeSection === "리뷰" && ( -
- {Array.isArray(reviewData) && reviewData.length > 0 ? ( - reviewData.map((review, index) => ( +
+ {Array.isArray(reviews) && reviews.length > 0 ? ( + reviews.map((review, index) => ( )) ) : (