From 87ad871143315c9909f2df26d38be218f7a449a0 Mon Sep 17 00:00:00 2001
From: NISHIZAWA Shuntaro <me@s2n.tech>
Date: Tue, 5 Nov 2024 19:02:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=83=AD?=
 =?UTF-8?q?=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/LogginCard.tsx | 46 ++++++++++++++++++++++++++---------
 app/routes/_index/SignUp.tsx  | 30 +++--------------------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/app/components/LogginCard.tsx b/app/components/LogginCard.tsx
index 553cbe8..95e0dfa 100644
--- a/app/components/LogginCard.tsx
+++ b/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>
+	);
+}
diff --git a/app/routes/_index/SignUp.tsx b/app/routes/_index/SignUp.tsx
index bf28c4c..b0fa036 100644
--- a/app/routes/_index/SignUp.tsx
+++ b/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>
 	);
 }