Merge pull request #41 from geulDa/feat/#13/popup

✨Feat : 팝업 컴포넌트 구현

Author: KongMezu

src/shared/common/Overlay.tsx

@@ -4,7 +4,7 @@ interface OverlayProps {
   className?: string;
 }
 
-const Overlay = ({ onClick, opacity = 40, className }: OverlayProps) => {
+const Overlay = ({ onClick, opacity = 30, className }: OverlayProps) => {
   return (
     <div
       onClick={onClick}

src/shared/common/Popup.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { cn } from '@/shared/lib';
+
+interface PopupProps {
+  text: string;
+  onClose?: () => void;
+}
+
+export default function Popup({ text, onClose }: PopupProps) {
+  const [visible, setVisible] = useState(true);
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={cn(
+        'px-[1.6rem] py-[1.5rem] w-[26.2rem] h-[12rem]',
+        'bg-white border border-gray-200 rounded-[0.8rem]',
+        'flex flex-col items-center justify-center gap-[1.4rem]',
+      )}
+    >
+      <p className='text-title-sm text-gray-500'>{text}</p>
+      <button className='text-title-md text-blue-400' onClick={handleClose}>
+        확인
+      </button>
+    </div>
+  );
+}

src/shared/common/PopupSet.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { cn } from '@/shared/lib';
+import Popup from '@/shared/common/Popup';
+import Overlay from '@/shared/common/Overlay';
+
+interface PopupSetProps {
+  text: string;
+  onClose?: () => void;
+}
+
+export default function PopupSet({ text, onClose }: PopupSetProps) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <Overlay />
+      {/* 중앙 고정 */}
+      <div
+        className={cn(
+          'fixed inset-0 z-[50]',
+          'flex items-center justify-center',
+        )}
+      >
+        <Popup text={text} onClose={handleClose} />
+      </div>
+    </>
+  );
+}