ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Emphasize initial budget setting

Browse Source 
Add visual emphasis to the budget setting prompt on the home screen to guide new users.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 11:58:52 +00:00
parent 0fe4825741
commit ccc1d913be
2 changed files with 79 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/BudgetInputCard.tsx
View File

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { Check, ChevronDown, ChevronUp, Wallet } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
interface BudgetGoalProps {
@@ -13,11 +13,13 @@ interface BudgetGoalProps {
monthly: number;
};
onSave: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
highlight?: boolean;
}
const BudgetInputCard: React.FC<BudgetGoalProps> = ({
initialBudgets,
onSave
onSave,
highlight = false
}) => {
const [selectedTab, setSelectedTab] = useState<'daily' | 'weekly' | 'monthly'>('daily');
const [budgetInputs, setBudgetInputs] = useState({
@@ -25,7 +27,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
weekly: initialBudgets.weekly > 0 ? initialBudgets.weekly.toString() : '',
monthly: initialBudgets.monthly > 0 ? initialBudgets.monthly.toString() : ''
});
const [isOpen, setIsOpen] = useState(false);
const [isOpen, setIsOpen] = useState(highlight);
// Format with commas for display
const formatWithCommas = (amount: string) => {
@@ -87,10 +89,13 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="neuro-card"
className={`neuro-card ${highlight ? 'border-2 border-neuro-income shadow-lg' : ''}`}
>
<CollapsibleTrigger className="flex items-center justify-between w-full p-4">
<span className="text-sm font-medium">예산 목표 설정하기</span>
<span className={`text-sm font-medium flex items-center ${highlight ? 'text-neuro-income' : ''}`}>
{highlight && <Wallet size={18} className="mr-2 animate-pulse" />}
예산 목표 설정하기
</span>
{isOpen ? (
<ChevronUp size={18} className="text-gray-500" />
) : (
@@ -114,7 +119,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-400 hover:bg-slate-300">
<Button onClick={handleSave} size="icon" className={`neuro-flat ${highlight ? 'bg-neuro-income hover:bg-neuro-income/90' : 'bg-slate-400 hover:bg-slate-300'} text-white`}>
<Check size={18} />
</Button>
</div>
@@ -131,7 +136,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
<Button onClick={handleSave} size="icon" className={`neuro-flat ${highlight ? 'bg-neuro-income hover:bg-neuro-income/90' : 'bg-slate-400 hover:bg-slate-300'} text-white`}>
<Check size={18} />
</Button>
</div>
@@ -148,7 +153,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
<Button onClick={handleSave} size="icon" className={`neuro-flat ${highlight ? 'bg-neuro-income hover:bg-neuro-income/90' : 'bg-slate-400 hover:bg-slate-300'} text-white`}>
<Check size={18} />
</Button>
</div>