refactor: msw filtering 기능 구현

woowacourse · Sep 20, 2023 · d9501c1 · d9501c1
1 parent 19dcb2f
commit d9501c1
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 12 deletions.
diff --git a/frontend/src/mocks/db/articles-android.json b/frontend/src/mocks/db/articles-android.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 7,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": false,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 8,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": true,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 9,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": false,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  }
+]
diff --git a/frontend/src/mocks/db/articles-backend.json b/frontend/src/mocks/db/articles-backend.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 4,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": false,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 5,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": true,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 6,
+    "userName": "패트릭",
+    "title": "CORS",
+    "isBookMarked": true,
+    "url": "https://pgccoding.tistory.com/66",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  }
+]
diff --git a/frontend/src/mocks/db/articles-frontend.json b/frontend/src/mocks/db/articles-frontend.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": 1,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 2,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 3,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  }
+]
diff --git a/frontend/src/mocks/db/articles.json b/frontend/src/mocks/db/articles.json
@@ -10,6 +10,24 @@
   },
   {
     "id": 2,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 3,
+    "userName": "해온",
+    "title": "Axios",
+    "isBookMarked": true,
+    "url": "https://hae-on.tistory.com/104",
+    "createdAt": "2023-07-24 18:18",
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 4,
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": false,
@@ -18,7 +36,7 @@
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
-    "id": 3,
+    "id": 5,
     "userName": "패트릭",
     "title": "CORS",
     "isBookMarked": true,
@@ -27,12 +45,39 @@
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   },
   {
-    "id": 4,
+    "id": 6,
     "userName": "패트릭",
     "title": "CORS",
-    "isBookMarked": false,
+    "isBookMarked": true,
     "url": "https://pgccoding.tistory.com/66",
     "createdAt": "2023-07-24 18:18",
     "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 7,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": false,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 8,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": true,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
+  },
+  {
+    "id": 9,
+    "userName": "도밥",
+    "title": "직렬화, 역직렬화는 무엇일까?",
+    "url": "https://think0wise.tistory.com/107",
+    "createdAt": "2023-07-08 16:48",
+    "isBookMarked": false,
+    "imageUrl": "https://plus.unsplash.com/premium_photo-1682088845396-1b310a002302?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJTk1JTg0JUVEJThCJUIwJUVEJTgxJUI0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
   }
 ]
diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
@@ -1,15 +1,18 @@
 import { rest } from 'msw';
 import { BASE_URL } from '../../configs/environment';
 import articles from '../db/articles.json';
+import articlesFrontend from '../db/articles-frontend.json';
+import articlesBackend from '../db/articles-backend.json';
+import articlesAndroid from '../db/articles-android.json';
 import metaOg from '../db/metaog.json';
 import { ArticleType } from '../../models/Article';
 
 const articleUrl = 'https://think0wise.tistory.com/107';
 
 export const articlesHandler = [
-  rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(articles));
-  }),
+  // rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
+  //   return res(ctx.status(200), ctx.json(articles));
+  // }),
 
   rest.get(`${BASE_URL}/meta-og?url=${articleUrl}`, async (req, res, ctx) => {
     const data = metaOg;
@@ -37,13 +40,24 @@ export const articlesHandler = [
     return res(ctx.status(200));
   }),
 
-  rest.get(`${BASE_URL}/articles/`, (req, res, ctx) => {
-    const course = req.url.searchParams.get('course');
-    const onlyBookmarked = req.url.searchParams.get('onlyBookmarked');
+  rest.get(`${BASE_URL}/articles`, (req, res, ctx) => {
+    const course = req.url.searchParams.get('course') ?? 'all';
+    const onlyBookmarked = req.url.searchParams.get('onlyBookmarked') as string;
+
+    const filteredCourse = (course: string) => {
+      if (course === 'all') return articles;
+      if (course === 'frontend') return articlesFrontend;
+      if (course === 'backend') return articlesBackend;
+      if (course === 'android') return articlesAndroid;
+    };
+
+    if (onlyBookmarked === 'false') {
+      return res(ctx.status(200), ctx.json(filteredCourse(course)));
+    }
 
-    const filteredArticle = articles.filter(
-      (article) => onlyBookmarked === String(article.isBookMarked)
-    );
+    const filteredArticle = filteredCourse(course)?.filter((article) => {
+      return onlyBookmarked === String(article.isBookMarked) ? true : false;
+    });
 
     return res(ctx.status(200), ctx.json(filteredArticle));
   }),