From 14561d6a881ce131f7fd49a55df4a5bf1860b9a1 Mon Sep 17 00:00:00 2001
From: KimChungO <kco796@naver.com>
Date: Sun, 4 Aug 2024 16:22:47 +0900
Subject: [PATCH] =?UTF-8?q?[Update]GamePage=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20&=20=EC=88=98=EC=A0=95=20CSS=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/StarSelect.jsx     | 76 ++++++++++++-------------
 src/components/molecules/Comment.js     | 23 +++++---
 src/components/molecules/CommentForm.js | 19 +++++--
 src/components/organisms/CommentList.js |  2 +
 src/pages/GamePage.js                   |  1 +
 5 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/src/components/atoms/StarSelect.jsx b/src/components/atoms/StarSelect.jsx
index 5e5b446..56e86ff 100644
--- a/src/components/atoms/StarSelect.jsx
+++ b/src/components/atoms/StarSelect.jsx
@@ -4,9 +4,10 @@ import styled from "styled-components";
 const StarStyle = styled.ul`
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 10px;
     list-style-type: none;
     padding: 0;
+    margin: 0;
     li {
         cursor: pointer;
         &.active {
@@ -14,6 +15,9 @@ const StarStyle = styled.ul`
                 color: #ffcc00;
             }
         }
+        i {
+            font-size: 30px;
+        }
     }
 `;
 
@@ -21,64 +25,54 @@ const StarSelect = ({ setSort, sort }) => {
     return (
         <StarStyle>
             <li
-                key={1}
-                value={1}
-                className={sort === 1 ? "active" : null}
+                className={sort > 0 ? "active" : null}
                 onClick={() => setSort(1)}
             >
-                <i class="fa-solid fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
+                {sort > 0 ? (
+                    <i class="fa-solid fa-star" />
+                ) : (
+                    <i class="fa-regular fa-star" />
+                )}
             </li>
             <li
-                key={1}
-                value={1}
-                className={sort === 2 ? "active" : null}
+                className={sort > 1 ? "active" : null}
                 onClick={() => setSort(2)}
             >
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
+                {sort > 1 ? (
+                    <i class="fa-solid fa-star" />
+                ) : (
+                    <i class="fa-regular fa-star" />
+                )}
             </li>
             <li
-                key={1}
-                value={1}
-                className={sort === 3 ? "active" : null}
+                className={sort > 2 ? "active" : null}
                 onClick={() => setSort(3)}
             >
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-regular fa-star" />
-                <i class="fa-regular fa-star" />
+                {sort > 2 ? (
+                    <i class="fa-solid fa-star" />
+                ) : (
+                    <i class="fa-regular fa-star" />
+                )}
             </li>
             <li
-                key={1}
-                value={1}
-                className={sort === 4 ? "active" : null}
+                className={sort > 3 ? "active" : null}
                 onClick={() => setSort(4)}
             >
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-regular fa-star" />
+                {sort > 3 ? (
+                    <i class="fa-solid fa-star" />
+                ) : (
+                    <i class="fa-regular fa-star" />
+                )}
             </li>
             <li
-                key={1}
-                value={1}
-                className={sort === 5 ? "active" : null}
+                className={sort > 4 ? "active" : null}
                 onClick={() => setSort(5)}
             >
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
-                <i class="fa-solid fa-star" />
+                {sort > 4 ? (
+                    <i class="fa-solid fa-star" />
+                ) : (
+                    <i class="fa-regular fa-star" />
+                )}
             </li>
         </StarStyle>
     );
diff --git a/src/components/molecules/Comment.js b/src/components/molecules/Comment.js
index 6a4ee39..93c20e5 100644
--- a/src/components/molecules/Comment.js
+++ b/src/components/molecules/Comment.js
@@ -76,10 +76,17 @@ const CommentBox = styled.div`
     }
 `;
 
-const Comment = ({ item, styled, reviewsubmit, reviewEdit, setReviewEdit }) => {
+const Comment = ({
+    item,
+    styled,
+    reviewsubmit,
+    reviewEdit,
+    setReviewEdit,
+    setSort,
+    sort,
+}) => {
     const [ishelpful, setIshelpful] = useState();
     const [clicked, setClicked] = useState(false);
-    const star = Math.floor(item.star);
 
     const IsEdit = () => {
         if (reviewEdit === true) {
@@ -137,27 +144,27 @@ const Comment = ({ item, styled, reviewsubmit, reviewEdit, setReviewEdit }) => {
                         ) : null}
                     </p>
                     <p className="star">
-                        {star >= 1 ? (
+                        {item.star >= 1 ? (
                             <i class="fa-solid fa-star" />
                         ) : (
                             <i class="fa-regular fa-star" />
                         )}
-                        {star >= 2 ? (
+                        {item.star >= 2 ? (
                             <i class="fa-solid fa-star" />
                         ) : (
                             <i class="fa-regular fa-star" />
                         )}
-                        {star >= 3 ? (
+                        {item.star >= 3 ? (
                             <i class="fa-solid fa-star" />
                         ) : (
                             <i class="fa-regular fa-star" />
                         )}
-                        {star >= 4 ? (
+                        {item.star >= 4 ? (
                             <i class="fa-solid fa-star" />
                         ) : (
                             <i class="fa-regular fa-star" />
                         )}
-                        {star === 5 ? (
+                        {item.star >= 5 ? (
                             <i class="fa-solid fa-star" />
                         ) : (
                             <i class="fa-regular fa-star" />
@@ -196,6 +203,8 @@ const Comment = ({ item, styled, reviewsubmit, reviewEdit, setReviewEdit }) => {
                         reviewsubmit={reviewsubmit}
                         reviewEdit={reviewEdit}
                         setReviewEdit={setReviewEdit}
+                        sort={sort}
+                        setSort={setSort}
                     />
                 </div>
             ) : null}
diff --git a/src/components/molecules/CommentForm.js b/src/components/molecules/CommentForm.js
index 31e19ec..63effbb 100644
--- a/src/components/molecules/CommentForm.js
+++ b/src/components/molecules/CommentForm.js
@@ -15,11 +15,15 @@ const CommentFormBox = styled.div`
     form {
         display: flex;
     }
