79d38f1fc1
- Fix budget amount not displaying outside the homepage. - Remove unexpected categories and revert to the original 3 categories.
101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
|
|
import { Input } from '@/components/ui/input';
|
|
import { UseFormReturn } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
|
|
|
// Form schema for validation - 카테고리를 3개로 제한
|
|
export const transactionFormSchema = z.object({
|
|
title: z.string().min(1, '제목을 입력해주세요'),
|
|
amount: z.string().min(1, '금액을 입력해주세요'),
|
|
category: z.enum(['식비', '생활비', '교통비']),
|
|
});
|
|
|
|
export type TransactionFormValues = z.infer<typeof transactionFormSchema>;
|
|
|
|
// 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, ',');
|
|
};
|
|
|
|
interface TransactionFormFieldsProps {
|
|
form: UseFormReturn<TransactionFormValues>;
|
|
}
|
|
|
|
const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
|
|
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const formattedValue = formatWithCommas(e.target.value);
|
|
form.setValue('amount', formattedValue);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<FormField
|
|
control={form.control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>제목</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="제목을 입력하세요" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="amount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>금액</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="금액을 입력하세요"
|
|
{...field}
|
|
onChange={handleAmountChange}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="category"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>카테고리</FormLabel>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{EXPENSE_CATEGORIES.map((category) => (
|
|
<div
|
|
key={category}
|
|
className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
|
|
field.value === category
|
|
? 'border-neuro-income bg-neuro-income/10'
|
|
: 'border-gray-200'
|
|
}`}
|
|
onClick={() => form.setValue('category', category as any)}
|
|
>
|
|
<div className="p-1 rounded-full">
|
|
{categoryIcons[category]}
|
|
</div>
|
|
<span>{category}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionFormFields;
|