diff --git a/.storybook/main.ts b/.storybook/main.ts
index 34c018fb..ebf940d2 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,7 +13,11 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: {
+      method: 'alphabetical',
+
+      storySort: {},
+    },
   },
 };
 
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index d0db8d49..42904177 100644
--- a/.storybook/preview.tsx
+++ b/.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',
+      ],
+    },
+  },
 };
diff --git a/src/_apis/crew/crew.ts b/src/_apis/crew/crew.ts
index 169faa8c..ffa67030 100644
--- a/src/_apis/crew/crew.ts
+++ b/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) {
diff --git a/src/app/(auth)/login/_component/login-form.stories.tsx b/src/app/(auth)/login/_component/login-form.stories.tsx
index de20f72b..497156d1 100644
--- a/src/app/(auth)/login/_component/login-form.stories.tsx
+++ b/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,
 };
 
diff --git a/src/app/(auth)/signup/_component/signup-form.stories.tsx b/src/app/(auth)/signup/_component/signup-form.stories.tsx
index 9d901293..3ad935f8 100644
--- a/src/app/(auth)/signup/_component/signup-form.stories.tsx
+++ b/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,
 };
 
diff --git a/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx b/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx
index 2972c21c..63f5c104 100644
--- a/src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx
+++ b/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: {
diff --git a/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx b/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx
index 780a30a9..acc0aaaa 100644
--- a/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx
+++ b/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: {
diff --git a/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/create-gathering-form.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/create-gathering-form.stories.tsx
index 0c2d8064..3cc860fb 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/create-gathering-form.stories.tsx
+++ b/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: {
diff --git a/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx
index 80ae242e..934b43ab 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx
+++ b/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',
diff --git a/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx
index e9e3bb50..831cce82 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx
+++ b/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',
diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx
index b827d938..076e927b 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx
+++ b/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' },
diff --git a/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx
index 290d7fbc..7efc260c 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx
+++ b/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: {
diff --git a/src/app/(crew)/crew/detail/[id]/edit/page.tsx b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
index cd0688d5..f590dd0e 100644
--- a/src/app/(crew)/crew/detail/[id]/edit/page.tsx
+++ b/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;
 
diff --git a/src/app/(crew)/my-crew/hosted/page.tsx b/src/app/(crew)/my-crew/hosted/page.tsx
index 6e388ca6..83a4a5ba 100644
--- a/src/app/(crew)/my-crew/hosted/page.tsx
+++ b/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';
diff --git a/src/app/(crew)/my-crew/joined/page.tsx b/src/app/(crew)/my-crew/joined/page.tsx
index 23c47f14..e19ca4cc 100644
--- a/src/app/(crew)/my-crew/joined/page.tsx
+++ b/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';
diff --git a/src/app/(crew)/my-page/_components/profile-card/container.tsx b/src/app/(crew)/my-page/_components/profile-card/container.tsx
index 263f9a1e..0b4fdf15 100644
--- a/src/app/(crew)/my-page/_components/profile-card/container.tsx
+++ b/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';
diff --git a/src/app/(crew)/page.tsx b/src/app/(crew)/page.tsx
index f0c148f0..94fa96c4 100644
--- a/src/app/(crew)/page.tsx
+++ b/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';
diff --git a/src/components/common/crew-list/crew-card-list.stories.tsx b/src/components/common/crew-list/crew-card-list.stories.tsx
index 386f973f..65c2e11b 100644
--- a/src/components/common/crew-list/crew-card-list.stories.tsx
+++ b/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',
diff --git a/src/components/common/crew-list/profiles.stories.tsx b/src/components/common/crew-list/profiles.stories.tsx
index 43cb2fa7..8e891b3e 100644
--- a/src/components/common/crew-list/profiles.stories.tsx
+++ b/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',
diff --git a/src/components/common/gathering-card/gathering-card.stories.tsx b/src/components/common/gathering-card/gathering-card.stories.tsx
index e8a4dfc8..a860a9d1 100644
--- a/src/components/common/gathering-card/gathering-card.stories.tsx
+++ b/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',
diff --git a/src/components/common/gathering-card/presenter.tsx b/src/components/common/gathering-card/presenter.tsx
index a77048af..00a033d4 100644
--- a/src/components/common/gathering-card/presenter.tsx
+++ b/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';
diff --git a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx b/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
index d5713567..13d3a3dd 100644
--- a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
+++ b/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';
diff --git a/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx b/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
index fcfcc214..44cabfec 100644
--- a/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
+++ b/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',
diff --git a/src/components/common/header/header.stories.tsx b/src/components/common/header/header.stories.tsx
index 29e3ed69..c91643fb 100644
--- a/src/components/common/header/header.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/button/button.stories.tsx b/src/components/common/input/button/button.stories.tsx
index 5e234052..bff63247 100644
--- a/src/components/common/input/button/button.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/button/floating-btn.stories.tsx b/src/components/common/input/button/floating-btn.stories.tsx
index 48bcd707..0f41ca49 100644
--- a/src/components/common/input/button/floating-btn.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/button/like-btn.stories.tsx b/src/components/common/input/button/like-btn.stories.tsx
index d6b8f970..888b1762 100644
--- a/src/components/common/input/button/like-btn.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/calendar-filter/calendar-filter.stories.tsx b/src/components/common/input/calendar-filter/calendar-filter.stories.tsx
index 3c144e8d..68f644d7 100644
--- a/src/components/common/input/calendar-filter/calendar-filter.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/date-time-picker/date-time-picker.stories.tsx b/src/components/common/input/date-time-picker/date-time-picker.stories.tsx
index 8b6805a7..58586f4b 100644
--- a/src/components/common/input/date-time-picker/date-time-picker.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/drop-down/drop-down.stories.tsx b/src/components/common/input/drop-down/drop-down.stories.tsx
index 4ecbc0df..e29e98e8 100644
--- a/src/components/common/input/drop-down/drop-down.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/file-input-wrap/file-input/file-input.stories.tsx b/src/components/common/input/file-input-wrap/file-input/file-input.stories.tsx
index 11da99fd..d2d9268b 100644
--- a/src/components/common/input/file-input-wrap/file-input/file-input.stories.tsx
+++ b/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: {
diff --git a/src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx b/src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx
index 3bbe0f88..b35c819d 100644
--- a/src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx
+++ b/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 (
diff --git a/src/components/common/input/file-input-wrap/file-sample/index.tsx b/src/components/common/input/file-input-wrap/file-sample/index.tsx
index c0c58fed..590b74b9 100644
--- a/src/components/common/input/file-input-wrap/file-sample/index.tsx
+++ b/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;
diff --git a/src/components/common/input/password-input/password-input.stories.tsx b/src/components/common/input/password-input/password-input.stories.tsx
index cb7b8a1c..e174f556 100644
--- a/src/components/common/input/password-input/password-input.stories.tsx
+++ b/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,
 };
 
diff --git a/src/components/common/input/pop-over-calendar/index.tsx b/src/components/common/input/pop-over-calendar/index.tsx
index 395810d3..b50e0d97 100644
--- a/src/components/common/input/pop-over-calendar/index.tsx
+++ b/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();
diff --git a/src/components/common/input/text-input/text-input.stories.tsx b/src/components/common/input/text-input/text-input.stories.tsx
index 1178d1c6..4e5cc939 100644
--- a/src/components/common/input/text-input/text-input.stories.tsx
+++ b/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,
 };
 
diff --git a/src/components/common/input/textarea/textarea.stories.tsx b/src/components/common/input/textarea/textarea.stories.tsx
index 3ffe4c95..68a48e49 100644
--- a/src/components/common/input/textarea/textarea.stories.tsx
+++ b/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,
 };
 
diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx
index 365730b2..aeac7d15 100644
--- a/src/components/common/profile/Profile.stories.tsx
+++ b/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',
diff --git a/src/components/common/progress-bar/progress-bar.stories.tsx b/src/components/common/progress-bar/progress-bar.stories.tsx
index 66a9a7df..0e8c617c 100644
--- a/src/components/common/progress-bar/progress-bar.stories.tsx
+++ b/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: {
diff --git a/src/components/common/review-list/review-card-list.stories.tsx b/src/components/common/review-list/review-card-list.stories.tsx
index c955166b..5148ea85 100644
--- a/src/components/common/review-list/review-card-list.stories.tsx
+++ b/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',
diff --git a/src/components/common/tab/tab.stories.tsx b/src/components/common/tab/tab.stories.tsx
index 2fd99ea9..34162da2 100644
--- a/src/components/common/tab/tab.stories.tsx
+++ b/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: {
diff --git a/src/components/common/toast/toast.stories.tsx b/src/components/common/toast/toast.stories.tsx
index 365e75f6..66ba5aa2 100644
--- a/src/components/common/toast/toast.stories.tsx
+++ b/src/components/common/toast/toast.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Toast from './index';
 
 const meta: Meta<typeof Toast> = {
-  title: 'Components/Toast',
+  title: 'common/toast',
   component: Toast,
   parameters: {
     layout: 'centered',
diff --git a/src/components/gathering-list/crew-gathering-list.stories.tsx b/src/components/gathering-list/crew-gathering-list.stories.tsx
index 3f0e88e0..750a5cfb 100644
--- a/src/components/gathering-list/crew-gathering-list.stories.tsx
+++ b/src/components/gathering-list/crew-gathering-list.stories.tsx
@@ -53,7 +53,7 @@ const mockGatheringData = [
 const queryClient = new QueryClient();
 
 const meta: Meta<typeof CrewGatheringList> = {
-  title: 'Components/CrewGatheringList',
+  title: 'crew/crew-gathering-list',
   component: CrewGatheringList,
   parameters: {
     layout: 'fulled', // layout 변경
diff --git a/src/components/gathering-list/gathering-list.stories.tsx b/src/components/gathering-list/gathering-list.stories.tsx
index a5732e85..ed59c89e 100644
--- a/src/components/gathering-list/gathering-list.stories.tsx
+++ b/src/components/gathering-list/gathering-list.stories.tsx
@@ -7,7 +7,7 @@ import LikedListPresenter from './liked-list-presenter';
 const queryClient = new QueryClient();
 
 const meta: Meta<typeof LikedListPresenter> = {
-  title: 'Components/LikedListPresenter',
+  title: 'gathering/liked-gathering-card',
   component: LikedListPresenter,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.stories.tsx b/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.stories.tsx
index dadba2bd..6e0e3d5d 100644
--- a/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.stories.tsx
+++ b/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import ReviewableGatheringCard from './reviewable-gathering-card';
 
 const meta: Meta<typeof ReviewableGatheringCard> = {
-  title: 'Components/ReviewableGatheringCard',
+  title: 'gathering/reviewable-gathering-card',
   component: ReviewableGatheringCard,
   tags: ['autodocs'],
   parameters: {
diff --git a/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx b/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
index aa1c86ec..88b41db4 100644
--- a/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
+++ b/src/components/my-page/reviewing-modal/reviewing-modal.stories.tsx
@@ -5,7 +5,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import ReviewingModal, { ReviewingModalProps } from './reviewing-modal';
 
 const meta: Meta<typeof ReviewingModal> = {
-  title: 'Modal/ReviewingModal',
+  title: 'review/review-modal',
   component: ReviewingModal,
   argTypes: { opened: { control: 'boolean' } },
 };
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index 709c0412..236e7c21 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -4,6 +4,8 @@ import Accessibility from './assets/accessibility.png';
 import AddonLibrary from './assets/addon-library.png';
 import Assets from './assets/assets.png';
 import Context from './assets/context.png';
+import Cbd from './assets/development-cbd.png';
+import Pattern from './assets/development-pattern.png';
 import Discord from './assets/discord.svg';
 import Docs from './assets/docs.png';
 import FigmaPlugin from './assets/figma-plugin.png';
@@ -33,73 +35,51 @@ export const RightArrow = () => (
   </svg>
 );
 
-<Meta title="Configure your project" />
+<Meta title="CrewCrew" />
 
 <div className="sb-container">
   <div className='sb-section-title'>
-    # Configure your project
-
-    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
-
+    # Development
+    Component-Based Development, Container/Presentational Pattern을 활용해 개발했습니다.
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
       <Image
-        src={Styling}
-        alt="A wall of logos representing different styling technologies"
+        src={Cbd}
+        alt="component based development"
         width={0}
         height={0}
-        style={{ width: '100%', height: 'auto' }}
+        style={{ width: '100%', height: '250px', borderRadius: '15px'}}
       />
-      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
-      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
-      <a
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
-        target="_blank"
-      >Learn more<RightArrow /></a>
+      <h4 className="sb-section-item-heading">Component-Based Development</h4>
+      <p className="sb-section-item-paragraph">UI를 독립적이고 재사용 가능한 컴포넌트로 분리하여 유지보수성과 확장성을 높이고, 개발자 간 협업과 코드 재사용을 용이하게 만들었습니다.</p>
+      
     </div>
     <div className="sb-section-item">
       <Image 
         width={0}
         height={0}
-        style={{ width: '100%', height: 'auto' }}
-        src={Context}
+        style={{ width: '100%', height: '250px', borderRadius: '15px'}}
+        src={Pattern}
         alt="An abstraction representing the composition of data for a component"
       />
-      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
-      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
-      <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
-        target="_blank"
-      >Learn more<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={0}
-        height={0}
-        style={{ width: '100%', height: 'auto' }} 
-        src={Assets} 
-        alt="A representation of typography and image assets" 
-      />
-      <div>
-        <h4 className="sb-section-item-heading">Load assets and resources</h4>
-        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
-        `staticDirs` configuration option to specify folders to load when
-        starting Storybook.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
+      <h4 className="sb-section-item-heading">Container/Presentational Pattern</h4>
+      <p className="sb-section-item-paragraph">비즈니스 로직과 UI로 관심사를 명확히 분리하여 코드의 유지보수성과 재사용성을 높이기 위해서 사용했습니다.</p>
+      
     </div>
+    
   </div>
 </div>
 <div className="sb-container">
   <div className='sb-section-title'>
-    # Do more with Storybook
-
-    Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
+    # Crew Crew
+    ### 약속하고 만나는 운동 소모임 웹사이트
+    
+    <p>운동 종목, 지역에 따라 크루를 만들고, 크루 안에서 자유롭게 약속을 만들어 함께 운동을 즐길 수 있는 사이트입니다.</p>
+    <a
+          href="https://crewcrew.vercel.app/"
+          target="_blank"
+        >https://crewcrew.vercel.app/<RightArrow /></a>
   </div>
 
   <div className="sb-section">
@@ -112,13 +92,9 @@ export const RightArrow = () => (
           src={Docs} 
           alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" 
         />
-        <h4 className="sb-section-item-heading">Autodocs</h4>
-        <p className="sb-section-item-paragraph">Auto-generate living,
-          interactive reference documentation from your components and stories.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+        <h4 className="sb-section-item-heading">크루 찾기</h4>
+        <p className="sb-section-item-paragraph">운동 종목별·지역별로 분류하고, 최신·인기순으로 정렬하여 크루를 검색할 수 있습니다.</p>
+       
       </div>
       <div className="sb-grid-item">
         <Image 
@@ -128,12 +104,9 @@ export const RightArrow = () => (
           src={Share} 
           alt="A browser window showing a Storybook being published to a chromatic.com URL" 
         />
-        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
-        <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+       <h4 className="sb-section-item-heading">로그인/회원가입</h4>
+        <p className="sb-section-item-paragraph">크루크루 회원가입 후 로그인하면 크루에 참여하고, 활동 가능합니다.</p>
+         
       </div>
       <div className="sb-grid-item">
         <Image 
@@ -143,13 +116,9 @@ export const RightArrow = () => (
           src={FigmaPlugin} 
           alt="Windows showing the Storybook plugin in Figma" 
         />
-        <h4 className="sb-section-item-heading">Figma Plugin</h4>
-        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
-          implementation in one place.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+        <h4 className="sb-section-item-heading">크루</h4>
+        <p className="sb-section-item-paragraph">원하는 크루에 참여하거나, 크루를 만들어 직집 운영합니다.</p>
+        
       </div>
       <div className="sb-grid-item">
         <Image 
@@ -159,13 +128,9 @@ export const RightArrow = () => (
           src={Testing} 
           alt="Screenshot of tests passing and failing" 
         />
-        <h4 className="sb-section-item-heading">Testing</h4>
-        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
-          complex.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+        <h4 className="sb-section-item-heading">약속</h4>
+        <p className="sb-section-item-paragraph">크루 참여 후 약속에 참여하거나 약속을 만들어서 사람들과 함께 운동합니다.</p>
+        
       </div>
       <div className="sb-grid-item">
         <Image 
@@ -175,12 +140,9 @@ export const RightArrow = () => (
           src={Accessibility} 
           alt="Screenshot of accessibility tests passing and failing" 
         />
-        <h4 className="sb-section-item-heading">Accessibility</h4>
-        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+        <h4 className="sb-section-item-heading">나의 크루/약속</h4>
+        <p className="sb-section-item-paragraph">내가 만든/참여한 크루, 내가 만든/참여한 약속, 찜한 약속을 탭에서 나의 활동을 확인하고 관리합니다.</p>
+       
       </div>
       <div className="sb-grid-item">
         <Image 
@@ -190,24 +152,21 @@ export const RightArrow = () => (
           src={Theming} 
           alt="Screenshot of Storybook in light and dark mode" 
         />
-        <h4 className="sb-section-item-heading">Theming</h4>
-        <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
+        <h4 className="sb-section-item-heading">마이페이지</h4>
+        <p className="sb-section-item-paragraph">나의 프로필을 확인/수정하고, 약속에 대한 리뷰를 작성 후 확인합니다.</p>
+        
       </div>
     </div>
   </div>
 </div>
 <div className='sb-addon'>
   <div className='sb-addon-text'>
-    <h4>Addons</h4>
-    <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
+    <h4>Crew Crew</h4>
+    <p className="sb-section-item-paragraph">같이 운동하는 '크루'를 찾아보고, '약속'을 잡아보세요!</p>
     <a
-        href="https://storybook.js.org/addons/"
+        href="https://crewcrew.vercel.app/"
         target="_blank"
-      >Discover all addons<RightArrow /></a>
+      >바로가기<RightArrow /></a>
   </div>
   <div className='sb-addon-img'>
     <Image 
@@ -229,30 +188,12 @@ export const RightArrow = () => (
         alt="Github logo" 
         className="sb-explore-image"
       />
-      Join our contributors building the future of UI development.
+      Github Repository
 
       <a
-        href="https://github.com/storybookjs/storybook"
+        href="https://github.com/CodeitFESI4-Team1/Team-1-Codeit"
         target="_blank"
-      >Star on GitHub<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <Image
-        width={33}
-        height={32}
-        layout="fixed"
-        src={Discord}
-        alt="Discord logo"
-        className="sb-explore-image"
-      />
-      <div>
-        Get support and chat with frontend developers.
-
-        <a
-          href="https://discord.gg/storybook"
-          target="_blank"
-        >Join Discord server<RightArrow /></a>
-      </div>
+      >바로가기<RightArrow /></a>
     </div>
     <div className="sb-section-item">
       <Image
@@ -264,30 +205,14 @@ export const RightArrow = () => (
         className="sb-explore-image"
       />
       <div>
-        Watch tutorials, feature previews and interviews.
+        Demo Video
 
         <a
-          href="https://www.youtube.com/@chromaticui"
+          href="https://www.youtube.com/watch?v=8qhzx36ljDM"
           target="_blank"
-        >Watch on YouTube<RightArrow /></a>
+        >바로가기<RightArrow /></a>
       </div>
     </div>
-    <div className="sb-section-item">
-      <Image
-        width={33}
-        height={32}
-        layout="fixed"
-        src={Tutorials}
-        alt="A book"
-        className="sb-explore-image"
-      />
-      <p>Follow guided walkthroughs on for key workflows.</p>
-
-      <a
-          href="https://storybook.js.org/tutorials/"
-          target="_blank"
-        >Discover tutorials<RightArrow /></a>
-    </div>
 
 </div>
 
@@ -323,6 +248,7 @@ export const RightArrow = () => (
   }
 
   .sb-section-item-heading {
+    font-weight: bold;
     padding-top: 20px !important;
     padding-bottom: 5px !important;
     margin: 0 !important;
@@ -344,7 +270,7 @@ export const RightArrow = () => (
 
   .sb-socials {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .sb-socials p {
diff --git a/src/stories/assets/development-cbd.png b/src/stories/assets/development-cbd.png
new file mode 100644
index 00000000..f653f938
Binary files /dev/null and b/src/stories/assets/development-cbd.png differ
diff --git a/src/stories/assets/development-pattern.png b/src/stories/assets/development-pattern.png
new file mode 100644
index 00000000..6632344e
Binary files /dev/null and b/src/stories/assets/development-pattern.png differ
diff --git a/src/types/create-crew.d.ts b/src/types/create-crew.d.ts
index 76765d5c..f7302b63 100644
--- a/src/types/create-crew.d.ts
+++ b/src/types/create-crew.d.ts
@@ -1,6 +1,3 @@
-import { StaticImageData } from 'next/image';
-import { interpolate } from 'framer-motion';
-
 // NOTE : imageURL 임시로 File로 지정
 export interface CreateCrewFormTypes {
   title: string;
diff --git a/src/types/gathering-data.d.ts b/src/types/gathering-data.d.ts
index 1561abaa..8592522a 100644
--- a/src/types/gathering-data.d.ts
+++ b/src/types/gathering-data.d.ts
@@ -1,4 +1,3 @@
-import { StaticImageData } from 'next/image';
 import { UserType } from './user';
 
 export interface GatheringType {