-    .buttonBox {
+    .submitBox {
         width: 100%;
         display: flex;
         justify-content: space-between;
     }
+    .buttonBox {
+        display: flex;
+        gap: 20px;
+    }
     .editBox {
         width: 100%;
         display: flex;
@@ -36,11 +40,13 @@ const CommentForm = ({
     sort,
     type,
     IsEdit,
+    star,
 }) => {
     const [reviewText, setreviewText] = useState("");
     const submit = () => {
         reviewsubmit(reviewText);
     };
+
     return (
         <CommentFormBox>
             <CommentInput
@@ -50,12 +56,15 @@ const CommentForm = ({
                 onChange={setreviewText}
             />
             {type ? (
-                <div className="editBox">
-                    <CommentBtn text="취소" onClick={IsEdit} />
-                    <CommentBtn text="입력" onClick={submit} />
+                <div className="submitBox">
+                    <StarSelect setSort={setSort} sort={sort} />
+                    <div className="buttonBox">
+                        <CommentBtn text="취소" onClick={IsEdit} />
+                        <CommentBtn text="입력" onClick={submit} />
+                    </div>
                 </div>
             ) : (
-                <div className="buttonBox">
+                <div className="submitBox">
                     <StarSelect setSort={setSort} sort={sort} />
                     <CommentBtn text="입력" onClick={submit} />
                 </div>
diff --git a/src/components/organisms/CommentList.js b/src/components/organisms/CommentList.js
index ad6b7d6..ea9fdd8 100644
--- a/src/components/organisms/CommentList.js
+++ b/src/components/organisms/CommentList.js
@@ -48,6 +48,8 @@ const CommentList = ({
                     reviewsubmit={reviewsubmit}
                     reviewEdit={reviewEdit}
                     setReviewEdit={setReviewEdit}
+                    setSort={setStar}
+                    sort={star}
                 />
             )}
             <ReviewSortSelect
diff --git a/src/pages/GamePage.js b/src/pages/GamePage.js
index ebc3ce8..527cca1 100644
--- a/src/pages/GamePage.js
+++ b/src/pages/GamePage.js
@@ -110,6 +110,7 @@ const GamePage = () => {
             if (reviewEdit === true) {
                 const data = await putReview(myReview.reviewId, {
                     reviewContent: reviewText,
+                    star: star,
                 });
                 if (data.status === 200) {
                     alert("리뷰 수정 완료");