feat: 리뷰 목록 페이지에서 msw를 사용하여 모킹

Co-Authored-By: badahertz52 <[email protected]> Co-Authored-By: ImxYJL <[email protected]> Co-Authored-By: Fe <[email protected]>
woowacourse-teams · Jul 25, 2024 · 01b916b · 01b916b
1 parent ee51a36
commit 01b916b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 78 deletions.
diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts
@@ -1,10 +1,10 @@
 const endPoint = {
-  postingReview: `${process.env.API_BASE_URL}/reviews`,
+  postingReview: `${process.env.API_BASE_URL}reviews`,
   gettingDetailedReview: (reviewId: number, memberId: number) =>
     `${process.env.API_BASE_URL}reviews/${reviewId}?memberId=${memberId}`,
   gettingDataToWriteReview: (reviewerGroupId: number) => `${process.env.API_BASE_URL}reviews/write/${reviewerGroupId}`,
   gettingReviewList: (revieweeId: number, lastReviewId: number, memberId: number) =>
-    `${process.env.API_BASE_URL}/reviews?revieweeId=${revieweeId}&lastReviewId=${lastReviewId}&memberId=${memberId}`,
+    `${process.env.API_BASE_URL}reviews?revieweeId=${revieweeId}&lastReviewId=${lastReviewId}&memberId=${memberId}`,
 };
 
 export default endPoint;
diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts
@@ -60,20 +60,17 @@ export const getReviewListApi = async ({
   lastReviewId: number;
   memberId: number;
 }) => {
-  const response = await fetch(
-    `/api/reviews?revieweeId=${revieweeId}&lastReviewId=${lastReviewId}&memberId=${memberId}`,
-    {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+  const response = await fetch(endPoint.gettingReviewList(revieweeId, lastReviewId, memberId), {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
     },
-  );
+  });
 
   if (!response.ok) {
     throw new Error('리뷰 리스트를 불러오는 데 실패했습니다.');
   }
-
+  console.log(response);
   const data = await response.json();
   return data;
 };
diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts
@@ -3,6 +3,7 @@ import { http, HttpResponse } from 'msw';
 import endPoint from '@/apis/endpoints';
 
 import { DETAILED_REVIEW_MOCK_DATA } from '../mockData/detailedReviewMockData';
+import { REVIEW_PREVIEW_LIST } from '../mockData/reviewPreviewList';
 import { REVIEW_WRITING_DATA } from '../mockData/reviewWritingData';
 
 const getDetailedReview = () =>
@@ -15,6 +16,11 @@ const getDataToWriteReview = () =>
     return HttpResponse.json(REVIEW_WRITING_DATA);
   });
 
-const reviewHandler = [getDetailedReview(), getDataToWriteReview()];
+const getReviewPreviewList = () =>
+  http.get(endPoint.gettingReviewList(1, 3, 1), async ({ request }) => {
+    return HttpResponse.json(REVIEW_PREVIEW_LIST);
+  });
+
+const reviewHandler = [getDetailedReview(), getReviewPreviewList(), getDataToWriteReview()];
 
 export default reviewHandler;
diff --git a/frontend/src/mocks/mockData/reviewPreviewList.ts b/frontend/src/mocks/mockData/reviewPreviewList.ts
@@ -0,0 +1,54 @@
+import { ReviewPreview } from '@/types';
+
+export const REVIEW_PREVIEW_LIST: { reviews: ReviewPreview[] } = {
+  reviews: [
+    {
+      id: 1,
+      isPublic: true,
+      reviewerGroup: {
+        id: 1,
+        name: '2024-review-me',
+        thumbnailUrl: '',
+      },
+      createdAt: '2024-07-24',
+      contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
+      keywords: [
+        { id: 1, content: '친절해요' },
+        { id: 2, content: '호감이에요' },
+        { id: 3, content: '잘 먹어요' },
+      ],
+    },
+    {
+      id: 2,
+      isPublic: false,
+      reviewerGroup: {
+        id: 2,
+        name: '2023-haru-study',
+        thumbnailUrl: '',
+      },
+      createdAt: '2023-08-29',
+      contentPreview: `하루스터디는 효율적인 공부 방법을 제공하는 학습 진행 도구 서비스입니다. 하루스터디는 목표 설정 단계, 학습 단계, 회고 단계 를 반복하는 학습 사이클을 통해 학습 효율을 끌어올립니다. 하루스터디를 사용하게 되면 '학습을 잘 하는 방법'에 대해서...
+  
+  `,
+      keywords: [
+        { id: 4, content: '시간 약속을 잘 지켜요' },
+        { id: 5, content: '열정 넘쳐요' },
+      ],
+    },
+    {
+      id: 3,
+      isPublic: true,
+      reviewerGroup: {
+        id: 3,
+        name: '2021-zzimkkong',
+        thumbnailUrl: '',
+      },
+      createdAt: '2021-08-01',
+      contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
+      keywords: [
+        { id: 6, content: '업무에 헌신적이에요' },
+        { id: 7, content: '협업에 능숙해요' },
+      ],
+    },
+  ],
+};
diff --git a/frontend/src/pages/ReviewPreviewListPage/index.tsx b/frontend/src/pages/ReviewPreviewListPage/index.tsx
@@ -11,57 +11,6 @@ import * as S from './styles';
 const USER_SEARCH_PLACE_HOLDER = '레포지토리명을 검색하세요.';
 const options = ['최신순', '오래된순'];
 
