Refactor TransactionEditDialog component

Refactor TransactionEditDialog.tsx into smaller, more manageable components for improved code organization and maintainability. No functional changes were made.
2025-03-15 10:25:48 +00:00
parent 477e1ccbc0
commit cb6c792d86
3 changed files with 173 additions and 124 deletions
--- a/src/components/transaction/TransactionFormFields.tsx
+++ 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<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, ',');
+};
+
+export const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
+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">
+              {['식비', '생활비', '교통비'].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;