Feature/modal

src/components/Modal/DeleteModal/DeleteModal.tsx

@@ -33,12 +33,16 @@ const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteMo
       deleteWineMutation.mutate(id, {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: ['wines'] }); //삭제후 관련데이터 바로 갱신
-          toast.success('와인이 성공적으로 삭제되었습니다.');
+          toast.success('', {
+            description: '와인이 성공적으로 삭제되었습니다.',
+          });
           console.log('와인 삭제 성공');
           setShowDeleteModal(false);
         },
         onError: (error) => {
-          toast.error('와인 삭제가 실패하였습니다.');
+          toast.error('', {
+            description: '와인 삭제가 실패하였습니다.',
+          });
           console.error('와인 삭제 실패', error);
         },
       });
@@ -47,12 +51,16 @@ const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteMo
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: ['reviews'] });
           queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
-          toast.success('리뷰가 성공적으로 삭제되었습니다.');
+          toast.success('', {
+            description: '리뷰가 성공적으로 삭제되었습니다.',
+          });
           console.log('리뷰 삭제 성공');
           setShowDeleteModal(false);
         },
         onError: (error) => {
-          toast.error('리뷰 삭제가 실패하였습니다.');
+          toast.error('', {
+            description: '리뷰 삭제가 실패하였습니다.',
+          });
           console.error('리뷰 삭제 실패', error);
         },
       });

src/components/Modal/ReviewModal/AddReviewModal.tsx

@@ -69,7 +69,7 @@ const aromaMap: Record<string, string> = {
   오크: 'OAK',
   바닐라: 'VANILLA',
   후추: 'PEPPER',
-  제빵: 'BAKERY',
+  제빵: 'BAKING',
   풀: 'GRASS',
   사과: 'APPLE',
   복숭아: 'PEACH',
@@ -115,15 +115,19 @@ const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string
     //mutation function
     mutationFn: postReview, //실제 서버에 리뷰를 보내는 역할
     onSuccess: (data) => {
-      toast.success('리뷰가 성공적으로 등록되었습니다.');
+      toast.success('', {
+        description: '리뷰가 성공적으로 등록되었습니다.',
+      });
       console.log('리뷰 등록 성공', data);
       queryClient.invalidateQueries({ queryKey: ['reviews'] });
       queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
       reset();
       setShowRegisterModal(false);
     },
     onError: (error) => {
-      toast.error('리뷰 등록이 실패하였습니다.');
+      toast.error('', {
+        description: '리뷰 등록이 실패하였습니다.',
+      });
       console.log('리뷰 등록 실패', error);
     },
   });
@@ -174,6 +178,12 @@ const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string
   };
   ////
 
