feat: SignUp/Logoutでコンポーネントを使用するように変更

app/routes/_index/SignUp.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
 import { supabase } from "~/libs/supabase";
 
 interface FormData {
@@ -26,14 +27,9 @@ export function SignUp(): ReactNode {
 	return (
 		<form
 			onSubmit={handleSubmit(onSubmit)}
-			className="grid justify-items-center gap-2"
+			className="grid justify-items-center gap-4"
 		>
-			<input
-				type="text"
-				className="w-full rounded-lg border border-gray-300 px-4 py-2"
-				placeholder="名前"
-				{...register("displayName")}
-			/>
+			<Input placeholder="名前" {...register("displayName")} />
 			<Button type="submit">登録</Button>
 		</form>
 	);

app/routes/_index/route.tsx

@@ -1,4 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
+import { Button } from "~/components/Button";
 import { Heading } from "~/components/Heading";
 import { useMyProfile } from "~/features/profile/useMyProfile";
 import { supabase } from "~/libs/supabase";
@@ -32,13 +33,7 @@ export default function Page() {
 						<div>Play Count: {myProfile.playCount}</div>
 						<div>High Score: {myProfile.highScore ?? "-"}</div>
 						<div>Rank: {myProfile.rank ?? "-"}</div>
-						<button
-							type="button"
-							onClick={handleLogout}
-							className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
-						>
-							Logout
-						</button>
+						<Button onClick={handleLogout}>Logout</Button>
 					</div>
 				) : (
 					<SignUp />