Merge pull request #113 from imaginer-dev/83--팝업modal

feat: 팝업(modal)추가

src/App.tsx

@@ -1,5 +1,32 @@
+import { useRef } from 'react';
+import Dialog from '../src/components/Dialog.tsx';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
 function App() {
-  return <div></div>;
+  const dialogRef1 = useRef<DialogElement | null>(null);
+  const dialogRef2 = useRef<DialogElement | null>(null);
+
+  const openModal = (dialogRef: React.RefObject<DialogElement>) => {
+    if (dialogRef.current) {
+      dialogRef.current?.openModal();
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={() => openModal(dialogRef1)}>팝업 열기 1</button>
+      <Dialog ref={dialogRef1} desc="팝업설명"></Dialog>
+      <br />
+      <button onClick={() => openModal(dialogRef2)}>팝업 열기 2</button>
+      <Dialog ref={dialogRef2} title="팝업제목" desc="팝업설명">
+        <p>children</p>
+      </Dialog>
+    </div>
+  );
 }
 
 export default App;

src/components/Dialog.stories.ts

@@ -0,0 +1,13 @@
+import Dialog from './Dialog.tsx';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {};

src/components/Dialog.tsx

@@ -0,0 +1,49 @@
+import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
+
+interface Props {
+  children?: ReactNode; //선택
+  title?: string; //선택
+  desc: string; //필수
+}
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const Dialog = forwardRef<DialogElement, Props>((props, ref) => {
+  const { children, title, desc } = props;
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    openModal: () => dialogRef.current?.showModal(),
+    closeModal: () => dialogRef.current?.close(),
+  }));
+
+  //동작 : 어두운 바닥 클릭시 닫기
+  const handleClose = (event: React.MouseEvent) => {
+    if (dialogRef.current && event.target === dialogRef.current) {
+      dialogRef.current?.close();
+    }
+  };
+
+  //텍스트 정렬 : title이 없을경우 desc 가운데 정렬
+  const descClassName = `py-4 text-lg ${title ? '' : 'text-center'}`;
+
+  return (
+    <dialog ref={dialogRef} className="modal modal-middle" onClick={handleClose}>
+      <div className="modal-box" onClick={(e) => e.stopPropagation()}>
+        {title && <h3 className="text-lg font-bold">{title}</h3>}
+        <p className={descClassName}>{desc}</p>
+        {children && <div>{children}</div>}
+        <form method="dialog" className="modal-action flex justify-center">
+          <button type="button" className="btn bg-primary text-base-100" onClick={() => dialogRef.current?.close()}>
+            닫기
+          </button>
+        </form>
+      </div>
+    </dialog>
+  );
+});
+
+export default Dialog;