Fix/youl bug fix

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',
 ];
 

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;

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;
     }
   }

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) => {

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,13 +282,17 @@ export default function CreateCrewForm({
                 />
               )}
             />
+            <label htmlFor="crew-subLocation" className="sr-only">
+              세부 지역을 선택해주세요.
+            </label>
             <Controller
               name="subLocation"
               control={control}
               rules={{ required: '시/군/구를 선택해주세요.' }}
               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"