From c24bbe78d0b823d5759c40fbd37f7dfb8618331b Mon Sep 17 00:00:00 2001
From: NISHIZAWA Shuntaro <me@s2n.tech>
Date: Mon, 21 Oct 2024 15:46:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20SignUp/Logout=E3=81=A7=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/_index/SignUp.tsx | 10 +++-------
 app/routes/_index/route.tsx  |  9 ++-------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/app/routes/_index/SignUp.tsx b/app/routes/_index/SignUp.tsx
index 53dbbac..1b84267 100644
--- a/app/routes/_index/SignUp.tsx
+++ b/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>
 	);
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
index cad6411..01dd82c 100644
--- a/app/routes/_index/route.tsx
+++ b/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 />