8783a607fa
Refactor the AddTransactionButton component into smaller, more manageable components to improve code readability and maintainability.
114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { PlusIcon } from 'lucide-react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
|
|
import { toast } from '@/components/ui/use-toast';
|
|
import { supabase } from '@/lib/supabase';
|
|
import { isSyncEnabled } from '@/utils/syncUtils';
|
|
import ExpenseForm, { ExpenseFormValues } from './expenses/ExpenseForm';
|
|
|
|
const AddTransactionButton = () => {
|
|
const [showExpenseDialog, setShowExpenseDialog] = useState(false);
|
|
const [userId, setUserId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
// 현재 로그인한 사용자 가져오기
|
|
const getUser = async () => {
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
setUserId(user?.id || null);
|
|
};
|
|
|
|
getUser();
|
|
}, []);
|
|
|
|
// 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 onSubmit = async (data: ExpenseFormValues) => {
|
|
// Remove commas before processing the amount
|
|
const numericAmount = data.amount.replace(/,/g, '');
|
|
|
|
// 현재 날짜와 시간을 가져옵니다
|
|
const now = new Date();
|
|
const formattedDate = `오늘, ${now.getHours()}:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
|
|
|
|
const newExpense = {
|
|
id: Date.now().toString(),
|
|
title: data.title,
|
|
amount: parseInt(numericAmount),
|
|
date: formattedDate,
|
|
category: data.category,
|
|
type: 'expense'
|
|
};
|
|
|
|
// 로컬 스토리지에서 기존 지출 내역을 가져옵니다
|
|
const existingTransactionsJSON = localStorage.getItem('transactions');
|
|
let existingTransactions = existingTransactionsJSON ? JSON.parse(existingTransactionsJSON) : [];
|
|
|
|
// 새 지출을 추가하고 다시 저장합니다
|
|
existingTransactions = [newExpense, ...existingTransactions];
|
|
localStorage.setItem('transactions', JSON.stringify(existingTransactions));
|
|
|
|
// 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
|
|
if (isSyncEnabled() && userId) {
|
|
try {
|
|
const { error } = await supabase.from('transactions').insert({
|
|
user_id: userId,
|
|
title: data.title,
|
|
amount: parseInt(numericAmount),
|
|
date: formattedDate,
|
|
category: data.category,
|
|
type: 'expense',
|
|
transaction_id: newExpense.id
|
|
});
|
|
|
|
if (error) throw error;
|
|
} catch (error) {
|
|
console.error('Supabase에 지출 추가 실패:', error);
|
|
// 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
|
|
}
|
|
}
|
|
|
|
// 다이얼로그를 닫습니다
|
|
setShowExpenseDialog(false);
|
|
|
|
// 사용자에게 알림을 표시합니다
|
|
toast({
|
|
title: "지출이 추가되었습니다",
|
|
description: `${data.title} 항목이 ${formatWithCommas(numericAmount)}원으로 등록되었습니다.`,
|
|
});
|
|
};
|
|
|
|
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>
|
|
<ExpenseForm
|
|
onSubmit={onSubmit}
|
|
onCancel={() => setShowExpenseDialog(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddTransactionButton;
|