Feature/bottomsheet

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"
   },

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;

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