diff --git a/package-lock.json b/package-lock.json
index a9c4068a..c61ceff2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2347,6 +2347,126 @@
         "glob": "10.3.10"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.18.tgz",
+      "integrity": "sha512-tOBlDHCjGdyLf0ube/rDUs6VtwNOajaWV+5FV/ajPgrvHeisllEdymY/oDgv2cx561+gJksfMUtqf8crug7sbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.18.tgz",
+      "integrity": "sha512-uJCEjutt5VeJ30jjrHV1VIHCsbMYnEqytQgvREx+DjURd/fmKy15NaVK4aR/u98S1LGTnjq35lRTnRyygglxoA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.18.tgz",
+      "integrity": "sha512-IL6rU8vnBB+BAm6YSWZewc+qvdL1EaA+VhLQ6tlUc0xp+kkdxQrVqAnh8Zek1ccKHlTDFRyAft0e60gteYmQ4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.18.tgz",
+      "integrity": "sha512-RCaENbIZqKKqTlL8KNd+AZV/yAdCsovblOpYFp0OJ7ZxgLNbV5w23CUU1G5On+0fgafrsGcW+GdMKdFjaRwyYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.18.tgz",
+      "integrity": "sha512-3kmv8DlyhPRCEBM1Vavn8NjyXtMeQ49ID0Olr/Sut7pgzaQTo4h01S7Z8YNE0VtbowyuAL26ibcz0ka6xCTH5g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.18.tgz",
+      "integrity": "sha512-mliTfa8seVSpTbVEcKEXGjC18+TDII8ykW4a36au97spm9XMPqQTpdGPNBJ9RySSFw9/hLuaCMByluQIAnkzlw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.18.tgz",
+      "integrity": "sha512-J5g0UFPbAjKYmqS3Cy7l2fetFmWMY9Oao32eUsBPYohts26BdrMUyfCJnZFQkX9npYaHNDOWqZ6uV9hSDPw9NA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.18",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.18.tgz",
+      "integrity": "sha512-Ynxuk4ZgIpdcN7d16ivJdjsDG1+3hTvK24Pp8DiDmIa2+A4CfhJSEHHVndCHok6rnLUzAZD+/UOKESQgTsAZGg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
       "version": "14.2.18",
       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.18.tgz",
diff --git a/public/assets/images/crew-sample/crew-sample-2.jpg b/public/assets/images/crew-sample/crew-sample-2.jpg
index 10e7fbb0..368e20d1 100644
Binary files a/public/assets/images/crew-sample/crew-sample-2.jpg and b/public/assets/images/crew-sample/crew-sample-2.jpg differ
diff --git a/public/assets/images/crew-sample/index.tsx b/public/assets/images/crew-sample/index.tsx
index 9e530eed..c8cbe811 100644
--- a/public/assets/images/crew-sample/index.tsx
+++ b/public/assets/images/crew-sample/index.tsx
@@ -5,7 +5,7 @@ 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/817dac5a-f5e7-43c4-b32e-50d1ad2983aa',
   'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/471b3b3b-b23c-48e8-8e6b-9a7ec31e1917',
 ];
 
diff --git a/public/assets/images/gathering-sample/gathering-sample-1.jpg b/public/assets/images/gathering-sample/gathering-sample-1.jpg
index e31570d0..30c640c1 100644
Binary files a/public/assets/images/gathering-sample/gathering-sample-1.jpg and b/public/assets/images/gathering-sample/gathering-sample-1.jpg differ
diff --git a/public/assets/images/gathering-sample/gathering-sample-2.jpg b/public/assets/images/gathering-sample/gathering-sample-2.jpg
index ea07eeb8..12d523f4 100644
Binary files a/public/assets/images/gathering-sample/gathering-sample-2.jpg and b/public/assets/images/gathering-sample/gathering-sample-2.jpg differ
diff --git a/public/assets/images/gathering-sample/gathering-sample-3.jpg b/public/assets/images/gathering-sample/gathering-sample-3.jpg
index dead8ceb..5c9cf75e 100644
Binary files a/public/assets/images/gathering-sample/gathering-sample-3.jpg and b/public/assets/images/gathering-sample/gathering-sample-3.jpg differ
diff --git a/public/assets/images/gathering-sample/index.tsx b/public/assets/images/gathering-sample/index.tsx
index 116d1637..44f19070 100644
--- a/public/assets/images/gathering-sample/index.tsx
+++ b/public/assets/images/gathering-sample/index.tsx
@@ -4,9 +4,9 @@ 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',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/e276276c-c79e-4654-a2b2-279bccb7ca05',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/69d4f72f-8bad-4e9e-894c-9e8c9b57db2d',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/d3c507f4-0391-4acb-8bc3-ae5379bdb058',
 ];
 
 export default ImgGatheringSampleUrls;
