feat: gacha auth integration (#32)

* feat(gacha): register and login integration

* fix: navbar and gacha landing page

- display fullname when user authenticated
- fix styling and responsive

* fix: minor fix UI

apps/gacha/src/app/_hooks/use-verify-email.ts

@@ -0,0 +1,62 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyEmailRequest,
+  usePostVerifyEmail,
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useVerifyEmail = () => {
+  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [emailToVerify, setEmailToVerify] = useState('');
+  const navigate = useNavigate();
+
+  const postVerifyEmail = usePostVerifyEmail();
+
+  const verifyForm = useForm<{ otp: string }>({
+    mode: 'all',
+    defaultValues: {
+      otp: '',
+    },
+  });
+
+  const onVerifySubmit = verifyForm.handleSubmit((data) => {
+    const otpNumber = data.otp;
+
+    const verifyData: TVerifyEmailRequest = {
+      email: emailToVerify,
+      otp: otpNumber,
+    };
+
+    postVerifyEmail.mutate(verifyData, {
+      onSuccess: () => {
+        toast.success('Verifikasi email sukses');
+
+        navigate(0);
+      },
+      onError: (error) =>
+        toast.error(error.message || 'Verifikasi email gagal'),
+    });
+  });
+
+  const openVerifyModal = (email: string) => {
+    setEmailToVerify(email);
+    setShowVerifyModal(true);
+  };
+
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+    verifyForm.reset();
+  };
+
+  return {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying: postVerifyEmail.isPending,
+    emailToVerify,
+  };
+};