refactor: 와인 타입 모달 className, hasMargin props 추가

src/components/common/Modal/BasicModal.tsx

@@ -40,11 +40,14 @@ const BasicModal = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <form>
         <DialogContent
-          className={`${widthClass[type]} flex flex-col rounded-xl [&>button:last-child]:hidden`}
+          className={`${widthClass[type]} flex flex-col rounded-xl max-h-[95vh] [&>button:last-child]:hidden`}
         >
           {showCloseButton && (
             <DialogClose asChild>
-              <button className='absolute top-4 right-5' aria-label='Close'>
+              <button
+                className='absolute top-4 right-5 focus:outline-none focus:border-none'
+                aria-label='Close'
+              >
                 <Close width={24} height={24} className='text-gray-500' />
               </button>
             </DialogClose>
@@ -56,8 +59,11 @@ const BasicModal = ({
             <DialogDescription className='sr-only'>다이얼로그 내용</DialogDescription>
           </DialogHeader>
 
-          {/* 컨텐츠 영역 */}
-          {children}
+          <div className='overflow-auto max-h-[calc(95vh - 10rem)]'>
+            {/* 컨텐츠 영역 */}
+            {children}
+          </div>
+
           <DialogFooter className='w-full flex flex-row justify-between gap-2'>
             {buttons}
           </DialogFooter>

src/components/common/Modal/Modal.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+// import Close from '@/assets/icons/close.svg';
+import {
+  Dialog, // Dialog,
+  // DialogClose,
+  // DialogContent,
+  // DialogDescription,
+  // DialogFooter,
+  // DialogHeader,
+  // DialogTitle,
+} from '@/components/ui/dialog';
+import useModalStore from '@/stores/modalStore';
+import { ModalProps } from '@/types/ModalTypes';
+
+// interface ModalProps {
+//   type?: 'register' | 'review' | 'filter';
+//   title?: string;
+//   children?: React.ReactNode;
+//   buttons?: React.ReactNode;
+//   open: boolean;
+//   onOpenChange: (open: boolean) => void;
+//   showCloseButton?: boolean;
+// }
+
+// const widthClass = {
+//   register: 'w-full max-w-[375px] md:max-w-none md:w-[460px]',
+//   review: 'w-full max-w-[375px] md:max-w-none md:w-[528px]',
+//   filter: 'max-w-[375px]',
+// };
+
+const Modal = ({ children }: ModalProps) => {
+  const { open, onOpenChange } = useModalStore();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {children}
+    </Dialog>
+  );
+};
+
+{
+  /* <Dialog open={open} onOpenChange={onOpenChange}>
+  <form>
+    <DialogContent
+      className={`${widthClass[type]} flex flex-col rounded-xl max-h-[95vh] [&>button:last-child]:hidden`}
+    >
+      {showCloseButton && (
+        <DialogClose asChild>
+          <button
+            className='absolute top-4 right-5 focus:outline-none focus:border-none'
+            aria-label='Close'
+          >
+            <Close width={24} height={24} className='text-gray-500' />
+          </button>
+        </DialogClose>
+      )}
+      <DialogHeader>
+        <DialogTitle className='custom-text-xl-bold md:custom-text-2xl-bold text-left'>
+          {title}
+        </DialogTitle>
+        <DialogDescription className='sr-only'>다이얼로그 내용</DialogDescription>
+      </DialogHeader>
+
+      <div className='overflow-auto max-h-[calc(95vh - 10rem)]'>
+        {children}
+      </div>
+
+      <DialogFooter className='w-full flex flex-row justify-between gap-2'>{buttons}</DialogFooter>
+    </DialogContent>
+  </form>
+</Dialog>; */
+}
+
+export default Modal;

src/pages/_app.tsx

@@ -13,14 +13,7 @@ const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   const { pathname } = useRouter();
-  const pagesWithoutGnb = [
-    '/login',
-    '/signup',
-    '/signin',
-    '/oauth/kakao',
-    '/oauth/signup/kakao',
-    '/_error',
-  ];
+  const pagesWithoutGnb = ['/signup', '/signin', '/oauth/kakao', '/oauth/signup/kakao', '/_error'];
   const hideHeader = pagesWithoutGnb.includes(pathname);
 
   return (

src/stores/modalStore.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+import { ModalState } from '@/types/ModalTypes';
+
+const useModalStore = create<ModalState>((set) => ({
+  type: 'register',
+  title: '모달 제목',
+  open: false,
+  onOpenChange: (open) => set({ open }),
+  showCloseButton: true,
+}));
+
+export default useModalStore;

src/types/ModalTypes.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export type ModalType = 'register' | 'review' | 'filter';
+
+export type ModalProps = {
+  children: React.ReactNode;
+};
+
+export type ModalState = {
+  type?: ModalType;
+  title?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  showCloseButton?: boolean;
+};