refactor: 리뷰 상세 페이지 데이터 타입 변경에 따른 수정

woowacourse-teams · Aug 1, 2024 · 52f8de6 · 52f8de6
1 parent 3032874
commit 52f8de6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -17,20 +17,19 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
   id: 123456,
   createdAt: new Date('2024-07-16'),
   revieweeName: 'badahertz52',
-  isPublic: false,
-  reviewerGroup: {
-    id: 123456,
-    name: 'review-me',
-    description: '',
-    thumnailUrl: '',
-  },
-  reviews: [
+  projectName: 'review-me',
+  contents: [
     {
+      id: 1,
       question: '[공개] 동료의 개발 역량 향상을 위해 피드백을 남겨 주세요.',
       answer: ANSWER,
     },
-    { question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
-    { question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+
+    { id: 2, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
+    { id: 3, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+  ],
+  keywords: [
+    { id: 11, detail: '친절해요' },
+    { id: 22, detail: '이야기를 잘 들어줘요.' },
   ],
-  keywords: ['친절해요', '친절합니다!', '친절해요요요요요', '친절해해해해해', '친절해요요용'],
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -1,9 +1,11 @@
+import { DetailReviewKeyword } from '@/types';
+
 import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
 
 interface KeywordSectionProps {
-  keywords: string[];
+  keywords: DetailReviewKeyword[];
   index: number;
 }
 const KEY_WORD_HEADER = '키워드';
@@ -13,8 +15,8 @@ const KeywordSection = ({ keywords, index }: KeywordSectionProps) => {
     <S.KeywordSection>
       <ReviewSectionHeader number={index + 1} text={KEY_WORD_HEADER} />
       <S.KeywordContainer>
-        {keywords.map((keyword) => (
-          <S.KeywordBox key={keyword}>{keyword}</S.KeywordBox>
+        {keywords.map(({ id, detail }) => (
+          <S.KeywordBox key={id}>{detail}</S.KeywordBox>
         ))}
       </S.KeywordContainer>
     </S.KeywordSection>

diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx
@@ -30,17 +30,17 @@ const DetailedReviewPage = () => {
   return (
     <S.DetailedReviewPage>
       <ReviewDescription
-        projectName={detailedReview.reviewerGroup.name}
+        projectName={detailedReview.projectName}
         date={new Date(detailedReview.createdAt)}
         revieweeName={detailedReview.revieweeName}
         isPublic={true}
         handleClickToggleButton={() => console.log('click toggle ')}
       />
       {/* 시연 때 숨김 <RevieweeComments comment={detailedReview.reviewerGroup.description} /> */}
-      {detailedReview.reviews.map((item, index) => (
-        <ReviewSection question={item.question} answer={item.answer} key={index} index={index} />
+      {detailedReview.contents.map(({ id, question, answer }, index) => (
+        <ReviewSection key={id} question={question} answer={answer} index={index} />
       ))}
-      <KeywordSection keywords={detailedReview.keywords} index={detailedReview.reviews.length} />
+      <KeywordSection keywords={detailedReview.keywords} index={detailedReview.contents.length} />
     </S.DetailedReviewPage>
   );
 };

diff --git a/frontend/src/types/review.ts b/frontend/src/types/review.ts
@@ -9,22 +9,22 @@ export interface ReviewItem {
 }
 
 export interface DetailReviewContent {
+  id: number;
   question: string;
   answer: string;
 }
+// NOTE: 3차-1주차 시현 시 리뷰 상세페이지 API 데이터의 형식이 변경되었는데, keyword부분이 다를 데이터에서 어떻게 변경될 지 몰라서 리뷰 상세페이지의 키워드만을 위한 타입을 따로 만들었어요.
+export interface DetailReviewKeyword {
+  id: number;
+  detail: string;
+}
 export interface DetailReviewData {
   id: number;
   createdAt: Date;
+  projectName: string;
   revieweeName: string;
-  isPublic: boolean;
-  reviewerGroup: {
-    id: number;
-    name: string;
-    description: string;
-    thumnailUrl: string;
-  };
-  reviews: DetailReviewContent[];
-  keywords: string[];
+  contents: DetailReviewContent[];
+  keywords: DetailReviewKeyword[];
 }
 
 // api