[Update]GamePage 리뷰 작성 & 수정 CSS 변경

Dev-Tinos · Aug 4, 2024 · 14561d6 · 14561d6
1 parent 97774dd
commit 14561d6
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 53 deletions.
diff --git a/src/components/atoms/StarSelect.jsx b/src/components/atoms/StarSelect.jsx
@@ -4,81 +4,75 @@ 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 {
             .fa-solid.fa-star {
                 color: #ffcc00;
             }
         }
+        i {
+            font-size: 30px;
+        }
     }
 `;
 
 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
@@ -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
@@ -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
@@ -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
@@ -110,6 +110,7 @@ const GamePage = () => {
             if (reviewEdit === true) {
                 const data = await putReview(myReview.reviewId, {
                     reviewContent: reviewText,
+                    star: star,
                 });
                 if (data.status === 200) {
                     alert("리뷰 수정 완료");