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/ResultSheet.tsx

@@ -0,0 +1,122 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import Thumbnail from '@/features/songs/components/Thumbnail';
+import Flex from '@/shared/components/Flex/Flex';
+import ROUTE_PATH from '@/shared/constants/path';
+import type { SingerSearchPreview } from '../types/search';
+
+interface ResultSheetProps {
+  result: SingerSearchPreview[];
+}
+
+const ResultSheet = ({ result }: ResultSheetProps) => {
+  const navigate = useNavigate();
+
+  const hasResult = result.length > 0;
+
+  return (
+    <SheetContainer aria-label="아티스트 검색 결과 미리보기">
+      <SheetTitle $align="center" aria-hidden>
+        아티스트
+      </SheetTitle>
+      <PreviewItemList as="ul" $direction="column" $gap={16}>
+        {result.map(({ id, singer, profileImageUrl }) => (
+          <PreviewItem key={id} as="li">
+            <GoToDetail
+              as="button"
+              type="button"
+              onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
+              aria-label={`${singer} 상세 페이지 바로가기`}
+              $gap={16}
+              $align="center"
+            >
+              <Thumbnail src={profileImageUrl} alt="" size="sm" />
+              <Singer aria-hidden>{singer}</Singer>
+            </GoToDetail>
+          </PreviewItem>
+        ))}
+      </PreviewItemList>
+      {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
+    </SheetContainer>
+  );
+};
+
+export default ResultSheet;
+
+const SheetContainer = styled.section`
+  position: fixed;
+  z-index: 2000;
+  top: 70px;
+  right: 12.33%;
+
+  overflow-y: scroll;
+
+  width: 340px;
+  height: auto;
+  max-height: 320px;
+  padding: 0 16px 16px 16px;
+
+  color: white;
+
+  background-color: #121212;
+  border-radius: 8px;
+  box-shadow: 0px 0px 10px #ffffff49;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xxl}) {
+    right: 8.33%;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    right: 0%;
+    width: 100%;
+    min-height: 100%;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    top: 60px;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
+    top: 50px;
+  }
+`;
+
+const SheetTitle = styled(Flex)`
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  height: 50px;
+
+  font-weight: 700;
+  letter-spacing: 2px;
+
+  background-color: #121212;
+`;
+
+const PreviewItemList = styled(Flex)``;
+
+const PreviewItem = styled(Flex)`
+  cursor: pointer;
+
+  width: 100%;
+  height: 66px;
+  padding: 8px;
+
+  background-color: ${({ theme: { color } }) => color.black400};
+  border-radius: 4px;
+
+  &:hover {
+    background-color: ${({ theme: { color } }) => color.secondary};
+  }
+`;
+
+const Singer = styled.p`
+  font-weight: 700;
+  letter-spacing: 1px;
+`;
+const DefaultMessage = styled.p``;
+
+const GoToDetail = styled(Flex)`
+  width: 100%;
+`;

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 />,
+};