diff --git a/src/components/review/ReviewList.js b/src/components/review/ReviewList.js index d202a5a..74ea94f 100644 --- a/src/components/review/ReviewList.js +++ b/src/components/review/ReviewList.js @@ -1,17 +1,17 @@ // src/components/review/ReviewList.js -import React, { useState, useEffect } from "react" -import axios from "@/config/axios-config" -import { useUser } from "@/hooks/useUser" -import { toast } from "react-toastify" -import "react-toastify/dist/ReactToastify.css" +import React, { useState, useEffect } from 'react' +import axios from '@/config/axios-config' +import { useUser } from '@/hooks/useUser' +import { toast } from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' import { Button, Modal, ModalContent, ModalBody, ModalFooter, -} from "@nextui-org/react" -import EditReviewForm from "./EditReviewForm" +} from '@nextui-org/react' +import EditReviewForm from './EditReviewForm' const ReviewList = ({ hotelId, onReviewEdit }) => { const [recentReviews, setRecentReviews] = useState([]) @@ -24,7 +24,7 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { const [averageCleanliness, setAverageCleanliness] = useState(0) const [averageStaffService, setAverageStaffService] = useState(0) const [totalRating, setTotalRating] = useState(0) - const [sortBy, setSortBy] = useState("recent") + const [sortBy, setSortBy] = useState('recent') const { user } = useUser() @@ -37,7 +37,7 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { const response = await axios.get( `${process.env.NEXT_PUBLIC_BASE_URL}/api/v1/review/${hotelId}` ) - console.log("Server Response:", response.data) + console.log('Server Response:', response.data) // 최근 4개 리뷰 const recentReviewsData = response.data.slice(0, 4) @@ -45,27 +45,27 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { // 정렬 기준에 따라 전체 리뷰를 가져옴 const sortedReviews = - sortBy === "recent" + sortBy === 'recent' ? [...response.data].sort((a, b) => b.createdAt.localeCompare(a.createdAt) ) - : sortBy === "highRating" + : sortBy === 'highRating' ? [...response.data].sort((a, b) => b.rating - a.rating) - : sortBy === "lowRating" + : sortBy === 'lowRating' ? [...response.data].sort((a, b) => a.rating - b.rating) : response.data setAllReviews(sortedReviews) - const amenitiesAvg = calculateAverage(sortedReviews, "amenities") - const cleanlinessAvg = calculateAverage(sortedReviews, "cleanliness") - const staffServiceAvg = calculateAverage(sortedReviews, "staffService") - const ratingAvg = calculateAverage(sortedReviews, "rating") + const amenitiesAvg = calculateAverage(sortedReviews, 'amenities') + const cleanlinessAvg = calculateAverage(sortedReviews, 'cleanliness') + const staffServiceAvg = calculateAverage(sortedReviews, 'staffService') + const ratingAvg = calculateAverage(sortedReviews, 'rating') const trimTrailingZeros = (num) => { const str = num.toString() - if (str.includes(".")) { - return str.replace(/(?:\.0+|(\.\d+?)0+)$/, "$1") + if (str.includes('.')) { + return str.replace(/(?:\.0+|(\.\d+?)0+)$/, '$1') } return str } @@ -75,8 +75,8 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { setAverageStaffService(trimTrailingZeros(staffServiceAvg.toFixed(2))) setTotalRating(trimTrailingZeros(ratingAvg.toFixed(2))) } catch (error) { - console.error("리뷰를 불러오는 중 에러 발생:", error) - console.log("Recent Reviews:", recentReviews) + console.error('리뷰를 불러오는 중 에러 발생:', error) + console.log('Recent Reviews:', recentReviews) } } @@ -86,17 +86,15 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { } useEffect(() => { - if (allReviews.length != 0) { - fetchReviews() - } - }, []) + fetchReviews() + }, [hotelId, sortBy]) const sortReviews = (reviews, sortBy) => { - if (sortBy === "recent") { + if (sortBy === 'recent') { return reviews.sort( (a, b) => new Date(b.createdAt) - new Date(a.createdAt) ) - } else if (sortBy === "rating") { + } else if (sortBy === 'rating') { return reviews.sort((a, b) => b.rating - a.rating) } return reviews @@ -118,10 +116,10 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { const stars = Array.from({ length: 5 }, (_, index) => { const starValue = index + 1 - let starColor = "lightgray" + let starColor = 'lightgray' if (starValue <= fullStars) { - starColor = "gold" + starColor = 'gold' } else if (starValue === fullStars + 1 && remainder > 0) { const gradientColor = `linear-gradient(to right, gold ${ remainder * 100 @@ -131,13 +129,12 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { key={starValue} style={{ background: gradientColor, - WebkitBackgroundClip: "text", - color: "transparent", - fontSize: "16px", - position: "relative", - marginRight: "-2px", - }} - > + WebkitBackgroundClip: 'text', + color: 'transparent', + fontSize: '16px', + position: 'relative', + marginRight: '-2px', + }}> ★ ) @@ -148,10 +145,9 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { key={starValue} style={{ color: starColor, - fontSize: "16px", - position: "relative", - }} - > + fontSize: '16px', + position: 'relative', + }}> ★ ) @@ -174,12 +170,12 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { useAuth: true, } ) - console.log("리뷰가 삭제되었습니다.") + console.log('리뷰가 삭제되었습니다.') fetchReviews() - toast.success("리뷰가 삭제되었습니다.") + toast.success('리뷰가 삭제되었습니다.') } catch (error) { - console.error("리뷰 삭제 중 오류 발생:", error) - toast.error("리뷰 삭제에 실패했습니다. 다시 시도해주세요.") + console.error('리뷰 삭제 중 오류 발생:', error) + toast.error('리뷰 삭제에 실패했습니다. 다시 시도해주세요.') } } @@ -193,28 +189,27 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { return (
+ marginBottom: '20px', + padding: '10px', + border: '2px solid #ddd', + borderRadius: '5px', + width: '50%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }}>
-

