zellyy-finance/src/components/AddTransactionButton.tsx

import React, { useState } from 'react';
import { PlusIcon, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useNavigate } from 'react-router-dom';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
import { Form, FormField, FormItem, FormLabel, FormControl } from './ui/form';
import { Input } from './ui/input';
import { Button } from './ui/button';
import { useForm } from 'react-hook-form';
import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';

interface ExpenseFormValues {
  title: string;
  amount: string;
  category: string;
}

const EXPENSE_CATEGORIES = ['식비', '생활비', '교통비'];

const AddTransactionButton = () => {
  const [showExpenseDialog, setShowExpenseDialog] = useState(false);
  const navigate = useNavigate();
  
  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);
  };
  
  const onSubmit = (data: ExpenseFormValues) => {
    // Remove commas before processing the amount
    const numericAmount = data.amount.replace(/,/g, '');
    const processedData = {
      ...data,
      amount: numericAmount
    };
    
    console.log('Expense data:', processedData);
    setShowExpenseDialog(false);
    // 여기에서 실제 데이터 처리 로직을 구현할 수 있습니다
  };
  
  return (
    <>
      <div className="fixed bottom-24 right-6 z-20">
        <button 
          className="p-4 rounded-full transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle"
          onClick={() => setShowExpenseDialog(true)}
          aria-label="지출 추가"
        >
          <PlusIcon size={24} />
        </button>
      </div>
      
      <Dialog open={showExpenseDialog} onOpenChange={setShowExpenseDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>지출 추가</DialogTitle>
          </DialogHeader>
          
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>제목</FormLabel>
                    <FormControl>
                      <Input placeholder="지출 내역을 입력하세요" {...field} />
                    </FormControl>
                  </FormItem>
                )}
              />
              
              <FormField
                control={form.control}
                name="amount"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>금액</FormLabel>
                    <FormControl>
                      <Input 
                        placeholder="0" 
                        value={field.value}
                        onChange={handleAmountChange}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
              
              <FormField
                control={form.control}
                name="category"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>카테고리</FormLabel>
                    <FormControl>
                      <ToggleGroup 
                        type="single" 
                        className="justify-start flex-wrap gap-2"
                        value={field.value}
                        onValueChange={(value) => {
                          if (value) field.onChange(value);
                        }}
                      >
                        {EXPENSE_CATEGORIES.map((category) => (
                          <ToggleGroupItem 
                            key={category} 
                            value={category}
                            className="px-4 py-2 rounded-md border"
                          >
                            {category}
                          </ToggleGroupItem>
                        ))}
                      </ToggleGroup>
                    </FormControl>
                  </FormItem>
                )}
              />
              
              <div className="flex justify-end gap-2 pt-2">
                <Button 
                  type="button" 
                  variant="outline" 
                  onClick={() => setShowExpenseDialog(false)}
                >
                  취소
                </Button>
                <Button 
                  type="submit"
                  className="bg-neuro-income text-white hover:bg-neuro-income/90"
                >
                  저장
                </Button>
              </div>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default AddTransactionButton;