diff --git a/src/pages/ProfileManagement.tsx b/src/pages/ProfileManagement.tsx index 77a0575..8e5b564 100644 --- a/src/pages/ProfileManagement.tsx +++ b/src/pages/ProfileManagement.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { ArrowLeft, User, Camera, Mail, Phone } from 'lucide-react'; +import React, { useState } from '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; +type PasswordFormValues = z.infer; 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 = { name: '홍길동', email: 'honggildong@example.com', - phone: '010-1234-5678', }; const form = useForm({ @@ -36,13 +56,36 @@ const ProfileManagement = () => { defaultValues, }); + const passwordForm = useForm({ + 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 (
@@ -81,7 +124,7 @@ const ProfileManagement = () => { {/* Profile Form */}
- + { )} /> - ( - - 전화번호 - - - - - - )} - /> -
+ + {/* Password Change Section */} +
+

비밀번호 변경

+
+ + ( + + 현재 비밀번호 + +
+ + +
+
+ +
+ )} + /> + + ( + + 새 비밀번호 + +
+ + +
+
+ +
+ )} + /> + + ( + + 비밀번호 확인 + +
+ + +
+
+ +
+ )} + /> + + + + + + + + 비밀번호 변경 확인 + + 비밀번호를 변경하시겠습니까? 변경 후에는 새 비밀번호로 로그인해야 합니다. + + + + 취소 + + 변경 + + + + + + +
);