diff --git a/src/components/TransactionEditDialog.tsx b/src/components/TransactionEditDialog.tsx index 3207abc..debc7f8 100644 --- a/src/components/TransactionEditDialog.tsx +++ b/src/components/TransactionEditDialog.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; -import { z } from 'zod'; import { Transaction } from '@/components/TransactionCard'; import { Dialog, @@ -13,24 +12,13 @@ import { DialogClose } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; -import { Input } from '@/components/ui/input'; -import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; -import { Coffee, Home, Car, Trash2 } from 'lucide-react'; +import { Form } from '@/components/ui/form'; import { toast } from '@/components/ui/use-toast'; -import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; - -// Form schema for validation -const formSchema = z.object({ - title: z.string().min(1, '제목을 입력해주세요'), - amount: z.string().min(1, '금액을 입력해주세요'), - category: z.enum(['식비', '생활비', '교통비']), -}); - -// Function to format number with commas -const formatWithCommas = (value: string) => { - const numericValue = value.replace(/[^0-9]/g, ''); - return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ','); -}; +import TransactionFormFields, { + transactionFormSchema, + formatWithCommas +} from './transaction/TransactionFormFields'; +import TransactionDeleteAlert from './transaction/TransactionDeleteAlert'; interface TransactionEditDialogProps { transaction: Transaction; @@ -47,8 +35,8 @@ const TransactionEditDialog: React.FC = ({ onSave, onDelete }) => { - const form = useForm>({ - resolver: zodResolver(formSchema), + const form = useForm({ + resolver: zodResolver(transactionFormSchema), defaultValues: { title: transaction.title, amount: formatWithCommas(transaction.amount.toString()), @@ -56,7 +44,7 @@ const TransactionEditDialog: React.FC = ({ }, }); - const handleSubmit = (values: z.infer) => { + const handleSubmit = (values: any) => { // Remove commas from amount string and convert to number const cleanAmount = values.amount.replace(/,/g, ''); @@ -81,18 +69,7 @@ const TransactionEditDialog: React.FC = ({ }); } }; - - const handleAmountChange = (e: React.ChangeEvent) => { - const formattedValue = formatWithCommas(e.target.value); - form.setValue('amount', formattedValue); - }; - - const categoryIcons: Record = { - 식비: , - 생활비: , - 교통비: , - }; - + return ( @@ -102,99 +79,10 @@ const TransactionEditDialog: React.FC = ({
- ( - - 제목 - - - - - - )} - /> - - ( - - 금액 - - - - - - )} - /> - - ( - - 카테고리 -
- {['식비', '생활비', '교통비'].map((category) => ( -
form.setValue('category', category as any)} - > -
- {categoryIcons[category]} -
- {category} -
- ))} -
- -
- )} - /> + - {onDelete && ( - - - - - - - 지출 삭제 - - 정말로 이 지출 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다. - - - - 취소 - - 삭제 - - - - - )} + {onDelete && }
diff --git a/src/components/transaction/TransactionDeleteAlert.tsx b/src/components/transaction/TransactionDeleteAlert.tsx new file mode 100644 index 0000000..dc7962c --- /dev/null +++ b/src/components/transaction/TransactionDeleteAlert.tsx @@ -0,0 +1,55 @@ + +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { Trash2 } from 'lucide-react'; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger +} from '@/components/ui/alert-dialog'; + +interface TransactionDeleteAlertProps { + onDelete: () => void; +} + +const TransactionDeleteAlert: React.FC = ({ onDelete }) => { + return ( + + + + + + + 지출 삭제 + + 정말로 이 지출 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다. + + + + 취소 + + 삭제 + + + + + ); +}; + +export default TransactionDeleteAlert; diff --git a/src/components/transaction/TransactionFormFields.tsx b/src/components/transaction/TransactionFormFields.tsx new file mode 100644 index 0000000..fe4e4d5 --- /dev/null +++ b/src/components/transaction/TransactionFormFields.tsx @@ -0,0 +1,106 @@ + +import React from 'react'; +import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { Coffee, Home, Car } from 'lucide-react'; +import { UseFormReturn } from 'react-hook-form'; +import { z } from 'zod'; + +// Form schema for validation +export const transactionFormSchema = z.object({ + title: z.string().min(1, '제목을 입력해주세요'), + amount: z.string().min(1, '금액을 입력해주세요'), + category: z.enum(['식비', '생활비', '교통비']), +}); + +export type TransactionFormValues = z.infer; + +// Function to format number with commas +export const formatWithCommas = (value: string) => { + const numericValue = value.replace(/[^0-9]/g, ''); + return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ','); +}; + +export const categoryIcons: Record = { + 식비: , + 생활비: , + 교통비: , +}; + +interface TransactionFormFieldsProps { + form: UseFormReturn; +} + +const TransactionFormFields: React.FC = ({ form }) => { + const handleAmountChange = (e: React.ChangeEvent) => { + const formattedValue = formatWithCommas(e.target.value); + form.setValue('amount', formattedValue); + }; + + return ( + <> + ( + + 제목 + + + + + + )} + /> + + ( + + 금액 + + + + + + )} + /> + + ( + + 카테고리 +
+ {['식비', '생활비', '교통비'].map((category) => ( +
form.setValue('category', category as any)} + > +
+ {categoryIcons[category]} +
+ {category} +
+ ))} +
+ +
+ )} + /> + + ); +}; + +export default TransactionFormFields;