diff --git a/src/components/Templat/GameDetail.js b/src/components/Templat/GameDetail.js index ce81d0a..e7aa88d 100644 --- a/src/components/Templat/GameDetail.js +++ b/src/components/Templat/GameDetail.js @@ -38,6 +38,8 @@ const GameDetail = ({ btnDisable, loaderRef, reviewsubmit, + reviewEdit, + setReviewEdit, reviewSort, setReviewSort, star, @@ -68,6 +70,8 @@ const GameDetail = ({ { +const Comment = ({ item, styled, reviewsubmit, reviewEdit, setReviewEdit }) => { const [ishelpful, setIshelpful] = useState(); const [clicked, setClicked] = useState(false); const star = Math.floor(item.star); + const IsEdit = () => { + if (reviewEdit === true) { + setReviewEdit(false); + } else { + setReviewEdit(true); + } + }; + useEffect(() => { const getData = async () => { const Ishelpful = await getHelpful({ @@ -116,7 +131,7 @@ const Comment = ({ item, styled }) => {

{item.user.nickname} {styled === "my" ? ( - ) : null} @@ -173,6 +188,17 @@ const Comment = ({ item, styled }) => {

+ {reviewEdit === true ? ( +
+ +
+ ) : null} ); }; diff --git a/src/components/molecules/CommentForm.js b/src/components/molecules/CommentForm.js index 4fa4163..31e19ec 100644 --- a/src/components/molecules/CommentForm.js +++ b/src/components/molecules/CommentForm.js @@ -12,7 +12,6 @@ const CommentFormBox = styled.div` box-sizing: border-box; text-align: center; gap: 20px; - overflow: -moz-hidden-unscrollable; form { display: flex; } @@ -20,13 +19,24 @@ const CommentFormBox = styled.div` width: 100%; display: flex; justify-content: space-between; - ul { - justify-content: left; - } + } + .editBox { + width: 100%; + display: flex; + justify-content: end; + gap: 20px; } `; -const CommentForm = ({ reviewsubmit, setSort, sort }) => { +const CommentForm = ({ + reviewsubmit, + reviewEdit, + setReviewEdit, + setSort, + sort, + type, + IsEdit, +}) => { const [reviewText, setreviewText] = useState(""); const submit = () => { reviewsubmit(reviewText); @@ -39,10 +49,17 @@ const CommentForm = ({ reviewsubmit, setSort, sort }) => { value={reviewText} onChange={setreviewText} /> -
- - -
+ {type ? ( +
+ + +
+ ) : ( +
+ + +
+ )} ); }; diff --git a/src/components/organisms/CommentList.js b/src/components/organisms/CommentList.js index 6568a3a..ad6b7d6 100644 --- a/src/components/organisms/CommentList.js +++ b/src/components/organisms/CommentList.js @@ -12,9 +12,18 @@ const CommentStyle = styled.div` border-radius: 10px; `; +const OPTIONS = [ + { value: "RECENT", name: "최근순" }, + { value: "OLDEST", name: "오래된순" }, + { value: "STAR", name: "별점순" }, + { value: "HELPFUL", name: "도움순" }, +]; + const CommentList = ({ data, reviewsubmit, + reviewEdit, + setReviewEdit, setReviewSort, star, setStar, @@ -22,12 +31,6 @@ const CommentList = ({ myReview, }) => { const userId = localStorage.getItem("userId"); - const OPTIONS = [ - { value: "RECENT", name: "최근순" }, - { value: "OLDEST", name: "오래된순" }, - { value: "STAR", name: "별점순" }, - { value: "HELPFUL", name: "도움순" }, - ]; return ( @@ -38,7 +41,15 @@ const CommentList = ({ sort={star} /> )} - {myReview === null ? null : } + {myReview === null ? null : ( + + )} { const [gameData, setGameData] = useState([]); const [reviewList, setReviewList] = useState([]); const [myReview, setMyReview] = useState(null); + const [reviewEdit, setReviewEdit] = useState(false); const [reviewPage, setReviewPage] = useState(1); const [reviewSort, setReviewSort] = useState("RECENT"); const [star, setStar] = useState(null); @@ -100,36 +102,64 @@ const GamePage = () => { const reviewsubmit = async (reviewText) => { try { - if (star === null) { - alert("별점을 선택해 주세요"); - return; - } - const data = await postReview({ - userId: localStorage.getItem("userId"), - gameId: gameData.gameId, - reviewContent: reviewText, - star: star, - }); - if (data.status === 200) { - alert("리뷰 작성 완료"); - try { - const reviews = await getReviewList(params.gameId, { - page: 0, - size: 5, - sort: "RECENT", - }); - const review = await getUserReview( - params.gameId, - localStorage.getItem("userId") - ); - setReviewList(reviews); - setMyReview(review); - setReviewPage(1); - } catch (error) { - console.error(); + if (reviewEdit === true) { + const data = await putReview(myReview.reviewId, { + reviewContent: reviewText, + }); + if (data.status === 200) { + alert("리뷰 수정 완료"); + try { + const reviews = await getReviewList(params.gameId, { + page: 0, + size: 5, + sort: "RECENT", + }); + const review = await getUserReview( + params.gameId, + localStorage.getItem("userId") + ); + setReviewList(reviews); + setMyReview(review); + setReviewEdit(false); + setReviewPage(1); + } catch (error) { + console.error(); + } + } else { + alert(data.data.message); } } else { - alert(data.data.message); + if (star === null) { + alert("별점을 선택해 주세요"); + return; + } + const data = await postReview({ + userId: localStorage.getItem("userId"), + gameId: gameData.gameId, + reviewContent: reviewText, + star: star, + }); + if (data.status === 200) { + alert("리뷰 작성 완료"); + try { + const reviews = await getReviewList(params.gameId, { + page: 0, + size: 5, + sort: "RECENT", + }); + const review = await getUserReview( + params.gameId, + localStorage.getItem("userId") + ); + setReviewList(reviews); + setMyReview(review); + setReviewPage(1); + } catch (error) { + console.error(); + } + } else { + alert(data.data.message); + } } } catch (error) { console.error(); @@ -216,6 +246,8 @@ const GamePage = () => { btnDisable={btnDisable} loaderRef={loaderRef} reviewsubmit={reviewsubmit} + reviewEdit={reviewEdit} + setReviewEdit={setReviewEdit} reviewSort={reviewSort} setReviewSort={setReviewSort} star={star} diff --git a/src/services/ReviewApi.js b/src/services/ReviewApi.js index 23434dc..5fcfddf 100644 --- a/src/services/ReviewApi.js +++ b/src/services/ReviewApi.js @@ -43,10 +43,10 @@ export const putReview = async (reviewId, params) => { headers: headers, }) .then((response) => { - return response.data; + return response; }) .catch((error) => { - return error; + return error.response; }); return data; };