From af0007bdb108bea848f9f6d51f40ce1c398e85cc Mon Sep 17 00:00:00 2001
From: h8570rg <namao0627@gmail.com>
Date: Sun, 31 Dec 2023 17:39:31 +0900
Subject: [PATCH] fix: register

---
 app/(app)/matches/MatchCreateButton.tsx       |  10 +-
 .../matches/[matchId]/GameInputModal.tsx      |  21 +-
 app/(auth)/login/layout.tsx                   |  13 -
 app/(auth)/login/page.tsx                     |   9 +-
 app/(auth)/register/Form.tsx                  |  63 +++++
 app/{(register) => (auth)}/register/page.tsx  |  13 +-
 app/(auth)/sign-up/layout.tsx                 |  13 -
 app/(auth)/sign-up/page.tsx                   |   9 +-
 app/(register)/layout.tsx                     |   7 -
 app/(register)/register/ProfileForm.tsx       | 222 ------------------
 app/globals.css                               |   2 +-
 components/BottomNavigation/index.tsx         |   8 +-
 components/FriendSearchModal/index.tsx        |   4 +-
 components/ProfilesSearch/index.tsx           |   4 +-
 lib/actions/updateProfile.ts                  |  72 ++++++
 lib/utils/schemas.ts                          |  23 +-
 tailwind.config.js                            |   4 +
 17 files changed, 205 insertions(+), 292 deletions(-)
 delete mode 100644 app/(auth)/login/layout.tsx
 create mode 100644 app/(auth)/register/Form.tsx
 rename app/{(register) => (auth)}/register/page.tsx (69%)
 delete mode 100644 app/(auth)/sign-up/layout.tsx
 delete mode 100644 app/(register)/layout.tsx
 delete mode 100644 app/(register)/register/ProfileForm.tsx
 create mode 100644 lib/actions/updateProfile.ts