{totalRating}

+

{totalRating}

-
-

+

+

편의시설 {renderStarsWithScore(averageAmenities)}

-

+

서비스 {renderStarsWithScore(averageStaffService)}

-

+

청결 {renderStarsWithScore(averageCleanliness)}

@@ -231,46 +226,44 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { {renderTopBox()}
+ display: 'grid', + gridTemplateColumns: 'repeat(2, 1fr)', + }}> {recentReviews.map((review) => (
-

{review.member.nickname}

+

{review.member.nickname}

{/*

이미지 URL: {review.member.imageUrl}

*/} -

+

평점 {renderStarsWithScore(review.rating)}

+ textAlign: 'left', + whiteSpace: 'pre-line', + margin: '10px', + }}> {review.body}

-

+

편의시설 {renderStarsWithScore(review.amenities)}

-

+

서비스 {renderStarsWithScore(review.staffService)}

-

+

청결 {renderStarsWithScore(review.cleanliness)}

-

+

{review.updatedAt - ? `${new Intl.DateTimeFormat("ko-KR", { - year: "numeric", - month: "numeric", - day: "numeric", + ? `${new Intl.DateTimeFormat('ko-KR', { + year: 'numeric', + month: 'numeric', + day: 'numeric', }).format(new Date(review.updatedAt))}` - : `${new Intl.DateTimeFormat("ko-KR", { - year: "numeric", - month: "numeric", - day: "numeric", + : `${new Intl.DateTimeFormat('ko-KR', { + year: 'numeric', + month: 'numeric', + day: 'numeric', }).format(new Date(review.createdAt))}`}

{user?.objData.nickname === review.member.nickname && ( @@ -278,17 +271,15 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { @@ -301,7 +292,7 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { } return ( -
+

이용 후기

@@ -317,7 +308,7 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { onClose={() => setIsEditing(false)} // 수정이 완료되면 isEditing을 false로 설정 /> ) : ( - )} @@ -327,17 +318,15 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { isOpen={showModal} onOpenChange={handleCloseModal} size={modalSize} - placement='auto' - > + placement='auto'> + top: '10vh', + maxHeight: '80vh', + overflowY: 'auto', + maxWidth: '80vw', + width: '50%', + }}> {(onClose) => ( <> {editingReviewId !== null ? ( // 수정 폼 렌더링을 위한 조건 추가 @@ -357,25 +346,22 @@ const ReviewList = ({ hotelId, onReviewEdit }) => { <>

+ margin: '30px', + fontSize: '25px', + }}> 전체 리뷰

+ margin: '10px', + fontSize: '15px', + }}>