Merge branch 'main' of https://github.com/woowacourse-teams/2023-yozm…

…-cafe into refactor/544-test-performance

client/.babelrc.js

@@ -0,0 +1,16 @@
+import ReactFreshBabelPlugin from 'react-refresh/babel';
+
+/** @type {import('@babel/core').TransformOptions} */
+export default {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.NODE_ENV === 'development',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [process.env.NODE_ENV === 'development' && false && ReactFreshBabelPlugin].filter(Boolean),
+};

client/.npmrc

@@ -0,0 +1,3 @@
+engine-strict = true
+install-strategy = linked
+prefer-offline = true

client/.nvmrc

@@ -0,0 +1 @@
+v18.16.0

client/.storybook/main.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
+    options: {
+      fastRefresh: true,
+    },
   },
   docs: {
     autodocs: 'tag',

client/.storybook/preview.tsx

@@ -1,11 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
+import { AuthProvider } from '../src/context/AuthContext';
+import handlers from '../src/mocks/handlers';
 import GlobalStyle from '../src/styles/GlobalStyle';
 import ResetStyle from '../src/styles/ResetStyle';
 import theme from '../src/styles/theme';
 
+initialize();
+
 const customViewports = {
   Default: {
     name: 'Default',
@@ -16,6 +22,14 @@ const customViewports = {
   },
 };
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      suspense: true,
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,19 +43,29 @@ const preview: Preview = {
       viewports: { ...customViewports },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers,
+    },
   },
 
   decorators: [
+    mswDecorator,
     (Story) => (
-      <MemoryRouter initialEntries={['/']}>
+      <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <ResetStyle />
           <GlobalStyle />
-          <Story />
+          <AuthProvider>
+            <MemoryRouter initialEntries={['/']}>
+              <Story />
+            </MemoryRouter>
+          </AuthProvider>
         </ThemeProvider>
-      </MemoryRouter>
+      </QueryClientProvider>
     ),
   ],
+
+  loaders: [mswLoader],
 };
 
 export default preview;

client/.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 import { merge } from 'webpack-merge';
-import defaultConfig from '../webpack.config.js';
+import defaultConfig from '../webpack.development.js';
 
 export default function ({ config }) {
   return merge(defaultConfig, config);

client/index.html

@@ -4,21 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
-    <meta name="theme-color" content="#FFD3D8" />
-
-    <meta name="apple-mobile-web-app-title" content="요즘카페" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="#FFD3D8" />
-    <link rel="apple-touch-icon" sizes="128x128" href="/assets/ios.png" />
-    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="ios.png" />
+    <title>요즘카페</title>
 
     <meta property="og:title" content="요즘카페" />
     <meta property="og:url" content="https://yozm.cafe/" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/assets/thumbnail-image.png" />
     <meta property="og:description" content="트렌디한 성수 지역의 카페를 손쉽게 탐색하는 서비스, 요즘카페" />
-
-    <title>요즘카페</title>
   </head>
   <body>
     <div id="root"></div>