feat: 블러처리 된 피드백에서 작성 페이지로 리다이렉트

woowacourse-teams · Nov 3, 2024 · 0934ae2 · 0934ae2
1 parent 4811915
commit 0934ae2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/frontend/src/@types/reviewer.ts b/frontend/src/@types/reviewer.ts
@@ -2,6 +2,6 @@ export interface ReviewerInfo {
   userId: number;
   username: string;
   link: string;
-  isReviewed: boolean;
+  isReviewed?: boolean;
   isWrited: boolean;
 }
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -6,6 +6,7 @@ import { Textarea } from "@/components/common/textarea/Textarea";
 import EvaluationPointBar from "@/components/feedback/evaluationPointBar/EvaluationPointBar";
 import * as S from "@/components/feedback/feedbackCard/FeedbackCard.style";
 import { FeedbackCardData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 
@@ -28,6 +29,23 @@ const FeedbackCard = ({
     return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
   };
 
+  const reviewer: ReviewerInfo = {
+    userId: feedbackCardData.receiverId,
+    username: feedbackCardData.username,
+    link: feedbackCardData.profile,
+    isWrited: feedbackCardData.isWrited,
+  };
+
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
+    navigate(
+      `/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}/${feedbackCardData.roomId}?username=${feedbackCardData.username}`,
+      {
+        state: { reviewer },
+      },
+    );
+  };
+
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
@@ -38,7 +56,7 @@ const FeedbackCard = ({
             <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
             <Button
               variant={feedbackType ? "primary" : "secondary"}
-              onClick={() => navigate(`/rooms/${feedbackCardData.roomId}`)}
+              onClick={() => handleNavigateFeedbackPage(reviewer)}
             >
               피드백 작성하러가기
             </Button>

diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -23,7 +23,7 @@ const getInitialFormState = (
   feedbackData?: RevieweeFeedbackData,
 ): RevieweeFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,
-  receiverId: reviewee?.userId || 0,
+  receiverId: feedbackData?.receiverId || reviewee?.userId || 0,
   evaluationPoint: feedbackData?.evaluationPoint || 0,
   feedbackKeywords: feedbackData?.feedbackKeywords || [],
   feedbackText: feedbackData?.feedbackText || "",

diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -23,7 +23,7 @@ const getInitialFormState = (
   feedbackData?: ReviewerFeedbackData,
 ): ReviewerFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,
-  receiverId: reviewer?.userId || 0,
+  receiverId: feedbackData?.receiverId || reviewer?.userId || 0,
   evaluationPoint: feedbackData?.evaluationPoint || 0,
   feedbackKeywords: feedbackData?.feedbackKeywords || [],
   feedbackText: feedbackData?.feedbackText || "",

diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -48,7 +48,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
   // 리뷰 및 피드백 여부 버튼 렌더링 함수
   const renderRevieweeButton = (reviewee: ReviewerInfo) => {
     const { buttonText } = getFeedbackType({
-      isReviewed: reviewee.isReviewed,
+      isReviewed: reviewee.isReviewed ?? false,
       isWrited: reviewee.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });

diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -28,7 +28,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   // 피드백 여부 버튼 렌더링 함수
   const renderReviewerButton = (reviewer: ReviewerInfo) => {
     const { buttonText } = getFeedbackType({
-      isReviewed: reviewer.isReviewed,
+      isReviewed: reviewer.isReviewed ?? false,
       isWrited: reviewer.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });