From 60116fc8f1d2ec188a40963aeefd11cd2eaa8ebb Mon Sep 17 00:00:00 2001
From: seondal <sseondal@gmail.com>
Date: Wed, 20 Mar 2024 05:10:36 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20=20ModalWra?=
 =?UTF-8?q?pper=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ImageModal.client.tsx | 18 ----------
 src/components/Modal/ModalWrapper.tsx      | 39 ----------------------
 src/hooks/useOnClickOutside.ts             | 25 --------------
 3 files changed, 82 deletions(-)
 delete mode 100644 src/components/Modal/ImageModal.client.tsx
 delete mode 100644 src/components/Modal/ModalWrapper.tsx
 delete mode 100644 src/hooks/useOnClickOutside.ts

diff --git a/src/components/Modal/ImageModal.client.tsx b/src/components/Modal/ImageModal.client.tsx
deleted file mode 100644
index ca5eb363..00000000
--- a/src/components/Modal/ImageModal.client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Image from 'next/image';
-
-import ModalWrapper from './ModalWrapper';
-
-interface ImageModalProps {
-  image: string;
-  onClose: () => void;
-}
-
-export default function ImageModal({ image, onClose }: ImageModalProps) {
-  return (
-    <ModalWrapper onClose={onClose} className="w-full">
-      <div className="h-screen w-screen">
-        <Image src={image} alt="fullImage" fill className="object-contain" onClick={onClose} />
-      </div>
-    </ModalWrapper>
-  );
-}
diff --git a/src/components/Modal/ModalWrapper.tsx b/src/components/Modal/ModalWrapper.tsx
deleted file mode 100644
index b7f867ab..00000000
--- a/src/components/Modal/ModalWrapper.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-import { motion } from 'framer-motion';
-import { useRef } from 'react';
-
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-import cn from '@/utils/cn';
-
-import type { StrictPropsWithChildren } from '@/types';
-
-interface ModalWrapperProps {
-  onClose?: () => void;
-  className?: string;
-}
-
-export default function ModalWrapper({
-  onClose = () => {},
-  className,
-  children,
-}: StrictPropsWithChildren<ModalWrapperProps>) {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(modalRef, onClose);
-
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      className="fixed left-1/2 top-0 z-modal h-full w-full max-w-450 -translate-x-1/2 bg-[rgba(0,0,0,0.4)]"
-    >
-      <div
-        ref={modalRef}
-        className={cn('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', className)}
-      >
-        {children}
-      </div>
-    </motion.div>
-  );
-}
diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
deleted file mode 100644
index 44a1d18c..00000000
--- a/src/hooks/useOnClickOutside.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: React.RefObject<T>,
-  handler: (event: MouseEvent | TouchEvent) => void
-) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      event.stopPropagation();
-      if (!ref.current || ref.current.contains(event.target as Node)) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler]);
-}