gg

src/components/layout/header/header.tsx

@@ -47,6 +47,7 @@ export default function Header() {
   const t = useTranslations();
   const [isSticky, setIsSticky] = useState(false);
   const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [loginModalMode, setLoginModalMode] = useState<"login" | "register">("login");
   const router = useRouter();
   const { data: session, status } = useSession();
 
@@ -63,10 +64,15 @@ export default function Header() {
   const handleLogout = async () => {
     await signOut({ redirect: false });
     if (authConfig.isAuthRequired) {
-      router.replace("/signin");
+      router.replace("/home");
     }
   };
 
+  const openAuthModal = (mode: "login" | "register") => {
+    setLoginModalMode(mode);
+    setLoginModalOpen(true);
+  };
+
   // Desktop auth section
   const renderAuthSection = () => {
     if (isLoading) return <Skeleton boxSize="10" rounded="full" />;
@@ -97,16 +103,27 @@ export default function Header() {
     }
 
     return (
-      <Button
-        variant="solid"
-        colorPalette="primary"
-        size="sm"
-        borderRadius="full"
-        onClick={() => setLoginModalOpen(true)}
-      >
-        <LuLogIn />
-        {t("auth.sign-in")}
-      </Button>
+      <HStack gap={2}>
+        <Button
+          variant="outline"
+          colorPalette="gray"
+          size="sm"
+          borderRadius="full"
+          onClick={() => openAuthModal("register")}
+        >
+          {t("auth.sign-up")}
+        </Button>
+        <Button
+          variant="solid"
+          colorPalette="primary"
+          size="sm"
+          borderRadius="full"
+          onClick={() => openAuthModal("login")}
+        >
+          <LuLogIn />
+          {t("auth.sign-in")}
+        </Button>
+      </HStack>
     );
   };
 
@@ -150,17 +167,29 @@ export default function Header() {
     }
 
     return (
-      <Button
-        variant="solid"
-        colorPalette="primary"
-        size="sm"
-        width="full"
-        borderRadius="full"
-        onClick={() => setLoginModalOpen(true)}
-      >
-        <LuLogIn />
-        {t("auth.sign-in")}
-      </Button>
+      <VStack gap={2} w="full">
+        <Button
+          variant="outline"
+          colorPalette="gray"
+          size="sm"
+          width="full"
+          borderRadius="full"
+          onClick={() => openAuthModal("register")}
+        >
+          {t("auth.sign-up")}
+        </Button>
+        <Button
+          variant="solid"
+          colorPalette="primary"
+          size="sm"
+          width="full"
+          borderRadius="full"
+          onClick={() => openAuthModal("login")}
+        >
+          <LuLogIn />
+          {t("auth.sign-in")}
+        </Button>
+      </VStack>
     );
   };
 
@@ -296,7 +325,7 @@ export default function Header() {
       </Box>
 
       {/* Login Modal */}
-      <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+      <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} initialMode={loginModalMode} />
     </>
   );
 }