Feature/modal

src/components/Modal/ReviewModal/AddReviewModal.tsx

@@ -69,7 +69,7 @@ const aromaMap: Record<string, string> = {
   오크: 'OAK',
   바닐라: 'VANILLA',
   후추: 'PEPPER',
-  제빵: 'BAKERY',
+  제빵: 'BAKING',
   풀: 'GRASS',
   사과: 'APPLE',
   복숭아: 'PEACH',
@@ -174,6 +174,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 +188,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 +220,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',
@@ -176,6 +176,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 +190,8 @@ const EditReviewModal = ({
       size='xl'
       width='full'
       fontSize='lg'
+      disabled={!isFormValid}
+      className={!isFormValid ? 'cursor-not-allowed' : ''}
     >
       수정 완료
     </Button>
@@ -215,6 +223,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';
@@ -18,7 +20,7 @@ import { Button } from '../../ui/button';
 
 interface WineForm {
   wineName: string;
-  winePrice: number;
+  winePrice: string;
   wineOrigin: string;
   wineImage: FileList;
   wineType: string;
@@ -59,14 +61,15 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     trigger,
     setValue,
     reset,
+    watch,
   } = useForm<WineForm>({
     mode: 'onBlur',
   });
 
   const resetForm = () => {
     reset({
       wineName: '',
-      winePrice: NaN,
+      winePrice: '',
       wineOrigin: '',
       wineImage: {} as FileList,
       wineType: '',
@@ -76,17 +79,8 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
-  const handlePostWine = async (form: WineForm) => {
-    const file = form.wineImage[0];
-    const imageUrl = await uploadImage(file);
-    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({
@@ -104,13 +98,22 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     },
   });
 
+  //WineForm의 price를 string으로 해서 쉼표 가능 후 >>서버에 저장할때는 쉼표 제거 후 숫자로 변환을 위해서
   const onSubmit = async (form: WineForm) => {
-    let file = form.wineImage[0];
-    file = renameFileIfNeeded(file); //이미지파일 이름 정규화
-    postWineMutation.mutate({
-      ...form,
-      wineImage: [file] as unknown as FileList,
-    });
+    const file = renameFileIfNeeded(form.wineImage[0]); //이미지파일 이름 정규화
+
+    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 = [
@@ -141,7 +144,7 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       <Input
         {...register('wineName', {
           required: '와인 이름을 입력해 주세요.',
-          onChange: () => clearErrors('wineName'),
+          ...getTrimmedHandlers<WineForm>('wineName', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineName?.message}
         id='wineName'
@@ -155,11 +158,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'
@@ -169,7 +177,7 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       <Input
         {...register('wineOrigin', {
           required: '원산지를 입력해 주세요.',
-          onChange: () => clearErrors('wineOrigin'),
+          ...getTrimmedHandlers<WineForm>('wineOrigin', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineOrigin?.message}
         id='wineOrigin'
@@ -256,6 +264,19 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     </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
@@ -278,7 +299,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>

src/components/Modal/WineModal/EditWineModal.tsx

@@ -11,11 +11,13 @@ import Input from '@/components/common/Input';
 import BasicModal from '@/components/common/Modal/BasicModal';
 import { Button } from '@/components/ui/button';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { getTrimmedHandlers } from '@/lib/inputCheck';
+import { getCommaNumberHandlers } from '@/lib/inputNumberCheck';
 import { renameFileIfNeeded } from '@/lib/renameFile';
 
 interface WineForm {
   wineName: string;
-  winePrice: number;
+  winePrice: string;
   wineOrigin: string;
   wineImage: FileList;
   wineType: string;
@@ -55,7 +57,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
     mode: 'onBlur',
     defaultValues: {
       wineName: wine.name,
-      winePrice: wine.price,
+      winePrice: wine.price.toLocaleString(), //쉼표 포함해서 문자열로 원래는 wine.price(number)였음
       wineOrigin: wine.region,
       wineType: wine.type,
     },
@@ -92,7 +94,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
       queryClient.invalidateQueries({ queryKey: ['wines'] });
       reset({
         wineName: wine.name,
-        winePrice: wine.price,
+        winePrice: wine.price.toLocaleString(),
         wineOrigin: wine.region,
         wineType: wine.type,
       });
@@ -116,10 +118,13 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
         imageUrl = uploaded + `?t=${Date.now()}`; // 캐시 방지
         setPreviewImage(imageUrl); // 이미지 갱신
       }
+
+      const numberPrice = Number(form.winePrice.replace(/,/g, '')); //쉼표 제거 후 숫자로
+
       updateWineMutation.mutate({
         wineId: wine.wineId,
         name: form.wineName,
-        price: Number(form.winePrice),
+        price: numberPrice,
         region: form.wineOrigin,
         type: form.wineType.toUpperCase() as 'RED' | 'WHITE' | 'SPARKLING',
         image: imageUrl,
@@ -135,14 +140,27 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
     if (!isOpen) {
       reset({
         wineName: wine.name,
-        winePrice: wine.price,
+        winePrice: wine.price.toLocaleString(),
         wineOrigin: wine.region,
         wineType: wine.type,
       });
       setPreviewImage(wine.image);
     }
   };
 
+  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 = (
     <Button
       onClick={handleSubmit(onSubmit)}
@@ -151,6 +169,8 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
       size='xl'
       width='full'
       fontSize='lg'
+      disabled={!isFormValid}
+      className={!isFormValid ? 'cursor-not-allowed' : ''}
     >
       수정 완료
     </Button>
@@ -169,7 +189,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
         placeholder='와인 이름 입력'
         {...register('wineName', {
           required: '와인 이름을 입력해주세요.',
-          onChange: () => clearErrors('wineName'),
+          ...getTrimmedHandlers<WineForm>('wineName', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineName?.message}
       />
@@ -181,12 +201,17 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
       <Input
         className='w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none custom-text-md-regular md:custom-text-lg-regular'
         id='winePrice'
-        type='number'
+        type='text'
         placeholder='가격 입력'
         {...register('winePrice', {
-          required: '가격을 입력해주세요.',
-          onChange: () => clearErrors('winePrice'),
+          required: '가격을 입력해 주세요.',
+          pattern: {
+            value: /^[1-9][0-9]{0,9}(,[0-9]{3})*$/, // 총 10자리, 1~9로 시작
+            message: '숫자만 입력 가능하며, 0으로 시작할 수 없습니다.',
+          },
+          ...getCommaNumberHandlers<WineForm>('winePrice', setValue, clearErrors), //정규식 검사 함수
         })}
+        inputMode='numeric'
         errorMessage={errors.winePrice?.message}
       />
 
@@ -201,7 +226,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
         placeholder='원산지 입력'
         {...register('wineOrigin', {
           required: '원산지를 입력해주세요.',
-          onChange: () => clearErrors('wineOrigin'),
+          ...getTrimmedHandlers<WineForm>('wineOrigin', setValue, clearErrors), //정규식 검사 함수
         })}
         errorMessage={errors.wineOrigin?.message}
       />