diff --git a/package-lock.json b/package-lock.json
index af73917b..ac0eef6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
         "use-sync-external-store": "^1.5.0",
+        "vaul": "^1.1.2",
         "zod": "^4.0.5",
         "zustand": "^5.0.5"
       },
@@ -10877,6 +10878,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
diff --git a/package.json b/package.json
index 7cdb29a8..08557573 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "use-sync-external-store": "^1.5.0",
+    "vaul": "^1.1.2",
     "zod": "^4.0.5",
     "zustand": "^5.0.5"
   },
diff --git a/src/components/Modal/DeleteModal/DeleteModal.tsx b/src/components/Modal/DeleteModal/DeleteModal.tsx
index ddb2a121..b7033f9b 100644
--- a/src/components/Modal/DeleteModal/DeleteModal.tsx
+++ b/src/components/Modal/DeleteModal/DeleteModal.tsx
@@ -2,8 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { deleteReview, deleteWine, DeleteResponse } from '@/api/delete';
+import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import BasicModal from '@/components/common/Modal/BasicModal';
 import { Button } from '@/components/ui/button';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 
 interface DeleteModalProps {
   type: 'wine' | 'review';
@@ -14,6 +16,7 @@ interface DeleteModalProps {
 
 const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteModalProps) => {
   const queryClient = useQueryClient();
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
   const deleteWineMutation = useMutation<DeleteResponse, AxiosError, number>({
     mutationFn: (id) => deleteWine(id),
@@ -51,44 +54,52 @@ const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteMo
     }
   };
 
-  return (
-    <div>
-      <BasicModal
-        type='register'
-        title=''
-        open={showDeleteModal}
-        onOpenChange={(isOpen: boolean) => setShowDeleteModal(isOpen)}
-        showCloseButton={false}
-        buttons={
-          <div className='flex w-full gap-2'>
-            <Button
-              onClick={() => setShowDeleteModal(false)}
-              type='button'
-              variant='onlyCancel'
-              size='xl'
-              width='full'
-              fontSize='lg'
-            >
-              취소
-            </Button>
-            <Button
-              onClick={handleDelete}
-              type='button'
-              variant='purpleDark'
-              size='xl'
-              width='full'
-              fontSize='lg'
-            >
-              삭제
-            </Button>
-          </div>
-        }
+  const buttons = (
+    <div className='flex w-full gap-2'>
+      <Button
+        onClick={() => setShowDeleteModal(false)}
+        type='button'
+        variant='onlyCancel'
+        size='xl'
+        width='full'
+        fontSize='lg'
       >
-        <span className='flex justify-center mb-8 custom-text-2lg-bold md:custom-text-xl-bold'>
-          정말로 삭제하시겠습니까?
-        </span>
-      </BasicModal>
+        취소
+      </Button>
+      <Button
+        onClick={handleDelete}
+        type='button'
+        variant='purpleDark'
+        size='xl'
+        width='full'
+        fontSize='lg'
+      >
+        삭제
+      </Button>
     </div>
   );
+
+  return isDesktop ? (
+    <BasicModal
+      type='register'
+      title=''
+      open={showDeleteModal}
+      onOpenChange={(isOpen: boolean) => setShowDeleteModal(isOpen)}
+      showCloseButton={false}
+    >
+      <span className='flex justify-center mb-8 custom-text-2lg-bold md:custom-text-xl-bold'>
+        정말로 삭제하시겠습니까?
+      </span>
+      {buttons}
+    </BasicModal>
+  ) : (
+    <BasicBottomSheet
+      open={showDeleteModal}
+      onOpenChange={setShowDeleteModal}
+      title='정말로 삭제하시겠습니까?'
+    >
+      {buttons}
+    </BasicBottomSheet>
+  );
 };
 export default DeleteModal;
diff --git a/src/components/Modal/FilterModal/FilterModal.tsx b/src/components/Modal/FilterModal/FilterModal.tsx
index d3f653eb..08cd1ea2 100644
--- a/src/components/Modal/FilterModal/FilterModal.tsx
+++ b/src/components/Modal/FilterModal/FilterModal.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 
+import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import WineTypeFilter from '@/components/common/Filter/WineTypeFilter';
 import BasicModal from '@/components/common/Modal/BasicModal';
 import { Button } from '@/components/ui/button';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import useFilterStore from '@/stores/filterStore';
 
 const FilterModal = ({
@@ -13,47 +15,68 @@ const FilterModal = ({
   onOpenChange: (isOpen: boolean) => void;
 }) => {
   const reset = useFilterStore((state) => state.reset);
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
   const handleApplyFilter = (e: React.FormEvent) => {
     e.preventDefault();
     onOpenChange(false); // 필터 적용 후 모달을 close
   };
 
+  const renderButton = (
+    <div className='flex gap-2'>
+      <Button
+        onClick={reset}
+        variant='purpleLight'
+        size='xl'
+        className='w-[96px] md:w-[96px]'
+        fontSize='lg'
+      >
+        초기화
+      </Button>
+      <Button
+        type='button'
+        onClick={handleApplyFilter}
+        variant='purpleDark'
+        size='xl'
+        className='w-[223px] md:w-[223px]'
+        fontSize='lg'
+      >
+        필터 적용하기
+      </Button>
+    </div>
+  );
+
+  const renderForm = (
+    <form onSubmit={handleApplyFilter}>
+      <WineTypeFilter className='mt-[20px] mb-[25px] ' showBorder={true} hasMargin={false} />
+    </form>
+  );
+
   return (
     <div>
-      <BasicModal
-        type='filter'
-        title='필터'
-        open={open}
-        onOpenChange={onOpenChange}
-        buttons={
-          <div className='flex gap-2'>
-            <Button
-              onClick={reset}
-              variant='purpleLight'
-              size='xl'
-              className='w-[96px] md:w-[96px]'
-              fontSize='lg'
-            >
-              초기화
-            </Button>
-            <Button
-              type='button'
-              onClick={handleApplyFilter}
-              variant='purpleDark'
-              size='xl'
-              className='w-[223px] md:w-[223px]'
-              fontSize='lg'
-            >
-              필터 적용하기
-            </Button>
-          </div>
-        }
-      >
-        <form onSubmit={handleApplyFilter}>
-          <WineTypeFilter className='mt-[20px] mb-[25px] ' showBorder={true} hasMargin={false} />
-        </form>
-      </BasicModal>
+      {isDesktop ? (
+        <BasicModal
+          type='filter'
+          title='필터'
+          open={open}
+          onOpenChange={onOpenChange}
+          buttons={renderButton}
+        >
+          {renderForm}
+        </BasicModal>
+      ) : (
+        <div>
+          <BasicBottomSheet
+            title='필터'
+            open={open}
+            onOpenChange={onOpenChange}
+            buttons={renderButton}
+            contentLayer='flex items-center w-auto'
+          >
+            {renderForm}
+          </BasicBottomSheet>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Modal/ReviewModal/AddReviewModal.tsx b/src/components/Modal/ReviewModal/AddReviewModal.tsx
index 25c0a29a..b76fe836 100644
--- a/src/components/Modal/ReviewModal/AddReviewModal.tsx
+++ b/src/components/Modal/ReviewModal/AddReviewModal.tsx
@@ -6,7 +6,9 @@ import Image from 'next/image';
 import { useForm } from 'react-hook-form';
 
 import { postReview } from '@/api/addreview';
+import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import StarRating from '@/components/Modal/ReviewModal/StarRating';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 
 import BasicModal from '../../common/Modal/BasicModal';
@@ -85,6 +87,7 @@ const aromaMap: Record<string, string> = {
 const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string }) => {
   const [showRegisterModal, setShowRegisterModal] = useState(false);
   const queryClient = useQueryClient();
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
   const {
     register,
@@ -168,149 +171,162 @@ const AddReviewModal = ({ wineId, wineName }: { wineId: number; wineName: string
   };
   ////
 
+  const renderButton = (
+    <Button
+      onClick={handleSubmit(onSubmit)}
+      type='button'
+      variant='purpleDark'
+      size='xl'
+      width='full'
+      fontSize='lg'
+    >
+      리뷰 남기기
+    </Button>
+  );
+
+  const renderForm = () => (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      encType='multipart/form-data'
+      className='my-[32px] md:my-[40px] px-2'
+    >
+      <div className='w-[274px] md:w-[384px] h-[84px] md:h-[68px] mb-6 flex items-center'>
+        <Image
+          src='/assets/reviewicon.png'
+          alt='리뷰 아이콘'
+          width={68}
+          height={68}
+          className='bg-gray-100 rounded-lg p-[7px] text-primary object-contain'
+        />
+        <div className='flex flex-col justify-between w-[191px] md:w-[300px] h-[84px] md:h-[66px] ml-4'>
+          <span className='mt-0 custom-text-lg-bold md:custom-text-2lg-semibold'>{wineName}</span>
+          <span className='mb-0 w-[120px] md:w-[160px] h-[24px] md:h-[32px] flex items-center'>
+            <StarRating value={watch('rating')} onChange={(rating) => setValue('rating', rating)} />
+          </span>
+        </div>
+      </div>
+      <textarea
+        id='content'
+        {...register('content', {
+          required: '리뷰 내용을 입력해 주세요.',
+          onChange: () => clearErrors('content'),
+        })}
+        placeholder='후기를 작성해 주세요'
+        className={cn(
+          'relative h-[100px] md:h-[120px] custom-text-md-regular md:custom-text-lg-regular w-full px-[20px] py-[14px] rounded-[16px] bg-white border border-gray-300 outline-none active:border-gray-500 focus:border-gray-500 font-sans resize-none',
+          errors.content && 'border-red-500',
+        )}
+        rows={5}
+      />
+      {errors.content && (
+        <div role='alert' className='absolute text-red-500 mt-[4px]'>
+          <p>{errors.content.message}</p>
+        </div>
+      )}
+      <p className='custom-text-2lg-bold md:custom-text-xl-bold mb-[24px] mt-[35px]'>
+        와인의 맛은 어땠나요?
+      </p>
+      <div className='mb-[40px]'>
+        <div className='mb-[16px] md:mb-[18px]'>
+          <FlavorSlider
+            value={watch('sliderLightBold')}
+            min={0}
+            max={10}
+            step={1}
+            onChange={(value) => setValue('sliderLightBold', value)}
+            labelLeft='가벼워요'
+            labelRight='진해요'
+            badgeLabel='바디감'
+          />
+        </div>
+        <div className='mb-[16px] md:mb-[18px]'>
+          <FlavorSlider
+            value={watch('sliderSmoothTanic')}
+            min={0}
+            max={10}
+            step={1}
+            onChange={(value) => setValue('sliderSmoothTanic', value)}
+            labelLeft='부드러워요'
+            labelRight='떫어요'
+            badgeLabel='타닌'
+          />
+        </div>
+        <div className='mb-[16px] md:mb-[18px]'>
+          <FlavorSlider
+            value={watch('sliderdrySweet')}
+            min={0}
+            max={10}
+            step={1}
+            onChange={(value) => setValue('sliderdrySweet', value)}
+            labelLeft='드라이해요'
+            labelRight='달아요'
+            badgeLabel='당도'
+          />
+        </div>
+        {/* 사이즈?? 조정이 필요할듯 */}
+        <div className='mb-[16px] md:mb-[18px]'>
+          <FlavorSlider
+            value={watch('slidersoftAcidic')}
+            min={0}
+            max={10}
+            step={1}
+            onChange={(value) => setValue('slidersoftAcidic', value)}
+            labelLeft='안셔요'
+            labelRight='많이셔요'
+            badgeLabel='산미'
+          />
+        </div>
+      </div>
+      <p className='custom-text-2lg-bold md:custom-text-xl-bold'>기억에 남는 향이 있나요?</p>
+      {errors.aroma && (
+        <div role='alert' className='absolute text-red-500'>
+          {errors.aroma.message}
+        </div>
+      )}
+      <div className='relative flex flex-wrap gap-[10px] mt-6'>
+        {aromaOptions.map((item) => (
+          <Badge
+            key={item}
+            variant='chooseFlavor'
+            onClick={() => toggleAroma(item)}
+            className={cn(
+              'cursor-pointer px-2.5 md:px-[18px] py-1.5 md:py-2.5 hover:bg-primary-100 hover:text-primary hover:border-primary-100',
+              isSelected(item) && 'bg-primary text-white',
+            )}
+          >
+            {item}
+          </Badge>
+        ))}
+      </div>
+    </form>
+  );
+
   return (
     <div>
       <Button variant='purpleDark' size='xs' width='sm' onClick={() => setShowRegisterModal(true)}>
         리뷰 남기기
       </Button>
-      <BasicModal
-        type='review'
-        title='리뷰 등록'
-        open={showRegisterModal}
-        onOpenChange={closeModalReset}
-        buttons={
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            type='button'
-            variant='purpleDark'
-            size='xl'
-            width='full'
-            fontSize='lg'
-          >
-            리뷰 남기기
-          </Button>
-        }
-      >
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          encType='multipart/form-data'
-          className='my-[32px] md:my-[40px] px-4'
+      {isDesktop ? (
+        <BasicModal
+          type='review'
+          title='리뷰 등록'
+          open={showRegisterModal}
+          onOpenChange={closeModalReset}
+          buttons={renderButton}
+          showCloseButton={true}
         >
-          <div className='w-[274px] md:w-[384px] h-[84px] md:h-[68px] mb-6 flex items-center'>
-            <Image
-              src='/assets/reviewicon.png'
-              alt='리뷰 아이콘'
-              width={68}
-              height={68}
-              className='bg-gray-100 rounded-lg p-[7px] text-primary object-contain'
-            />
-            <div className='flex flex-col justify-between w-[191px] md:w-[300px] h-[84px] md:h-[66px] ml-4'>
-              <span className='mt-0 custom-text-lg-bold md:custom-text-2lg-semibold'>
-                {wineName}
-              </span>
-              <span className='mb-0 w-[120px] md:w-[160px] h-[24px] md:h-[32px] flex items-center'>
-                <StarRating
-                  value={watch('rating')}
-                  onChange={(rating) => setValue('rating', rating)}
-                />
-              </span>
-            </div>
-          </div>
-          <textarea
-            id='content'
-            {...register('content', {
-              required: '리뷰 내용을 입력해 주세요.',
-              onChange: () => clearErrors('content'),
-            })}
-            placeholder='후기를 작성해 주세요'
-            className={cn(
-              'relative h-[100px] md:h-[120px] custom-text-md-regular md:custom-text-lg-regular w-full px-[20px] py-[14px] rounded-[16px] bg-white border border-gray-300 outline-none active:border-gray-500 focus:border-gray-500 font-sans resize-none',
-              errors.content && 'border-red-500',
-            )}
-            rows={5}
-          />
-          {errors.content && (
-            <div role='alert' className='absolute text-red-500 mt-[4px]'>
-              <p>{errors.content.message}</p>
-            </div>
-          )}
-          <p className='custom-text-2lg-bold md:custom-text-xl-bold mb-[24px] mt-[35px]'>
-            와인의 맛은 어땠나요?
-          </p>
-          <div className='mb-[40px]'>
-            <div className='mb-[16px] md:mb-[18px]'>
-              <FlavorSlider
-                value={watch('sliderLightBold')}
-                min={0}
-                max={10}
-                step={1}
-                onChange={(value) => setValue('sliderLightBold', value)}
-                labelLeft='가벼워요'
-                labelRight='진해요'
-                badgeLabel='바디감'
-              />
-            </div>
-            <div className='mb-[16px] md:mb-[18px]'>
-              <FlavorSlider
-                value={watch('sliderSmoothTanic')}
-                min={0}
-                max={10}
-                step={1}
-                onChange={(value) => setValue('sliderSmoothTanic', value)}
-                labelLeft='부드러워요'
-                labelRight='떫어요'
-                badgeLabel='타닌'
-              />
-            </div>
-            <div className='mb-[16px] md:mb-[18px]'>
-              <FlavorSlider
-                value={watch('sliderdrySweet')}
-                min={0}
-                max={10}
-                step={1}
-                onChange={(value) => setValue('sliderdrySweet', value)}
-                labelLeft='드라이해요'
-                labelRight='달아요'
-                badgeLabel='당도'
-              />
-            </div>
-            {/* 사이즈?? 조정이 필요할듯 */}
-            <div className='mb-[16px] md:mb-[18px]'>
-              <FlavorSlider
-                value={watch('slidersoftAcidic')}
-                min={0}
-                max={10}
-                step={1}
-                onChange={(value) => setValue('slidersoftAcidic', value)}
-                labelLeft='안셔요'
-                labelRight='많이셔요'
-                badgeLabel='산미'
-              />
-            </div>
-          </div>
-          <p className='custom-text-2lg-bold md:custom-text-xl-bold'>기억에 남는 향이 있나요?</p>
-          {errors.aroma && (
-            <div role='alert' className='absolute text-red-500'>
-              {errors.aroma.message}
-            </div>
-          )}
-          <div className='relative flex flex-wrap gap-[10px] mt-6'>
-            {aromaOptions.map((item) => (
-              <Badge
-                key={item}
-                variant='chooseFlavor'
-                onClick={() => toggleAroma(item)}
-                className={cn(
-                  'cursor-pointer px-2.5 md:px-[18px] py-1.5 md:py-2.5 hover:bg-primary-100 hover:text-primary hover:border-primary-100',
-                  isSelected(item) && 'bg-primary text-white',
-                )}
-              >
-                {item}
-              </Badge>
-            ))}
-          </div>
-        </form>
-      </BasicModal>
+          {renderForm()}
+        </BasicModal>
+      ) : (
+        <BasicBottomSheet
+          open={showRegisterModal}
+          onOpenChange={closeModalReset}
+          title='리뷰 등록'
+          buttons={renderButton}
+        >
+          {renderForm()}
+        </BasicBottomSheet>
+      )}
     </div>
   );
 };
diff --git a/src/components/Modal/ReviewModal/EditReviewModal.tsx b/src/components/Modal/ReviewModal/EditReviewModal.tsx
index 63a0f627..7fcb47f4 100644
--- a/src/components/Modal/ReviewModal/EditReviewModal.tsx
+++ b/src/components/Modal/ReviewModal/EditReviewModal.tsx
@@ -5,8 +5,10 @@ import Image from 'next/image';
 import { useForm } from 'react-hook-form';
 
 import { updateReview } from '@/api/editreview';
+import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import BasicModal from '@/components/common/Modal/BasicModal';
 import StarRating from '@/components/Modal/ReviewModal/StarRating';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 
 import FlavorSlider from '../../common/slider/FlavorSlider';
@@ -90,6 +92,7 @@ const EditReviewModal = ({
   setShowEditModal: (state: boolean) => void;
 }) => {
   const queryClient = useQueryClient();
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
   const updateReviewMutation = useMutation({
     mutationFn: updateReview,
@@ -170,136 +173,156 @@ const EditReviewModal = ({
     }
   };
 
-  return (
-    <div>
-      <BasicModal
-        type='review'
-        title='리뷰 수정'
-        open={showEditModal}
-        onOpenChange={closeModalReset}
-        buttons={
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            type='button'
-            variant='purpleDark'
-            size='xl'
-            width='full'
-            fontSize='lg'
-          >
-            수정 완료
-          </Button>
-        }
-      >
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          encType='multipart/form-data'
-          className='my-[32px] md:my-[40px]'
-        >
-          <div className='w-[274px] md:w-[384px] h-[84px] md:h-[68px] mb-6 flex items-center'>
-            <Image
-              src='/assets/reviewicon.png'
-              alt='리뷰 아이콘'
-              width={68}
-              height={68}
-              className='bg-gray-100 rounded-lg p-[7px] object-contain'
-            />
-            <div className='ml-4'>
-              <span className='custom-text-lg-bold md:custom-text-2lg-semibold'>{wineName}</span>
-              <div className='mt-2'>
-                <StarRating value={watch('rating')} onChange={(val) => setValue('rating', val)} />
-              </div>
-            </div>
+  const renderButton = (
+    <Button
+      onClick={handleSubmit(onSubmit)}
+      type='button'
+      variant='purpleDark'
+      size='xl'
+      width='full'
+      fontSize='lg'
+    >
+      수정 완료
+    </Button>
+  );
+
+  const renderForm = () => (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      encType='multipart/form-data'
+      className='my-[32px] md:my-[40px]'
+    >
+      <div className='w-[274px] md:w-[384px] h-[84px] md:h-[68px] mb-6 flex items-center'>
+        <Image
+          src='/assets/reviewicon.png'
+          alt='리뷰 아이콘'
+          width={68}
+          height={68}
+          className='bg-gray-100 rounded-lg p-[7px] object-contain'
+        />
+        <div className='ml-4'>
+          <span className='custom-text-lg-bold md:custom-text-2lg-semibold'>{wineName}</span>
+          <div className='mt-2'>
+            <StarRating value={watch('rating')} onChange={(val) => setValue('rating', val)} />
           </div>
+        </div>
+      </div>
 
-          <textarea
-            id='content'
-            {...register('content', {
-              required: '리뷰 내용을 입력해 주세요.',
-              onChange: () => clearErrors('content'),
-            })}
-            placeholder='후기를 작성해 주세요'
-            className={cn(
-              'h-[100px] md:h-[120px] w-full px-[20px] py-[14px] rounded-[16px] bg-white border border-gray-300 outline-none font-sans resize-none',
-              errors.content && 'border-red-500',
-            )}
-            rows={5}
-          />
-          {errors.content && (
-            <div role='alert' className='text-red-500 mt-1'>
-              {errors.content.message}
-            </div>
-          )}
+      <textarea
+        id='content'
+        {...register('content', {
+          required: '리뷰 내용을 입력해 주세요.',
+          onChange: () => clearErrors('content'),
+        })}
+        placeholder='후기를 작성해 주세요'
+        className={cn(
+          'h-[100px] md:h-[120px] w-full px-[20px] py-[14px] rounded-[16px] bg-white border border-gray-300 outline-none font-sans resize-none',
+          errors.content && 'border-red-500',
+        )}
+        rows={5}
+      />
+      {errors.content && (
+        <div role='alert' className='text-red-500 mt-1'>
+          {errors.content.message}
+        </div>
+      )}
 
-          <p className='custom-text-2lg-bold md:custom-text-xl-bold mb-[24px] mt-[35px]'>
-            와인의 맛은 어땠나요?
-          </p>
+      <p className='custom-text-2lg-bold md:custom-text-xl-bold mb-[24px] mt-[35px]'>
+        와인의 맛은 어땠나요?
+      </p>
 
-          <div className='mb-[40px] space-y-[18px]'>
-            <FlavorSlider
-              value={watch('lightBold')}
-              min={0}
-              max={10}
-              step={1}
-              onChange={(val) => setValue('lightBold', val)}
-              labelLeft='가벼워요'
-              labelRight='진해요'
-              badgeLabel='바디감'
-            />
-            <FlavorSlider
-              value={watch('smoothTannic')}
-              min={0}
-              max={10}
-              step={1}
-              onChange={(val) => setValue('smoothTannic', val)}
-              labelLeft='부드러워요'
-              labelRight='떫어요'
-              badgeLabel='타닌'
-            />
-            <FlavorSlider
-              value={watch('drySweet')}
-              min={0}
-              max={10}
-              step={1}
-              onChange={(val) => setValue('drySweet', val)}
-              labelLeft='드라이해요'
-              labelRight='달아요'
-              badgeLabel='당도'
-            />
-            <FlavorSlider
-              value={watch('softAcidic')}
-              min={0}
-              max={10}
-              step={1}
-              onChange={(val) => setValue('softAcidic', val)}
-              labelLeft='안 셔요'
-              labelRight='많이 셔요'
-              badgeLabel='산미'
-            />
-          </div>
+      <div className='mb-[40px] space-y-[18px]'>
+        <FlavorSlider
+          value={watch('lightBold')}
+          min={0}
+          max={10}
+          step={1}
+          onChange={(val) => setValue('lightBold', val)}
+          labelLeft='가벼워요'
+          labelRight='진해요'
+          badgeLabel='바디감'
+        />
+        <FlavorSlider
+          value={watch('smoothTannic')}
+          min={0}
+          max={10}
+          step={1}
+          onChange={(val) => setValue('smoothTannic', val)}
+          labelLeft='부드러워요'
+          labelRight='떫어요'
+          badgeLabel='타닌'
+        />
+        <FlavorSlider
+          value={watch('drySweet')}
+          min={0}
+          max={10}
+          step={1}
+          onChange={(val) => setValue('drySweet', val)}
+          labelLeft='드라이해요'
+          labelRight='달아요'
+          badgeLabel='당도'
+        />
+        <FlavorSlider
+          value={watch('softAcidic')}
+          min={0}
+          max={10}
+          step={1}
+          onChange={(val) => setValue('softAcidic', val)}
+          labelLeft='안 셔요'
+          labelRight='많이 셔요'
+          badgeLabel='산미'
+        />
+      </div>
 
-          <p className='custom-text-2lg-bold md:custom-text-xl-bold'>기억에 남는 향이 있나요?</p>
-          {errors.aroma && (
-            <div role='alert' className='text-red-500 mt-1'>
-              {errors.aroma.message}
-            </div>
-          )}
-          <div className='relative flex flex-wrap gap-[10px] mt-6'>
-            {aromaOptions.map((item) => (
-              <Badge
-                key={item}
-                variant='chooseFlavor'
-                onClick={() => toggleAroma(item)}
-                className={cn(
-                  'cursor-pointer px-2.5 md:px-[18px] py-1.5 md:py-2.5 hover:bg-primary-100 hover:text-primary hover:border-primary-100',
-                  isSelected(item) && 'bg-primary text-white',
-                )}
-              >
-                {item}
-              </Badge>
-            ))}
-          </div>
-        </form>
-      </BasicModal>
+      <p className='custom-text-2lg-bold md:custom-text-xl-bold'>기억에 남는 향이 있나요?</p>
+      {errors.aroma && (
+        <div role='alert' className='text-red-500 mt-1'>
+          {errors.aroma.message}
+        </div>
+      )}
+      <div className='relative flex flex-wrap gap-[10px] mt-6'>
+        {aromaOptions.map((item) => (
+          <Badge
+            key={item}
+            variant='chooseFlavor'
+            onClick={() => toggleAroma(item)}
+            className={cn(
+              'cursor-pointer px-2.5 md:px-[18px] py-1.5 md:py-2.5 hover:bg-primary-100 hover:text-primary hover:border-primary-100',
+              isSelected(item) && 'bg-primary text-white',
+            )}
+          >
+            {item}
+          </Badge>
+        ))}
+      </div>
+    </form>
+  );
+
+  return (
+    <div>
+      <Button variant='purpleDark' size='xs' width='sm' onClick={() => setShowEditModal(true)}>
+        리뷰 수정하기
+      </Button>
+      {isDesktop ? (
+        <BasicModal
+          type='review'
+          title='리뷰 수정'
+          open={showEditModal}
+          onOpenChange={closeModalReset}
+          buttons={renderButton}
+        >
+          {renderForm()}
+        </BasicModal>
+      ) : (
+        <BasicBottomSheet
+          open={showEditModal}
+          onOpenChange={closeModalReset}
+          title='리뷰 수정하기'
+          buttons={renderButton}
+        >
+          {renderForm()}
+        </BasicBottomSheet>
+      )}
     </div>
   );
 };
diff --git a/src/components/Modal/WineModal/AddWineModal.tsx b/src/components/Modal/WineModal/AddWineModal.tsx
index c6a5bc3b..9e6eb032 100644
--- a/src/components/Modal/WineModal/AddWineModal.tsx
+++ b/src/components/Modal/WineModal/AddWineModal.tsx
@@ -6,6 +6,8 @@ import { useForm } from 'react-hook-form';
 import { uploadImage, postWine, PostWineRequest } from '@/api/addwine';
 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 SelectDropdown from '../../common/dropdown/SelectDropdown';
 import Input from '../../common/Input';
@@ -30,8 +32,9 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const queryClient = useQueryClient();
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
-  const trigerFileSelect = () => {
+  const triggerFileSelect = () => {
     fileInputRef.current?.click();
   };
 
@@ -118,169 +121,181 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     }
   };
   ////
-  return (
-    <div>
-      <BasicModal
-        type='register'
-        title='와인 등록'
-        open={showRegisterModal}
-        onOpenChange={closeModalReset}
-        showCloseButton={false}
-        buttons={
-          <div className='flex gap-2'>
-            <Button
-              onClick={() => {
-                resetForm();
-                setShowRegisterModal(false);
-              }}
-              variant='purpleLight'
-              size='xl'
-              className='w-[96px] md:w-[108px]'
-              fontSize='lg'
-            >
-              취소
-            </Button>
-            <Button
-              onClick={handleSubmit(onSubmit)}
-              type='submit'
-              variant='purpleDark'
-              size='xl'
-              className='w-[223px] md:w-[294px]'
-              fontSize='lg'
-            >
-              와인 등록하기
-            </Button>
-          </div>
+
+  const renderForm = () => (
+    <form onSubmit={handleSubmit(onSubmit)} encType='multipart/form-data' className='mx-2'>
+      {/* 이름 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>
+        와인 이름
+      </p>
+      <Input
+        {...register('wineName', {
+          required: '와인 이름을 입력해 주세요.',
+          onChange: () => clearErrors('wineName'),
+        })}
+        errorMessage={errors.wineName?.message}
+        id='wineName'
+        type='text'
+        variant='name'
+        placeholder='와인 이름 입력'
+        className='custom-text-md-regular md:custom-text-lg-regular'
+      />
+      {/* 가격 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>가격</p>
+      <Input
+        {...register('winePrice', {
+          required: '가격을 입력해 주세요.',
+          onChange: () => clearErrors('winePrice'),
+        })}
+        errorMessage={errors.winePrice?.message}
+        id='winePrice'
+        type='number'
+        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'
+      />
+      {/* 원산지 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>원산지</p>
+      <Input
+        {...register('wineOrigin', {
+          required: '원산지를 입력해 주세요.',
+          onChange: () => clearErrors('wineOrigin'),
+        })}
+        errorMessage={errors.wineOrigin?.message}
+        id='wineOrigin'
+        type='text'
+        variant='name'
+        placeholder='원산지 입력'
+        className='custom-text-md-regular md:custom-text-lg-regular'
+      />
+      {/* 타입 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>타입</p>
+      <SelectDropdown
+        selectedValue={category}
+        options={categoryOptions}
+        onChange={(value) => {
+          setCategory(value);
+          setValue('wineType', value, { shouldValidate: true });
+          trigger('wineType');
+        }}
+        placeholder='타입 선택'
+        trigger={
+          <button
+            className={`w-full h-[42px] md:h-[48px] px-4 py-2 border rounded-[12px] md:rounded-[16px] text-left ${
+              category ? 'text-black' : 'text-gray-500'
+            }`}
+          >
+            <span>{selectedCategoryLabel || '타입 선택'}</span>
+            <DropdownIcon className='ml-2 w-4 h-4 bg-black' />
+          </button>
         }
-      >
-        <form onSubmit={handleSubmit(onSubmit)} encType='multipart/form-data'>
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px] '>
-            와인 이름
-          </p>
-          <Input
-            className='custom-text-md-regular md:custom-text-lg-regular'
-            id='wineName'
-            type='text'
-            variant='name'
-            placeholder='와인 이름 입력'
-            {...register('wineName', {
-              required: '와인 이름을 입력해 주세요.',
-              onChange: () => clearErrors('wineName'),
-            })}
-            errorMessage={errors.wineName?.message}
-          />
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            가격
-          </p>
-          <Input
-            className='[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'
-            variant='name'
-            placeholder='가격 입력'
-            {...register('winePrice', {
-              required: '가격을 입력해 주세요.',
-              onChange: () => clearErrors('winePrice'),
-            })}
-            errorMessage={errors.winePrice?.message}
-          />
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            원산지
-          </p>
-          <Input
-            className='custom-text-md-regular md:custom-text-lg-regular'
-            id='wineOrigin'
-            type='text'
-            variant='name'
-            placeholder='원산지 입력'
-            {...register('wineOrigin', {
-              required: '원산지를 입력해 주세요.',
-              onChange: () => clearErrors('wineOrigin'),
-            })}
-            errorMessage={errors.wineOrigin?.message}
-          />
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            타입
-          </p>
-          <SelectDropdown
-            selectedValue={category}
-            options={categoryOptions}
-            onChange={(value) => {
-              setCategory(value);
-              setValue('wineType', value, { shouldValidate: true });
-              trigger('wineType');
-            }}
-            placeholder='타입 선택'
-            trigger={
-              <button
-                className={`w-full h-[42px] md:h-[48px] px-4 py-2 border rounded-[12px] md:rounded-[16px] text-left ${category ? 'text-black' : 'text-gray-500'}`}
-              >
-                <>
-                  <span>{selectedCategoryLabel || '타입 선택'}</span>
-                  <DropdownIcon className='ml-2 w-4 h-4 bg-black' />
-                </>
-              </button>
-            }
-          />
-          {errors.wineType?.message && (
-            <div className='relative'>
-              <p className='text-red-500 absolute '>{errors.wineType.message}</p>
+      />
+      {errors.wineType?.message && (
+        <div className='relative'>
+          <p className='text-red-500 absolute mt-1'>{errors.wineType.message}</p>
+        </div>
+      )}{' '}
+      <Input
+        {...register('wineType', {
+          required: '타입을 선택해 주세요.',
+          onChange: () => clearErrors('wineType'),
+        })}
+        id='wineType'
+        type='text'
+        className='hidden'
+      />
+      {/* 사진 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[24px]'>와인 사진</p>
+      <Input
+        {...register('wineImage', {
+          required: '이미지를 업로드해 주세요.',
+          onChange: (e) => {
+            clearErrors('wineImage');
+            handleImageChange(e);
+          },
+        })}
+        id='wineImage'
+        type='file'
+        accept='image/*'
+        className='hidden'
+        ref={(e) => {
+          register('wineImage').ref(e);
+          fileInputRef.current = e;
+        }}
+      />
+      <div className='mt-2 mb-5'>
+        <div
+          className='w-[140px] aspect-square bg-gray-100 rounded-2xl overflow-hidden flex items-center justify-center relative cursor-pointer'
+          onClick={triggerFileSelect}
+        >
+          {previewImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={previewImage} alt='미리보기' className='w-full h-full object-cover' />
+          ) : (
+            <div className='flex flex-col items-center text-gray-400'>
+              <CameraIcon className='w-6 h-6 mb-2' />
             </div>
           )}
-          <Input
-            id='wineType'
-            type='text'
-            className='custom-text-md-regular md:custom-text-lg-regular hidden '
-            {...register('wineType', {
-              required: '타입을 선택해 주세요.',
-              onChange: () => clearErrors('wineType'),
-            })}
-          />
-          <p className='custom-text-md-medium md:custom-text-lg-medium mt-[24px] md:mt-[26px]'>
-            와인 사진
-          </p>
-          <Input
-            className='custom-text-md-regular md:custom-text-lg-regular hidden '
-            id='wineImage'
-            type='file'
-            accept='image/*'
-            {...register('wineImage', {
-              required: '이미지를 업로드해 주세요.',
-              onChange: (e) => {
-                clearErrors('wineImage');
-                handleImageChange(e);
-                console.log(e.target.files?.[0]);
-              },
-            })}
-            ref={(e) => {
-              register('wineImage').ref(e);
-              fileInputRef.current = e;
-            }}
-          />
-          <div className='mt-2 mb-5'>
-            <div
-              className='w-[140px] aspect-square bg-gray-100 rounded-2xl overflow-hidden flex items-center justify-center relative cursor-pointer'
-              onClick={trigerFileSelect}
-            >
-              {previewImage ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={previewImage} alt='미리보기' className='w-full h-full object-cover' />
-              ) : (
-                <div className='flex flex-col items-center text-gray-400'>
-                  <CameraIcon className='w-6 h-6 mb-2' />
-                </div>
-              )}
-            </div>
-            {errors.wineImage?.message && (
-              <div className='relative'>
-                <p className='text-red-500 absolute mt-1'>{errors.wineImage.message}</p>
-              </div>
-            )}
+        </div>
+        {errors.wineImage?.message && (
+          <div className='relative'>
+            <p className='text-red-500 absolute mt-1'>{errors.wineImage.message}</p>
           </div>
-        </form>
-      </BasicModal>
+        )}
+      </div>
+    </form>
+  );
+
+  const renderButton = (
+    <div className='flex gap-2 w-full'>
+      <Button
+        onClick={() => {
+          resetForm();
+          setShowRegisterModal(false);
+        }}
+        variant='purpleLight'
+        size='xl'
+        fontSize='lg'
+        width='full'
+        className='w-full md:w-[108px] lg:w-[108px]'
+      >
+        취소
+      </Button>
+      <Button
+        onClick={handleSubmit(onSubmit)}
+        type='submit'
+        variant='purpleDark'
+        size='xl'
+        fontSize='lg'
+        width='full'
+        className='w-full md:w-[294px] lg:w-[294px]'
+      >
+        와인 등록하기
+      </Button>
     </div>
   );
+
+  return isDesktop ? (
+    <BasicModal
+      type='register'
+      title='와인 등록'
+      open={showRegisterModal}
+      onOpenChange={closeModalReset}
+      showCloseButton={false}
+      buttons={renderButton}
+    >
+      {renderForm()}
+    </BasicModal>
+  ) : (
+    <BasicBottomSheet
+      open={showRegisterModal}
+      onOpenChange={closeModalReset}
+      title='와인 등록'
+      buttons={renderButton}
+    >
+      {renderForm()}
+    </BasicBottomSheet>
+  );
 };
 
 export default AddWineModal;
diff --git a/src/components/Modal/WineModal/EditWineModal.tsx b/src/components/Modal/WineModal/EditWineModal.tsx
index d9f2c271..1976032e 100644
--- a/src/components/Modal/WineModal/EditWineModal.tsx
+++ b/src/components/Modal/WineModal/EditWineModal.tsx
@@ -4,10 +4,12 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 
 import { updateWine, uploadImage } from '@/api/editwine';
+import BasicBottomSheet from '@/components/common/BottomSheet/BasicBottomSheet';
 import SelectDropdown from '@/components/common/dropdown/SelectDropdown';
 import Input from '@/components/common/Input';
 import BasicModal from '@/components/common/Modal/BasicModal';
 import { Button } from '@/components/ui/button';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 
 interface WineForm {
   wineName: string;
@@ -36,6 +38,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
   const [previewImage, setPreviewImage] = useState<string | null>(wine.image);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const queryClient = useQueryClient();
+  const isDesktop = useMediaQuery('(min-width: 640px)');
 
   const {
     register,
@@ -47,6 +50,7 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
     trigger,
     watch,
   } = useForm<WineForm>({
+    mode: 'onBlur',
     defaultValues: {
       wineName: wine.name,
       winePrice: wine.price,
@@ -82,6 +86,13 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
     onSuccess: () => {
       console.log('와인수정완료');
       queryClient.invalidateQueries({ queryKey: ['wines'] });
+      reset({
+        wineName: wine.name,
+        winePrice: wine.price,
+        wineOrigin: wine.region,
+        wineType: wine.type,
+      });
+      setPreviewImage(wine.image);
       setShowEditModal(false);
     },
     onError: (error) => {
@@ -121,158 +132,175 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
     }
   };
 
-  return (
-    <div>
-      <BasicModal
-        type='register'
-        title='내가 등록한 와인'
-        open={showEditModal}
-        onOpenChange={closeModalReset}
-        buttons={
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            type='submit'
-            variant='purpleDark'
-            size='xl'
-            width='full'
-            fontSize='lg'
-          >
-            수정 완료
-          </Button>
-        }
-      >
-        <form onSubmit={handleSubmit(onSubmit)} encType='multipart/form-data'>
-          {/* 와인 이름 */}
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            와인 이름
-          </p>
-          <Input
-            className='custom-text-md-regular md:custom-text-lg-regular'
-            id='wineName'
-            type='text'
-            placeholder='와인 이름 입력'
-            {...register('wineName', {
-              required: '와인 이름을 입력해주세요.',
-              onChange: () => clearErrors('wineName'),
-            })}
-            errorMessage={errors.wineName?.message}
-          />
+  const renderButton = (
+    <Button
+      onClick={handleSubmit(onSubmit)}
+      type='submit'
+      variant='purpleDark'
+      size='xl'
+      width='full'
+      fontSize='lg'
+    >
+      수정 완료
+    </Button>
+  );
 
-          {/* 가격 */}
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            가격
-          </p>
-          <Input
-            className='[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'
-            placeholder='가격 입력'
-            {...register('winePrice', {
-              required: '가격을 입력해주세요.',
-              onChange: () => clearErrors('winePrice'),
-            })}
-            errorMessage={errors.winePrice?.message}
-          />
+  const renderForm = () => (
+    <form onSubmit={handleSubmit(onSubmit)} encType='multipart/form-data'>
+      {/* 와인 이름 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
+        와인 이름
+      </p>
+      <Input
+        className='custom-text-md-regular md:custom-text-lg-regular w-full'
+        id='wineName'
+        type='text'
+        placeholder='와인 이름 입력'
+        {...register('wineName', {
+          required: '와인 이름을 입력해주세요.',
+          onChange: () => clearErrors('wineName'),
+        })}
+        errorMessage={errors.wineName?.message}
+      />
 
-          {/* 원산지 */}
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            원산지
-          </p>
-          <Input
-            className='custom-text-md-regular md:custom-text-lg-regular'
-            id='wineOrigin'
-            type='text'
-            placeholder='원산지 입력'
-            {...register('wineOrigin', {
-              required: '원산지를 입력해주세요.',
-              onChange: () => clearErrors('wineOrigin'),
-            })}
-            errorMessage={errors.wineOrigin?.message}
-          />
+      {/* 가격 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
+        가격
+      </p>
+      <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'
+        placeholder='가격 입력'
+        {...register('winePrice', {
+          required: '가격을 입력해주세요.',
+          onChange: () => clearErrors('winePrice'),
+        })}
+        errorMessage={errors.winePrice?.message}
+      />
 
-          {/* 타입 */}
-          <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
-            타입
-          </p>
-          <SelectDropdown
-            selectedValue={category}
-            options={categoryOptions}
-            onChange={(value) => {
-              setValue('wineType', value);
-              trigger('wineType');
-            }}
-            placeholder='타입 선택'
-            trigger={
-              <button
-                type='button'
-                className={`w-full h-[42px] md:h-[48px] px-4 py-2 border rounded-[12px] md:rounded-[16px] text-left ${
-                  category ? 'text-black' : 'text-gray-500'
-                }`}
-              >
-                <>
-                  <span>{selectedCategoryLabel || '타입 선택'}</span>
-                  {/* <DropdownIcon className='ml-2 w-4 h-4 bg-black' /> */}
-                </>
-              </button>
-            }
-          />
-          {errors.wineType?.message && (
-            <div className='relative'>
-              <p className='text-red-500 absolute mt-1'>{errors.wineType.message}</p>
-            </div>
-          )}
-          <Input
-            id='wineType'
-            type='text'
-            className='custom-text-md-regular md:custom-text-lg-regular hidden'
-            {...register('wineType', {
-              required: '타입을 선택해주세요.',
-              onChange: () => clearErrors('wineType'),
-            })}
-          />
+      {/* 원산지 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
+        원산지
+      </p>
+      <Input
+        className='w-full custom-text-md-regular md:custom-text-lg-regular'
+        id='wineOrigin'
+        type='text'
+        placeholder='원산지 입력'
+        {...register('wineOrigin', {
+          required: '원산지를 입력해주세요.',
+          onChange: () => clearErrors('wineOrigin'),
+        })}
+        errorMessage={errors.wineOrigin?.message}
+      />
+
+      {/* 타입 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mb-[10px] md:mb-[12px] mt-[22px] md:mt-[24px]'>
+        타입
+      </p>
+      <SelectDropdown
+        selectedValue={category}
+        options={categoryOptions}
+        onChange={(value) => {
+          setValue('wineType', value);
+          trigger('wineType');
+        }}
+        placeholder='타입 선택'
+        trigger={
+          <button
+            type='button'
+            className={`w-full h-[42px] md:h-[48px] px-4 py-2 border rounded-[12px] md:rounded-[16px] text-left ${
+              category ? 'text-black' : 'text-gray-500'
+            }`}
+          >
+            <>
+              <span>{selectedCategoryLabel || '타입 선택'}</span>
+              {/* <DropdownIcon className='ml-2 w-4 h-4 bg-black' /> */}
+            </>
+          </button>
+        }
+      />
+      {errors.wineType?.message && (
+        <div className='relative'>
+          <p className='text-red-500 absolute mt-1'>{errors.wineType.message}</p>
+        </div>
+      )}
+      <Input
+        id='wineType'
+        type='text'
+        className='custom-text-md-regular md:custom-text-lg-regular hidden'
+        {...register('wineType', {
+          required: '타입을 선택해주세요.',
+          onChange: () => clearErrors('wineType'),
+        })}
+      />
 
-          {/* 와인 사진 */}
-          <p className='custom-text-md-medium md:custom-text-lg-medium mt-[24px] md:mt-[26px]'>
-            와인 사진
-          </p>
-          <Input
-            id='wineImage'
-            type='file'
-            accept='image/*'
-            className='custom-text-md-regular md:custom-text-lg-regular hidden'
-            {...register('wineImage', {
-              onChange: (e) => {
-                clearErrors('wineImage');
-                handleImageChange(e);
-              },
-            })}
-            ref={(e) => {
-              register('wineImage').ref(e);
-              fileInputRef.current = e;
-            }}
-          />
-          <div className='mt-2 mb-5'>
-            <div
-              className='w-[140px] aspect-square bg-gray-100 rounded-2xl overflow-hidden flex items-center justify-center relative cursor-pointer'
-              onClick={triggerFileSelect}
-            >
-              {previewImage ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={previewImage} alt='미리보기' className='w-full h-full object-cover' />
-              ) : (
-                <div className='flex flex-col items-center text-gray-400'>
-                  {/* <CameraIcon className='w-6 h-6 mb-2' /> */}
-                </div>
-              )}
+      {/* 와인 사진 */}
+      <p className='custom-text-md-medium md:custom-text-lg-medium mt-[24px] md:mt-[26px]'>
+        와인 사진
+      </p>
+      <Input
+        id='wineImage'
+        type='file'
+        accept='image/*'
+        className='custom-text-md-regular md:custom-text-lg-regular hidden'
+        {...register('wineImage', {
+          onChange: (e) => {
+            clearErrors('wineImage');
+            handleImageChange(e);
+          },
+        })}
+        ref={(e) => {
+          register('wineImage').ref(e);
+          fileInputRef.current = e;
+        }}
+      />
+      <div className='mt-2 mb-5'>
+        <div
+          className='w-[140px] aspect-square bg-gray-100 rounded-2xl overflow-hidden flex items-center justify-center relative cursor-pointer'
+          onClick={triggerFileSelect}
+        >
+          {previewImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={previewImage} alt='미리보기' className='w-full h-full object-cover' />
+          ) : (
+            <div className='flex flex-col items-center text-gray-400'>
+              {/* <CameraIcon className='w-6 h-6 mb-2' /> */}
             </div>
-            {errors.wineImage?.message && (
-              <div className='relative'>
-                <p className='text-red-500 absolute mt-1'>{errors.wineImage.message}</p>
-              </div>
-            )}
+          )}
+        </div>
+        {errors.wineImage?.message && (
+          <div className='relative'>
+            <p className='text-red-500 absolute mt-1'>{errors.wineImage.message}</p>
           </div>
-        </form>
-      </BasicModal>
+        )}
+      </div>
+    </form>
+  );
+
+  return (
+    <div>
+      {isDesktop ? (
+        <BasicModal
+          type='register'
+          title='내가 등록한 와인'
+          open={showEditModal}
+          onOpenChange={closeModalReset}
+          buttons={renderButton}
+        >
+          {renderForm()}
+        </BasicModal>
+      ) : (
+        <BasicBottomSheet
+          open={showEditModal}
+          onOpenChange={closeModalReset}
+          title='와인 수정'
+          buttons={renderButton}
+        >
+          {renderForm()}
+        </BasicBottomSheet>
+      )}
     </div>
   );
 };
diff --git a/src/components/common/BottomSheet/BasicBottomSheet.tsx b/src/components/common/BottomSheet/BasicBottomSheet.tsx
new file mode 100644
index 00000000..3d8f42ce
--- /dev/null
+++ b/src/components/common/BottomSheet/BasicBottomSheet.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+} from '@/components/ui/drawer';
+
+interface BasicBottomSheetProps {
+  title?: string;
+  children?: React.ReactNode;
+  buttons?: React.ReactNode;
+  contentLayer?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const BasicBottomSheet = ({
+  open,
+  onOpenChange,
+  title,
+  children,
+  buttons,
+  contentLayer,
+}: BasicBottomSheetProps) => {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent className={contentLayer}>
+        {title && (
+          <DrawerHeader className='text-left'>
+            <DrawerTitle className='custom-text-xl-bold'>{title}</DrawerTitle>
+          </DrawerHeader>
+        )}
+
+        <div className='px-4 py-2'>{children}</div>
+
+        {buttons && (
+          <DrawerFooter className='flex flex-col gap-2 px-4 pb-4'>{buttons}</DrawerFooter>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default BasicBottomSheet;
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..cf92a013
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
+      )}
+      {...props}
+    >
+      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted' />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/src/hooks/useMediaQuery.tsx b/src/hooks/useMediaQuery.tsx
new file mode 100644
index 00000000..26313977
--- /dev/null
+++ b/src/hooks/useMediaQuery.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    //ssr시 실행안하도록
+    if (typeof window === 'undefined') return;
+
+    const media = window.matchMedia(query);
+
+    const handleChange = () => {
+      setMatches(media.matches);
+    };
+
+    setMatches(media.matches);
+
+    media.addEventListener('change', handleChange);
+
+    return () => {
+      media.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+  return matches;
+}