From 8c2cef054a242ab4ad0d4182d14c1d6a66450b72 Mon Sep 17 00:00:00 2001
From: bearl <125728897+bearl27@users.noreply.github.com>
Date: Tue, 10 Dec 2024 20:23:59 +0900
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E3=81=8C=E9=96=89=E3=81=98=E3=82=8B?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A8=E9=96=8B=E3=81=8F=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=A7=E3=83=91=E3=82=B9=E3=83=AF=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=82=92=E8=A6=8B=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/signup/components/signup.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/features/signup/components/signup.tsx b/client/src/features/signup/components/signup.tsx
index b7daf72e..ed78717a 100644
--- a/client/src/features/signup/components/signup.tsx
+++ b/client/src/features/signup/components/signup.tsx
@@ -17,6 +17,8 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import style from "./style.module.scss";
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 
 type SignUpProps = {
   type: "user" | "community";
@@ -37,6 +39,7 @@ type SignupForm = z.infer<typeof SignupFormSchema>;
 
 export const SignUpDialog = (props: SignUpProps) => {
   const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
 
   let name = "";
   let introduction = "";
@@ -169,15 +172,28 @@ export const SignUpDialog = (props: SignUpProps) => {
                   <FormLabel className={style.label}>
                     <span className={style.span}>*</span>パスワード
                   </FormLabel>
-                  <FormControl>
-                    <Input placeholder="text" {...field} className={style.input} />
-                  </FormControl>
+                  <div className="relative w-full max-w-md">
+                    <FormControl>
+                      <Input
+                        placeholder="パスワード"
+                        {...field}
+                        type={showPassword ? 'text' : 'password'}
+                        className={`${style.input} pr-12`}
+                      />
+                    </FormControl>
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
+                    >
+                      {showPassword ? <Eye size={20} /> : <EyeOff size={20} />}
+                    </button>
+                  </div>
                   <FormMessage />
                 </FormItem>
               )}
             />
 
-            <br />
             <br />
 
             <FormField