Feature: #128

Feature: #128 리뷰 수정, 삭제 에러 관련
TAVE-balak · Mar 11, 2024 · 073621c · 073621c
1 parent a030104
commit 073621c
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 83 deletions.
diff --git a/src/components/MovieModal/MyWrite.js b/src/components/MovieModal/MyWrite.js
@@ -45,16 +45,23 @@ const MyWrite = ({ programId }) => {
     setMyReviews([...myReviews, newReview]); // 이전 리뷰 배열에 새로운 리뷰 추가
   };
 
-  // 리뷰를 삭제하는 함수
-const handleDeleteReview = async (id) => {
-  try {
-    await axios.delete(`http://52.79.200.90:8080/api/v1/review/${id}`);
-    const updatedReviews = myReviews.filter((review) => review.id !== id);
-    setMyReviews(updatedReviews); // 삭제된 리뷰를 제외한 나머지 리뷰로 상태 업데이트
-  } catch (error) {
-    console.error("Deleting review failed", error);
-  }
-};
+  const handleDeleteReview = async (id) => {
+    try {
+      const userConfirmed = window.confirm("리뷰를 삭제하시겠습니까?");
+
+      if (userConfirmed) {
+        // 사용자가 확인을 눌렀을 때만 삭제 작업 수행
+        await axios.delete(`http://52.79.200.90:8080/api/v1/review/${id}`);
+        const updatedReviews = myReviews.filter((review) => review.id !== id);
+        setMyReviews(updatedReviews); // 삭제된 리뷰를 제외한 나머지 리뷰로 상태 업데이트
+      } else {
+        console.log("User canceled deletion.");
+      }
+    } catch (error) {
+      console.error("Deleting review failed", error);
+    }
+  };
+
 
   // 리뷰를 수정하기 위해 편집 상태로 변경하는 함수
   const handleEditClick = (id) => {
@@ -64,6 +71,7 @@ const handleDeleteReview = async (id) => {
 
  // 수정 중인 리뷰를 저장하고 편집 상태를 종료하는 함수
 const handleEditReview = async (id, editedReview) => {
+  // const accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsImV4cCI6MTcwOTk3NjQ3MCwiZW1haWwiOiJtYXR0bmF2ZXJAZ21haWwuY29tIn0.kWUZjTMbqP6YzKsfnkJJvR_Dt0JkgX6-5uixemDDsPszzY1WbispSlo898lFTNnJqoTkzV_IEhm6IWjb0nnAJA";
   try {
     // API 요청을 통해 리뷰 수정
     await axios.put(`http://52.79.200.90:8080/api/v1/review/${id}`, {
@@ -92,40 +100,43 @@ const handleEditReview = async (id, editedReview) => {
         <WriteReview handleWriteReviewSubmit={handleWriteReviewSubmit} />
 
         {/* 이전에 작성한 리뷰 리스트 */}
-        {myReviews.map((review) => (
-          <div key={review.id} className="my-review">
-            <ReviewItem
-              author={review.author}
-              profileimg={review.profileimg}
-              movie={review.movie}
-              tag={review.tag}
-              content={editReview && editReview.id === review.id ? (
-                <div>
-                  <input
-                    type="text"
-                    value={editReview.content}
-                    onChange={(e) =>
-                      setEditReview({ ...editReview, content: e.target.value })
-                    }
-                  />
-                  <button onClick={() => handleEditReview(editReview.id, editReview)}>
-                    저장
-                  </button>
-                </div>
-              ) : (
-                review.content
-              )}
-              created_date={review.created_date}
-              evaluation={review.evaluation}
-              favorite={review.favorite}
-              id={review.id}
+        // 리뷰 항목을 렌더링하는 부분
+{myReviews.map((review) => (
+  <div key={review.id} className="my-review">
+    <ReviewItem
+      author={review.author}
+      profileimg={review.profileimg}
+      movie={review.movie}
+      tag={review.tag}
+      content={
+        editReview && editReview.id === review.id ? (
+          <div>
+            <textarea
+              value={editReview.content}
+              onChange={(e) =>
+                setEditReview({ ...editReview, content: e.target.value })
+              }
             />
-            <div className="review-buttons">
-              <button onClick={() => handleDeleteReview(review.id)}>삭제</button>
-              <button onClick={() => handleEditClick(review.id)}>수정</button>
-            </div>
+            <button onClick={() => handleEditReview(editReview.id, editReview)}>
+              저장
+            </button>
           </div>
-        ))}
+        ) : (
+          review.content
+        )
+      }
+      created_date={review.created_date}
+      evaluation={review.evaluation}
+      favorite={review.favorite}
+      id={review.id}
+    />
+    <div className="review-buttons">
+      <button onClick={() => handleDeleteReview(review.id)}>삭제</button>
+      <button onClick={() => handleEditClick(review.id)}>수정</button>
+    </div>
+  </div>
+))}
+
       </div>
     </div>
   );

diff --git a/src/components/MovieModal/ReviewItem.js b/src/components/MovieModal/ReviewItem.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import axios from "axios"; // axios import
 import "./DetailReview.css";
 import star from "./star1.png";
 import thumb from "./thumb_up.png";
@@ -9,67 +10,93 @@ const ReviewItem = ({
   like,
   localDateTime,
   ratings,
-  reviewId,
   reviewTagNames,
   userNickName,
   userPosterPath,
 }) => {
-  const [likes, setLikes] = useState(like); // 좋아요 개수를 상태로 관리
-  const handleLike = () => {
-    setLikes(likes + 1); // 좋아요 개수를 1 증가시킴
-    // TODO: 서버에 좋아요 개수 업데이트 요청 등의 로직 추가 가능
+  const [likes, setLikes] = useState(like);
+  const [content, setContent] = useState(contents); // 컨텐츠 상태 관리
+
+  const handleLike = async () => {
+    // 예시 URL 및 메소드, 실제 구현에 맞게 조정해야 함
+    try {
+      const response = await axios.post(`http://52.79.200.90:8080/api/v1/review/${id}/like`);
+      if (response.status === 200) {
+        setLikes(likes + 1); // 성공 응답 시에만 좋아요 수 증가
+      }
+    } catch (error) {
+      console.error("좋아요 업데이트 실패:", error);
+    }
   };
 
+  // 올바른 삭제 버튼 이벤트 핸들러 코드
+  const handleDelete = async (reviewId) => {
+    const accessToken =  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsImV4cCI6MTcwOTk3NjQ3MCwiZW1haWwiOiJtYXR0bmF2ZXJAZ21haWwuY29tIn0.kWUZjTMbqP6YzKsfnkJJvR_Dt0JkgX6-5uixemDDsPszzY1WbispSlo898lFTNnJqoTkzV_IEhm6IWjb0nnAJA"
+    if (window.confirm("리뷰를 정말 삭제하시겠습니까?")) {
+      try {
+        await axios.delete(`http://52.79.200.90:8080/api/v1/review/${reviewId}`, {
+          headers: {
+            'Authorization': `Bearer ${accessToken}`, // accessToken 변수에 담긴 값을 사용
+          },
+        });
+        // 삭제 후 UI 처리는 부모 컴포넌트에서 수행해야 함
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  const handleEdit = async () => {
+    const newContents = prompt("리뷰 내용을 수정하세요", content);
+    const accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBY2Nlc3NUb2tlbiIsImV4cCI6MTcwOTk3NjQ3MCwiZW1haWwiOiJtYXR0bmF2ZXJAZ21haWwuY29tIn0.kWUZjTMbqP6YzKsfnkJJvR_Dt0JkgX6-5uixemDDsPszzY1WbispSlo898lFTNnJqoTkzV_IEhm6IWjb0nnAJA"
+    if (newContents !== null && newContents !== content) {
+      try {
+        await axios.put(
+          `http://52.79.200.90:8080/api/v1/review/${id}`,
+          { contents: newContents },
+          {
+            headers: {
+              'Authorization': `Bearer ${accessToken}`, // accessToken 변수에 담긴 값을 사용
+            },
+          }
+        );
+        setContent(newContents); // 상태 업데이트로 UI 반영
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  // 날짜 처리 로직은 동일하게 유지
   const targetDate = new Date(localDateTime);
   const currentDate = new Date();
   const timeDiff = currentDate - targetDate;
-  // 밀리초를 일로 변환
   const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
 
   let displayDate;
   if (daysDiff < 30) {
-    displayDate = `${daysDiff}일 전`;
+      displayDate = `${daysDiff}일 전`;
   } else if (daysDiff < 365) {
-    const monthsDiff = Math.floor(daysDiff / 30);
-    displayDate = `${monthsDiff}달 전`;
+      const monthsDiff = Math.floor(daysDiff / 30); // 여기로 이동
+      displayDate = `${monthsDiff}달 전`;
   } else {
-    const yearsDiff = Math.floor(daysDiff / 365);
-    displayDate = `${yearsDiff}년 전`;
+      const yearsDiff = Math.floor(daysDiff / 365); // 여기로 이동
+      displayDate = `${yearsDiff}년 전`;
   }
 
   return (
     <div className="ReviewItem" style={{ backgroundColor: "var(--neutral2)" }}>
-      <div className="reviewInfo">
-        <div className="writerInfo">
-          <img
-            src={userPosterPath}
-            className="writer_profile"
-            alt="프로필 이미지"
-          ></img>
-          <span className="writer">{userNickName}님의 평가</span>
-        </div>
-        <span className="writeDate">{displayDate}</span>
+      {/* 기존 UI 코드 유지 */}
+      <div className="reviewContent">{content}</div>
+      <div className="reviewActions">
+        <button onClick={handleEdit}>수정</button>
+        <button onClick={() => handleDelete(id)}>삭제</button>
       </div>
-
-      <div className="reviewMain">
-        <div className="reviewPick">
-          <img src={star} className="star" alt="별점"></img>
-          <span className="reviewNum">{ratings}</span>
-          <div className="tags">
-            {reviewTagNames.map((tag, index) => (
-              <span key={index} className={`tag_${index + 1}`}>
-                {tag}
-              </span>
-            ))}
-          </div>
-        </div>
-        <div className="reviewContent">{contents}</div>
-        <div className="reviewFavorite">
-          <button onClick={handleLike}>
-            <img src={thumb} className="reviewthumb" alt="좋아요"></img>
-          </button>
-          <span className="thumbNum">{likes}</span>
-        </div>
+      <div className="reviewFavorite">
+        <button onClick={handleLike}>
+          <img src={thumb} className="reviewthumb" alt="좋아요"></img>
+        </button>
+        <span className="thumbNum">{likes}</span>
       </div>
     </div>
   );