[Add]GamePage 댓글 수정 기능 추가

Dev-Tinos · Jul 12, 2024 · c088c4e · c088c4e
1 parent f363f9d
commit c088c4e
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 50 deletions.
diff --git 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 = ({
             <CommentList
                 data={review}
                 reviewsubmit={reviewsubmit}
+                reviewEdit={reviewEdit}
+                setReviewEdit={setReviewEdit}
                 setReviewSort={setReviewSort}
                 star={star}
                 setStar={setStar}

diff --git a/src/components/atoms/CommentBtn.js b/src/components/atoms/CommentBtn.js
@@ -2,11 +2,13 @@ import React from "react";
 import styled from "styled-components";
 
 const Button = styled.button`
-    width: 10%;
+    padding: 20px 50px;
     background-color: #5383e8;
     color: #fff;
     border: none;
     border-radius: 5px;
+    min-height: 55px;
+    width: 130px;
     cursor: pointer;
 `;
 

diff --git a/src/components/atoms/CommentInput.js b/src/components/atoms/CommentInput.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 const InputBox = styled.textarea`
     box-sizing: border-box;
-    border: 1px solid #5383e8;
+    border: 2px solid #ddddff;
     border-radius: 10px;
     width: 100%;
     resize: none;

diff --git a/src/components/molecules/Comment.js b/src/components/molecules/Comment.js
@@ -7,6 +7,7 @@ import {
 } from "../../services/HelpfulApi";
 import ProfileImg from "../atoms/ProfileImg";
 import TimeAgo from "../../services/function/TimeAgo";
+import CommentForm from "./CommentForm";
 
 const CommentBox = styled.div`
     box-sizing: border-box;
@@ -67,13 +68,27 @@ const CommentBox = styled.div`
         margin: 0 0 -10px;
         text-align: end;
     }
+    .editForm {
+        margin: 40px 0 0;
+        button {
+            background-color: #5383e2;
+        }
+    }
 `;
 
-const Comment = ({ item, styled }) => {
+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 }) => {
                     <p className="name">
                         {item.user.nickname}
                         {styled === "my" ? (
-                            <button>
+                            <button onClick={IsEdit}>
                                 <i class="fa-solid fa-pencil"></i>
                             </button>
                         ) : null}
@@ -173,6 +188,17 @@ const Comment = ({ item, styled }) => {
             <p className="date">
                 <TimeAgo timestamp={item.dateTime} />
             </p>
+            {reviewEdit === true ? (
+                <div className="editForm">
+                    <CommentForm
+                        type={reviewEdit}
+                        IsEdit={IsEdit}
+                        reviewsubmit={reviewsubmit}
+                        reviewEdit={reviewEdit}
+                        setReviewEdit={setReviewEdit}
+                    />
+                </div>
+            ) : null}
         </CommentBox>
     );
 };

diff --git a/src/components/molecules/CommentForm.js b/src/components/molecules/CommentForm.js
@@ -12,21 +12,31 @@ const CommentFormBox = styled.div`
     box-sizing: border-box;
     text-align: center;
     gap: 20px;
-    overflow: -moz-hidden-unscrollable;
     form {
         display: flex;
     }
     .buttonBox {
         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}
             />
-            <div className="buttonBox">
-                <StarSelect setSort={setSort} sort={sort} />
-                <CommentBtn text="입력" onClick={submit} />
-            </div>
+            {type ? (
+                <div className="editBox">
+                    <CommentBtn text="취소" onClick={IsEdit} />
+                    <CommentBtn text="입력" onClick={submit} />
+                </div>
+            ) : (
+                <div className="buttonBox">
+                    <StarSelect setSort={setSort} sort={sort} />
+                    <CommentBtn text="입력" onClick={submit} />
+                </div>
+            )}
         </CommentFormBox>
     );
 };

diff --git a/src/components/organisms/CommentList.js b/src/components/organisms/CommentList.js
@@ -12,22 +12,25 @@ 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,
     reviewSort,
     myReview,
 }) => {
     const userId = localStorage.getItem("userId");
-    const OPTIONS = [
-        { value: "RECENT", name: "최근순" },
-        { value: "OLDEST", name: "오래된순" },
-        { value: "STAR", name: "별점순" },
-        { value: "HELPFUL", name: "도움순" },
-    ];
 
     return (
         <CommentStyle>
@@ -38,7 +41,15 @@ const CommentList = ({
                     sort={star}
                 />
             )}
-            {myReview === null ? null : <Comment item={myReview} styled="my" />}
+            {myReview === null ? null : (
+                <Comment
+                    item={myReview}
+                    styled="my"
+                    reviewsubmit={reviewsubmit}
+                    reviewEdit={reviewEdit}
+                    setReviewEdit={setReviewEdit}
+                />
+            )}
             <ReviewSortSelect
                 item={OPTIONS}
                 setSort={setReviewSort}

diff --git a/src/pages/GamePage.js b/src/pages/GamePage.js
@@ -5,6 +5,7 @@ import {
     getReviewList,
     getUserReview,
     postReview,
+    putReview,
 } from "../services/ReviewApi";
 import { getGame } from "../services/GameApi";
 import { getUserLog, getUsersLogs } from "../services/LogApi";
@@ -13,6 +14,7 @@ const GamePage = () => {
     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
@@ -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;
 };