diff --git a/app/(app)/matches/MatchCreateButton.tsx b/app/(app)/matches/MatchCreateButton.tsx
index d1385e3..1425883 100644
--- a/app/(app)/matches/MatchCreateButton.tsx
+++ b/app/(app)/matches/MatchCreateButton.tsx
@@ -228,7 +228,7 @@ export function MatchCreateButton({ className }: { className?: string }) {
                     labelPlacement="outside-left"
                     endContent={
                       <div className="pointer-events-none flex items-center">
-                        <span className="text-sm text-default-400">円</span>
+                        <span className="text-small text-default-400">円</span>
                       </div>
                     }
                     {...register("chipRate")}
@@ -240,7 +240,7 @@ export function MatchCreateButton({ className }: { className?: string }) {
                       hideIndicator
                       classNames={{
                         titleWrapper: "text-right",
-                        title: "text-sm text-primary",
+                        title: "text-small text-primary",
                       }}
                     >
                       <div className="space-y-3 px-1">
@@ -254,7 +254,7 @@ export function MatchCreateButton({ className }: { className?: string }) {
                           labelPlacement="outside-left"
                           endContent={
                             <div className="pointer-events-none flex items-center">
-                              <span className="text-sm text-default-400">
+                              <span className="text-small text-default-400">
                                 点
                               </span>
                             </div>
@@ -272,7 +272,7 @@ export function MatchCreateButton({ className }: { className?: string }) {
                           labelPlacement="outside-left"
                           endContent={
                             <div className="pointer-events-none flex items-center">
-                              <span className="text-sm text-default-400">
+                              <span className="text-small text-default-400">
                                 点
                               </span>
                             </div>
@@ -290,7 +290,7 @@ export function MatchCreateButton({ className }: { className?: string }) {
                           labelPlacement="outside-left"
                           endContent={
                             <div className="pointer-events-none flex shrink-0 items-center">
-                              <span className="text-sm text-default-400">
+                              <span className="text-small text-default-400">
                                 点返し
                               </span>
                             </div>
diff --git a/app/(app)/matches/[matchId]/GameInputModal.tsx b/app/(app)/matches/[matchId]/GameInputModal.tsx
index 70e3a55..5194ece 100644
--- a/app/(app)/matches/[matchId]/GameInputModal.tsx
+++ b/app/(app)/matches/[matchId]/GameInputModal.tsx
@@ -196,18 +196,21 @@ export function GameInputModal({
                                 endContent={
                                   <div className="pointer-events-none flex shrink-0 items-center gap-1">
                                     <span
-                                      className={classNames("mt-0.5 text-xs", {
-                                        "text-default-400":
-                                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                          // @ts-ignore
-                                          watch(
-                                            `playerPoints.${index}.points`,
-                                          ) === "",
-                                      })}
+                                      className={classNames(
+                                        "mt-0.5 text-tiny",
+                                        {
+                                          "text-default-400":
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            watch(
+                                              `playerPoints.${index}.points`,
+                                            ) === "",
+                                        },
+                                      )}
                                     >
                                       00
                                     </span>
-                                    <span className="text-sm text-default-400">
+                                    <span className="text-small text-default-400">
                                       点
                                     </span>
                                   </div>
diff --git a/app/(auth)/login/layout.tsx b/app/(auth)/login/layout.tsx
deleted file mode 100644
index 965149a..0000000
--- a/app/(auth)/login/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "ログイン",
-};
-
-export default function LoginLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 24053e6..def609a 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,12 +1,17 @@
+import { Metadata } from "next";
 import Link from "next/link";
 import { Divider } from "~/components/Divider";
 import { Form } from "./Form";
 import { SocialProviders } from "./SocialProviders";
 
+export const metadata: Metadata = {
+  title: "ログイン",
+};
+
 export default function Login() {
   return (
     <>
-      <h1 className="mx-auto mb-2 w-fit text-lg font-bold">ログイン</h1>
+      <h1 className="mx-auto mb-2 w-fit text-large font-bold">ログイン</h1>
       <SocialProviders />
       <div className="flex items-center gap-4">
         <Divider className="shrink" />
@@ -14,7 +19,7 @@ export default function Login() {
         <Divider className="shrink" />
       </div>
       <Form />
-      <p className="text-center text-sm">
+      <p className="text-center text-small">
         アカウントをお持ちでない方は
         <Link className="link" href="/sign-up">
           新規登録
diff --git a/app/(auth)/register/Form.tsx b/app/(auth)/register/Form.tsx
new file mode 100644
index 0000000..6d95a21
--- /dev/null
+++ b/app/(auth)/register/Form.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import classNames from "classnames";
+import { useFormState } from "react-dom";
+import { Button } from "~/components/Button";
+import { Input } from "~/components/Input";
+import { updateProfile } from "~/lib/actions/updateProfile";
+import {
+  JANRECO_ID_MAX_LENGTH,
+  JANRECO_ID_MIN_LENGTH,
+  NAME_MAX_LENGTH,
+} from "~/lib/utils/schemas";
+
+export function Form({
+  className,
+  userId,
+}: {
+  className?: string;
+  userId: string;
+}) {
+  const [state, formAction] = useFormState(updateProfile, {});
+
+  return (
+    <form
+      className={classNames(className, "py-4")}
+      action={formAction}
+      noValidate
+    >
+      <p className="mb-6 text-small text-foreground-light">
+        ユーザーIDと名前を決めてください。
+        <br />
+        ユーザーIDはユーザー検索に使用されます。名前は成績表に表示されます。
+      </p>
+      <div className="space-y-2.5">
+        <input id="id" name="id" type="text" hidden value={userId} readOnly />
+        <Input
+          id="janrecoId"
+          type="text"
+          name="janrecoId"
+          required
+          label="ユーザーID"
+          errorMessage={state.errors?.janrecoId?.[0]}
+          description={`半角英数字${JANRECO_ID_MIN_LENGTH}~${JANRECO_ID_MAX_LENGTH}文字で入力してください`}
+        />
+        <Input
+          id="name"
+          name="name"
+          label="名前"
+          type="text"
+          autoComplete="name"
+          required
+          errorMessage={state.errors?.name?.[0]}
+          description={`${NAME_MAX_LENGTH}文字以内で入力してください`}
+        />
+        <div className="flex justify-end">
+          <Button className="ml-auto" color="primary" type="submit">
+            決定
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/app/(register)/register/page.tsx b/app/(auth)/register/page.tsx
similarity index 69%
rename from app/(register)/register/page.tsx
rename to app/(auth)/register/page.tsx
index bb589c8..a04307b 100644
--- a/app/(register)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -1,9 +1,8 @@
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
-import Logo from "~/components/Logo";
 import { services } from "~/lib/services";
 import { createSupabaseServerComponentClient } from "~/lib/utils/supabase/serverComponentClient";
-import ProfileForm from "./ProfileForm";
+import { Form } from "./Form";
 
 export const metadata: Metadata = {
   title: "ユーザー情報登録",
@@ -19,9 +18,11 @@ export default async function Register() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col gap-4 p-5">
-      <Logo className="shrink-0 text-3xl" />
-      <ProfileForm className="grow" userId={user.id} />
-    </div>
+    <>
+      <h1 className="mx-auto mb-2 w-fit text-large font-bold">
+        ユーザー情報登録
+      </h1>
+      <Form userId={user.id} />
+    </>
   );
 }
diff --git a/app/(auth)/sign-up/layout.tsx b/app/(auth)/sign-up/layout.tsx
deleted file mode 100644
index c0acf05..0000000
--- a/app/(auth)/sign-up/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "新規登録",
-};
-
-export default function SignUpLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index cbcc57e..5f7238a 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -1,12 +1,17 @@
+import { Metadata } from "next";
 import Link from "next/link";
 import { Form } from "./Form";
 
+export const metadata: Metadata = {
+  title: "新規登録",
+};
+
 export default function Login() {
   return (
     <>
-      <h1 className="mx-auto mb-2 w-fit text-lg font-bold">新規登録</h1>
+      <h1 className="mx-auto mb-2 w-fit text-large font-bold">新規登録</h1>
       <Form />
-      <p className="text-center text-sm">
+      <p className="text-center text-small">
         既にアカウントをお持ちの方は
         <Link className="link" href="/login">
           ログイン
diff --git a/app/(register)/layout.tsx b/app/(register)/layout.tsx
deleted file mode 100644
index c443549..0000000
--- a/app/(register)/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function RegisterLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <main>{children}</main>;
-}
diff --git a/app/(register)/register/ProfileForm.tsx b/app/(register)/register/ProfileForm.tsx
deleted file mode 100644
index c493aba..0000000
--- a/app/(register)/register/ProfileForm.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import classNames from "classnames";
-import { useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { z } from "zod";
-import { Button } from "~/components/Button";
-import { Card, CardBody } from "~/components/Card";
-import { Icon } from "~/components/Icon";
-import { Input } from "~/components/Input";
-import { Popover, PopoverContent, PopoverTrigger } from "~/components/Popover";
-import { Progress } from "~/components/Progress";
-import { User } from "~/components/User";
-import {
-  ProfileUpdateSchema,
-  profileUpdateSchema,
-  useProfileUpdate,
-} from "~/lib/hooks/api/profile";
-import { useProfileExists } from "~/lib/hooks/api/profiles";
-
-const janrecoIdSchema = profileUpdateSchema.pick({ janrecoId: true });
-type JanrecoIdSchema = z.infer<typeof janrecoIdSchema>;
-const nameSchema = profileUpdateSchema.pick({ name: true });
-type NameSchema = z.infer<typeof nameSchema>;
-
-export default function ProfileForm({
-  className,
-  userId,
-}: {
-  className?: string;
-  userId: string;
-}) {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const progress = (100 / 3) * step;
-
-  const [janrecoId, setJanrecoId] =
-    useState<ProfileUpdateSchema["janrecoId"]>();
-  const [name, setName] = useState<ProfileUpdateSchema["name"]>();
-
-  const { trigger: getProfileExists } = useProfileExists();
-
-  const { trigger: updateProfile, isMutating: isUpdatingProfile } =
-    useProfileUpdate({ profileId: userId });
-
-  const janrecoIdForm = useForm<JanrecoIdSchema>({
-    resolver: zodResolver(janrecoIdSchema),
-    mode: "onChange",
-  });
-
-  const onJanrecoIdSubmit: SubmitHandler<JanrecoIdSchema> = async (data) => {
-    const exists = await getProfileExists({ janrecoId: data.janrecoId });
-    if (exists) {
-      janrecoIdForm.setError("janrecoId", {
-        type: "manual",
-        message: "このIDは既に使用されています",
-      });
-      return;
-    }
-    setJanrecoId(data.janrecoId);
-    setStep((prev) => prev + 1);
-  };
-
-  const nameForm = useForm<NameSchema>({
-    resolver: zodResolver(nameSchema),
-    mode: "onChange",
-  });
-
-  const onNameSubmit: SubmitHandler<NameSchema> = async (data) => {
-    setName(data.name);
-    setStep((prev) => prev + 1);
-  };
-
-  const handleConfirmClick = useCallback(async () => {
-    if (!janrecoId || !name) {
-      return;
-    }
-    await updateProfile({ janrecoId, name });
-    router.push("/");
-  }, [janrecoId, name, router, updateProfile]);
-
-  const handlePrevClick = useCallback(() => {
-    setStep((prev) => prev - 1);
-  }, []);
-
-  return (
-    <div className={classNames("flex flex-col px-4 pt-4 pb-16", className)}>
-      <Progress className="mb-10" label={`STEP: ${step}`} value={progress} />
-      <div className="flex grow items-center">
-        <div className="w-full">
-          {/* janrecoIdForm */}
-          {step === 1 && (
-            <form onSubmit={janrecoIdForm.handleSubmit(onJanrecoIdSubmit)}>
-              <div className="mb-10 flex items-center justify-center gap-0.5">
-                <p className="text-center font-bold">
-                  ユーザーIDを決めてください
-                </p>
-                <Popover>
-                  <PopoverTrigger>
-                    <Button variant="light" size="sm" isIconOnly>
-                      <Icon className="h-5 w-5 fill-current" name="help" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent>
-                    <div className="w-[300px] p-2 text-sm">
-                      ユーザーIDは、他のユーザーがあなたを検索するために使用されます。あとから変更することも可能です。
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-              <div className="space-y-6">
-                <Input
-                  type="text"
-                  startContent={
-                    <div className="pointer-events-none flex items-center">
-                      <span className="text-sm text-default-400">@</span>
-                    </div>
-                  }
-                  description="半角英数字4~12文字で入力してください"
-                  maxLength={12}
-                  {...janrecoIdForm.register("janrecoId")}
-                  errorMessage={
-                    janrecoIdForm.formState.errors.janrecoId?.message
-                  }
-                  autoFocus
-                />
-                <div className="flex justify-end">
-                  <Button
-                    type="submit"
-                    color="primary"
-                    isDisabled={!janrecoIdForm.formState.isValid}
-                    isLoading={janrecoIdForm.formState.isSubmitting}
-                  >
-                    次へ
-                  </Button>
-                </div>
-              </div>
-            </form>
-          )}
-          {/* nameForm */}
-          {step === 2 && (
-            <form onSubmit={nameForm.handleSubmit(onNameSubmit)}>
-              <div className="mb-10 flex items-center justify-center gap-0.5">
-                <p className="text-center font-bold">名前を決めてください</p>
-                <Popover>
-                  <PopoverTrigger>
-                    <Button variant="light" size="sm" isIconOnly>
-                      <Icon className="h-5 w-5 fill-current" name="help" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent>
-                    <div className="w-[300px] p-2 text-sm">
-                      名前は成績表に表示されます。あとから変更することも可能です。
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-              <div className="space-y-6">
-                <Input
-                  type="text"
-                  description="10文字以内で入力してください"
-                  maxLength={10}
-                  {...nameForm.register("name")}
-                  errorMessage={nameForm.formState.errors.name?.message}
-                  autoFocus
-                />
-                <div className="flex justify-end">
-                  <Button variant="light" onClick={handlePrevClick}>
-                    戻る
-                  </Button>
-                  <Button
-                    type="submit"
-                    color="primary"
-                    isDisabled={!nameForm.formState.isValid}
-                  >
-                    次へ
-                  </Button>
-                </div>
-              </div>
-            </form>
-          )}
-          {/* confirm */}
-          {step === 3 && !!name && !!janrecoId && (
-            <>
-              <div className="mb-6">
-                <p className="text-center font-bold">
-                  こちらでよろしいですか？
-                </p>
-                <p className="mt-2 text-center text-xs text-foreground-500">
-                  あとから変更できます
-                </p>
-              </div>
-              <div className="space-y-6">
-                <Card>
-                  <CardBody>
-                    <div>
-                      <User name={name} janrecoId={janrecoId} />
-                    </div>
-                  </CardBody>
-                </Card>
-                <div className="flex justify-end">
-                  <Button variant="light" onClick={handlePrevClick}>
-                    戻る
-                  </Button>
-                  <Button
-                    color="primary"
-                    onClick={handleConfirmClick}
-                    isLoading={isUpdatingProfile}
-                  >
-                    始める
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/globals.css b/app/globals.css
index 1ccbecd..4979689 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -22,7 +22,7 @@
   }
 
   .heading-1 {
-    @apply text-xl font-bold;
+    @apply text-[20px] font-bold;
   }
 }
 
diff --git a/components/BottomNavigation/index.tsx b/components/BottomNavigation/index.tsx
index 4742216..a2c4fee 100644
--- a/components/BottomNavigation/index.tsx
+++ b/components/BottomNavigation/index.tsx
@@ -6,7 +6,7 @@ export function BottomNavigation() {
     <footer className="fixed bottom-0 w-full border-t border-gray-300 bg-white">
       <nav className="flex justify-around">
         <Link
-          className="flex w-full flex-col items-center justify-center py-2 text-xs uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
+          className="flex w-full flex-col items-center justify-center py-2 text-tiny uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
           href="/matches"
         >
           <svg
@@ -18,7 +18,7 @@ export function BottomNavigation() {
           <span>Games</span>
         </Link>
         <Link
-          className="flex w-full flex-col items-center justify-center py-2 text-xs uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
+          className="flex w-full flex-col items-center justify-center py-2 text-tiny uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
           href="#"
         >
           <svg
@@ -30,7 +30,7 @@ export function BottomNavigation() {
           <span>Search</span>
         </Link>
         <Link
-          className="flex w-full flex-col items-center justify-center py-2 text-xs uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
+          className="flex w-full flex-col items-center justify-center py-2 text-tiny uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
           href="#"
         >
           <svg
@@ -42,7 +42,7 @@ export function BottomNavigation() {
           <span>Notifications</span>
         </Link>
         <Link
-          className="flex w-full flex-col items-center justify-center py-2 text-xs uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
+          className="flex w-full flex-col items-center justify-center py-2 text-tiny uppercase text-gray-400 hover:bg-gray-100 hover:text-gray-900"
           href="#"
         >
           <svg
diff --git a/components/FriendSearchModal/index.tsx b/components/FriendSearchModal/index.tsx
index e12edc3..c47706f 100644
--- a/components/FriendSearchModal/index.tsx
+++ b/components/FriendSearchModal/index.tsx
@@ -74,7 +74,7 @@ export function FriendSearchModal({
                   <ListItem key={profile.id} {...profile} onAdd={handleAdd} />
                 ))}
               {!isMutating && profiles && profiles?.length === 0 && (
-                <p className="text-center text-sm text-foreground-500">
+                <p className="text-center text-small text-foreground-500">
                   見つかりませんでした
                 </p>
               )}
@@ -110,7 +110,7 @@ function ListItem({
     <li className="flex items-center justify-between py-2">
       <User name={name} janrecoId={janrecoId} />
       {isFriend ? (
-        <div className="w-16 text-center text-xs text-foreground-500">
+        <div className="w-16 text-center text-tiny text-foreground-500">
           追加済み
         </div>
       ) : (
diff --git a/components/ProfilesSearch/index.tsx b/components/ProfilesSearch/index.tsx
index 08f9229..c39334f 100644
--- a/components/ProfilesSearch/index.tsx
+++ b/components/ProfilesSearch/index.tsx
@@ -79,7 +79,7 @@ export function ProfilesSearch({
           {!isMutating &&
             selectableProfiles &&
             selectableProfiles?.length === 0 && (
-              <p className="py-3 text-center text-sm text-foreground-500">
+              <p className="py-3 text-center text-small text-foreground-500">
                 見つかりませんでした
               </p>
             )}
@@ -117,7 +117,7 @@ function ListItem({
       {mode === "addFriend" && (
         <>
           {profile.isFriend ? (
-            <div className="w-16 text-center text-xs text-foreground-500">
+            <div className="w-16 text-center text-tiny text-foreground-500">
               追加済み
             </div>
           ) : (
diff --git a/lib/actions/updateProfile.ts b/lib/actions/updateProfile.ts
new file mode 100644
index 0000000..bae8c04
--- /dev/null
+++ b/lib/actions/updateProfile.ts
@@ -0,0 +1,72 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import { schemas } from "~/lib/utils/schemas";
+import { createSupabaseServerComponentClient } from "~/lib/utils/supabase/serverComponentClient";
+
+type State = {
+  errors?: {
+    base?: string[];
+    id?: string[];
+    name?: string[];
+    janrecoId?: string[];
+  };
+};
+
+const schema = z.object({
+  id: schemas.uid,
+  name: schemas.name,
+  janrecoId: schemas.janrecoId,
+});
+
+export async function updateProfile(
+  prevState: State,
+  formData: FormData,
+): Promise<State> {
+  const validatedFields = schema.safeParse({
+    id: formData.get("id"),
+    name: formData.get("name"),
+    janrecoId: formData.get("janrecoId"),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  const { id, name, janrecoId } = validatedFields.data;
+
+  const supabase = createSupabaseServerComponentClient();
+
+  const existingProfilesResult = await supabase
+    .from("profiles")
+    .select()
+    .eq("janreco_id", janrecoId);
+
+  if (existingProfilesResult.error) {
+    throw existingProfilesResult.error;
+  }
+
+  if (existingProfilesResult.data.length > 0) {
+    return {
+      errors: {
+        janrecoId: ["このIDは既に使用されています。"],
+      },
+    };
+  }
+
+  const { error } = await supabase
+    .from("profiles")
+    .update({ name, janreco_id: janrecoId })
+    .eq("id", id);
+
+  if (error) {
+    throw error;
+  }
+
+  revalidatePath("/");
+  redirect("/");
+}
diff --git a/lib/utils/schemas.ts b/lib/utils/schemas.ts
index a730db3..9029a72 100644
--- a/lib/utils/schemas.ts
+++ b/lib/utils/schemas.ts
@@ -9,7 +9,13 @@ export const calcMethod: Record<(typeof calcMethods)[number], string> = {
 };
 export type CalcMethod = (typeof calcMethods)[number];
 
+export const PASSWORD_MIN_LENGTH = 6;
+export const NAME_MAX_LENGTH = 12;
+export const JANRECO_ID_MIN_LENGTH = 4;
+export const JANRECO_ID_MAX_LENGTH = 12;
+
 export const schemas = {
+  uid: z.string(),
   email: z
     .string()
     .min(1, "メールアドレスを入力してください")
@@ -17,16 +23,25 @@ export const schemas = {
   password: z
     .string()
     .min(1, "パスワードを入力してください")
-    .min(6, "パスワードは6文字以上で入力してください"),
+    .min(
+      PASSWORD_MIN_LENGTH,
+      `パスワードは${PASSWORD_MIN_LENGTH}文字以上で入力してください`,
+    ),
   name: z
     .string()
     .min(1, "名前を入力してください")
-    .max(12, "名前は12文字以内で入力してください"),
+    .max(NAME_MAX_LENGTH, `名前は${NAME_MAX_LENGTH}文字以内で入力してください`),
   janrecoId: z
     .string()
     .min(1, "ユーザーIDを入力してください")
-    .min(4, "ユーザーIDは4文字以上で入力してください")
-    .max(12, "ユーザーIDは12文字以内で入力してください")
+    .min(
+      JANRECO_ID_MIN_LENGTH,
+      `ユーザーIDは${JANRECO_ID_MIN_LENGTH}文字以上で入力してください`,
+    )
+    .max(
+      JANRECO_ID_MAX_LENGTH,
+      `ユーザーIDは${JANRECO_ID_MAX_LENGTH}文字以内で入力してください`,
+    )
     .regex(/^[a-zA-Z0-9]+$/, "ユーザーIDは半角英数字のみで入力してください"),
   calcMethod: z.enum(calcMethods),
   chipRate: z
diff --git a/tailwind.config.js b/tailwind.config.js
index 339862c..5eb7d25 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ const config = {
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    fontSize: {},
     extend: {
       animation: {
         expansion: "expansion 5s ease-in-out forwards",
@@ -71,6 +72,9 @@ const config = {
               DEFAULT: "#7C3BED",
               foreground: "#e7e1e5",
             },
+            foreground: {
+              light: "#d4d4d8",
+            },
           },
         },
       },