refactor : ModalWrapper > PortalWrapper로 수정하여 범용적으로 수정

src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import ModalWrapper from './ModalWrapper';
+import ModalWrapper from './PortalWrapper';
 import { StrictPropsWithChildren } from '@/types';
 
 interface PopupProps {

src/components/Modal/ModalWrapper.tsx → src/components/Modal/PortalWrapper.tsx

@@ -1,30 +1,37 @@
 'use client';
+import clsx from 'clsx';
 import { useRef } from 'react';
 
 import { AnimatedPortal } from '../Portal';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 
 import type { StrictPropsWithChildren } from '@/types';
 
-interface ModalWrapperProps {
+interface PortalWrapperProps {
   onClose?: () => void;
+  isBackGroundBlur?: boolean;
 }
 
-export default function ModalWrapper({
+export default function PortalWrapper({
   onClose = () => {},
   children,
-}: StrictPropsWithChildren<ModalWrapperProps>) {
-  const modalRef = useRef<HTMLDivElement>(null);
+  isBackGroundBlur = true,
+}: StrictPropsWithChildren<PortalWrapperProps>) {
+  const portalRef = useRef<HTMLDivElement>(null);
 
-  useOnClickOutside(modalRef, onClose);
+  useOnClickOutside(portalRef, onClose);
 
   return (
     <AnimatedPortal
       motionProps={{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }}
     >
-      <div className="fixed left-1/2 top-0 z-10 h-full w-full max-w-440 -translate-x-1/2 bg-neutral-900 bg-opacity-90">
+      <div
+        className={clsx('fixed left-1/2 top-0 z-10 h-full w-full max-w-440 -translate-x-1/2', {
+          'bg-neutral-900 bg-opacity-90': isBackGroundBlur,
+        })}
+      >
         <div
-          ref={modalRef}
+          ref={portalRef}
           className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 "
         >
           {children}