diff --git a/public/assets/images/og.png b/public/assets/images/og.png
new file mode 100644
index 00000000..2af069ed
Binary files /dev/null and b/public/assets/images/og.png differ
diff --git a/src/_apis/image/get-image-url.ts b/src/_apis/image/get-image-url.ts
index 253c7e56..64220cb4 100644
--- a/src/_apis/image/get-image-url.ts
+++ b/src/_apis/image/get-image-url.ts
@@ -1,6 +1,4 @@
 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(
@@ -10,9 +8,6 @@ export async function getImageUrl(
   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(
@@ -28,7 +23,6 @@ export async function getImageUrl(
 
       return response.data;
     } catch (error) {
-      // eslint-disable-next-line no-console
       throw error;
     }
   }
diff --git a/src/_queries/crew/crew-detail-queries.ts b/src/_queries/crew/crew-detail-queries.ts
index f357186a..314da2ad 100644
--- a/src/_queries/crew/crew-detail-queries.ts
+++ b/src/_queries/crew/crew-detail-queries.ts
@@ -24,6 +24,8 @@ export function useCreateCrewQuery() {
       }
       queryClient.invalidateQueries({ queryKey: ['crewLists', 'crewDetail'] });
       toast.success('크루가 생성되었습니다.');
+      localStorage.removeItem('createCrew');
+
       router.push(`/crew/detail/${data.crewId}`);
     },
     onError: (error) => {
diff --git a/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx b/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
index 2fb2daf0..23e969fb 100644
--- a/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
+++ b/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import useFormPersist from 'react-hook-form-persist';
+import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
 import { NumberInput } from '@mantine/core';
 import { getImageUrl } from '@/src/_apis/image/get-image-url';
@@ -39,13 +40,14 @@ export default function CreateCrewForm({
     trigger,
     clearErrors,
     watch,
+    setError,
     formState: { errors, isValid, isSubmitting, isSubmitSuccessful },
   } = useForm<CreateCrewFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
 
-  useFormPersist(type === 'create' ? 'createCrew' : 'editCrew', {
+  useFormPersist(type === 'create' ? 'createCrew' : '', {
     watch,
     setValue,
     storage: typeof window !== 'undefined' ? window.localStorage : undefined,
@@ -88,9 +90,30 @@ export default function CreateCrewForm({
     file: File | string | null,
     onChange: (value: string | File) => void,
   ) => {
-    if (file instanceof File) {
-      const imgResponse = await getImageUrl(file, 'CREW');
-      onChange(imgResponse?.imageUrl || '');
+    try {
+      // 파일 등록 처리
+      if (file instanceof File) {
+        const imgResponse = await getImageUrl(file, 'CREW');
+        if (imgResponse?.imageUrl) {
+          clearErrors('imageUrl'); // 에러 초기화
+          onChange(imgResponse.imageUrl); // 이미지 URL 설정
+        } else {
+          throw new Error('이미지 업로드 중 문제가 발생했습니다.');
+        }
+      }
+    } catch (error) {
+      // API 에러 처리
+      setError('imageUrl', { type: 'server', message: errors.imageUrl?.message });
+      setValue('imageUrl', '');
+    }
+  };
+
+  const handleSendForm = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (type === 'create') {
+      handleSubmit(onSubmit)();
+    } else {
+      handleSubmit(onEdit)();
     }
   };
 
@@ -112,7 +135,7 @@ export default function CreateCrewForm({
   }, [mainCategory, mainLocation, isSubmitSuccessful]);
 
   return (
-    <form onSubmit={type === 'edit' ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
+    <form onSubmit={handleSendForm}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
@@ -154,7 +177,7 @@ export default function CreateCrewForm({
         </div>
         <div className="flex flex-col gap-3">
           <label
-            htmlFor="crew-category"
+            htmlFor="crew-mainCategory"
             className="text-base font-semibold text-gray-800 md:text-xl"
           >
             카테고리를 선택해주세요.
@@ -167,6 +190,7 @@ export default function CreateCrewForm({
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-mainCategory"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '메인 카테고리'}
@@ -180,12 +204,16 @@ export default function CreateCrewForm({
                 />
               )}
             />
+            <label htmlFor="crew-subCategory" className="sr-only">
+              세부 카테고리를 선택해주세요.
+            </label>
             <Controller
               name="subCategory"
               control={control}
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-subCategory"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '세부 카테고리'}
@@ -199,31 +227,21 @@ export default function CreateCrewForm({
         </div>
 
         <div className="flex flex-col gap-3">
-          <label htmlFor="crew-image" className="text-base font-semibold text-gray-800 md:text-xl">
+          <span className="text-base font-semibold text-gray-800 md:text-xl">
             대표이미지를 선택하거나 첨부해주세요.
-          </label>
+          </span>
           <Controller
             name="imageUrl"
             control={control}
             rules={{
               required: '이미지를 선택해주세요.',
-              validate: {
-                fileSize: (file) =>
-                  file && file instanceof File
-                    ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
-                    : true, // 문자열인 경우 크기 검사를 건너뜁니다.
-                fileType: (file) =>
-                  file && file instanceof File
-                    ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
-                      'JPG, PNG 파일만 업로드 가능합니다.'
-                    : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
-              },
             }}
             render={({ field }) => (
               <FileInputWrap
                 {...field}
                 isEdit={isEdit}
                 sample={ImgCrewSampleUrls}
+                error={errors.imageUrl}
                 onChange={(newValue) => {
                   handleFileChange(newValue, field.onChange);
                   field.onChange(newValue);
@@ -232,12 +250,12 @@ export default function CreateCrewForm({
               />
             )}
           />
-          {errors.imageUrl && <p className="text-red-500">{errors.imageUrl.message}</p>}
+          {errors.imageUrl && <p className="text-xs text-red-500">{errors.imageUrl.message}</p>}
         </div>
 
         <div className="flex flex-col gap-3">
           <label
-            htmlFor="crew-category"
+            htmlFor="crew-mainLocation"
             className="text-base font-semibold text-gray-800 md:text-xl"
           >
             지역을 선택해주세요.
@@ -250,6 +268,7 @@ export default function CreateCrewForm({
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-mainLocation"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '특별시/도'}
@@ -263,6 +282,9 @@ export default function CreateCrewForm({
                 />
               )}
             />
+            <label htmlFor="crew-subLocation" className="sr-only">
+              세부 지역을 선택해주세요.
+            </label>
             <Controller
               name="subLocation"
               control={control}
@@ -270,6 +292,7 @@ export default function CreateCrewForm({
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-subLocation"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '시/군/구'}
@@ -314,11 +337,14 @@ 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
+              htmlFor="crew-introduce"
+              className="text-base font-semibold text-gray-800 md:text-xl"
+            >
               크루 소개
             </label>
             <span>
-              <span className="text-blue-500">{introduce?.length}</span>/100
+              <span className="text-blue-500">{introduce.length}</span>/100
             </span>
           </div>
           <Controller
@@ -327,6 +353,7 @@ export default function CreateCrewForm({
             render={({ field }) => (
               <Textarea
                 {...field}
+                id="crew-introduce"
                 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"
diff --git a/src/app/(crew)/crew/create/page.tsx b/src/app/(crew)/crew/create/page.tsx
index c1f34671..f6154fbf 100644
--- a/src/app/(crew)/crew/create/page.tsx
+++ b/src/app/(crew)/crew/create/page.tsx
@@ -40,7 +40,6 @@ export default function CreateCrewPage() {
     };
 
     mutate(newData);
-    localStorage.removeItem('createCrew');
   };
 
   if (isPending)
@@ -57,7 +56,8 @@ export default function CreateCrewPage() {
           <Image
             src={IcoCreateCrew}
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
             alt=""
           />
         </figure>
diff --git a/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx b/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx
index 2e037d86..6dcb3b90 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx
+++ b/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import { FormEvent, useEffect } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
+import { toast } from 'react-toastify';
 import { NumberInput } from '@mantine/core';
 import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import Button from '@/src/components/common/input/button';
@@ -30,6 +32,8 @@ export default function CreateGatheringForm({
     control,
     handleSubmit,
     trigger,
+    setError,
+    clearErrors,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CreateGatheringFormTypes>({
     defaultValues: data,
@@ -43,14 +47,34 @@ export default function CreateGatheringForm({
     file: File | string | null,
     onChange: (value: string | File) => void,
   ) => {
-    if (file instanceof File) {
-      const imgResponse = await getImageUrl(file, 'CREW');
-      onChange(imgResponse?.imageUrl || '');
+    try {
+      // 파일 등록 처리
+      if (file instanceof File) {
+        const imgResponse = await getImageUrl(file, 'GATHERING');
+        if (imgResponse?.imageUrl) {
+          clearErrors('imageUrl'); // 에러 초기화
+          onChange(imgResponse.imageUrl); // 이미지 URL 설정
+        } else {
+          throw new Error('이미지 업로드 중 문제가 발생했습니다.');
+        }
+      }
+    } catch (error) {
+      // API 에러 처리
+      setError('imageUrl', { type: 'server', message: errors.imageUrl?.message });
+    }
+  };
+
+  const handleSendForm = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!isEdit) {
+      handleSubmit(onSubmit)();
+    } else {
+      handleSubmit(onEdit)();
     }
   };
 
   return (
-    <form onSubmit={isEdit ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
+    <form onSubmit={handleSendForm}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
@@ -88,30 +112,18 @@ export default function CreateGatheringForm({
           />
         </div>
         <div className="flex flex-col gap-3">
-          <label htmlFor="gathering-image" className="text-base font-semibold text-gray-800">
-            이미지 선택/첨부
-          </label>
+          <span className="text-base font-semibold text-gray-800">이미지 선택/첨부</span>
           <div className="flex">
             <Controller
               name="imageUrl"
               control={control}
               rules={{
                 required: '이미지를 선택해주세요.',
-                validate: {
-                  fileSize: (file) =>
-                    file && file instanceof File
-                      ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
-                      : true, // 문자열인 경우 크기 검사를 건너뜁니다.
-                  fileType: (file) =>
-                    file && file instanceof File
-                      ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
-                        'JPG, PNG 파일만 업로드 가능합니다.'
-                      : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
-                },
               }}
               render={({ field }) => (
                 <FileInputWrap
                   {...field}
+                  error={errors.imageUrl}
                   sample={ImgGatheringSampleUrls}
                   onChange={(newValue) => {
                     handleFileChange(newValue, field.onChange);
@@ -149,7 +161,7 @@ export default function CreateGatheringForm({
                   if (errors.location) trigger('location'); // 입력 중일 때 유효성 검사 트리거
                 }}
                 error={errors.location?.message}
-                placeholder="약속명을 20자 이내로 입력해주세요."
+                placeholder="약속 장소를 20자 이내로 입력해주세요."
                 maxLength={20}
                 classNames={{
                   input:
@@ -161,9 +173,7 @@ export default function CreateGatheringForm({
         </div>
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
-            <label htmlFor="gathering-dateTime" className="text-base font-semibold text-gray-800">
-              날짜
-            </label>
+            <span className="text-base font-semibold text-gray-800">날짜</span>
           </div>
           <Controller
             name="dateTime"
@@ -223,6 +233,7 @@ export default function CreateGatheringForm({
             render={({ field }) => (
               <Textarea
                 {...field}
+                id="gathering-introduce"
                 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"
diff --git a/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
index d6d4cf32..45e9074b 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
+++ b/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
@@ -61,7 +61,13 @@ export default function DetailCrewPresenter({
     <div className="mx-auto flex max-w-[1200px] flex-col gap-6">
       {/* 상단 이미지와 정보 영역 */}
       <div className="relative h-96 w-full overflow-hidden rounded-lg p-6 shadow-sm">
-        <Image src={imageUrl} alt={title} layout="fill" objectFit="cover" className="rounded-lg" />
+        <Image
+          src={imageUrl}
+          alt={title}
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full rounded-lg object-cover"
+        />
         <div className="absolute inset-0 bg-gradient-to-b from-[rgba(0,0,0,0.0)] via-transparent to-[rgba(0,0,0,0.8)]" />
 
         {/* 오버레이 컨테이너 */}
diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
index 8abd06d5..9ef5ffde 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
+++ b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
@@ -46,7 +46,8 @@ export default function GatheringDetailModalPresenter({
             src={data?.imageUrl}
             alt="모임 이미지"
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
           />
           {isToday(data?.dateTime) && (
             <strong className="absolute right-0 top-0 flex items-center gap-2 bg-blue-600 px-4 py-2 text-base font-medium text-white">
diff --git a/src/app/(crew)/crew/detail/[id]/edit/page.tsx b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
index c908e012..cd0688d5 100644
--- a/src/app/(crew)/crew/detail/[id]/edit/page.tsx
+++ b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
@@ -27,7 +27,6 @@ export default function EditCrewPage() {
     };
 
     mutate(newData);
-    localStorage.removeItem('editCrew');
   };
 
   if (isLoading || isPending)
@@ -43,7 +42,8 @@ export default function EditCrewPage() {
           <Image
             src={IcoCreateCrew}
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
             alt=""
           />
         </figure>
diff --git a/src/app/(crew)/layout.tsx b/src/app/(crew)/layout.tsx
index 56b0e955..27c89429 100644
--- a/src/app/(crew)/layout.tsx
+++ b/src/app/(crew)/layout.tsx
@@ -1,4 +1,3 @@
-import { Bounce, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import '@mantine/core/styles.css';
 import Header from '@/src/components/common/header/container';
@@ -12,19 +11,6 @@ export default function RootLayout({
   return (
     <>
       <Header />
-      <ToastContainer
-        position="bottom-right"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="light"
-        transition={Bounce}
-      />
       <div className="flex min-h-screen flex-col items-center bg-gray-50">
         <main className="container flex min-h-screen max-w-pc flex-1 flex-col md:shadow-bg">
           {children}
diff --git a/src/app/(crew)/page.tsx b/src/app/(crew)/page.tsx
index 76ed33d2..f0c148f0 100644
--- a/src/app/(crew)/page.tsx
+++ b/src/app/(crew)/page.tsx
@@ -103,7 +103,11 @@ export default function HomePage() {
             </Button>
           </div>
           <div className="flex-0 flex justify-between gap-2 md:gap-4">
+            <label htmlFor="region" className="sr-only">
+              지역 선택
+            </label>
             <DropDown
+              id="region"
               name="region"
               variant="default"
               data={regionData.map((dataItem) => dataItem.main)}
@@ -114,7 +118,11 @@ export default function HomePage() {
                 setRegion(newValue as string);
               }}
             />
+            <label htmlFor="sort" className="sr-only">
+              정렬 선택
+            </label>
             <DropDown
+              id="sort"
               name="sort"
               variant="sort"
               data={[
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d2d77a43..81c140ea 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Bounce, ToastContainer } from 'react-toastify';
 import type { Metadata } from 'next';
 import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css';
@@ -9,7 +10,7 @@ import { theme } from '@/src/styles/theme';
 
 export const metadata: Metadata = {
   title: 'CrewCrew',
-  description: 'Generated by CODEIT TEAM1',
+  description: '내 크루와 함께 약속하고 만나는 운동 소모임 웹사이트',
 };
 
 export default function RootLayout({
@@ -20,9 +21,30 @@ export default function RootLayout({
   return (
     <html lang="en" className={pretendard.variable}>
       <head>
+        <meta property="og:image" content="/assets/images/og.png" />
+        <meta property="og:title" content="CrewCrew" />
+        <meta
+          property="og:description"
+          content="내 크루와 함께 약속하고 만나는 운동 소모임 웹사이트"
+        />
+        <meta property="og:url" content="https://crewcrew.vercel.app" />
         <ColorSchemeScript />
       </head>
       <body>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={3000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="light"
+          transition={Bounce}
+          limit={1}
+        />
         <ClientProvider>
           <MantineProvider theme={theme}>
             {children}
diff --git a/src/components/common/crew-list/crew-card.tsx b/src/components/common/crew-list/crew-card.tsx
index 90ebdabf..f9b490c6 100644
--- a/src/components/common/crew-list/crew-card.tsx
+++ b/src/components/common/crew-list/crew-card.tsx
@@ -49,7 +49,13 @@ export default function CrewCard({
     >
       {/* 썸네일 */}
       <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">
-        <Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} />
+        <Image
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          alt={title}
+          src={imageUrl}
+          className="h-full w-full object-cover"
+        />
       </div>
 
       <div className="flex min-h-[203px] w-full flex-col justify-between p-6 sm:px-4 sm:pt-4">
diff --git a/src/components/common/gathering-card/presenter.tsx b/src/components/common/gathering-card/presenter.tsx
index f43d5033..a77048af 100644
--- a/src/components/common/gathering-card/presenter.tsx
+++ b/src/components/common/gathering-card/presenter.tsx
@@ -60,8 +60,8 @@ export default function GatheringCardPresenter({
           src={imageUrl}
           alt={title}
           fill
-          style={{ objectFit: 'cover' }}
-          className="rounded-t-lg"
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full rounded-t-lg object-cover"
         />
       </div>
 
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 6d22ffda..741005c9 100644
--- a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
+++ b/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
@@ -28,8 +28,15 @@ export default function ScheduledGatheringCardPresenter({
         tabIndex={0}
         className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44"
       >
-        <div className="relative h-1/2 w-full flex-shrink-0 overflow-hidden rounded-t-lg md:h-full md:w-1/3 md:rounded-l-lg md:rounded-r-none">
-          <Image src={imageUrl} alt={title} layout="fill" className="object-cover" />
+        {/* Image Section */}
+        <div className="relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg md:h-32 md:w-32 lg:h-32 lg:w-32">
+          <Image
+            src={imageUrl}
+            alt={title}
+            fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
+          />
         </div>
         <div className="flex h-1/2 w-full min-w-0 flex-grow flex-col justify-between p-4 md:h-full">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">
diff --git a/src/components/common/input/drop-down/index.tsx b/src/components/common/input/drop-down/index.tsx
index 7be4276f..fcde5af0 100644
--- a/src/components/common/input/drop-down/index.tsx
+++ b/src/components/common/input/drop-down/index.tsx
@@ -3,6 +3,7 @@ import { ComboboxData, Select } from '@mantine/core';
 import IconArrow from '@/public/assets/icons/ic-arrow';
 
 export interface DropDownProps {
+  id?: string;
   variant: 'default' | 'sort';
   data: ComboboxData;
   name: string;
@@ -16,6 +17,7 @@ export interface DropDownProps {
 }
 
 export default function DropDown({
+  id,
   inWhere = 'default',
   name,
   variant,
@@ -73,6 +75,7 @@ export default function DropDown({
 
   return (
     <Select
+      id={id}
       error={error}
       mt="md"
       data={data}
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 a0c1dc66..29fe705d 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
@@ -1,5 +1,7 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import { FieldError } from 'react-hook-form';
+import { toast } from 'react-toastify';
+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';
@@ -8,6 +10,7 @@ import ImgGatheringSampleUrls from '@/public/assets/images/gathering-sample';
 export interface FileInputProps {
   value: File | string | null;
   onChange: (value: File | null) => void;
+  error?: FieldError | undefined;
   isBlur: boolean;
 }
 
@@ -17,20 +20,10 @@ const isSample = (value: File | string | null) => {
   }
   return false;
 };
-export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
+export default function FileInput({ value, isBlur, error, onChange }: FileInputProps) {
   const [preview, setPreview] = useState<string | null>(isSample(value) ? null : (value as string));
   const [fileReader, setFileReader] = useState<FileReader | null>(null);
   const fileInput = useRef<HTMLInputElement>(null);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  // 디바운싱 함수 : 이벤트가 연속해서 발생하는 동안은 함수가 실행되지 않고,
-  // 이벤트가 끝난 후 일정 시간 동안 이벤트가 발생하지 않으면 함수가 실행됩니다.
-  const debounce = (func: (...args: File[]) => void, delay: number) => {
-    return (...args: File[]) => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => func(...args), delay);
-    };
-  };
 
   const handleFileLoad = (file: File) => {
     // 이전 FileReader가 있을 경우 중단
@@ -42,20 +35,31 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
     setFileReader(reader);
 
     reader.onloadend = () => {
-      setPreview(reader.result as string);
+      if (reader.result) {
+        setPreview(reader.result as string);
+      }
     };
     reader.readAsDataURL(file);
   };
 
-  const debouncedHandleFileLoad = debounce(handleFileLoad, 300);
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0];
+      // // 명시적인 파일 형식 검증 추가
+      const allowedTypes = ['image/jpeg', 'image/png'];
+      if (!allowedTypes.includes(file.type)) {
+        // 허용되지 않은 파일 형식 처리
+        e.target.value = ''; // 입력 필드 초기화
+        toast.error('JPG, PNG 파일만 업로드 가능합니다.');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        e.target.value = ''; // 입력 필드 초기화
+        toast.error('파일 크기는 5MB 이하여야 합니다.');
+        return;
+      }
       onChange(file);
-
-      // 디바운싱된 파일 로드 실행
-      debouncedHandleFileLoad(file);
+      handleFileLoad(file);
     }
   };
 
@@ -70,20 +74,27 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
   // 클린업을 위한 useEffect
   useEffect(() => {
     return () => {
-      // 컴포넌트 언마운트 시 클린업
-      if (fileReader) {
-        fileReader.abort(); // 진행 중이던 파일 읽기 중단
-      }
       if (preview) {
         URL.revokeObjectURL(preview);
       }
-      if (timerRef.current) {
-        clearTimeout(timerRef.current); // 디바운스 타이머 클리어
-      }
     };
-  }, [fileReader]);
+  }, [fileReader, preview]);
 
   useEffect(() => {
+    if (error) {
+      setPreview(null);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (!isBlur && value) {
+      if (typeof value === 'string') {
+        setPreview(value);
+      } else {
+        handleFileLoad(value);
+        onChange(value);
+      }
+    }
     if (isBlur && value) {
       setPreview(null); // 블러 상태에서 미리보기 제거
     }
@@ -98,9 +109,10 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
         <figure className="relative flex h-3.5 w-3.5 md:h-5 md:w-5">
           <Image
             fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
             src={IcoPlus}
             alt="이미지 추가"
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            className="h-full w-full object-cover"
           />
         </figure>
         <span className="text-xs font-medium text-gray-400 md:text-base lg:text-lg">
@@ -118,7 +130,13 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
 
       {preview && (
         <div className="absolute inset-0 overflow-hidden rounded-xl bg-neutral-100">
-          <Image src={preview} fill alt="이미지 미리보기" className="h-full w-full object-cover" />
+          <Image
+            src={preview}
+            fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            alt="이미지 미리보기"
+            className="h-full w-full object-cover"
+          />
           <button
             type="button"
             onClick={handleClearClick}
diff --git a/src/components/common/input/file-input-wrap/index.tsx b/src/components/common/input/file-input-wrap/index.tsx
index 12a48811..0c59881d 100644
--- a/src/components/common/input/file-input-wrap/index.tsx
+++ b/src/components/common/input/file-input-wrap/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { FieldError } from 'react-hook-form';
 import FileInput from './file-input';
 import FileSample from './file-sample';
 
@@ -8,10 +9,11 @@ export interface FileInputProps {
   isEdit?: boolean;
   value: File | string | null;
   sample: string[];
+  error: FieldError | undefined;
   onChange: (newValue: File | string | null) => void;
 }
 
-export default function FileInputWrap({ isEdit, value, sample, onChange }: FileInputProps) {
+export default function FileInputWrap({ isEdit, value, sample, error, onChange }: FileInputProps) {
   const [fileValue, setFileValue] = useState<File | string | null>(value);
   const [isOtherSelected, setIsOtherSelected] = useState(false);
   const [isSampleSelected, setIsSampleSelected] = useState(false);
@@ -53,7 +55,12 @@ export default function FileInputWrap({ isEdit, value, sample, onChange }: FileI
         onChange={handleChange}
         isBlur={isOtherSelected}
       />
-      <FileInput value={fileValue} onChange={handleFileInput} isBlur={isSampleSelected} />
+      <FileInput
+        value={fileValue}
+        onChange={handleFileInput}
+        isBlur={isSampleSelected}
+        error={error}
+      />
     </div>
   );
 }
diff --git a/src/components/common/profile/index.tsx b/src/components/common/profile/index.tsx
index 7e9113e3..5722d171 100644
--- a/src/components/common/profile/index.tsx
+++ b/src/components/common/profile/index.tsx
@@ -70,8 +70,8 @@ export function Profile({
             src={imageUrl && imageUrl.trim() ? imageUrl : defaultImage}
             alt="프로필 이미지"
             fill
-            style={{ objectFit: 'cover' }}
-            className="rounded-full"
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full rounded-full object-cover"
             priority={priority}
           />
         </div>
diff --git a/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx b/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx
index eb5fec4c..2e8dc45a 100644
--- a/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx
+++ b/src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx
@@ -50,7 +50,13 @@ export default function ReviewableGatheringCard({
   return (
     <div className="flex w-full max-w-[1200px] gap-[20px] border-b-[2px] border-b-gray-200 py-[24px]">
       <span className="relative h-[166px] w-[294px] overflow-hidden rounded-[12px]">
-        <Image src={imageUrl} alt={gatheringName} fill />
+        <Image
+          src={imageUrl}
+          alt={gatheringName}
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full object-cover"
+        />
       </span>
       <div className="flex w-full items-end justify-between">
         <div className="flex h-full flex-col items-start justify-between">
@@ -60,7 +66,13 @@ export default function ReviewableGatheringCard({
             </div>
             <div className="flex w-fit items-center">
               <span className="relative inline-block h-[20px] w-[20px]">
-                <Image alt="참여 인원" src={person} fill />
+                <Image
+                  alt="참여 인원"
+                  src={person}
+                  fill
+                  sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="h-full w-full object-contain"
+                />
               </span>
               <span className="mr-[22px] text-base font-medium text-gray-700">
                 {currentCount}/{totalCount}
diff --git a/src/utils/validate-file.ts b/src/utils/validate-file.ts
deleted file mode 100644
index c8c1584c..00000000
--- a/src/utils/validate-file.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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;