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 = () => ( } /> } /> } /> + } /> } /> } /> } /> 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; + +const ProfileManagement = () => { + const navigate = useNavigate(); + + const defaultValues: Partial = { + name: '홍길동', + email: 'honggildong@example.com', + phone: '010-1234-5678', + }; + + const form = useForm({ + 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 ( +
+
+ {/* Header */} +
+
+ +

프로필 관리

+
+ + {/* User Profile Picture */} +
+
+ + + + + + + +
+
+
+ + {/* Profile Form */} +
+ + ( + + 이름 + + + + + + )} + /> + + ( + + 이메일 + + + + + + )} + /> + + ( + + 전화번호 + + + + + + )} + /> + +
+ +
+ + +
+
+ ); +}; + +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 ( -
+
@@ -34,6 +38,8 @@ const SettingsOption = ({ }; const Settings = () => { + const navigate = useNavigate(); + return (
@@ -60,6 +66,7 @@ const Settings = () => { icon={User} label="프로필 관리" description="개인정보 및 프로필 설정" + onClick={() => navigate('/profile-management')} />