-const mockReviewPreviews: ReviewPreview[] = [
-  {
-    id: 1,
-    isPublic: true,
-    reviewerGroup: {
-      id: 1,
-      name: '2024-review-me',
-      thumbnailUrl: '',
-    },
-    createdAt: '2024-07-24',
-    contentPreview: `물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
-    keywords: [
-      { id: 1, content: '친절해요' },
-      { id: 2, content: '호감이에요' },
-      { id: 3, content: '잘 먹어요' },
-    ],
-  },
-  {
-    id: 2,
-    isPublic: false,
-    reviewerGroup: {
-      id: 2,
-      name: '2023-haru-study',
-      thumbnailUrl: '',
-    },
-    createdAt: '2023-08-29',
-    contentPreview: `하루스터디는 효율적인 공부 방법을 제공하는 학습 진행 도구 서비스입니다. 하루스터디는 목표 설정 단계, 학습 단계, 회고 단계 를 반복하는 학습 사이클을 통해 학습 효율을 끌어올립니다. 하루스터디를 사용하게 되면 '학습을 잘 하는 방법'에 대해서...
-
-`,
-    keywords: [
-      { id: 4, content: '시간 약속을 잘 지켜요' },
-      { id: 5, content: '열정 넘쳐요' },
-    ],
-  },
-  {
-    id: 3,
-    isPublic: true,
-    reviewerGroup: {
-      id: 3,
-      name: '2021-zzimkkong',
-      thumbnailUrl: '',
-    },
-    createdAt: '2021-08-01',
-    contentPreview: `공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
-    keywords: [
-      { id: 6, content: '업무에 헌신적이에요' },
-      { id: 7, content: '협업에 능숙해요' },
-    ],
-  },
-];
-
 const ReviewPreviewListPage = () => {
   const [reviews, setReviews] = useState<ReviewPreview[]>([]);
   const [loading, setLoading] = useState(true);
@@ -72,7 +21,7 @@ const ReviewPreviewListPage = () => {
   useEffect(() => {
     const fetchReviews = async () => {
       try {
-        const data = await getReviewListApi({ revieweeId: 1, lastReviewId: 4, memberId: 4 });
+        const data = await getReviewListApi({ revieweeId: 1, lastReviewId: 3, memberId: 1 });
         setReviews(data.reviews);
         setLoading(false);
       } catch (error) {
@@ -93,19 +42,7 @@ const ReviewPreviewListPage = () => {
       <S.Layout>
         <SearchSection onChange={() => {}} options={options} placeholder={USER_SEARCH_PLACE_HOLDER} />
         <S.ReviewSection>
-          {mockReviewPreviews.map((item) => (
-            <div key={item.id} onClick={() => handleReviewClick(item.id)}>
-              <ReviewPreviewCard
-                key={item.id}
-                reviewerGroup={item.reviewerGroup}
-                createdAt={item.createdAt}
-                contentPreview={item.contentPreview}
-                keywords={item.keywords}
-                isPublic={item.isPublic}
-              />
-            </div>
-          ))}
-          {/* {loading && <p>로딩 중...</p>}
+          {loading && <p>로딩 중...</p>}
           {error && <p>{error}</p>}
           {!loading &&
             !error &&
@@ -120,7 +57,7 @@ const ReviewPreviewListPage = () => {
                   isPublic={item.isPublic}
                 />
               </div>
-            ))} */}
+            ))}
         </S.ReviewSection>
       </S.Layout>
     </>