feat: add useModal custom hook

app/(landing)/_components/IntroButtonSection.tsx

@@ -1,7 +1,16 @@
-import TestModal from '@/shared/components/modals/testModal';
+'use client';
+
+import { Button } from '@/components/ui/button';
+import useModal from '@/shared/hooks/useModal';
 
 const IntroButtonSection = () => {
-  return <TestModal />;
+  const { onOpen } = useModal();
+
+  return (
+    <Button className="pointer-events-auto" onClick={() => onOpen('Intro')}>
+      Get Started
+    </Button>
+  );
 };
 
 export default IntroButtonSection;

components/ui/dialog.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
@@ -44,10 +43,6 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

package.json

@@ -28,7 +28,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.164.1",
-    "vaul": "^0.9.4"
+    "vaul": "^0.9.4",
+    "zustand": "5.0.0-rc.2"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.1.5",

shared/components/modals/testModal.tsx → shared/components/modals/IntroduceModal.tsx

@@ -1,23 +1,26 @@
 'use client';
 
+import useModal from '@/shared/hooks/useModal';
+
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
+  DialogFooter,
 } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+const IntroduceModal = () => {
+  const { isOpen, onClose } = useModal();
+
+  if (!isOpen) {
+    return null;
+  }
 
-const TestModal = () => {
   return (
-    <Dialog>
-      <DialogTrigger
-        style={{ pointerEvents: 'auto' }}
-        className="text-yellow-300"
-      >
-        Open
-      </DialogTrigger>
+    <Dialog open={isOpen}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Are you absolutely sure?</DialogTitle>
@@ -26,9 +29,12 @@ const TestModal = () => {
             account and remove your data from our servers.
           </DialogDescription>
         </DialogHeader>
+        <DialogFooter>
+          <Button onClick={() => onClose()}>Cancel</Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 };
 
-export default TestModal;
+export default IntroduceModal;

shared/components/ui/UISection.tsx

@@ -1,3 +1,5 @@
+import ModalProvider from '@/shared/provider/ModalProvider';
+
 const UISection = ({ children }: { children: React.ReactNode }) => {
   return (
     <section
@@ -16,6 +18,7 @@ const UISection = ({ children }: { children: React.ReactNode }) => {
       }}
     >
       {children}
+      <ModalProvider />
     </section>
   );
 };

shared/hooks/useModal.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+export type ModalType = 'Intro';
+
+export interface ModalProps {
+  data?: null; // temp
+}
+
+interface ModalStore {
+  type: ModalType | null;
+  props: ModalProps;
+  isOpen: boolean;
+  onOpen: (type: ModalType, props?: ModalProps) => void;
+  onClose: () => void;
+}
+
+const useModal = create<ModalStore>((set) => ({
+  type: null,
+  props: {},
+  isOpen: false,
+  onOpen: (type, props) => set({ type, props, isOpen: true }),
+  onClose: () => set({ type: null, props: {}, isOpen: false }),
+}));
+
+export default useModal;

shared/provider/ModalProvider.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import IntroduceModal from '@/shared/components/modals/IntroduceModal';
+
+const ModalProvider = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return <IntroduceModal />;
+};
+
+export default ModalProvider;