Fix/152/storybook refactor

.storybook/main.ts

@@ -13,7 +13,11 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: {
+      method: 'alphabetical',
+
+      storySort: {},
+    },
   },
 };
 

.storybook/preview.tsx

@@ -29,4 +29,18 @@ export const parameters = {
   nextjs: {
     appDirectory: true,
   },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: [
+        'common',
+        ['button', 'calendar', 'image', 'input'],
+        'layout',
+        'auth',
+        'crew',
+        'gathering',
+        'review',
+      ],
+    },
+  },
 };

src/_apis/crew/crew.ts

@@ -3,7 +3,6 @@ import {
   CreateCrewRequestTypes,
   CreateCrewResponseTypes,
   EditCrewRequestTypes,
-  EditCrewResponseTypes,
 } from '@/src/types/create-crew';
 
 export async function createCrew(data: CreateCrewRequestTypes) {

src/app/(auth)/login/_component/login-form.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import LoginForm, { LoginFormValues } from './login-form';
 
 const meta: Meta = {
-  title: 'Components/auth/LoginForm',
+  title: 'auth/login-form',
   component: LoginForm,
 };
 

src/app/(auth)/signup/_component/signup-form.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import SignupForm, { SignupFormValues } from './signup-form';
 
 const meta: Meta = {
-  title: 'Components/auth/SignupForm',
+  title: 'auth/signup-form',
   component: SignupForm,
 };
 

src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx

@@ -4,7 +4,7 @@ import categoryData from '@/src/data/category.json';
 import InternalCategory, { InternalCategoryProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/category/internal-category',
+  title: 'layout/category',
   component: InternalCategory,
   tags: ['autodocs'],
   argTypes: {

src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx

@@ -14,7 +14,7 @@ const initialValue: CreateCrewRequestTypes = {
 };
 
 export default {
-  title: 'forms/create-crew-form',
+  title: 'crew/create-crew-form',
   component: CreateCrewForm,
   tags: ['autodocs'],
   parameters: {

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/create-gathering-form.stories.tsx

@@ -14,7 +14,7 @@ const initialValue: CreateGatheringFormTypes = {
 };
 
 export default {
-  title: 'forms/create-gathering-form',
+  title: 'gathering/create-gathering-form',
   component: CreateGatheringForm,
   tags: ['autodocs'],
   parameters: {

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx

@@ -6,7 +6,7 @@ import { CrewReviewData } from '@/src/mock/review-data';
 import CrewReviewList from './crew-review-list';
 
 const meta: Meta<typeof CrewReviewList> = {
-  title: 'Components/Detail/CrewReviewList',
+  title: 'crew/crew-review-list',
   component: CrewReviewList,
   parameters: {
     layout: 'fulled',

src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import DetailCrewPresenter from './detail-crew-presenter';
 
 const meta: Meta<typeof DetailCrewPresenter> = {
-  title: 'Components/Detail/DetailCrewPresenter',
+  title: 'crew/crew-detail',
   component: DetailCrewPresenter,
   parameters: {
     layout: 'fullscreen',

src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import GatheringDetailModalContainer, { GatheringDetailModalContainerProps } from './container';
 
 const meta: Meta = {
-  title: 'components/gathering-detail-modal',
+  title: 'gathering/gathering-detail-modal',
   component: GatheringDetailModalContainer,
   argTypes: {
     opened: { control: 'boolean' },

src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import RatingDisplay, { ReviewRateInfo } from './rating-display';
 
 export default {
-  title: 'Components/Detail/RatingDisplay',
+  title: 'crew/crew-rating-display',
   component: RatingDisplay,
   tags: ['autodocs'],
   argTypes: {

src/app/(crew)/crew/detail/[id]/edit/page.tsx

@@ -10,7 +10,7 @@ import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function EditCrewPage() {
   const { id } = useParams();
-  const { data, isLoading, error } = useGetCrewDetailQuery(Number(id));
+  const { data, isLoading } = useGetCrewDetailQuery(Number(id));
   const { isPending, mutate } = useEditCrewQuery(Number(id));
   if (data === undefined) return null;
 

src/app/(crew)/my-crew/hosted/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Loader } from '@mantine/core';
 import { useGetMyCrewHostedQuery } from '@/src/_queries/crew/my-crew-hosted-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';

src/app/(crew)/my-crew/joined/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Loader } from '@mantine/core';
 import { useGetMyCrewJoinedQuery } from '@/src/_queries/crew/my-crew-joined-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';

src/app/(crew)/my-page/_components/profile-card/container.tsx

@@ -3,11 +3,7 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import {
-  fetchUpdatedUser,
-  resetUserProfileImage,
-  updateUserProfile,
-} from '@/src/_apis/auth/user-apis';
+import { resetUserProfileImage, updateUserProfile } from '@/src/_apis/auth/user-apis';
 import { useUser } from '@/src/_queries/auth/user-queries';
 import { useAuth } from '@/src/hooks/use-auth';
 import ProfileSkeleton from '@/src/components/common/skeleton/profile-skeleton';

src/app/(crew)/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 import Image from 'next/image';
-import { Divider, Loader, Skeleton, TextInput } from '@mantine/core';
+import { Divider, TextInput } from '@mantine/core';
 import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import regionData from '@/src/data/region.json';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';

src/components/common/crew-list/crew-card-list.stories.tsx

@@ -6,7 +6,7 @@ import ClientProvider from '@/src/components/client-provider';
 import CrewCardList from './crew-card-list';
 
 const meta: Meta = {
-  title: 'Components/CrewCardList/CrewCardList',
+  title: 'crew/crew-card-list',
   component: CrewCardList,
   parameters: {
     layout: 'fullscreen',

src/components/common/crew-list/profiles.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Profiles from './profiles';
 
 const meta: Meta = {
-  title: 'Components/CrewCardList/Profiles',
+  title: 'crew/crew-profiles',
   component: Profiles,
   parameters: {
     layout: 'centered',

src/components/common/gathering-card/gathering-card.stories.tsx

@@ -5,7 +5,7 @@ import GatheringCard from './container';
 const queryClient = new QueryClient();
 
 const meta: Meta<typeof GatheringCard> = {
-  title: 'Components/GatheringCard',
+  title: 'gathering/gathering-card',
   component: GatheringCard,
   parameters: {
     layout: 'fullscreen',

src/components/common/gathering-card/presenter.tsx

@@ -1,6 +1,5 @@
 import { MouseEvent } from 'react';
 import Image from 'next/image';
-import { Badge } from '@mantine/core';
 import { cn } from '@/src/utils/cn';
 import { formatDate } from '@/src/utils/format-date';
 import Button from '@/src/components/common/input/button';

src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import { Badge } from '@mantine/core';
 import { formatDate } from '@/src/utils/format-date';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';

src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx

@@ -3,7 +3,7 @@ import ClientProvider from '@/src/components/client-provider';
 import ScheduledGatheringCard from './container';
 
 const meta: Meta<typeof ScheduledGatheringCard> = {
-  title: 'Components/ScheduledGatheringCard',
+  title: 'gathering/scheduled-gathering-card',
   component: ScheduledGatheringCard,
   parameters: {
     layout: 'fullscreen',

src/components/common/header/header.stories.tsx

@@ -1,11 +1,9 @@
-import { useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
-import { useAuth } from '@/src/hooks/use-auth';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Header from '@/src/components/common/header/container';
 
 const meta: Meta = {
-  title: 'Components/Header',
+  title: 'layout/header',
   component: Header,
   tags: ['autodocs'],
   parameters: {

src/components/common/input/button/button.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import Button, { ButtonProps } from './index';
 
 const meta: Meta = {
-  title: 'Components/Button',
+  title: 'common/button/button',
   tags: ['autodocs'],
   component: Button,
   argTypes: {

src/components/common/input/button/floating-btn.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta } from '@storybook/react';
 import FloatingButton, { FloatingButtonProps } from './floating-btn';
 
 const meta: Meta<typeof FloatingButton> = {
-  title: 'Components/FloatingButton',
+  title: 'common/button/floating-button',
   component: FloatingButton,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/button/like-btn.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import LikeBtn from './like-btn';
 
 const meta: Meta<typeof LikeBtn> = {
-  title: 'Components/LikeBtn',
+  title: 'common/button/like-button',
   component: LikeBtn,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/calendar-filter/calendar-filter.stories.tsx

@@ -12,7 +12,7 @@ const mockData = [
 ];
 
 const meta: Meta = {
-  title: 'Components/input/calendar-filter',
+  title: 'common/calendar/calendar-filter',
   component: CalendarFilter,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/date-time-picker/date-time-picker.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import DateTimePicker, { DateTimePickerProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/date-time-picker',
+  title: 'common/calendar/date-time-picker',
   component: DateTimePicker,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/drop-down/drop-down.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import DropDown, { DropDownProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/drop-down',
+  title: 'common/drop-down',
   component: DropDown,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/file-input-wrap/file-input/file-input.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import FileInput, { FileInputProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/file-input',
+  title: 'common/image/image-input',
   component: FileInput,
   tags: ['autodocs'],
   argTypes: {

src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx

@@ -5,7 +5,7 @@ import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 import FileSample, { FileSampleProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/file-sample',
+  title: 'common/image/image-sample',
   component: FileSample,
   argTypes: {
     image: {
@@ -26,12 +26,12 @@ const meta: Meta = {
 export default meta;
 
 const Template: StoryFn<FileSampleProps> = function FileInputStory(args: FileSampleProps) {
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [isBlur, setIsBlur] = useState(false);
 
   const handleFileChange = (file: string | null) => {
-    setSelectedFile(file);
-    setIsBlur(false); // 파일 선택 시 블러 해제
+    if (file) {
+      setIsBlur(false); // 파일 선택 시 블러 해제
+    }
   };
 
   return (

src/components/common/input/file-input-wrap/file-sample/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import Image from 'next/image';
 
 export interface FileSampleProps {
   isEdit?: boolean;

src/components/common/input/password-input/password-input.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import PasswordInput, { PasswordInputProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/password-input',
+  title: 'common/input/password-input',
   component: PasswordInput,
 };
 

src/components/common/input/pop-over-calendar/index.tsx

@@ -12,10 +12,10 @@ export interface PopOverProps {
 
 export default function PopOverCalendar({ value, onChange }: PopOverProps) {
   const [opened, { open, close }] = useDisclosure();
-  const [inputTheme, setInputTheme] = useState(opened ? 'dark' : 'light');
   const [date, setDate] = useState<Date>(value);
   const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
   const popOver = useRef<HTMLDivElement>(null);
+  const inputTheme = opened ? 'dark' : 'light';
 
   const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();

src/components/common/input/text-input/text-input.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import TextInput, { TextInputProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/text-input',
+  title: 'common/input/text-input',
   component: TextInput,
 };
 

src/components/common/input/textarea/textarea.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import Textarea, { TextareaProps } from '.';
 
 const meta: Meta = {
-  title: 'Components/input/textarea',
+  title: 'common/input/textarea',
   component: Textarea,
 };
 

src/components/common/profile/Profile.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Profile } from './index';
 
 const meta: Meta<typeof Profile> = {
-  title: 'Components/Profile',
+  title: 'common/profile',
   component: Profile,
   parameters: {
     layout: 'centered',

src/components/common/progress-bar/progress-bar.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import ProgressBar, { ProgressBarProps } from './index';
 
 const meta: Meta<typeof ProgressBar> = {
-  title: 'Components/ProgressBar',
+  title: 'common/progress-bar',
   component: ProgressBar,
   tags: ['autodocs'],
   argTypes: {

src/components/common/review-list/review-card-list.stories.tsx

@@ -3,7 +3,7 @@ import { MyReviewData } from '@/src/mock/review-data';
 import ReviewCardList from './review-card-list';
 
 const meta: Meta<typeof ReviewCardList> = {
-  title: 'components/ReviewCardList',
+  title: 'review/review-card-list',
   component: ReviewCardList,
   parameters: {
     layout: 'fullscreen',

src/components/common/tab/tab.stories.tsx

@@ -5,7 +5,7 @@ import tabData from '@/src/data/tab.json';
 import Tabs, { TabsProps } from './index';
 
 const meta: Meta = {
-  title: 'Components/Tabs',
+  title: 'layout/tabs',
   component: Tabs,
   tags: ['autodocs'],
   argTypes: {