Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetTabContent.tsx

@@ -93,23 +93,17 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
 
   // 예산 여부에 따른 텍스트 결정
   const budgetButtonText = targetAmount > 0 ? "예산 수정하기" : "예산 입력하기";
-
+  return <div>
-  return (
+      {targetAmount > 0 ? <>
-    <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>
           
           <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
-            <div
+            <div className={`h-full ${progressBarColor} transition-all duration-700 ease-out`} style={{
-              className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
+          width: `${Math.min(percentage, 100)}%`
-              style={{
+        }} />
-                width: `${Math.min(percentage, 100)}%`,
-              }}
-            />
           </div>
           
           <div className="flex justify-between items-center">
@@ -122,30 +116,23 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </div>
           
           <div className="mt-6">
-            <button 
+            <button onClick={toggleBudgetInput} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
-              onClick={toggleBudgetInput} 
-              className="text-neuro-income hover:underline flex items-center text-lg font-bold group"
-            >
               <CirclePlus size={26} className="mr-2 text-neuro-income transition-transform group-hover:scale-110" />
               <span className="text-base font-semibold">{budgetButtonText}</span>
             </button>
           </div>
-        </>
+        </> : <div className="py-4 text-center">
-      ) : (
-        <div className="py-4 text-center">
           <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
           <Button onClick={toggleBudgetInput} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
             <CirclePlus className="mr-2" size={24} />
             <span className="animate-pulse">{budgetButtonText}</span>
           </Button>
-        </div>
+        </div>}
-      )}
       
-      {showBudgetInput && (
+      {showBudgetInput && <div className="mt-4">
-        <div className="mt-4">
           <div className="neuro-card p-4">
             <div>
-              <h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
+              <h3 className="text-base font-medium mb-3">카테고리별 월간 예산 설정</h3>
               <p className="text-sm text-gray-500 mb-4">카테고리 예산을 설정하면 일일, 주간, 월간 예산이 자동으로 합산됩니다.</p>
               <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
               
@@ -164,9 +151,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
               </div>
             </div>
           </div>
-        </div>
+        </div>}
-      )}
+    </div>;
-    </div>
-  );
 };
-export default BudgetTabContent;
+export default BudgetTabContent;