c473abda72
The TransactionEditDialog component was refactored into smaller, more manageable components to improve code organization and maintainability. The functionality remains the same.
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Form } from '@/components/ui/form';
|
|
import { Button } from '@/components/ui/button';
|
|
import { DialogClose, DialogFooter } from '@/components/ui/dialog';
|
|
import TransactionFormFields, { TransactionFormValues } from './TransactionFormFields';
|
|
import TransactionDeleteAlert from './TransactionDeleteAlert';
|
|
import { UseFormReturn } from 'react-hook-form';
|
|
|
|
interface TransactionEditFormProps {
|
|
form: UseFormReturn<TransactionFormValues>;
|
|
onSubmit: (values: TransactionFormValues) => void;
|
|
onDelete: () => Promise<boolean>;
|
|
isSubmitting: boolean;
|
|
}
|
|
|
|
/**
|
|
* 트랜잭션 편집 폼 컴포넌트 - UI 부분만 분리
|
|
*/
|
|
const TransactionEditForm: React.FC<TransactionEditFormProps> = ({
|
|
form,
|
|
onSubmit,
|
|
onDelete,
|
|
isSubmitting
|
|
}) => {
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<TransactionFormFields form={form} />
|
|
|
|
<DialogFooter className="flex justify-between gap-2 mt-6">
|
|
<TransactionDeleteAlert onDelete={onDelete} />
|
|
<div className="flex gap-2">
|
|
<DialogClose asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={isSubmitting}
|
|
>
|
|
취소
|
|
</Button>
|
|
</DialogClose>
|
|
<Button
|
|
type="submit"
|
|
className="bg-neuro-income text-white hover:bg-neuro-income/90"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? '저장 중...' : '저장'}
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default TransactionEditForm;
|