+  const content = watch('content');
+  const aromaList = watch('aroma');
+  const rating = watch('rating');
+
+  const isFormValid = rating > 0 && content.trim().length > 0 && aromaList.length > 0;
+
   const renderButton = (
     <Button
       onClick={handleSubmit(onSubmit)}
@@ -182,6 +192,8 @@ const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string
       size='xl'
       width='full'
       fontSize='lg'
+      disabled={!isFormValid}
+      className={!isFormValid ? 'cursor-not-allowed' : ''}
     >
       리뷰 남기기
     </Button>
@@ -212,6 +224,10 @@ const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string
         id='content'
         {...register('content', {
           required: '리뷰 내용을 입력해 주세요.',
+          maxLength: {
+            value: 500,
+            message: '최대 500자까지 입력 가능합니다.',
+          },
           onChange: () => clearErrors('content'),
         })}
         placeholder='후기를 작성해 주세요'

src/components/Modal/ReviewModal/EditReviewModal.tsx

@@ -65,7 +65,7 @@ export const aromaMap: Record<string, string> = {
   오크: 'OAK',
   바닐라: 'VANILLA',
   후추: 'PEPPER',
-  제빵: 'BAKERY',
+  제빵: 'BAKING',
   풀: 'GRASS',
   사과: 'APPLE',
   복숭아: 'PEACH',
@@ -99,14 +99,18 @@ const EditReviewModal = ({
     mutationFn: updateReview,
     throwOnError: true,
     onSuccess: () => {
-      toast.success('리뷰가 성공적으로 수정되었습니다.');
+      toast.success('', {
+        description: '리뷰가 성공적으로 수정되었습니다.',
+      });
       console.log('리뷰 수정 완료');
       queryClient.invalidateQueries({ queryKey: ['reviews'] });
       queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
       setShowEditModal(false);
     },
     onError: (error) => {
-      toast.error('리뷰 수정이 실패하였습니다.');
+      toast.error('', {
+        description: '리뷰 수정이 실패하였습니다.',
+      });
       console.log('리뷰 수정 실패', error);
     },
   });
@@ -176,6 +180,12 @@ const EditReviewModal = ({
     }
   };
 
+  const content = watch('content');
+  const aromaList = watch('aroma');
+  const rating = watch('rating');
+
+  const isFormValid = rating > 0 && content.trim().length > 0 && aromaList.length > 0;
+
   const renderButton = (
     <Button
       onClick={handleSubmit(onSubmit)}
@@ -184,6 +194,8 @@ const EditReviewModal = ({
       size='xl'
       width='full'
       fontSize='lg'
+      disabled={!isFormValid}
+      className={!isFormValid ? 'cursor-not-allowed' : ''}
     >
       수정 완료
     </Button>
@@ -215,6 +227,10 @@ const EditReviewModal = ({
         id='content'
         {...register('content', {
           required: '리뷰 내용을 입력해 주세요.',
+          maxLength: {
+            value: 500,
+            message: '최대 500자까지 입력 가능합니다.',
+          },
           onChange: () => clearErrors('content'),
         })}
         placeholder='후기를 작성해 주세요'

src/components/Modal/WineModal/AddWineModal.tsx

@@ -9,6 +9,8 @@ import CameraIcon from '@/assets/camera.svg';
 import DropdownIcon from '@/assets/dropdowntriangle.svg';
 import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { getTrimmedHandlers } from '@/lib/inputCheck';
+import { getCommaNumberHandlers } from '@/lib/inputNumberCheck';
 import { renameFileIfNeeded } from '@/lib/renameFile';
 
 import SelectDropdown from '../../common/dropdown/SelectDropdown';
@@ -17,7 +19,7 @@ import BasicModal from '../../common/Modal/BasicModal';
 import { Button } from '../../ui/button';
 interface WineForm {
   wineName: string;
-  winePrice: number;
+  winePrice: string;
   wineOrigin: string;
   wineImage: FileList;
   wineType: string;
@@ -64,13 +66,14 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     setValue,
     setError,
     reset,
+    watch,
   } = useForm<WineForm>({
     mode: 'onBlur',
   });
   const resetForm = () => {
     reset({
       wineName: '',
-      winePrice: NaN,
+      winePrice: '',
       wineOrigin: '',
       wineImage: {} as FileList,
       wineType: '',
@@ -79,35 +82,32 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     setPreviewImage(null);
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
-  const handlePostWine = async (form: WineForm) => {
-    const file = form.wineImage[0];
-    const newFileName = file.name.replace(/\s/g, '-');
-    const newFile = new File([file], newFileName, { type: file.type });
-    const imageUrl = await uploadImage(newFile);
-    const requestData: PostWineRequest = {
-      name: form.wineName,
-      region: form.wineOrigin,
-      image: imageUrl,
-      price: Number(form.winePrice),
-      type: form.wineType.toUpperCase() as 'RED' | 'WHITE' | 'SPARKLING',
-    };
-    return postWine(requestData);
+
+  const handlePostWine = async (data: PostWineRequest) => {
+    return postWine(data);
   };
   const postWineMutation = useMutation({
     mutationFn: handlePostWine,
     onSuccess: () => {
-      toast.success('와인이 성공적으로 등록되었습니다.');
+      toast.success('', {
+        description: '와인이 성공적으로 등록되었습니다.',
+      });
       console.log('와인 등록 성공');
       resetForm();
       setShowRegisterModal(false);
       queryClient.invalidateQueries({ queryKey: ['wines'] });
     },
     onError: (error) => {
-      toast.error('와인 등록이 실패하였습니다.');
+      toast.error('', {
+        description: '와인 등록에 실패하였습니다.',
+      });
       console.log('와인 등록 실패', error);
     },
   });
+
+  //WineForm의 price를 string으로 해서 쉼표 가능 후 >>서버에 저장할때는 쉼표 제거 후 숫자로 변환을 위해서
   const onSubmit = async (form: WineForm) => {
+    ////이미지 확장자 검사 및 잘못된 확장자 업로드 방지////
     const file = form.wineImage?.[0];
 
     // 1. 이미지 없을 때 막기 (선택사항: 이미 react-hook-form required로 막고 있음)
@@ -118,7 +118,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       });
       return;
     }
-
     // 2. 확장자 제한
     if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
       setError('wineImage', {
@@ -127,13 +126,20 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       });
       return;
     }
+    //// ////
 
-    // 3. 파일 정규화 및 제출
-    const renamedFile = renameFileIfNeeded(file);
-    postWineMutation.mutate({
-      ...form,
-      wineImage: [renamedFile] as unknown as FileList,
-    });
+    const imageUrl = await uploadImage(file); //이미지 업로드해서 URL얻고
+
+    const numberPrice = Number(form.winePrice.replace(/,/g, '')); //가격 쉼표 제거 후 숫자로 변환
+
+    const requestData: PostWineRequest = {
+      name: form.wineName,
+      region: form.wineOrigin,
+      image: imageUrl,
+      price: numberPrice,
+      type: form.wineType.toUpperCase() as 'RED' | 'WHITE' | 'SPARKLING',
+    };
+    postWineMutation.mutate(requestData);
   };
   const categoryOptions = [
     { label: 'Red', value: 'Red' },
@@ -157,7 +163,7 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       <Input
         {...register('wineName', {
           required: '와인 이름을 입력해 주세요.',
-          onChange: () => clearErrors('wineName'),
+          ...getTrimmedHandlers<WineForm>('wineName', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineName?.message}
         id='wineName'
@@ -170,11 +176,16 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       <Input
         {...register('winePrice', {
           required: '가격을 입력해 주세요.',
-          onChange: () => clearErrors('winePrice'),
+          pattern: {
+            value: /^[1-9][0-9]{0,9}(,[0-9]{3})*$/, // 총 10자리, 1~9로 시작
+            message: '숫자만 입력 가능하며, 0으로 시작할 수 없습니다.',
+          },
+          ...getCommaNumberHandlers<WineForm>('winePrice', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.winePrice?.message}
         id='winePrice'
-        type='number'
+        type='text'
+        inputMode='numeric' //모바일시 숫자패드
         variant='name'
         placeholder='가격 입력'
         className='[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none custom-text-md-regular md:custom-text-lg-regular'
@@ -183,7 +194,7 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       <Input
         {...register('wineOrigin', {
           required: '원산지를 입력해 주세요.',
-          onChange: () => clearErrors('wineOrigin'),
+          ...getTrimmedHandlers<WineForm>('wineOrigin', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineOrigin?.message}
         id='wineOrigin'
@@ -266,6 +277,20 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       </div>
     </form>
   );
+
+  const watchedName = watch('wineName');
+  const watchedPrice = watch('winePrice');
+  const watchedOrigin = watch('wineOrigin');
+  const watchedType = watch('wineType');
+  const watchedImage = watch('wineImage');
+
+  const isFormValid =
+    watchedName?.trim() &&
+    watchedPrice &&
+    watchedOrigin?.trim() &&
+    watchedType?.trim() &&
+    watchedImage?.length > 0;
+
   const renderButton = (
     <div className='flex gap-2 w-full'>
       <Button
@@ -288,7 +313,12 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         size='xl'
         fontSize='lg'
         width='full'
-        className='w-full md:w-[294px] lg:w-[294px]'
+        className={
+          !isFormValid
+            ? 'cursor-not-allowed w-full md:w-[294px] lg:w-[294px]'
+            : 'w-full md:w-[294px] lg:w-[294px]'
+        }
+        disabled={!isFormValid}
       >
         와인 등록하기
       </Button>