diff --git a/public/assets/images/crew-sample/index.tsx b/public/assets/images/crew-sample/index.tsx
index 0eac6777..9e530eed 100644
--- a/public/assets/images/crew-sample/index.tsx
+++ b/public/assets/images/crew-sample/index.tsx
@@ -3,5 +3,10 @@ import ImgCrewSample02 from './crew-sample-2.jpg';
 import ImgCrewSample03 from './crew-sample-3.jpg';
 
 const ImgCrewSamples = [ImgCrewSample01, ImgCrewSample02, ImgCrewSample03];
+const ImgCrewSampleUrls = [
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/0e05d971-15a8-4a32-bf03-80d12cae392e',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/eb35c35d-829a-402b-8019-29e42f91589f',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/471b3b3b-b23c-48e8-8e6b-9a7ec31e1917',
+];
 
-export default ImgCrewSamples;
+export default ImgCrewSampleUrls;
diff --git a/public/assets/images/gathering-sample/index.tsx b/public/assets/images/gathering-sample/index.tsx
index 6bba3587..116d1637 100644
--- a/public/assets/images/gathering-sample/index.tsx
+++ b/public/assets/images/gathering-sample/index.tsx
@@ -3,5 +3,10 @@ import ImgGatheringSample02 from './gathering-sample-2.jpg';
 import ImgGatheringSample03 from './gathering-sample-3.jpg';
 
 const ImgGatheringSamples = [ImgGatheringSample01, ImgGatheringSample02, ImgGatheringSample03];
+const ImgGatheringSampleUrls = [
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/1ff61110-e238-4fd6-8736-e6f03483f4df',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/85ad6a48-a1cb-4c8f-b713-94b9e18b023a',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/60bc093c-cb3a-4628-93b9-fbf19e47a1ac',
+];
 
