From bbd5203b23958870f974c9c7c59253fc475a6760 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 03:06:23 +0000
Subject: [PATCH] Create profile management page

This commit creates a profile management page within the settings section.
---
 src/App.tsx                     |   2 +
 src/pages/ProfileManagement.tsx | 142 ++++++++++++++++++++++++++++++++
 src/pages/Settings.tsx          |   9 +-
 3 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ProfileManagement.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1076141..545d7e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import Index from "./pages/Index";
 import Transactions from "./pages/Transactions";
 import Analytics from "./pages/Analytics";
 import Settings from "./pages/Settings";
+import ProfileManagement from "./pages/ProfileManagement";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -26,6 +27,7 @@ const App = () => (
           <Route path="/transactions" element={<Transactions />} />
           <Route path="/analytics" element={<Analytics />} />
           <Route path="/settings" element={<Settings />} />
+          <Route path="/profile-management" element={<ProfileManagement />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />
diff --git a/src/pages/ProfileManagement.tsx b/src/pages/ProfileManagement.tsx
new file mode 100644
index 0000000..77a0575
--- /dev/null
+++ b/src/pages/ProfileManagement.tsx
@@ -0,0 +1,142 @@
+
+import React from 'react';
+import { ArrowLeft, User, Camera, Mail, Phone } 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';
+
+const profileFormSchema = z.object({
+  name: z.string().min(2, {
+    message: '이름은 2글자 이상이어야 합니다.',
+  }),
+  email: z.string().email({
+    message: '유효한 이메일 주소를 입력해주세요.',
+  }),
+  phone: z.string().optional(),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+const ProfileManagement = () => {
+  const navigate = useNavigate();
+  
+  const defaultValues: Partial<ProfileFormValues> = {
+    name: '홍길동',
+    email: 'honggildong@example.com',
+    phone: '010-1234-5678',
+  };
+
+  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
+    navigate('/settings');
+  };
+
+  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">
+            <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>
+              )}
+            />
+            
+            <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" 
+                className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+              >
+                저장하기
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileManagement;
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index f925bb7..6b840c4 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
 import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -18,7 +19,10 @@ const SettingsOption = ({
   color?: string;
 }) => {
   return (
-    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex" onClick={onClick}>
+    <div 
+      className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex cursor-pointer" 
+      onClick={onClick}
+    >
       <div className="flex items-center">
         <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
           <Icon size={20} />
@@ -34,6 +38,8 @@ const SettingsOption = ({
 };
 
 const Settings = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -60,6 +66,7 @@ const Settings = () => {
             icon={User} 
             label="프로필 관리" 
             description="개인정보 및 프로필 설정"
+            onClick={() => navigate('/profile-management')}
           />
           <SettingsOption 
             icon={CreditCard}