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

woowacourse-teams · Nov 8, 2024 · 298b903 · 298b903
2 parents fb8e540 + eb76994
commit 298b903
Show file tree

Hide file tree

Showing 37 changed files with 364 additions and 251 deletions.
diff --git a/frontend/src/@types/feedback.ts b/frontend/src/@types/feedback.ts
@@ -18,6 +18,7 @@ export interface FeedbackCardData {
   readonly feedbackText: string;
   readonly evaluationPoint: 1 | 2 | 3 | 4 | 5;
   readonly isWrited: boolean;
+  readonly link: string;
 }
 
 export interface RevieweeFeedbackData {

diff --git a/frontend/src/@types/review.ts b/frontend/src/@types/review.ts
@@ -0,0 +1,7 @@
+export interface ReviewInfo {
+  userId: number;
+  username: string;
+  link: string; // PR 링크, Comment 링크
+  isReviewed?: boolean;
+  isWrited: boolean; // 피드백 작성 여부
+}
diff --git a/frontend/src/@types/reviewer.ts b/frontend/src/@types/reviewer.ts
diff --git a/frontend/src/apis/reviews.api.ts b/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,

diff --git a/frontend/src/components/common/button/Button.style.ts b/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};
 

diff --git a/frontend/src/components/common/contentSection/ContentSection.style.ts b/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};
 `;
diff --git a/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts b/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};
-  }
 `;
diff --git a/frontend/src/components/common/modal/confirmModal/ConfirmModal.tsx b/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>

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx
@@ -40,6 +40,7 @@ export const 기술적_피드백: Story = {
       그리고 코드 관심사 분리라는 단어를 알고 있어서 대화하기 편했어요 ㅎㅎ.`,
       isWrited: true,
       evaluationPoint: 1,
+      link: "테스트 링크",
     },
     feedbackType: "develop",
   },

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/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: feedbackCardData.link,
     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>
     </>

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx
@@ -51,5 +51,7 @@ export const Default: Story = {
         socialFeedback: socialFeedbackData,
       },
     ],
+    selectedFeedback: 0,
+    handleSelectedFeedback: () => {},
   },
 };
diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
@@ -108,26 +108,23 @@ export const FeedbackMissionPrompt = styled.span<{ $isSelected: boolean }>`
   animation: ${fadeInOut} 2s infinite;
 `;
 
-export const FeedbackMissionInfo = styled.div`
-  display: flex;
-  align-items: start;
-
-  margin-right: 1rem;
+export const FeedbackMissionInfo = styled.div``;
 
+export const FeedbackTitle = styled.span`
   font: ${({ theme }) => theme.TEXT.medium_bold};
   color: ${({ theme }) => theme.COLOR.black};
 `;
 
-export const FeedbackCount = styled.div`
+export const FeedbackCount = styled.span`
+  margin-left: 0.5rem;
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.primary2};
-  border-radius: 6px;
 `;
 
 export const FeedbackKeywordContainer = styled.div`
   overflow: hidden;
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: 1rem;
 `;
 

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx b/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>
@@ -63,12 +55,14 @@ const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardLi
               aria-label={`${feedbackData.length}개의 미션 중 ${index + 1}번째 미션입니다.`}
             >
               <S.FeedbackMissionTitle>
-                <S.FeedbackMissionInfo>{feedback.title}</S.FeedbackMissionInfo>
-                <S.FeedbackCount
-                  aria-label={`총 ${feedback.developFeedback.length + feedback.socialFeedback.length}개의 피드백`}
-                >
-                  ({feedback.developFeedback.length + feedback.socialFeedback.length})
-                </S.FeedbackCount>
+                <S.FeedbackMissionInfo>
+                  <S.FeedbackTitle>{feedback.title}</S.FeedbackTitle>
+                  <S.FeedbackCount
+                    aria-label={`총 ${feedback.developFeedback.length + feedback.socialFeedback.length}개의 피드백`}
+                  >
+                    ({feedback.developFeedback.length + feedback.socialFeedback.length})
+                  </S.FeedbackCount>
+                </S.FeedbackMissionInfo>
                 <S.FeedbackKeywordContainer role="group" aria-label="피드백 키워드">
                   {feedback.roomKeywords.filter((keyword) => keyword.trim() !== "").length > 0 ? (
                     feedback.roomKeywords.map(
@@ -101,6 +95,7 @@ const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardLi
                 </HoverStyledLink>
               )}
             </S.FeedbackMissionWrapper>
+
             <S.FeedbackInfoWrapper
               $isVisible={feedback.roomId === selectedFeedback}
               aria-hidden={feedback.roomId !== selectedFeedback}

diff --git a/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts b/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { EllipsisText } from "@/styles/common";
 
 export const FeedbackContainer = styled.div`
   display: flex;
@@ -22,7 +23,7 @@ export const PageType = styled.p`
   color: ${({ theme }) => theme.COLOR.grey3};
 `;
 
-export const MissionInfoContainer = styled.div`
+export const RoomInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -34,9 +35,33 @@ export const MissionInfoContainer = styled.div`
   box-shadow: ${({ theme }) => theme.BOX_SHADOW.light};
 `;
 
+export const RoomInfoWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 export const PageTitle = styled.p`
+  width: calc(100% - 120px);
   font: ${({ theme }) => theme.TEXT.large_bold};
   color: ${({ theme }) => theme.COLOR.black};
+  ${EllipsisText}
+`;
+
+export const PRLink = styled.div`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  font: ${({ theme }) => theme.TEXT.semiSmall};
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const Keywords = styled.div`