[FE] 3주차 운영 피드백 반영 - 1(#717)

frontend/src/@types/review.ts

@@ -0,0 +1,7 @@
+export interface ReviewInfo {
+  userId: number;
+  username: string;
+  link: string; // PR 링크, Comment 링크
+  isReviewed?: boolean;
+  isWrited: boolean; // 피드백 작성 여부
+}

frontend/src/apis/reviews.api.ts

@@ -1,9 +1,9 @@
-import { ReviewerInfo } from "../@types/reviewer";
+import { ReviewInfo } from "../@types/review";
 import apiClient from "./apiClient";
 import { API_ENDPOINTS } from "./endpoints";
 import MESSAGES from "@/constants/message";
 
-export const getMyReviewers = async (roomId: number): Promise<ReviewerInfo[]> => {
+export const getMyReviewers = async (roomId: number): Promise<ReviewInfo[]> => {
   const res = await apiClient.get({
     endpoint: API_ENDPOINTS.REVIEWERS(roomId),
     errorMessage: MESSAGES.ERROR.GET_MY_REVIEWERS,
@@ -12,7 +12,7 @@ export const getMyReviewers = async (roomId: number): Promise<ReviewerInfo[]> =>
   return res.matchResultResponses;
 };
 
-export const getMyReviewees = async (roomId: number): Promise<ReviewerInfo[]> => {
+export const getMyReviewees = async (roomId: number): Promise<ReviewInfo[]> => {
   const res = await apiClient.get({
     endpoint: API_ENDPOINTS.REVIEWEES(roomId),
     errorMessage: MESSAGES.ERROR.GET_MY_REVIEWEES,

frontend/src/components/common/button/Button.style.ts

@@ -68,7 +68,7 @@ const sizeStyles = {
   xSmall: css`
     width: fit-content;
     max-width: 120px;
-    padding: 1rem 0.5rem;
+    padding: 1rem 0.3rem;
 
     font: ${({ theme }) => theme.TEXT.semiSmall};
 

frontend/src/components/common/contentSection/ContentSection.style.ts

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const ContentSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
 `;
 
 export const ContentSectionHeader = styled.div`
@@ -25,6 +25,6 @@ export const ContentSectionTitle = styled.h2`
 `;
 
 export const ContentSectionSubtitle = styled.h3`
-  font: ${({ theme }) => theme.TEXT.medium_bold};
+  font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
 `;

frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts

@@ -16,10 +16,4 @@ export const ConfirmModalContainer = styled.div`
 export const ButtonWrapper = styled.div`
   display: flex;
   justify-content: space-evenly;
-
-  .cancel-button {
-    color: ${({ theme }) => theme.COLOR.primary2};
-    background-color: ${({ theme }) => theme.COLOR.white};
-    border: 2px solid ${({ theme }) => theme.COLOR.primary2};
-  }
 `;

frontend/src/components/common/modal/confirmModal/ConfirmModal.tsx

@@ -21,10 +21,10 @@ const ConfirmModal = ({
       <S.ConfirmModalContainer>
         {rest.children}
         <S.ButtonWrapper>
-          <Button size="small" onClick={rest.onCancel} className="cancel-button">
+          <Button size="small" onClick={rest.onCancel} outline={true}>
             {cancelButtonText}
           </Button>
-          <Button size="small" onClick={rest.onConfirm} className="confirm-button">
+          <Button size="small" onClick={rest.onConfirm}>
             {confirmButtonText}
           </Button>
         </S.ButtonWrapper>

frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx

@@ -6,7 +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 { ReviewInfo } from "@/@types/review";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 
@@ -29,15 +29,15 @@ const FeedbackCard = ({
     return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
   };
 
-  const reviewInfo: ReviewerInfo = {
+  const reviewInfo: ReviewInfo = {
     userId: feedbackCardData.receiverId,
     username: feedbackCardData.username,
-    link: feedbackCardData.profile,
+    link: "", //TODO: 서버로부터 받은 PR 링크, comment 링크 넘겨주어야 함
     isWrited: feedbackCardData.isWrited,
   };
 
-  // 피드백 페이지 이동 함수
-  const handleNavigateFeedbackPage = () => {
+  // [받은 피드백] 상대 피드백 작성 페이지 이동 함수
+  const handleNavigateUserFeedbackPage = () => {
     navigate(
       `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}?username=${feedbackCardData.username}`,
       {
@@ -46,6 +46,16 @@ const FeedbackCard = ({
     );
   };
 
+  // [쓴 피드백] 내가 쓴 피드백 수정 페이지 이동 함수
+  const handleNavigateMyFeedbackPage = () => {
+    navigate(
+      `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewee" : "reviewer"}?username=${feedbackCardData.username}`,
+      {
+        state: { reviewInfo },
+      },
+    );
+  };
+
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
@@ -57,7 +67,7 @@ const FeedbackCard = ({
               <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
               <Button
                 variant={feedbackType === "develop" ? "primary" : "secondary"}
-                onClick={handleNavigateFeedbackPage}
+                onClick={handleNavigateUserFeedbackPage}
               >
                 피드백 작성하러가기
               </Button>
@@ -72,6 +82,7 @@ const FeedbackCard = ({
               <S.FeedbackTitle>{feedbackCardData.username}</S.FeedbackTitle>
             </S.FeedbackProfile>
           </HoverStyledLink>
+
           <S.FeedbackType $isTypeDevelop={feedbackType === "develop"}>
             {feedbackType === "develop" ? (
               <>
@@ -110,15 +121,26 @@ const FeedbackCard = ({
           <S.FeedbackDetailContainer>
             <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
             <Textarea
-              rows={10}
+              rows={7}
               maxLength={2000}
               showCharCount={true}
-              value={
-                feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "미작성"
-              }
-              readOnly
+              placeholder="미작성"
+              value={feedbackCardData.feedbackText}
+              disabled
             />
           </S.FeedbackDetailContainer>
+
+          {selectedFeedbackType === "쓴 피드백" && (
+            <S.ButtonWrapper>
+              <Button
+                onClick={handleNavigateMyFeedbackPage}
+                variant={feedbackType === "develop" ? "primary" : "secondary"}
+                size="small"
+              >
+                수정하기
+              </Button>
+            </S.ButtonWrapper>
+          )}
         </S.FeedbackContent>
       </S.FeedbackCardContainer>
     </>

frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx

@@ -51,5 +51,7 @@ export const Default: Story = {
         socialFeedback: socialFeedbackData,
       },
     ],
+    selectedFeedback: 0,
+    handleSelectedFeedback: () => {},
   },
 };

frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts

@@ -127,7 +127,7 @@ export const FeedbackCount = styled.div`
 export const FeedbackKeywordContainer = styled.div`
   overflow: hidden;
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: 1rem;
 `;
 

frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FeedbackType } from "@/hooks/feedback/useSelectedFeedbackData";
 import Carousel from "@/components/common/carousel/Carousel";
 import Label from "@/components/common/label/Label";
@@ -12,24 +12,16 @@ import { theme } from "@/styles/theme";
 interface FeedbackCardListProps {
   selectedFeedbackType: FeedbackType;
   feedbackData: FeedbackCardDataList[];
+  selectedFeedback: number | undefined;
+  handleSelectedFeedback: (roomId: number) => void;
 }
 
-const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardListProps) => {
-  const [selectedFeedback, setSelectedFeedback] = useState<number>();
-
-  const handleSelectedFeedback = (roomId: number) => {
-    if (selectedFeedback === roomId) {
-      setSelectedFeedback(undefined);
-      return;
-    }
-
-    setSelectedFeedback(roomId);
-  };
-
-  useEffect(() => {
-    setSelectedFeedback(undefined);
-  }, [feedbackData]);
-
+const FeedbackCardList = ({
+  selectedFeedbackType,
+  feedbackData,
+  selectedFeedback,
+  handleSelectedFeedback,
+}: FeedbackCardListProps) => {
   if (feedbackData.length === 0) {
     return (
       <S.EmptyContainer>

frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx

@@ -6,20 +6,20 @@ import Label from "@/components/common/label/Label";
 import RevieweeFeedbackForm from "@/components/feedback/feedbackForm/RevieweeFeedbackForm";
 import * as S from "@/components/feedback/feedbackLayout/FeedbackLayout.style";
 import { RevieweeFeedbackData } from "@/@types/feedback";
-import { ReviewerInfo } from "@/@types/reviewer";
+import { ReviewInfo } from "@/@types/review";
 import { RoomInfo } from "@/@types/roomInfo";
 import { theme } from "@/styles/theme";
 import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface RevieweeFeedbackProps {
   feedbackPageType: FeedbackPageType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewee?: ReviewerInfo;
+  reviewee?: ReviewInfo;
   feedbackData?: RevieweeFeedbackData;
 }
 
 const getInitialFormState = (
-  reviewee?: ReviewerInfo,
+  reviewee?: ReviewInfo,
   feedbackData?: RevieweeFeedbackData,
 ): RevieweeFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,

frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx

@@ -6,20 +6,20 @@ import Label from "@/components/common/label/Label";
 import ReviewerFeedbackForm from "@/components/feedback/feedbackForm/ReviewerFeedbackForm";
 import * as S from "@/components/feedback/feedbackLayout/FeedbackLayout.style";
 import { ReviewerFeedbackData } from "@/@types/feedback";
-import { ReviewerInfo } from "@/@types/reviewer";
+import { ReviewInfo } from "@/@types/review";
 import { RoomInfo } from "@/@types/roomInfo";
 import { theme } from "@/styles/theme";
 import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface ReviewerFeedbackProps {
   feedbackPageType: FeedbackPageType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewer?: ReviewerInfo;
+  reviewer?: ReviewInfo;
   feedbackData?: ReviewerFeedbackData;
 }
 
 const getInitialFormState = (
-  reviewer?: ReviewerInfo,
+  reviewer?: ReviewInfo,
   feedbackData?: ReviewerFeedbackData,
 ): ReviewerFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,