119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Loader2 } from 'lucide-react';
|
|
import ExpenseCategorySelector from './ExpenseCategorySelector';
|
|
|
|
export interface ExpenseFormValues {
|
|
title: string;
|
|
amount: string;
|
|
category: string;
|
|
}
|
|
|
|
interface ExpenseFormProps {
|
|
onSubmit: (data: ExpenseFormValues) => void;
|
|
onCancel: () => void;
|
|
isSubmitting?: boolean;
|
|
}
|
|
|
|
const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitting = false }) => {
|
|
const form = useForm<ExpenseFormValues>({
|
|
defaultValues: {
|
|
title: '',
|
|
amount: '',
|
|
category: '식비',
|
|
}
|
|
});
|
|
|
|
// Format number with commas
|
|
const formatWithCommas = (value: string): string => {
|
|
// Remove commas first to avoid duplicates when typing
|
|
const numericValue = value.replace(/[^0-9]/g, '');
|
|
return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
};
|
|
|
|
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const formattedValue = formatWithCommas(e.target.value);
|
|
form.setValue('amount', formattedValue);
|
|
};
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>제목</FormLabel>
|
|
<Input
|
|
placeholder="지출 내역을 입력하세요"
|
|
{...field}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="amount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>금액</FormLabel>
|
|
<Input
|
|
placeholder="금액을 입력하세요"
|
|
value={field.value}
|
|
onChange={handleAmountChange}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="category"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>카테고리</FormLabel>
|
|
<ExpenseCategorySelector
|
|
value={field.value}
|
|
onValueChange={(value) => field.onChange(value)}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
disabled={isSubmitting}
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
className="bg-neuro-income text-white hover:bg-neuro-income/90"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
저장 중...
|
|
</>
|
|
) : '저장'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default ExpenseForm;
|