feat: ログインできるようにロジックを追加

app/components/LogginCard.tsx

@@ -1,21 +1,43 @@
-import { type ComponentPropsWithRef, forwardRef } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { supabase } from "~/libs/supabase";
 import { cn } from "~/libs/utils";
 import { Button } from "./Button";
 import { Card } from "./Card";
 import { Input } from "./Input";
 
-export interface LogginCardProps extends ComponentPropsWithRef<"div"> {
-	asChild?: boolean;
+interface FormData {
+	displayName: string;
 }
 
-export const LogginCard = forwardRef<HTMLDivElement, LogginCardProps>(
-	({ className }) => {
-		return (
-			<Card className={cn("flex flex-col items-center gap-y-4 p-4", className)}>
+interface LogginCardProps extends ComponentPropsWithRef<"div"> {}
+
+export function LogginCard({ className }: LogginCardProps): ReactNode {
+	const { register, handleSubmit } = useForm<FormData>();
+
+	const onSubmit: SubmitHandler<FormData> = async (data) => {
+		// 状態に関わらずログアウトする
+		await supabase.auth.signOut();
+
+		await supabase.auth.signInAnonymously({
+			options: {
+				data: {
+					display_name: data.displayName,
+				},
+			},
+		});
+	};
+
+	return (
+		<Card
+			className={cn("flex flex-col items-center gap-y-4 p-4", className)}
+			asChild
+		>
+			<form onSubmit={handleSubmit(onSubmit)}>
 				<h1 className={"text-2xl drop-shadow-base"}>名前を入力して登録！</h1>
-				<Input placeholder="名前" />
+				<Input placeholder="名前" {...register("displayName")} />
 				<Button type="submit">登録</Button>
-			</Card>
-		);
-	},
-);
+			</form>
+		</Card>
+	);
+}

app/routes/_index/SignUp.tsx

@@ -1,35 +1,11 @@
 import type { ReactNode } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
 import { LogginCard } from "~/components/LogginCard";
-import { supabase } from "~/libs/supabase";
-
-interface FormData {
-	displayName: string;
-}
 
 export function SignUp(): ReactNode {
-	const { register, handleSubmit } = useForm<FormData>();
-
-	const onSubmit: SubmitHandler<FormData> = async (data) => {
-		// 状態に関わらずログアウトする
-		await supabase.auth.signOut();
-
-		await supabase.auth.signInAnonymously({
-			options: {
-				data: {
-					display_name: data.displayName,
-				},
-			},
-		});
-	};
-
 	return (
-		<form
-			onSubmit={handleSubmit(onSubmit)}
-			className="grid justify-items-center gap-8"
-		>
-			<img src="../../public/logo.svg" alt="RicoShot" className="w-full" />
+		<div className="grid justify-items-center gap-8">
+			<img src="/logo.svg" alt="RicoShot" className="w-full" />
 			<LogginCard className="w-full rotate-2" />
-		</form>
+		</div>
 	);
 }