Feat/#492 가수 검색 기능을 구현한다.

frontend/.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    'storybook-addon-react-router-v6',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -15,6 +16,9 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+
+  staticDirs: ['../public'],
+
   webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.plugins = [

frontend/.storybook/preview.tsx

@@ -1,24 +1,101 @@
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import type { Preview } from '@storybook/react';
 import GlobalStyles from '../src/shared/styles/GlobalStyles';
 import { ThemeProvider } from 'styled-components';
 import theme from '../src/shared/styles/theme';
+import { BrowserRouter } from 'react-router-dom';
+import AuthProvider from '@/features/auth/components/AuthProvider';
+import LoginPopupProvider from '@/features/auth/hooks/LoginPopUpContext';
+import handlers from '@/mocks/handlers';
+
+const customViewport = {
+  xxl: {
+    name: 'xxl',
+    styles: {
+      width: '1440px',
+      height: '1080px',
+    },
+  },
+
+  xl: {
+    name: 'xl',
+    styles: {
+      width: '1280px',
+      height: '720px',
+    },
+  },
+
+  lg: {
+    name: 'lg',
+    styles: {
+      width: '1024px',
+      height: '720px',
+    },
+  },
+
+  md: {
+    name: 'md',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
+
+  sm: {
+    name: 'sm',
+    styles: {
+      width: '640px',
+      height: '768px',
+    },
+  },
+
+  xs: {
+    name: 'xs',
+    styles: {
+      width: '420px',
+      height: '768px',
+    },
+  },
+
+  xxs: {
+    name: 'xxs',
+    styles: {
+      width: '380px',
+      height: '768px',
+    },
+  },
+};
+
+initialize();
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    viewport: { viewports: customViewport, defaultViewport: 'xs' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    msw: {
+      handlers: [...handlers],
+    },
   },
+  loaders: [mswLoader],
+
   decorators: [
     (Story) => (
-      <ThemeProvider theme={theme}>
-        <GlobalStyles />
-        <Story />
-      </ThemeProvider>
+      <AuthProvider>
+        <LoginPopupProvider>
+          <ThemeProvider theme={theme}>
+            <BrowserRouter>
+              <GlobalStyles />
+              <Story />
+            </BrowserRouter>
+          </ThemeProvider>
+        </LoginPopupProvider>
+      </AuthProvider>
     ),
   ],
 };

frontend/package.json

@@ -59,10 +59,12 @@
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "msw": "^1.2.3",
+    "msw-storybook-addon": "^1.9.0",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^3.0.0",
     "react-refresh": "^0.14.0",
     "storybook": "^7.0.27",
+    "storybook-addon-react-router-v6": "^2.0.7",
     "stylelint": "^15.10.2",
     "stylelint-config-clean-order": "^5.0.1",
     "ts-jest": "^29.1.1",

frontend/src/features/auth/components/AuthProvider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 import accessTokenStorage from '@/shared/utils/accessTokenStorage';
 import parseJWT from '../utils/parseJWT';
+import type { PropsWithChildren } from 'react';
 
 interface User {
   memberId: number;
@@ -23,7 +24,7 @@ export const useAuthContext = () => {
 
 const AuthContext = createContext<AuthContextProps | null>(null);
 
-const AuthProvider = ({ children }: { children: React.ReactElement[] }) => {
+const AuthProvider = ({ children }: PropsWithChildren) => {
   const [accessToken, setAccessToken] = useState(accessTokenStorage.getToken() || '');
 
   const user: User | null = useMemo(() => {

frontend/src/features/auth/hooks/LoginPopUpContext.tsx

@@ -12,7 +12,7 @@ const LoginPopUpContext = createContext<LoginPopUpContextProps | null>(null);
 export const useLoginPopup = () => {
   const contextValue = useContext(LoginPopUpContext);
 
-  if (contextValue === null) throw new Error('AuthContext가 null입니다.');
+  if (contextValue === null) throw new Error('LoginPopUpContext에 값이 제공되지 않았습니다.');
 
   return contextValue;
 };

frontend/src/features/search/components/SearchBar.stories.tsx

@@ -0,0 +1,15 @@
+import Header from '@/shared/components/Layout/Header';
+import SearchBar from './SearchBar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: SearchBar,
+  title: 'SearchBar',
+} satisfies Meta<typeof SearchBar>;
+
+export default meta;
+type Story = StoryObj<typeof SearchBar>;
+
+export const Default: Story = {
+  render: () => <Header />,
+};