Refactor ProfileManagement page

Splits the ProfileManagement page into smaller components for better organization and maintainability. No functionality was changed.

src/components/profile/PasswordChangeForm.tsx

@@ -0,0 +1,181 @@
+
+import React, { useState } from 'react';
+import { Key, Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+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 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 PasswordFormValues = z.infer<typeof passwordFormSchema>;
+
+const PasswordChangeForm = () => {
+  const { toast } = useToast();
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const passwordForm = useForm<PasswordFormValues>({
+    resolver: zodResolver(passwordFormSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  });
+
+  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="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>
+  );
+};
+
+export default PasswordChangeForm;

src/components/profile/ProfileForm.tsx

@@ -0,0 +1,92 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@/hooks/use-toast';
+import { useNavigate } from 'react-router-dom';
+
+const profileFormSchema = z.object({
+  name: z.string().min(2, {
+    message: '이름은 2글자 이상이어야 합니다.',
+  }),
+  email: z.string().email({
+    message: '유효한 이메일 주소를 입력해주세요.',
+  }),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+const ProfileForm = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  
+  const defaultValues: Partial<ProfileFormValues> = {
+    name: '홍길동',
+    email: 'honggildong@example.com',
+  };
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues,
+  });
+
+  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');
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>이름</FormLabel>
+              <FormControl>
+                <Input placeholder="이름을 입력하세요" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>이메일</FormLabel>
+              <FormControl>
+                <Input placeholder="이메일을 입력하세요" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
+        <div className="pt-4">
+          <Button 
+            type="submit" 
+            className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            저장하기
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default ProfileForm;

src/components/profile/ProfileHeader.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { ArrowLeft, User, Camera } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+const ProfileHeader = () => {
+  const navigate = useNavigate();
+
+  return (
+    <header className="py-8">
+      <div className="flex items-center mb-6">
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={() => navigate('/settings')}
+          className="mr-2"
+        >
+          <ArrowLeft size={20} />
+        </Button>
+        <h1 className="text-2xl font-bold neuro-text">프로필 관리</h1>
+      </div>
+      
+      {/* User Profile Picture */}
+      <div className="flex flex-col items-center mb-8">
+        <div className="relative mb-4">
+          <Avatar className="h-24 w-24 neuro-flat">
+            <AvatarImage src="" alt="Profile" />
+            <AvatarFallback className="text-2xl bg-neuro-income text-white">
+              <User size={40} />
+            </AvatarFallback>
+          </Avatar>
+          <Button 
+            size="sm" 
+            className="absolute bottom-0 right-0 rounded-full bg-neuro-income"
+          >
+            <Camera size={14} />
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default ProfileHeader;

src/pages/ProfileManagement.tsx

@@ -1,292 +1,16 @@
 
-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';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-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, {
-    message: '이름은 2글자 이상이어야 합니다.',
-  }),
-  email: z.string().email({
-    message: '유효한 이메일 주소를 입력해주세요.',
-  }),
-});
-
-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>;
+import React from 'react';
+import ProfileHeader from '@/components/profile/ProfileHeader';
+import ProfileForm from '@/components/profile/ProfileForm';
+import PasswordChangeForm from '@/components/profile/PasswordChangeForm';
 
 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',
-  };
-
-  const form = useForm<ProfileFormValues>({
-    resolver: zodResolver(profileFormSchema),
-    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">
-        {/* Header */}
-        <header className="py-8">
-          <div className="flex items-center mb-6">
-            <Button 
-              variant="ghost" 
-              size="icon" 
-              onClick={() => navigate('/settings')}
-              className="mr-2"
-            >
-              <ArrowLeft size={20} />
-            </Button>
-            <h1 className="text-2xl font-bold neuro-text">프로필 관리</h1>
-          </div>
-          
-          {/* User Profile Picture */}
-          <div className="flex flex-col items-center mb-8">
-            <div className="relative mb-4">
-              <Avatar className="h-24 w-24 neuro-flat">
-                <AvatarImage src="" alt="Profile" />
-                <AvatarFallback className="text-2xl bg-neuro-income text-white">
-                  <User size={40} />
-                </AvatarFallback>
-              </Avatar>
-              <Button 
-                size="sm" 
-                className="absolute bottom-0 right-0 rounded-full bg-neuro-income"
-              >
-                <Camera size={14} />
-              </Button>
-            </div>
-          </div>
-        </header>
-        
-        {/* Profile Form */}
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 neuro-flat p-6 mb-6">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>이름</FormLabel>
-                  <FormControl>
-                    <Input placeholder="이름을 입력하세요" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>이메일</FormLabel>
-                  <FormControl>
-                    <Input placeholder="이메일을 입력하세요" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            
-            <div className="pt-4">
-              <Button 
-                type="submit" 
-                className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
-              >
-                저장하기
-              </Button>
-            </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>
+        <ProfileHeader />
+        <ProfileForm />
+        <PasswordChangeForm />
       </div>
     </div>
   );