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

@@ -24,3 +24,20 @@ export const decorators = [
   (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
   (renderStory: any) => <MantineProvider>{renderStory()}</MantineProvider>,
 ];
+
+export const parameters = {
+  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/_apis/image/get-image-url.ts

@@ -1,6 +1,5 @@
 import { fetchApi } from '@/src/utils/api';
 import validateFile from '@/src/utils/validate-file';
-import Toast from '@/src/components/common/toast';
 import { GetImageUrlResponseTypes } from '@/src/types/create-crew';
 
 export async function getImageUrl(

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]/_components/review-section.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import CrewReviewList from './crew-review-list';
-import RatingDisplay from './rating-display';
+// import { useEffect, useState } from 'react';
+// import CrewReviewList from './crew-review-list';
+// import RatingDisplay from './rating-display';
 
 export default function CrewReviewSection() {
   // TODO: review 추후 추가

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)/crew/detail/[id]/page.tsx

@@ -1,8 +1,8 @@
-import { getGatheringList } from '@/src/_apis/crew/crew-gathering-list-apis';
 import CreateGathering from './_components/create-gathering';
 import DetailCrew from './_components/detail-crew-container';
 import GatheringListSection from './_components/gathering-list-section';
-import CrewReviewSection from './_components/review-section';
+
+// import CrewReviewSection from './_components/review-section';
 
 interface CrewDetailPageProps {
   params: { id: string };

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';
@@ -50,7 +46,7 @@ export default function ProfileCard() {
       const file = (event.target as HTMLInputElement)?.files?.[0];
       if (file) {
         if (file.size > 5 * 1024 * 1024) {
-          alert('5MB 이하의 파일만 업로드 가능합니다.');
+          toast.error('5MB 이하의 파일만 업로드 가능합니다.');
           return;
         }
 

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/crew-card.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import ProgressBar from '@/src/components/common/progress-bar/index';
@@ -26,21 +25,9 @@ export default function CrewCard({
   crewMembers,
   inWhere,
 }: CrewCardProps) {
-  const [prefetched, setPrefetched] = useState(new Set());
   const CREWPAGE = `/crew/detail/${id}`;
   const router = useRouter();
 
-  const handleCardClick = () => {
-    router.push(CREWPAGE);
-  };
-
-  const handleCardMouseUp = () => {
-    if (!prefetched.has(CREWPAGE)) {
-      router.prefetch(CREWPAGE);
-      setPrefetched(new Set(prefetched).add(CREWPAGE));
-    }
-  };
-
   return (
     <div
       role="presentation"

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-input/index.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import Image from 'next/image';
 import IcoPlus from '@/public/assets/icons/ic-plus.svg';
 import IcoX from '@/public/assets/icons/ic-x.svg';
 import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';

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 (