fix: 스토리북 에러 대응

.storybook/preview.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
 import { themes } from '@storybook/theming';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { OverlayProvider } from '@toss/use-overlay';
 import { LazyMotion } from 'framer-motion';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import NextAdapterPages from 'next-query-params/pages';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
-import { QueryParamProvider } from 'use-query-params';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
 import { RecoilRoot } from 'recoil';
-import { OverlayProvider } from '@toss/use-overlay';
+import { QueryParamProvider } from 'use-query-params';
 
+import { colors } from '@sopt-makers/colors';
 import ResponsiveProvider from '../src/components/common/Responsive/ResponsiveProvider';
 import StorybookToastProvider from '../src/components/common/Toast/providers/StorybookToastProvider';
 import StorybookEventLoggerProvider from '../src/components/eventLogger/providers/StorybookEventLoggerProvider';
-import { colors } from '@sopt-makers/colors';
 import GlobalStyle from '../src/styles/GlobalStyle';
 
 initialize();
@@ -48,7 +48,7 @@ export const decorators = [
     <QueryClientProvider client={queryClient}>
       <QueryParamProvider adapter={NextAdapterPages}>
         <RecoilRoot>
-          <LazyMotion strict features={() => import('framer-motion').then((mod) => mod.domAnimation)}>
+          <LazyMotion features={() => import('framer-motion').then((mod) => mod.domAnimation)}>
             <StorybookEventLoggerProvider>
               <StorybookToastProvider>
                 <GlobalStyle />

src/components/feed/upload/Category/CategoryHeader/index.stories.tsx

@@ -1,12 +1,27 @@
 import { Meta } from '@storybook/react';
 
-import CategorySelectorHeader from '@/components/feed/upload/Category/CategoryHeader';
+import CategoryHeader from '@/components/feed/upload/Category/CategoryHeader';
 
 export default {
-  component: CategorySelectorHeader,
-} as Meta<typeof CategorySelectorHeader>;
+  component: CategoryHeader,
+} as Meta<typeof CategoryHeader>;
 
 export const Default = {
-  args: {},
+  args: {
+    feedData: {
+      categoryId: null,
+      title: '',
+      content: '',
+      isQuestion: false,
+      isBlindWriter: false,
+      images: [],
+    },
+    openCategory: () => {
+      //
+    },
+    openTag: () => {
+      //
+    },
+  },
   name: '카테고리 헤더',
 };

src/components/feed/upload/Category/CategorySelector/index.stories.tsx

@@ -1,36 +1,114 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { Meta } from '@storybook/react';
 
 import Button from '@/components/common/Button';
 import useModalState from '@/components/common/Modal/useModalState';
 import CategorySelector from '@/components/feed/upload/Category/CategorySelector';
+import { categories } from '@/components/feed/upload/Category/constants';
+import { DropDown } from '@/components/feed/upload/Category/DropDown';
+import { BasicCategory } from '@/components/feed/upload/Category/types';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { textStyles } from '@/styles/typography';
 
 export default {
   component: CategorySelector,
 } as Meta;
 
+// MEMO: CategorySelector의 내용은 api 통신을 통해 가져오는 데이터가 포함되어있습니다.
+// 스토리북에 띄워보기 위해 목데이터를 삽입하여 보여지도록 구현하였습니다.
 export const Default = {
   render: function Render() {
     const { isOpen, onClose, onOpen } = useModalState();
 
+    const feedData = {
+      categoryId: 1,
+      title: '제목',
+      content: '내용',
+      isQuestion: false,
+      isBlindWriter: false,
+      images: [],
+    };
+
     return (
       <>
         <Button onClick={onOpen}>클릭하여 셀렉터 열기</Button>
-        <CategorySelector
-          isOpen={isOpen}
-          onClose={onClose}
-          onSelect={onClose}
-          feedData={{
-            categoryId: 0,
-            title: '',
-            content: '',
-            isQuestion: false,
-            isBlindWriter: false,
-            images: [],
-          }}
-        />
+        <DropDown isOpen={isOpen} onClose={onClose} className='category-drop' header={<Title>어디에 올릴까요?</Title>}>
+          <Select>
+            {categories &&
+              categories.length > 0 &&
+              categories.map((category: BasicCategory) => {
+                return (
+                  <Option
+                    key={category.id}
+                    onClick={() => {
+                      //
+                    }}
+                    isSelected={category.id === feedData.categoryId}
+                  >
+                    <OptionTitle>{category.name}</OptionTitle>
+                    <OptionContents>{category.content}</OptionContents>
+                  </Option>
+                );
+              })}
+          </Select>
+        </DropDown>
       </>
     );
   },
 
   name: '카테고리 셀렉터',
 };
