[#465] [모임] BookInfoCard 컴포넌트 추상화 (#466)

* feat: BookInfoCard 컴포넌트 추상화

* feat: BookInfoCard story 추가

* fix: storybook-msw-addon 설치, ReactQuery 동작하도록 수정

* refactor: msw path 정규표현식을 사용하여 추출하도록 수정

.github/workflows/chromatic.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Install Dependency
         run: yarn install --immutable
 
+      - name: Set .env
+        run: echo "${{ vars.DEVELOPMENT_ENV }}" > .env.local
+
       - name: Publish Chromatic
         id: chromatic
         uses: chromaui/action@v1

.storybook/preview.tsx

@@ -1,11 +1,45 @@
 import React from 'react';
-
+import { rest } from 'msw';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { Preview } from '@storybook/react';
-import '@/styles/global.css';
 
 import Layout from '../src/v1/layout/Layout';
 import ToastProvider from '../src/v1/base/Toast/ToastProvider';
 
+import '@/styles/global.css';
+
+const nextApi = (path: string) =>
+  new URL(path, process.env.NEXT_HOST).toString();
+
+const serviceApi = (path: string) =>
+  new URL(path, process.env.NEXT_PUBLIC_API_URL).toString();
+
+initialize({}, [
+  rest.get(nextApi('/service-api/*'), async (req, res, ctx) => {
+    const { pathname } = req.url;
+    const match = /\/service-api(?<path>.*)/g.exec(pathname);
+
+    if (!match || !match.groups || !match.groups.path) {
+      return res(ctx.status(404, 'Invalid Request URL'));
+    }
+
+    const { path } = match.groups;
+    const originResponse = await ctx.fetch(serviceApi(`/api${path}`));
+    const originResponseData = await originResponse.json();
+
+    return res(ctx.json({ ...originResponseData }));
+  }),
+]);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -20,13 +54,16 @@ const preview: Preview = {
     },
     layout: 'fullscreen',
   },
+  loaders: [mswLoader],
   decorators: [
     Story => (
-      <ToastProvider>
-        <Layout>
-          <Story />
-        </Layout>
-      </ToastProvider>
+      <QueryClientProvider client={queryClient}>
+        <ToastProvider>
+          <Layout>
+            <Story />
+          </Layout>
+        </ToastProvider>
+      </QueryClientProvider>
     ),
   ],
 };

package.json

@@ -55,6 +55,8 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
     "lint-staged": "^13.1.1",
+    "msw": "1.3.2",
+    "msw-storybook-addon": "^1.10.0",
     "postcss": "^8.4.25",
     "prettier": "^2.8.4",
     "prettier-plugin-tailwindcss": "^0.3.0",
@@ -70,5 +72,8 @@
     ]
   },
   "readme": "ERROR: No README data found!",
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "msw": {
+    "workerDirectory": "public"
+  }
 }

public/icons/index.ts

@@ -32,6 +32,7 @@ export { default as IconComments } from './comments.svg';
 export { default as IconDelete } from './delete.svg';
 export { default as IconMembers } from './members.svg';
 export { default as IconPlus } from './plus.svg';
+export { default as IconBookPlus } from './book-plus.svg';
 
 // 카카오
 export { default as IconKakao } from './kakao.svg';