-export default ImgGatheringSamples;
+export default ImgGatheringSampleUrls;
diff --git a/src/_apis/crew/crew.ts b/src/_apis/crew/crew.ts
new file mode 100644
index 00000000..f8fb8d20
--- /dev/null
+++ b/src/_apis/crew/crew.ts
@@ -0,0 +1,25 @@
+import { fetchApi } from '@/src/utils/api';
+import { CreateCrewRequestTypes, CreateCrewResponseTypes } from '@/src/types/create-crew';
+
+export async function createCrew(data: CreateCrewRequestTypes) {
+  try {
+    const response: { data: CreateCrewResponseTypes; status: number } = await fetchApi(
+      `/api/crews`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // Include authentication credentials
+        body: JSON.stringify(data),
+      },
+    );
+    if (!response.data) {
+      throw new Error('Failed to create crew: No data received');
+    }
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/src/_apis/image/get-image-url.ts b/src/_apis/image/get-image-url.ts
new file mode 100644
index 00000000..253c7e56
--- /dev/null
+++ b/src/_apis/image/get-image-url.ts
@@ -0,0 +1,36 @@
+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(
+  file: File | string | null,
+  type: 'MEMBER' | 'CREW' | 'GATHERING',
+) {
+  const formData = new FormData();
+  if (file instanceof File) {
+    try {
+      if (!validateFile(file)) {
+        throw new Error('Invalid file');
+      }
+      formData.append('file', file);
+
+      const response: { data: GetImageUrlResponseTypes } = await fetchApi(
+        `/api/images?type=${type}`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+      if (!response.data) {
+        throw new Error('Failed to get image: No data received');
+      }
+
+      return response.data;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      throw error;
+    }
+  }
+  return null;
+}
diff --git a/src/_queries/crew/crew-list-queries.tsx b/src/_queries/crew/crew-list-queries.tsx
index 056b8dbd..545700ca 100644
--- a/src/_queries/crew/crew-list-queries.tsx
+++ b/src/_queries/crew/crew-list-queries.tsx
@@ -11,6 +11,7 @@ export function useGetCrewListQuery({
   const { size, sort = ['string'] } = pageable;
   return {
     queryKey: [
+      'crewLists',
       condition.keyword,
       condition.mainLocation,
       condition.mainCategory,
diff --git a/src/app/(crew)/crew/_components/create-crew-form/create-crew-form.stories.tsx b/src/app/(crew)/crew/_components/create-crew-form/create-crew-form.stories.tsx
index 1f2a9113..fb8cefe9 100644
--- a/src/app/(crew)/crew/_components/create-crew-form/create-crew-form.stories.tsx
+++ b/src/app/(crew)/crew/_components/create-crew-form/create-crew-form.stories.tsx
@@ -1,15 +1,16 @@
 import { Meta, StoryFn } from '@storybook/react';
-import { CreateCrewRequestTypes } from '@/src/types/create-crew';
-import CreateCrewForm, { CreateCrewFormTypes } from '.';
+import { CreateCrewFormTypes, CreateCrewRequestTypes } from '@/src/types/create-crew';
+import CreateCrewForm from '.';
 
 const initialValue: CreateCrewRequestTypes = {
   title: '',
   mainCategory: '',
   subCategory: '',
-  imageUrl: null,
+  imageUrl: '',
   mainLocation: '',
   subLocation: '',
   totalCount: 0,
+  introduce: '',
 };
 
 export default {
diff --git a/src/app/(crew)/crew/_components/create-crew-form/index.tsx b/src/app/(crew)/crew/_components/create-crew-form/index.tsx
index f197b632..a55d0ee3 100644
--- a/src/app/(crew)/crew/_components/create-crew-form/index.tsx
+++ b/src/app/(crew)/crew/_components/create-crew-form/index.tsx
@@ -10,14 +10,15 @@ import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
-import { CreateCrewRequestTypes } from '@/src/types/create-crew';
-import ImgCrewSamples from '@/public/assets/images/crew-sample';
+import Textarea from '@/src/components/common/input/textarea';
+import { CreateCrewFormTypes } from '@/src/types/create-crew';
+import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 
-export interface CreateCrewFormTypes {
-  data: CreateCrewRequestTypes;
+export interface CreateCrewFormProps {
+  data: CreateCrewFormTypes;
   isEdit?: boolean;
-  onEdit?: (data: CreateCrewRequestTypes) => void;
-  onSubmit?: (data: CreateCrewRequestTypes) => void;
+  onEdit?: (data: CreateCrewFormTypes) => void;
+  onSubmit?: (data: CreateCrewFormTypes) => void;
 }
 
 export default function CreateCrewForm({
@@ -25,7 +26,7 @@ export default function CreateCrewForm({
   onEdit = () => {},
   onSubmit = () => {},
   data,
-}: CreateCrewFormTypes) {
+}: CreateCrewFormProps) {
   const router = useRouter();
   const {
     control,
@@ -34,7 +35,7 @@ export default function CreateCrewForm({
     trigger,
     clearErrors,
     formState: { errors, isValid, isSubmitting },
-  } = useForm<CreateCrewRequestTypes>({
+  } = useForm<CreateCrewFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
@@ -43,24 +44,24 @@ export default function CreateCrewForm({
   const [regionIndex, setRegionIndex] = useState(0);
 
   const title = useWatch({ control, name: 'title' });
-  // mainCategory와 mainLocation 값의 변화를 감지하여 인덱스를 설정
   const mainCategory = useWatch({ control, name: 'mainCategory' });
   const mainLocation = useWatch({ control, name: 'mainLocation' });
+  const introduce = useWatch({ control, name: 'introduce' });
 
   const handleMainCategoryChange = (newValue: string | null) => {
-    setValue('mainCategory' as const, newValue as CreateCrewRequestTypes['mainCategory']);
-    setValue('subCategory' as const, null as CreateCrewRequestTypes['subCategory']);
+    setValue('mainCategory', newValue || '');
+    setValue('subCategory', null);
     clearErrors('subCategory');
   };
 
   const handleMainLocationChange = (newValue: string | null) => {
-    setValue('mainLocation' as const, newValue as CreateCrewRequestTypes['mainLocation']);
-    setValue('subLocation' as const, null as CreateCrewRequestTypes['subLocation']);
+    setValue('mainLocation', newValue || '');
+    setValue('subLocation', null);
     clearErrors('subLocation');
   };
   useEffect(() => {
-    setCategoryIndex(categoryData.findIndex((category) => category.title.value === mainCategory));
-    setRegionIndex(regionData.findIndex((region) => region.main.value === mainLocation));
+    setCategoryIndex(categoryData.findIndex((category) => category.title.label === mainCategory));
+    setRegionIndex(regionData.findIndex((region) => region.main.label === mainLocation));
   }, [mainCategory, mainLocation]);
 
   return (
@@ -162,24 +163,24 @@ export default function CreateCrewForm({
               required: '이미지를 선택해주세요.',
               validate: {
                 fileSize: (file) =>
-                  file && file instanceof File && file.size <= 5242880
-                    ? true
-                    : '파일 크기는 5MB 이하여야 합니다.',
+                  file && file instanceof File
+                    ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
+                    : true, // 문자열인 경우 크기 검사를 건너뜁니다.
                 fileType: (file) =>
-                  file &&
-                  file instanceof File &&
-                  ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
-                    ? true
-                    : 'JPG, PNG 파일만 업로드 가능합니다.',
+                  file && file instanceof File
+                    ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
+                      'JPG, PNG 파일만 업로드 가능합니다.'
+                    : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
               },
             }}
             render={({ field }) => (
               <FileInputWrap
                 {...field}
-                sample={ImgCrewSamples}
+                isEdit={isEdit}
+                sample={ImgCrewSampleUrls}
                 onChange={(newValue) => {
                   field.onChange(newValue);
-                  if (newValue instanceof File) trigger('imageUrl');
+                  trigger('imageUrl');
                 }}
               />
             )}
@@ -264,7 +265,28 @@ export default function CreateCrewForm({
             )}
           />
         </div>
-
+        <div className="flex flex-col gap-3">
+          <div className="flex justify-between">
+            <label htmlFor="gathering-introduce" className="text-base font-semibold text-gray-800">
+              크루 소개
+            </label>
+            <span>
+              <span className="text-blue-500">{introduce.length}</span>/100
+            </span>
+          </div>
+          <Controller
+            name="introduce"
+            control={control}
+            render={({ field }) => (
+              <Textarea
+                {...field}
+                placeholder="크루 소개글을 100자 이내로 입력해주세요."
+                maxLength={100}
+                inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"
+              />
+            )}
+          />
+        </div>
         <div className="flex justify-between gap-4 pt-18">
           <Button
             type="submit"
diff --git a/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx b/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
index bd4030d7..0c2d8064 100644
--- a/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
@@ -1,10 +1,10 @@
 import { Button, Modal, ScrollArea } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Meta, StoryFn } from '@storybook/react';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 import CreateGatheringForm from '.';
 
-const initialValue: CreateGatheringRequestType = {
+const initialValue: CreateGatheringFormTypes = {
   title: '',
   introduce: '',
   dateTime: '',
@@ -30,7 +30,7 @@ export default {
   },
 } as Meta<typeof CreateGatheringForm>;
 
-const Template: StoryFn<CreateGatheringRequestType> = function CreateCrewPageStory() {
+const Template: StoryFn<CreateGatheringFormTypes> = function CreateCrewPageStory() {
   const [createModalOpened, { open: openCreateModal, close: closeCreateModal }] =
     useDisclosure(false);
 
diff --git a/src/app/(crew)/crew/_components/create-gathering-form/index.tsx b/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
index f13f27e3..4028a52d 100644
--- a/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
@@ -7,14 +7,14 @@ import DateTimePicker from '@/src/components/common/input/date-time-picker';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
 import Textarea from '@/src/components/common/input/textarea';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
-import ImgGatheringSamples from '@/public/assets/images/gathering-sample';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
+import ImgGatheringSampleUrls from '@/public/assets/images/gathering-sample';
 
-export interface CreateGatheringFormTypes {
-  data: CreateGatheringRequestType;
+export interface CreateGatheringFormProps {
+  data: CreateGatheringFormTypes;
   isEdit?: boolean;
-  onEdit?: (data: CreateGatheringRequestType) => void;
-  onSubmit?: (data: CreateGatheringRequestType) => void;
+  onEdit?: (data: CreateGatheringFormTypes) => void;
+  onSubmit?: (data: CreateGatheringFormTypes) => void;
   onClose: () => void;
 }
 
@@ -24,13 +24,13 @@ export default function CreateGatheringForm({
   onSubmit = () => {},
   onClose,
   data,
-}: CreateGatheringFormTypes) {
+}: CreateGatheringFormProps) {
   const {
     control,
     handleSubmit,
     trigger,
     formState: { errors, isValid, isSubmitting },
-  } = useForm<CreateGatheringRequestType>({
+  } = useForm<CreateGatheringFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
@@ -88,24 +88,23 @@ export default function CreateGatheringForm({
                 required: '이미지를 선택해주세요.',
                 validate: {
                   fileSize: (file) =>
-                    file && file instanceof File && file.size <= 5242880
-                      ? true
-                      : '파일 크기는 5MB 이하여야 합니다.',
+                    file && file instanceof File
+                      ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
+                      : true, // 문자열인 경우 크기 검사를 건너뜁니다.
                   fileType: (file) =>
-                    file &&
-                    file instanceof File &&
-                    ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
-                      ? true
-                      : 'JPG, PNG 파일만 업로드 가능합니다.',
+                    file && file instanceof File
+                      ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
+                        'JPG, PNG 파일만 업로드 가능합니다.'
+                      : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
                 },
               }}
               render={({ field }) => (
                 <FileInputWrap
                   {...field}
-                  sample={ImgGatheringSamples}
+                  sample={ImgGatheringSampleUrls}
                   onChange={(newValue) => {
                     field.onChange(newValue);
-                    if (newValue instanceof File) trigger('imageUrl');
+                    trigger('imageUrl');
                   }}
                 />
               )}
diff --git a/src/app/(crew)/crew/_components/create-gathering-modal/container.tsx b/src/app/(crew)/crew/_components/create-gathering-modal/container.tsx
index 8e9b0873..9ab71265 100644
--- a/src/app/(crew)/crew/_components/create-gathering-modal/container.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-modal/container.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 import CreateGatheringModalPresenter from './presenter';
 
 export interface CreateGatheringModalContainerProps {
   opened: boolean;
   close: () => void;
-  data: CreateGatheringRequestType;
+  data: CreateGatheringFormTypes;
 }
 
 export default function CreateGatheringModalContainer({
diff --git a/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx b/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
index 757d010f..7c5e7b75 100644
--- a/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
@@ -1,13 +1,13 @@
 import { Modal, ScrollArea } from '@mantine/core';
 import CreateGatheringForm from '@/src/app/(crew)/crew/_components/create-gathering-form';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
 export interface GatheringDetailModalProps {
   opened: boolean;
   onClose: () => void;
   onSubmit: () => void;
   onEdit: () => void;
-  data: CreateGatheringRequestType;
+  data: CreateGatheringFormTypes;
 }
 
 export default function CreateGatheringModalPresenter({
diff --git a/src/app/(crew)/crew/create/page.tsx b/src/app/(crew)/crew/create/page.tsx
index 097caf6a..50f9e044 100644
--- a/src/app/(crew)/crew/create/page.tsx
+++ b/src/app/(crew)/crew/create/page.tsx
@@ -1,14 +1,19 @@
 'use client';
 
+import { toast } from 'react-toastify';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
+import { Loader } from '@mantine/core';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createCrew } from '@/src/_apis/crew/crew';
+import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import CreateCrewForm from '@/src/app/(crew)/crew/_components/create-crew-form';
-import { CreateCrewRequestTypes } from '@/src/types/create-crew';
+import { CreateCrewFormTypes, CreateCrewRequestTypes } from '@/src/types/create-crew';
 import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function CreateCrewPage() {
   const router = useRouter();
-  const initialValue: CreateCrewRequestTypes = {
+  const initialValue: CreateCrewFormTypes = {
     title: '',
     mainCategory: '',
     subCategory: null,
@@ -16,14 +21,50 @@ export default function CreateCrewPage() {
     mainLocation: '',
     subLocation: null,
     totalCount: 4,
+    introduce: '',
   };
+  const queryClient = useQueryClient();
+  const { isPending, mutate } = useMutation({
+    mutationFn: (data: CreateCrewRequestTypes) => createCrew(data),
+    onSuccess: (data) => {
+      if (data === null || data === undefined) {
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: ['crewLists', 'crewDetail'] });
+      router.push(`/crew/detail/${data.crewId}`);
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
 
-  const handleSubmit = () => {
-    // TODO : POST API 연결
-    const response = { id: 1 };
-    router.push(`/crew/detail/${response?.id}`);
+  const handleSubmit = async (data: CreateCrewFormTypes) => {
+    let newImageUrl = data.imageUrl as string;
+    if (data.imageUrl instanceof File) {
+      const imgResponse = await getImageUrl(data.imageUrl, 'CREW');
+      newImageUrl = imgResponse?.imageUrl as string;
+    }
+    const newData: CreateCrewRequestTypes = {
+      title: data.title,
+      mainCategory: data.mainCategory,
+      subCategory: data.subCategory ?? '',
+      imageUrl: newImageUrl ?? '',
+      mainLocation: data.mainLocation,
+      subLocation: data.subLocation ?? '',
+      totalCount: data.totalCount,
+      introduce: data.introduce,
+    };
+
+    mutate(newData);
   };
 
+  if (isPending)
+    return (
+      <div className="fixed inset-0 z-10 flex items-center justify-center">
+        <Loader size="sm" />
+      </div>
+    );
+
   return (
     <div className="lg:px-8.5 flex flex-col gap-3 px-3 py-8 md:gap-4 md:px-8 md:py-12.5 lg:gap-8">
       <div className="flex items-center gap-3">
diff --git a/src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx b/src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx
index d2107c06..dfcec562 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx
+++ b/src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx
@@ -5,7 +5,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { useAuthStore } from '@/src/store/use-auth-store';
 import CreateGatheringModalContainer from '@/src/app/(crew)/crew/_components/create-gathering-modal/container';
 import Button from '@/src/components/common/input/button';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
 export default function CreateGathering() {
   const { isAuth } = useAuthStore();
@@ -20,7 +20,7 @@ export default function CreateGathering() {
     }
   };
 
-  const initialValue: CreateGatheringRequestType = {
+  const initialValue: CreateGatheringFormTypes = {
     title: '',
     introduce: '',
     dateTime: '',
diff --git a/src/app/(crew)/crew/detail/[id]/edit/page.tsx b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
index 5ea2415a..1ba58730 100644
--- a/src/app/(crew)/crew/detail/[id]/edit/page.tsx
+++ b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
@@ -1,20 +1,29 @@
 'use client';
 
 import Image from 'next/image';
+import { useParams } from 'next/navigation';
+import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
 import CreateCrewForm from '@/src/app/(crew)/crew/_components/create-crew-form';
-import { CreateCrewRequestTypes } from '@/src/types/create-crew';
+import { CreateCrewFormTypes } from '@/src/types/create-crew';
 import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function EditCrewPage() {
-  // NOTE : 임시 데이터 -> API 연결
-  const initialValue: CreateCrewRequestTypes = {
+  const { id } = useParams();
+  const { data, isLoading, error } = useGetCrewDetailQuery(Number(id));
+
+  if (data === undefined) return null;
+
+  // TODO : 테스트중
+  const initialValue: CreateCrewFormTypes = {
     title: '',
     mainCategory: '',
-    subCategory: null,
-    imageUrl: null,
+    subCategory: '',
+    imageUrl:
+      'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/0e05d971-15a8-4a32-bf03-80d12cae392e',
     mainLocation: '',
-    subLocation: null,
+    subLocation: '',
     totalCount: 4,
+    introduce: '',
   };
 
   const handleEdit = () => {
diff --git a/src/app/(crew)/my-crew/hosted/page.tsx b/src/app/(crew)/my-crew/hosted/page.tsx
index 69930ceb..8e0fa069 100644
--- a/src/app/(crew)/my-crew/hosted/page.tsx
+++ b/src/app/(crew)/my-crew/hosted/page.tsx
@@ -13,12 +13,8 @@ export default function MyCrewHostedPage() {
   );
   return (
     <div>
-      <CrewCardList
-        inWhere="my-crew"
-        data={data ?? { pages: [], pageParams: [] }}
-        isFetchingNextPage={isFetchingNextPage}
-      />
-      {status === 'pending' ? (
+      <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
+      {status === 'pending' || isFetchingNextPage ? (
         <div className="flex justify-center py-10">
           <Loader size="sm" />
         </div>
diff --git a/src/app/(crew)/my-crew/joined/page.tsx b/src/app/(crew)/my-crew/joined/page.tsx
index 0505ff9e..4af69e63 100644
--- a/src/app/(crew)/my-crew/joined/page.tsx
+++ b/src/app/(crew)/my-crew/joined/page.tsx
@@ -13,12 +13,8 @@ export default function MyCrewJoinedPage() {
   );
   return (
     <div>
-      <CrewCardList
-        inWhere="my-crew"
-        data={data ?? { pages: [], pageParams: [] }}
-        isFetchingNextPage={isFetchingNextPage}
-      />
-      {status === 'pending' ? (
+      <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
+      {status === 'pending' || isFetchingNextPage ? (
         <div className="flex justify-center py-10">
           <Loader size="sm" />
         </div>
diff --git a/src/app/(crew)/page.tsx b/src/app/(crew)/page.tsx
index 430424c6..1fd3cbc1 100644
--- a/src/app/(crew)/page.tsx
+++ b/src/app/(crew)/page.tsx
@@ -9,19 +9,20 @@ import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CategoryContainer from '@/src/app/_components/category/category-container';
 import HeroCrew from '@/src/app/_components/hero/hero-crew';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
 import IcoSearch from '@/public/assets/icons/ic-search.svg';
 
 export default function HomePage() {
   const [mainCategory, setMainCategory] = useState('');
   const [subCategory, setSubCategory] = useState('');
-  const [sort, setSort] = useState<string | null>('latest');
+  const [sort, setSort] = useState<string | null>('인기순');
   const [region, setRegion] = useState<string>('');
   const [search, setSearch] = useState('');
   const searchRef = useRef<HTMLInputElement>(null);
 
   const handleRegionChange = (newValue: string) => {
-    const selectedRegion = regionData.find((dataItem) => dataItem.main.value === newValue);
+    const selectedRegion = regionData.find((dataItem) => dataItem.main.label === newValue);
     if (selectedRegion?.main.label === '지역 전체') return '';
     return selectedRegion ? selectedRegion.main.label : '';
   };
@@ -41,7 +42,7 @@ export default function HomePage() {
         mainLocation: handleRegionChange(region),
         mainCategory,
         subCategory,
-        sortType: sort === 'latest' ? 'LATEST' : 'POPULAR',
+        sortType: sort === '최신순' ? 'LATEST' : 'POPULAR',
       },
       pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
     }),
@@ -68,34 +69,40 @@ export default function HomePage() {
       </div>
       <Divider mx={{ base: 0, md: 32, lg: 34 }} my={24} size={2} color="#E5E7EB" />
       <div className="px-3 md:px-8 lg:px-11.5">
-        <div className="flex flex-col justify-between gap-2 md:flex-row md:gap-4">
-          <div className="flex-1">
+        <div className="flex flex-col justify-between gap-2 lg:flex-row lg:gap-[185px]">
+          <div className="flex w-full justify-between gap-2">
             <TextInput
               ref={searchRef}
               leftSectionPointerEvents="none"
               onKeyDown={(e) => {
                 if (e.key === 'Enter') handleSearch();
               }}
-              rightSection={
-                <button type="button" className="flex h-5 w-5" onClick={handleSearch}>
-                  <Image
-                    src={IcoSearch}
-                    alt="search"
-                    width={20}
-                    height={20}
-                    className="-ml-1"
-                    aria-label="검색하기"
-                  />
-                </button>
+              leftSection={
+                <Image
+                  src={IcoSearch}
+                  alt="search"
+                  width={20}
+                  height={20}
+                  className="-mr-1"
+                  aria-label="검색하기"
+                />
               }
               placeholder="크루 이름, 위치를 검색하세요."
               classNames={{
+                root: 'w-full',
                 input:
-                  'h-11 w-full rounded-xl border-0 pr-10 font-pretendard text-base font-medium text-gray-800 placeholder:text-gray-500',
+                  'h-11 w-full rounded-xl border-0 pl-10 font-pretendard text-base font-medium text-gray-800 placeholder:text-gray-500',
               }}
             />
+            <Button
+              type="button"
+              onClick={handleSearch}
+              className="btn-filled flex h-11 min-w-21.5 px-7 text-base font-semibold"
+            >
+              검색
+            </Button>
           </div>
-          <div className="flex-0 flex justify-between gap-2 md:basis-67 md:gap-4">
+          <div className="flex-0 flex justify-between gap-2 md:gap-4">
             <DropDown
               name="region"
               variant="default"
@@ -114,7 +121,7 @@ export default function HomePage() {
                 { value: 'latest', label: '최신순' },
                 { value: 'best', label: '인기순' },
               ]}
-              placeholder="최신순"
+              placeholder="인기순"
               value={sort}
               className="w-[130px]"
               onChange={(newValue) => {
@@ -125,8 +132,8 @@ export default function HomePage() {
         </div>
       </div>
       <div className="mt-8 px-3 md:px-8 lg:px-11.5">
-        {data && <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />}
-        {status === 'pending' ? (
+        {data && <CrewCardList data={data} />}
+        {status === 'pending' || isFetchingNextPage ? (
           <div className="flex justify-center py-10">
             <Loader size="sm" />
           </div>
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 672875e0..a283efd8 100644
--- a/src/components/common/crew-list/crew-card-list.stories.tsx
+++ b/src/components/common/crew-list/crew-card-list.stories.tsx
@@ -1,3 +1,4 @@
+import { Loader } from '@mantine/core';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
@@ -27,21 +28,33 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 function RenderCrewCardList() {
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll(
+  const { data, status, isFetchingNextPage, ref } = useInfiniteScroll(
     useGetCrewListQuery({
       condition: {
         keyword: '',
         mainLocation: '',
         mainCategory: '',
         subCategory: '',
-        sortType: 'LATEST',
+        sortType: 'POPULAR',
       },
       pageable: { page: 0, size: 6, sort: ['createdAt,desc'] },
     }),
   );
 
   if (!data) return null;
-  return <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />;
+  return (
+    <div>
+      {data && <CrewCardList data={data} />}
+      {status === 'pending' || isFetchingNextPage ? (
+        <div className="flex justify-center py-10">
+          <Loader size="sm" />
+        </div>
+      ) : (
+        <div ref={ref} className="h-[1px]" />
+      )}
+      {status === 'error' && <p className="py-10 text-center">에러가 발생했습니다.</p>}
+    </div>
+  );
 }
 
 export const Default: Story = {
diff --git a/src/components/common/crew-list/crew-card-list.tsx b/src/components/common/crew-list/crew-card-list.tsx
index 8fb36641..26bd3a53 100644
--- a/src/components/common/crew-list/crew-card-list.tsx
+++ b/src/components/common/crew-list/crew-card-list.tsx
@@ -1,5 +1,4 @@
-import React, { forwardRef } from 'react';
-import { Loader } from '@mantine/core';
+import React from 'react';
 import { InfiniteData } from '@tanstack/react-query';
 import {
   MainCrewList,
@@ -12,11 +11,10 @@ import CrewCard from './crew-card';
 // CrewCardListProps 타입을 구분하여 정의
 interface CrewCardListProps {
   data: InfiniteData<MyCrewListResponse | MainCrewListResponse, unknown>;
-  isFetchingNextPage: boolean;
   inWhere?: 'my-crew' | 'main-crew';
 }
 
-function CrewCardList({ data, isFetchingNextPage, inWhere }: CrewCardListProps) {
+export default function CrewCardList({ data, inWhere }: CrewCardListProps) {
   const crewDataList =
     inWhere === 'my-crew'
       ? data.pages.flatMap((page) => page.content as MyCrewList[])
@@ -35,47 +33,36 @@ function CrewCardList({ data, isFetchingNextPage, inWhere }: CrewCardListProps)
     );
 
   return (
-    <>
-      <ul className={`mx-auto grid w-full grid-cols-1 gap-x-2 gap-y-2 ${gridColsStyle}`}>
-        {crewDataList.map((inform) => (
-          // NOTE: 데이터 이름 변경이 많은 곳이라 dev로 보면 아마 undefined로 나오지만(목데이터도 변경이 필요함..)
-          // NOTE: 추후 백앤드 api를 fetch 하면 정상적으로 확인할 수 있습니다.
-          <li key={inform?.id} className="w-full">
-            <CrewCard
-              inWhere={inWhere}
-              id={inform?.id}
-              title={inform?.title}
-              mainLocation={inform?.mainLocation}
-              subLocation={inform?.subLocation}
-              imageUrl={
-                inform?.imageUrl === 'string'
-                  ? 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko='
-                  : inform?.imageUrl
-              }
-              totalCount={inform?.totalCount}
-              participantCount={
-                inWhere === 'my-crew'
-                  ? (inform as MyCrewList)?.currentCount
-                  : (inform as MainCrewList)?.participantCount
-              }
-              totalGatheringCount={
-                inWhere === 'my-crew'
-                  ? (inform as MyCrewList)?.totalGathering
-                  : (inform as MainCrewList)?.totalGatheringCount
-              }
-              crewMembers={inWhere === 'my-crew' ? (inform as MyCrewList)?.crewMembers : undefined}
-              isConfirmed={inWhere !== 'my-crew' && (inform as MainCrewList)?.isConfirmed}
-            />
-          </li>
-        ))}
-      </ul>
-      {isFetchingNextPage && (
-        <div className="flex justify-center py-10">
-          <Loader size="sm" />
-        </div>
-      )}
-    </>
+    <ul className={`mx-auto grid w-full grid-cols-1 gap-x-2 gap-y-2 ${gridColsStyle}`}>
+      {crewDataList.map((inform) => (
+        <li key={inform?.id} className="w-full">
+          <CrewCard
+            inWhere={inWhere}
+            id={inform?.id}
+            title={inform?.title}
+            mainLocation={inform?.mainLocation}
+            subLocation={inform?.subLocation}
+            imageUrl={
+              inform?.imageUrl === 'string'
+                ? 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko='
+                : inform?.imageUrl
+            }
+            totalCount={inform?.totalCount}
+            participantCount={
+              inWhere === 'my-crew'
+                ? (inform as MyCrewList)?.currentCount
+                : (inform as MainCrewList)?.participantCount
+            }
+            totalGatheringCount={
+              inWhere === 'my-crew'
+                ? (inform as MyCrewList)?.totalGathering
+                : (inform as MainCrewList)?.totalGatheringCount
+            }
+            crewMembers={inWhere === 'my-crew' ? (inform as MyCrewList)?.crewMembers : undefined}
+            isConfirmed={inWhere !== 'my-crew' && (inform as MainCrewList)?.isConfirmed}
+          />
+        </li>
+      ))}
+    </ul>
   );
 }
-
-export default forwardRef(CrewCardList);
diff --git a/src/components/common/input/drop-down/index.tsx b/src/components/common/input/drop-down/index.tsx
index 34dfaa0e..3f22cb72 100644
--- a/src/components/common/input/drop-down/index.tsx
+++ b/src/components/common/input/drop-down/index.tsx
@@ -27,6 +27,7 @@ export default function DropDown({
   error,
   ...rest
 }: DropDownProps) {
+  const [currentValue, setCurrentValue] = useState<string | null>(null);
   const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -51,15 +52,22 @@ export default function DropDown({
       : 'bg-white text-gray-800 placeholder-gray-800 sort-bg pl-10';
   };
 
-  const handleChange = (newValue: string | null) => {
-    onChange(newValue);
+  const handleChange = (newValue: string | null, option: { value: string; label: string }) => {
+    if (newValue === null) {
+      setCurrentValue(null);
+      onChange(null);
+      return;
+    }
+    setCurrentValue(newValue);
+    onChange(option.label);
     setIsFocused(false);
     inputRef.current?.blur();
   };
 
   useEffect(() => {
     if (value === null) {
-      onChange(null);
+      onChange('');
+      setCurrentValue(null);
     }
   }, [value]);
 
@@ -68,11 +76,11 @@ export default function DropDown({
       error={error}
       mt="md"
       data={data}
-      value={value}
+      value={currentValue}
       name={name}
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}
-      onChange={handleChange}
+      onChange={(_value, option) => handleChange(_value, option)}
       color={getColor}
       leftSection=""
       rightSection={variant !== 'sort' && <IconArrow direction="down" color={getColor} />}
diff --git a/src/components/common/input/file-input-wrap/file-input/index.tsx b/src/components/common/input/file-input-wrap/file-input/index.tsx
index 77e06590..0b6fe9fc 100644
--- a/src/components/common/input/file-input-wrap/file-input/index.tsx
+++ b/src/components/common/input/file-input-wrap/file-input/index.tsx
@@ -4,13 +4,13 @@ import IcoPlus from '@/public/assets/icons/ic-plus.svg';
 import IcoX from '@/public/assets/icons/ic-x.svg';
 
 export interface FileInputProps {
-  value: File | StaticImageData | null;
-  onChange: (value: File | StaticImageData | null) => void;
+  value: File | StaticImageData | string | null;
+  onChange: (value: File | null) => void;
   isBlur: boolean;
 }
 
 export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
-  const [preview, setPreview] = useState<string | null>(null);
+  const [preview, setPreview] = useState<string | null>(typeof value === 'string' ? value : null);
   const [fileReader, setFileReader] = useState<FileReader | null>(null);
   const fileInput = useRef<HTMLInputElement>(null);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -45,7 +45,6 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0];
       onChange(file);
-      e.target.value = '';
 
       // 디바운싱된 파일 로드 실행
       debouncedHandleFileLoad(file);
@@ -80,7 +79,7 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
     if (isBlur && value) {
       setPreview(null); // 블러 상태에서 미리보기 제거
     }
-  }, [isBlur]);
+  }, [isBlur, value]);
 
   return (
     <div className="min-w-1/4 relative flex aspect-square w-1/4 gap-2">
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 0b2b240c..3bbe0f88 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
@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import { StaticImageData } from 'next/image';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
-import ImgCrewSamples from '@/public/assets/images/crew-sample';
+import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 import FileSample, { FileSampleProps } from '.';
 
 const meta: Meta = {
@@ -27,10 +26,10 @@ const meta: Meta = {
 export default meta;
 
 const Template: StoryFn<FileSampleProps> = function FileInputStory(args: FileSampleProps) {
-  const [selectedFile, setSelectedFile] = useState<File | StaticImageData | null>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [isBlur, setIsBlur] = useState(false);
 
-  const handleFileChange = (file: File | StaticImageData | null) => {
+  const handleFileChange = (file: string | null) => {
     setSelectedFile(file);
     setIsBlur(false); // 파일 선택 시 블러 해제
   };
@@ -52,7 +51,7 @@ const Template: StoryFn<FileSampleProps> = function FileInputStory(args: FileSam
 };
 export const FileSample01 = Template.bind({});
 FileSample01.args = {
-  image: ImgCrewSamples[0],
+  image: ImgCrewSampleUrls[0],
   isBlur: false,
   onChange: () => {
     action('onChange');
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 84d41566..c0c58fed 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
@@ -2,12 +2,14 @@ import { useEffect, useRef } from 'react';
 import Image, { StaticImageData } from 'next/image';
 
 export interface FileSampleProps {
-  image: StaticImageData;
+  isEdit?: boolean;
+  value?: string;
+  image: string;
   isBlur: boolean;
-  onChange: (inputValue: StaticImageData) => void;
+  onChange: (inputValue: string) => void;
 }
 
-export default function FileSample({ image, isBlur, onChange }: FileSampleProps) {
+export default function FileSample({ isEdit, value, image, isBlur, onChange }: FileSampleProps) {
   const radioInput = useRef<HTMLInputElement>(null);
 
   const handleClick = async () => {
@@ -18,7 +20,10 @@ export default function FileSample({ image, isBlur, onChange }: FileSampleProps)
     if (isBlur && radioInput.current) {
       radioInput.current.checked = false;
     }
-  }, [isBlur]);
+    if (!isBlur && isEdit && value === image && radioInput.current) {
+      radioInput.current.checked = true;
+    }
+  }, [isBlur, value, isEdit]);
 
   return (
     <label className="min-w-1/4 relative aspect-square w-1/4 overflow-hidden rounded-xl">
diff --git a/src/components/common/input/file-input-wrap/index.tsx b/src/components/common/input/file-input-wrap/index.tsx
index c22adb17..12a48811 100644
--- a/src/components/common/input/file-input-wrap/index.tsx
+++ b/src/components/common/input/file-input-wrap/index.tsx
@@ -1,29 +1,29 @@
 'use client';
 
 import { useState } from 'react';
-import { StaticImageData } from 'next/image';
 import FileInput from './file-input';
 import FileSample from './file-sample';
 
 export interface FileInputProps {
-  value: File | StaticImageData | null;
-  sample: StaticImageData[];
-  onChange: (newValue: File | StaticImageData | null) => void;
+  isEdit?: boolean;
+  value: File | string | null;
+  sample: string[];
+  onChange: (newValue: File | string | null) => void;
 }
 
-export default function FileInputWrap({ value, sample, onChange }: FileInputProps) {
-  const [fileValue, setFileValue] = useState<File | StaticImageData | null>(value);
+export default function FileInputWrap({ isEdit, value, sample, onChange }: FileInputProps) {
+  const [fileValue, setFileValue] = useState<File | string | null>(value);
   const [isOtherSelected, setIsOtherSelected] = useState(false);
   const [isSampleSelected, setIsSampleSelected] = useState(false);
 
-  const handleChange = (inputValue: StaticImageData) => {
+  const handleChange = (inputValue: string) => {
     setIsOtherSelected(false);
     setIsSampleSelected(true);
     setFileValue(inputValue);
     onChange(inputValue);
   };
 
-  const handleFileInput = (inputValue: File | StaticImageData | null) => {
+  const handleFileInput = (inputValue: File | null) => {
     setIsOtherSelected(true);
     setIsSampleSelected(false);
     setFileValue(inputValue);
@@ -32,9 +32,27 @@ export default function FileInputWrap({ value, sample, onChange }: FileInputProp
 
   return (
     <div className="container flex max-w-[1200px] gap-4">
-      <FileSample image={sample[0]} onChange={handleChange} isBlur={isOtherSelected} />
-      <FileSample image={sample[1]} onChange={handleChange} isBlur={isOtherSelected} />
-      <FileSample image={sample[2]} onChange={handleChange} isBlur={isOtherSelected} />
+      <FileSample
+        isEdit={isEdit}
+        value={isEdit ? (value as string) : sample[0]}
+        image={sample[0]}
+        onChange={handleChange}
+        isBlur={isOtherSelected}
+      />
+      <FileSample
+        isEdit={isEdit}
+        value={isEdit ? (value as string) : sample[0]}
+        image={sample[1]}
+        onChange={handleChange}
+        isBlur={isOtherSelected}
+      />
+      <FileSample
+        isEdit={isEdit}
+        value={isEdit ? (value as string) : sample[0]}
+        image={sample[2]}
+        onChange={handleChange}
+        isBlur={isOtherSelected}
+      />
       <FileInput value={fileValue} onChange={handleFileInput} isBlur={isSampleSelected} />
     </div>
   );
diff --git a/src/types/create-crew.d.ts b/src/types/create-crew.d.ts
index d3a47cb7..7920e8a9 100644
--- a/src/types/create-crew.d.ts
+++ b/src/types/create-crew.d.ts
@@ -1,12 +1,33 @@
 import { StaticImageData } from 'next/image';
+import { interpolate } from 'framer-motion';
 
 // NOTE : imageURL 임시로 File로 지정
-export interface CreateCrewRequestTypes {
+export interface CreateCrewFormTypes {
   title: string;
   mainCategory: string;
   subCategory: string | null;
   mainLocation: string;
   subLocation: string | null;
   totalCount: number;
-  imageUrl: File | StaticImageData | null;
+  introduce: string;
+  imageUrl: File | string | null;
+}
+
+export interface CreateCrewRequestTypes {
+  title: string;
+  mainCategory: string;
+  subCategory: string;
+  mainLocation: string;
+  subLocation: string;
+  totalCount: number;
+  introduce: string;
+  imageUrl: string;
+}
+
+export interface CreateCrewResponseTypes {
+  crewId: number;
+}
+
+export interface GetImageUrlResponseTypes {
+  imageUrl: string;
 }
diff --git a/src/types/gathering-data.d.ts b/src/types/gathering-data.d.ts
index ee1d8b89..7ebe3d23 100644
--- a/src/types/gathering-data.d.ts
+++ b/src/types/gathering-data.d.ts
@@ -27,13 +27,22 @@ export interface GatheringData {
   };
 }
 
-export interface CreateGatheringRequestType {
+export interface CreateGatheringFormTypes {
   title: string; // 20자 이내
   introduce: string; // 소개글 100자 이내
   dateTime: string;
   location: string;
   totalCount: number;
-  imageUrl: File | StaticImageData | null; // NOTE : 임시로 File로 설정
+  imageUrl: File | string | null;
+}
+
+export interface CreateGatheringRequestTypes {
+  title: string; // 20자 이내
+  introduce: string; // 소개글 100자 이내
+  dateTime: string;
+  location: string;
+  totalCount: number;
+  imageUrl: string;
 }
 
 export interface GatheringCardProps {
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 0b6110a8..dc2f8769 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -37,7 +37,6 @@ export async function fetchApi<T>(
 
   try {
     const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${url}`, fetchOptions); // API 요청 실행
-
     if (!response.ok) {
       let errorDetail;
       let errorMessage;
diff --git a/src/utils/validate-file.ts b/src/utils/validate-file.ts
new file mode 100644
index 00000000..c8c1584c
--- /dev/null
+++ b/src/utils/validate-file.ts
@@ -0,0 +1,30 @@
+const validateFile = (file: File | string) => {
+  // 문자열(기존 URL)인 경우 검증 통과
+  if (typeof file === 'string') return true;
+
+  // 파일인 경우 상세 검증 수행
+  if (file instanceof File) {
+    // 파일 확장자 검증
+    const extension = file.name.split('.').pop()?.toLowerCase();
+    const validExtensions = ['jpg', 'jpeg', 'png'];
+
+    if (!extension || !validExtensions.includes(extension)) {
+      return 'JPG, PNG 파일만 업로드 가능합니다.';
+    }
+
+    // 파일 크기 검증
+    if (file.size > 5 * 1024 * 1024) {
+      return '파일 크기는 5MB 이하여야 합니다.';
+    }
+
+    // MIME 타입 검증
+    if (!['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)) {
+      return '올바른 이미지 형식이 아닙니다.';
+    }
+
+    return true;
+  }
+  return false;
+};
+
+export default validateFile;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fb72f3b8..dda96831 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -30,6 +30,7 @@ const config: Config = {
         ic: 'calc(11.11111% - 7.1111px)',
         7.5: '30px',
         12.5: '50px',
+        21.5: '86px',
         27.5: '110px',
       },
       width: {