+
+const OptionTitle = styled.h2`
+  ${textStyles.SUIT_16_M};
+
+  color: ${colors.white};
+`;
+
+const OptionContents = styled.p`
+  text-align: left;
+  ${textStyles.SUIT_12_R};
+
+  color: ${colors.gray300};
+`;
+
+const Option = styled.button<{ isSelected: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 6px;
+  background-color: ${({ isSelected }) => isSelected && colors.gray700};
+  cursor: pointer;
+  padding: 12px;
+  width: 100%;
+
+  &:active {
+    background-color: ${colors.gray700};
+  }
+
+  &:hover {
+    background-color: ${colors.gray700};
+  }
+`;
+
+const Select = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`;
+
+const Title = styled.header`
+  display: none;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    ${textStyles.SUIT_20_B}
+
+    padding: 0 20px 12px;
+  }
+`;

src/components/feed/upload/Category/TagSelector/index.stories.tsx

@@ -1,8 +1,19 @@
+import styled from '@emotion/styled';
 import { Meta } from '@storybook/react';
 
+import { BottomSheet } from '@/components/common/BottomSheet';
 import Button from '@/components/common/Button';
 import useModalState from '@/components/common/Modal/useModalState';
+import Responsive from '@/components/common/Responsive';
+import SquareLink from '@/components/common/SquareLink';
+import useCategory from '@/components/feed/common/hooks/useCategory';
+import { categories } from '@/components/feed/upload/Category/constants';
 import TagSelector from '@/components/feed/upload/Category/TagSelector';
+import { BasicCategory } from '@/components/feed/upload/Category/types';
+import CheckIcon from '@/public/icons/icon_check.svg';
+import BackArrow from '@/public/icons/icon_chevron_left.svg';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { textStyles } from '@/styles/typography';
 
 export default {
   component: TagSelector,
@@ -12,26 +23,117 @@ export const Default = {
   render: function Render() {
     const { isOpen, onClose, onOpen } = useModalState();
 
+    const parentCategory = categories[1];
+    const feedData = {
+      categoryId: 2,
+      title: '제목',
+      content: '내용',
+      isQuestion: false,
+      isBlindWriter: false,
+      images: [],
+    };
+    const { findChildrenCategory } = useCategory();
+    const isInitial = findChildrenCategory(feedData.categoryId);
+
     return (
       <>
         <Button onClick={onOpen}>클릭하여 셀렉터 열기</Button>
-        <TagSelector
+        <BottomSheet
           isOpen={isOpen}
           onClose={onClose}
-          onBack={onClose}
-          feedData={{
-            categoryId: 0,
-            title: '',
-            content: '',
-            isQuestion: false,
-            isBlindWriter: false,
-            images: [],
-          }}
-          onSave={onClose}
-        />
+          header={
+            <Title>
+              <BackArrowIc
+                onClick={() => {
+                  //
+                }}
+              />
+              {parentCategory && parentCategory.name}
+            </Title>
+          }
+        >
+          <Select>
+            {parentCategory && parentCategory.children.length > 0 && (
+              <>
+                {parentCategory.hasAll && (
+                  <Option
+                    onClick={() => {
+                      //
+                    }}
+                  >
+                    주제 선택 안 함{!isInitial && <CheckIcon />}
+                  </Option>
+                )}
+                <>
+                  {parentCategory.children.map((tag: BasicCategory) => {
+                    return (
+                      <Option
+                        key={tag.id}
+                        onClick={() => {
+                          //
+                        }}
+                      >
+                        {tag.name}
+                        {tag.id === feedData.categoryId && <CheckIcon />}
+                      </Option>
+                    );
+                  })}
+                </>
+              </>
+            )}
+          </Select>
+          <SubmitButton onClick={() => onClose()}>
+            <Responsive only='mobile'>
+              <SquareLink variant='primary' size='medium'>
+                확인
+              </SquareLink>
+            </Responsive>
+          </SubmitButton>
+        </BottomSheet>
       </>
     );
   },
 
   name: '태그 셀렉터',
 };
+
+const BackArrowIc = styled(BackArrow)``;
+
+const Title = styled.header`
+  display: none;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    ${textStyles.SUIT_20_B}
+
+    padding: 0 20px 12px;
+  }
+`;
+
+const Select = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    margin-bottom: 24px;
+  }
+`;
+
+const Option = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 12px;
+  width: 100%;
+`;
+
+const SubmitButton = styled.button`
+  padding: 0 8px;
+  width: 100%;
+`;