[FE] refactor: 리뷰 상세페이지에서 변경된 API를 연동

frontend/src/components/ReviewCard/index.tsx

@@ -1,15 +1,18 @@
 import GithubLogoIcon from '@/assets/githubLogo.svg';
-import { ReviewInfo } from '@/types';
+import { Category } from '@/types';
 
 import * as S from './styles';
 
-interface ReviewCardProps extends ReviewInfo {
+interface ReviewCardProps {
   projectName: string;
+  createdAt: string;
+  contentPreview: string;
+  categories: Category[];
 }
 
-const ReviewCard = ({ id, projectName, createdAt, contentPreview, keywords }: ReviewCardProps) => {
+const ReviewCard = ({ projectName, createdAt, contentPreview, categories }: ReviewCardProps) => {
   return (
-    <S.Layout data-id={id}>
+    <S.Layout>
       <S.Header>
         <S.HeaderContent>
           <div>
@@ -28,8 +31,8 @@ const ReviewCard = ({ id, projectName, createdAt, contentPreview, keywords }: Re
       <S.Main>
         <span>{contentPreview}</span>
         <S.Keyword>
-          {keywords.map((keyword) => (
-            <div key={keyword.id}>{keyword.content}</div>
+          {categories.map((category) => (
+            <div key={category.optionId}>{category.content}</div>
           ))}
         </S.Keyword>
       </S.Main>

frontend/src/hooks/index.ts

@@ -1,6 +1,6 @@
 export { default as useSidebar } from './useSidebar';
 export { default as useModalClose } from './useModalClose';
 export { default as useGroupAccessCode } from './useGroupAccessCode';
-export { default as useGetReviewList } from './useGetReviewList';
+export { default as useGetReviewList } from './review/useGetReviewList';
 export { default as useGetDetailedReview } from './review/useGetDetailedReview';
 export { default as useSearchParamAndQuery } from './useSearchParamAndQuery';

frontend/src/mocks/mockData/detailedReviewMockData.ts

@@ -5,26 +5,101 @@ export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = {
   memberId: 2,
 };
 
-const ANSWER =
-  '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. ';
+const revieweeName = 'badahertz52';
 
 export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
-  id: 123456,
-  createdAt: new Date('2024-07-16'),
-  revieweeName: 'badahertz52',
+  formId: 1,
+  revieweeName: revieweeName,
   projectName: 'review-me',
-  contents: [
+  createdAt: '2024-05-05',
+  sections: [
     {
-      id: 1,
-      question: '[공개] 동료의 개발 역량 향상을 위해 피드백을 남겨 주세요.',
-      answer: ANSWER,
+      sectionId: 1,
+      header: `💡 ${revieweeName}와 함께 한 기억을 떠올려볼게요.`,
+      questions: [
+        {
+          questionId: 1,
+          required: true,
+          questionType: 'CHECKBOX',
+          content: `프로젝트 기간 동안, ${revieweeName}의 강점이 드러났던 순간을 선택해주세요. (1~2개)`,
+          optionGroup: {
+            optionGroupId: 1,
+            minCount: 1,
+            maxCount: 2,
+            options: [
+              { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력', isChecked: true },
+              { optionId: 2, content: '💡 문제 해결 능력', isChecked: false },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      sectionId: 2,
+      header: '이제 선택한 순간을 바탕으로 리뷰를 작성해볼게요',
+      questions: [
+        {
+          questionId: 2,
+          required: true,
+          questionType: 'CHECKBOX',
+          content: `${revieweeName}에서 어떤 부분이 인상 깊었는지 선택해주세요. (1개 이상)`,
+          optionGroup: {
+            optionGroupId: 1,
+            minCount: 1,
+            maxCount: 3,
+            options: [
+              {
+                optionId: 4,
+                content: '반대 의견을 내더라도 듣는 사람이 기분 나쁘지 않게 이야기해요.',
+                isChecked: true,
+              },
+              { optionId: 5, content: '팀원들의 의견을 잘 모아서 회의가 매끄럽게 진행되도록 해요.', isChecked: true },
+            ],
+          },
+        },
+        {
+          questionId: 3,
+          required: true,
+          questionType: 'TEXT',
+          content: '위에서 선택한 사항에 대해 조금 더 자세히 설명해주세요.',
+          optionGroup: null,
+          hasGuideline: true,
+          guideline: `상황을 자세하게 기록할수록 ${revieweeName}에게 도움이 돼요. OO 덕분에 팀이 원활한 소통을 이뤘거나, 함께 일하면서 배울 점이 있었는지 떠올려 보세요.`,
+          answer: '쑤쑤 쑤퍼노바 인상깊어요',
+        },
+      ],
+    },
+    {
+      sectionId: 3,
+      header: '응원의 한마디를 남겨주세요',
+      questions: [
+        {
+          questionId: 4,
+          required: true,
+          questionType: 'TEXT',
+          content: `앞으로의 성장을 위해서 ${revieweeName}이 어떤 목표를 설정하면 좋을까요?`,
+          optionGroup: null,
+          hasGuideline: true,
+          guideline: `어떤 점을 보완하면 좋을지와 함께 '이렇게 해보면 어떨까?'하는 간단한 솔루션을 제안해봐요.`,
+          answer: '어디까지 성장할려구~?',
+        },
+      ],
+    },
+    {
+      sectionId: 4,
+      header: '응원의 한마디를 남겨주세요',
+      questions: [
+        {
+          questionId: 5,
+          required: false,
+          questionType: 'TEXT',
+          content: `${revieweeName}에게 전하고 싶은 다른 리뷰가 있거나 응원의 말이 있다면 적어주세요.`,
+          optionGroup: null,
+          hasGuideline: false,
+          guideline: null,
+          answer: '응원합니다 화이팅!!',
+        },
+      ],
     },
-
-    { id: 2, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
-    { id: 3, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
-  ],
-  keywords: [
-    { id: 11, content: '친절해요' },
-    { id: 22, content: '이야기를 잘 들어줘요.' },
   ],
 };

frontend/src/mocks/mockData/reviewListMockData.ts

@@ -1,144 +1,115 @@
 import { ReviewList } from '@/types';
 export const REVIEW_LIST: ReviewList = {
   revieweeName: '쑤쑤',
-  projectName: '2024-review-me',
+  projectName: 'review-me',
   reviews: [
     {
-      id: 1,
+      reviewId: 5,
       createdAt: '2024-07-24',
       contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
-      keywords: [
-        { id: 1, content: '친절해요' },
-        { id: 2, content: '호감이에요' },
-        { id: 3, content: '잘 먹어요' },
+      categories: [
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        { optionId: 5, content: '🌱 성장 마인드셋' },
       ],
     },
     {
-      id: 2,
+      reviewId: 2,
       createdAt: '2023-08-29',
-      contentPreview: `하루스터디는 효율적인 공부 방법을 제공하는 학습 진행 도구 서비스입니다. 하루스터디는 목표 설정 단계, 학습 단계, 회고 단계 를 반복하는 학습 사이클을 통해 학습 효율을 끌어올립니다. 하루스터디를 사용하게 되면 '학습을 잘 하는 방법'에 대해서...
-  `,
-      keywords: [
-        { id: 4, content: '시간 약속을 잘 지켜요' },
-        { id: 5, content: '열정 넘쳐요' },
+      contentPreview: `하루스터디는 효율적인 공부 방법을 제공하는 학습 진행 도구 서비스입니다. 하루스터디는 목표 설정 단계, 학습 단계, 회고 단계를 반복하는 학습 사이클을 통해 학습 효율을 끌어올립니다. 하루스터디를 사용하게 되면 '학습을 잘 하는 방법'에 대해서...`,
+      categories: [
+        { optionId: 3, content: '⏰ 시간 관리 능력' },
+        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
       ],
     },
     {
-      id: 3,
+      reviewId: 3,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
       ],
     },
     {
-      id: 4,
+      reviewId: 4,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        { optionId: 2, content: '💡 문제 해결 능력' },
       ],
     },
     {
-      id: 5,
+      reviewId: 5,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        { optionId: 2, content: '💡 문제 해결 능력' },
       ],
     },
     {
-      id: 6,
+      reviewId: 6,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
       ],
     },
     {
-      id: 7,
+      reviewId: 7,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 3, content: '⏰ 시간 관리 능력' },
+        { optionId: 2, content: '💡 문제 해결 능력' },
       ],
     },
     {
-      id: 8,
+      reviewId: 8,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
+        { optionId: 5, content: '🌱 성장 마인드셋' },
       ],
     },
     {
-      id: 9,
+      reviewId: 9,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 2, content: '💡 문제 해결 능력' },
       ],
     },
     {
-      id: 10,
+      reviewId: 10,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        { optionId: 3, content: '⏰ 시간 관리 능력' },
       ],
     },
     {
-      id: 11,
+      reviewId: 11,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        { optionId: 2, content: '💡 문제 해결 능력' },
       ],
     },
     {
-      id: 12,
+      reviewId: 12,
       createdAt: '2021-08-01',
       contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-      keywords: [
-        { id: 6, content: '업무에 헌신적이에요' },
-        { id: 7, content: '협업에 능숙해요' },
+      categories: [
+        { optionId: 4, content: '🌱 성장 마인드셋' },
+        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
       ],
     },
   ],
 };
-
-// export const REVIEW_LIST: ReviewList = {
-//   revieweeName: '쑤쑤',
-//   projectName: 'review me',
-//   reviews: [
-//     {
-//       id: 1,
-//       createdAt: '2024-07-24',
-//       contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
-//       keywords: [
-//         { id: 1, content: '친절해요' },
-//         { id: 2, content: '호감이에요' },
-//         { id: 3, content: '잘 먹어요' },
-//       ],
-//     },
-//     {
-//       id: 221,
-//       createdAt: '2024-07-24',
-//       contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
-//       keywords: [
-//         { id: 1, content: '친절해요' },
-//         { id: 2, content: '호감이에요' },
-//         { id: 3, content: '잘 먹어요' },
-//       ],
-//     },
-//   ],
-// };