Update profile management page

- Removed phone number field.
- Added functionality to change password.

src/pages/ProfileManagement.tsx

@@ -1,6 +1,6 @@
 
-import React from 'react';
+import React, { useState } from 'react';
-import { ArrowLeft, User, Camera, Mail, Phone } from 'lucide-react';
+import { ArrowLeft, User, Camera, Mail, Key, Eye, EyeOff } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -9,6 +9,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@/hooks/use-toast';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 
 const profileFormSchema = z.object({
   name: z.string().min(2, {
@@ -17,18 +19,36 @@ const profileFormSchema = z.object({
   email: z.string().email({
     message: '유효한 이메일 주소를 입력해주세요.',
   }),
-  phone: z.string().optional(),
+});
+
+const passwordFormSchema = z.object({
+  currentPassword: z.string().min(6, {
+    message: '비밀번호는 6자 이상이어야 합니다.',
+  }),
+  newPassword: z.string().min(8, {
+    message: '새 비밀번호는 8자 이상이어야 합니다.',
+  }),
+  confirmPassword: z.string().min(8, {
+    message: '비밀번호 확인은 8자 이상이어야 합니다.',
+  }),
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "비밀번호가 일치하지 않습니다.",
+  path: ["confirmPassword"],
 });
 
 type ProfileFormValues = z.infer<typeof profileFormSchema>;
+type PasswordFormValues = z.infer<typeof passwordFormSchema>;
 
 const ProfileManagement = () => {
   const navigate = useNavigate();
+  const { toast } = useToast();
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   
   const defaultValues: Partial<ProfileFormValues> = {
     name: '홍길동',
     email: 'honggildong@example.com',
-    phone: '010-1234-5678',
   };
 
   const form = useForm<ProfileFormValues>({
@@ -36,13 +56,36 @@ const ProfileManagement = () => {
     defaultValues,
   });
 
+  const passwordForm = useForm<PasswordFormValues>({
+    resolver: zodResolver(passwordFormSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  });
+
   const onSubmit = (data: ProfileFormValues) => {
     console.log('Form submitted:', data);
     // Here you would typically update the profile data
     // Show success message
+    toast({
+      title: "프로필 업데이트 완료",
+      description: "프로필 정보가 성공적으로 업데이트되었습니다.",
+    });
     navigate('/settings');
   };
 
+  const onPasswordSubmit = (data: PasswordFormValues) => {
+    console.log('Password form submitted:', data);
+    // Here you would typically update the password
+    toast({
+      title: "비밀번호 변경 완료",
+      description: "비밀번호가 성공적으로 변경되었습니다.",
+    });
+    passwordForm.reset();
+  };
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -81,7 +124,7 @@ const ProfileManagement = () => {
         
         {/* Profile Form */}
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
             <FormField
               control={form.control}
               name="name"
@@ -110,20 +153,6 @@ const ProfileManagement = () => {
               )}
             />
             
-            <FormField
-              control={form.control}
-              name="phone"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>전화번호</FormLabel>
-                  <FormControl>
-                    <Input placeholder="전화번호를 입력하세요" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            
             <div className="pt-4">
               <Button 
                 type="submit" 
@@ -134,6 +163,130 @@ const ProfileManagement = () => {
             </div>
           </form>
         </Form>
+
+        {/* Password Change Section */}
+        <div className="space-y-2 mb-6">
+          <h2 className="text-xl font-semibold neuro-text">비밀번호 변경</h2>
+          <Form {...passwordForm}>
+            <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-6 neuro-flat p-6">
+              <FormField
+                control={passwordForm.control}
+                name="currentPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>현재 비밀번호</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input 
+                          type={showCurrentPassword ? "text" : "password"} 
+                          placeholder="현재 비밀번호를 입력하세요" 
+                          {...field} 
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="absolute right-1 top-1"
+                          onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                        >
+                          {showCurrentPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={passwordForm.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>새 비밀번호</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input 
+                          type={showNewPassword ? "text" : "password"} 
+                          placeholder="새 비밀번호를 입력하세요" 
+                          {...field} 
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="absolute right-1 top-1"
+                          onClick={() => setShowNewPassword(!showNewPassword)}
+                        >
+                          {showNewPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={passwordForm.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>비밀번호 확인</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input 
+                          type={showConfirmPassword ? "text" : "password"} 
+                          placeholder="새 비밀번호를 다시 입력하세요" 
+                          {...field} 
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="absolute right-1 top-1"
+                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                        >
+                          {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button 
+                    type="button" 
+                    className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+                  >
+                    <Key className="mr-1" size={18} />
+                    비밀번호 변경하기
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>비밀번호 변경 확인</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      비밀번호를 변경하시겠습니까? 변경 후에는 새 비밀번호로 로그인해야 합니다.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>취소</AlertDialogCancel>
+                    <AlertDialogAction 
+                      onClick={passwordForm.handleSubmit(onPasswordSubmit)}
+                      className="bg-neuro-income hover:bg-neuro-income/90"
+                    >
+                      변경
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </form>
+          </Form>
+        </div>
       </div>
     </div>
   );