Emphasize initial budget setting

Add visual emphasis to the budget setting prompt on the home screen to guide new users.

src/components/BudgetInputCard.tsx

@@ -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>

src/components/BudgetTabContent.tsx

@@ -1,12 +1,8 @@
 
 import React, { useState } from 'react';
+import { Plus, Wallet } from 'lucide-react';
+import BudgetInputCard from './BudgetInputCard';
 import { Button } from '@/components/ui/button';
-import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import BudgetProgress from './BudgetProgress';
-import CategoryBudgetInputs from './CategoryBudgetInputs';
-import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 함수 사용
-import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 
 interface BudgetData {
   targetAmount: number;
@@ -27,109 +23,77 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   calculatePercentage,
   onSaveBudget
 }) => {
-  const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
-  const [isOpen, setIsOpen] = useState(false);
-  const [budgetInput, setBudgetInput] = useState(data.targetAmount > 0 ? data.targetAmount.toString() : '');
-
-  // 저장된 카테고리 예산을 불러옵니다
-  const savedCategoryBudgets = localStorage.getItem('categoryBudgets');
-  const defaultCategoryAmount = data.targetAmount > 0 ? Math.round(data.targetAmount / EXPENSE_CATEGORIES.length) : 0;
-  const initialCategoryBudgets = savedCategoryBudgets ? JSON.parse(savedCategoryBudgets) : EXPENSE_CATEGORIES.reduce((acc, category) => {
-    acc[category] = defaultCategoryAmount;
-    return acc;
-  }, {} as Record<string, number>);
+  const [showBudgetInput, setShowBudgetInput] = useState(false);
   
-  const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>(initialCategoryBudgets);
-  
-  const handleInputChange = (value: string) => {
-    // Remove all non-numeric characters
-    const numericValue = value.replace(/[^0-9]/g, '');
-    setBudgetInput(numericValue);
-  };
-  
-  const handleCategoryInputChange = (value: string, category: string) => {
-    // Remove all non-numeric characters
-    const numericValue = value.replace(/[^0-9]/g, '');
-    setCategoryBudgets(prev => ({
-      ...prev,
-      [category]: parseInt(numericValue) || 0
-    }));
-  };
-  
-  const handleSave = () => {
-    // Calculate total from all categories
-    const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
-
-    // 버튼 중복 클릭 방지를 위해 비활성화 처리 (setTimeout 사용)
-    const button = document.querySelector('button[type="button"]') as HTMLButtonElement;
-    if (button) {
-      button.disabled = true;
-      setTimeout(() => {
-        button.disabled = false;
-      }, 1000);
-    }
-
-    // 카테고리 예산도 함께 전달합니다
-    onSaveBudget(totalAmount, categoryBudgets);
-    
-    // 단일 토스트만 표시하고 즉시 패널 닫음
-    setIsOpen(false);
-    
-    // 토스트는 이벤트 발생 후 처리되므로 여기서는 호출하지 않음
-    // 이 함수에서 직접 toast 호출하지 않고 budgetStorage에서 처리되도록 함
-  };
-
-  // Format with commas for display
-  const formatWithCommas = (amount: string) => {
-    return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  };
+  const spentAmount = data.spentAmount;
+  const targetAmount = data.targetAmount;
+  const percentage = calculatePercentage(spentAmount, targetAmount);
+  const isFirstBudget = targetAmount === 0;
   
   return (
-    <div className="space-y-4">
-      <BudgetProgress 
-        spentAmount={data.spentAmount} 
-        targetAmount={data.targetAmount} 
-        percentage={percentage} 
-        formatCurrency={formatCurrency} 
-      />
-      
-      <div className="flex justify-between items-center pt-2 border-t border-gray-100">
-        <span className="text-gray-500 text-sm">남은 예산</span>
-        <span className="font-semibold text-neuro-income">{formatCurrency(data.remainingAmount)}</span>
-      </div>
-
-      <div className="pt-2 border-t border-gray-100">
-        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-          <CollapsibleTrigger className="flex items-center justify-between w-full px-1 text-left py-[10px]">
-            <span className="text-sm text-gray-600 font-bold">예산 설정하기</span>
-            {isOpen ? <ChevronUp size={16} className="text-gray-500" /> : <ChevronDown size={16} className="text-gray-500" />}
-          </CollapsibleTrigger>
+    <div>
+      {targetAmount > 0 ? (
+        <>
+          <div className="flex justify-between items-center mb-3">
+            <div className="text-2xl font-bold">{formatCurrency(spentAmount)}</div>
+            <div className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</div>
+          </div>
           
-          <CollapsibleContent className="pt-2 space-y-3">
-            <CategoryBudgetInputs 
-              categoryBudgets={categoryBudgets} 
-              handleCategoryInputChange={handleCategoryInputChange} 
+          <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
+            <div 
+              className="h-full bg-neuro-income transition-all duration-700 ease-out"
+              style={{ width: `${percentage}%` }}
             />
-            
-            <div className="flex items-center justify-between pt-2 border-t border-gray-100">
-              <div className="flex items-center gap-1">
-                <Calculator size={16} className="text-gray-500" />
-                <span className="text-sm font-medium">총 예산:</span>
-              </div>
-              <span className="font-semibold">{formatCurrency(Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0))}</span>
+          </div>
+          
+          <div className="flex justify-between items-center">
+            <div className="text-sm font-medium text-gray-500">
+              남은 예산: {formatCurrency(Math.max(0, targetAmount - spentAmount))}
             </div>
-            
-            <div className="flex justify-end">
-              <Button onClick={handleSave} size="sm" className="neuro-flat text-slate-50 bg-neuro-income hover:bg-neuro-income/90">
-                <Check size={16} className="mr-1" />
-                저장하기
-              </Button>
+            <div className="text-sm font-medium text-gray-500">
+              {percentage}%
             </div>
-            
-            <p className="text-xs text-gray-500 text-center py-[6px]">카테고리 예산을 설정하면 일일, 주간, 월간 예산이 자동으로 합산됩니다.</p>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
+          </div>
+          
+          <div className="mt-6">
+            <button 
+              onClick={() => setShowBudgetInput(!showBudgetInput)}
+              className="text-neuro-income text-sm font-medium hover:underline flex items-center"
+            >
+              <Plus size={16} className="mr-1" /> 예산 수정하기
+            </button>
+          </div>
+        </>
+      ) : (
+        <div className="py-4 text-center">
+          <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
+          <Button 
+            onClick={() => setShowBudgetInput(true)}
+            variant="default"
+            className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg"
+          >
+            <Wallet className="mr-2" size={18} />
+            지금 예산 설정하기
+          </Button>
+        </div>
+      )}
+      
+      {showBudgetInput && (
+        <div className="mt-4">
+          <BudgetInputCard 
+            initialBudgets={{
+              daily: isFirstBudget ? 0 : data.targetAmount,
+              weekly: isFirstBudget ? 0 : data.targetAmount,
+              monthly: isFirstBudget ? 0 : data.targetAmount
+            }}
+            onSave={(type, amount) => {
+              onSaveBudget(amount);
+              setShowBudgetInput(false);
+            }}
+            highlight={isFirstBudget}
+          />
+        </div>
+      )}
     </div>
   );
 };