Visual edit in Lovable

Edited UI in Lovable

src/components/transactions/TransactionsHeader.tsx

@@ -1,8 +1,6 @@
-
 import React from 'react';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
-
 interface TransactionsHeaderProps {
   selectedMonth: string;
   searchQuery: string;
@@ -13,7 +11,6 @@ interface TransactionsHeaderProps {
   totalExpenses: number;
   isDisabled: boolean;
 }
-
 const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
   selectedMonth,
   searchQuery,
@@ -24,35 +21,25 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
   totalExpenses,
   isDisabled
 }) => {
-  console.log('TransactionsHeader 렌더링:', { selectedMonth, totalExpenses });
+  console.log('TransactionsHeader 렌더링:', {
-  
+    selectedMonth,
+    totalExpenses
+  });
+
   // 예산 정보가 없는 경우 기본값 사용
   const targetAmount = budgetData?.monthly?.targetAmount || 0;
-  
+  return <header className="py-8">
-  return (
+      <h1 className="font-bold neuro-text mb-5 text-xl py-[10px]">지출 내역</h1>
-    <header className="py-8">
-      <h1 className="text-2xl font-bold neuro-text mb-5">지출 내역</h1>
       
       {/* Search */}
       <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
         <Search size={18} className="text-gray-500 mr-2" />
-        <input 
+        <input type="text" placeholder="지출 검색..." className="bg-transparent flex-1 outline-none text-sm" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} disabled={isDisabled} />
-          type="text" 
-          placeholder="지출 검색..." 
-          className="bg-transparent flex-1 outline-none text-sm"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          disabled={isDisabled}
-        />
       </div>
       
       {/* Month Selector */}
       <div className="flex items-center justify-between mb-5">
-        <button 
+        <button className="neuro-flat p-2 rounded-full" onClick={handlePrevMonth} disabled={isDisabled}>
-          className="neuro-flat p-2 rounded-full"
-          onClick={handlePrevMonth}
-          disabled={isDisabled}
-        >
           <ChevronLeft size={20} />
         </button>
         
@@ -61,11 +48,7 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
           <span className="font-medium text-lg">{selectedMonth}</span>
         </div>
         
-        <button 
+        <button className="neuro-flat p-2 rounded-full" onClick={handleNextMonth} disabled={isDisabled}>
-          className="neuro-flat p-2 rounded-full"
-          onClick={handleNextMonth}
-          disabled={isDisabled}
-        >
           <ChevronRight size={20} />
         </button>
       </div>
@@ -74,19 +57,17 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
       <div className="grid grid-cols-2 gap-4 mb-8">
         <div className="neuro-card">
           <p className="text-sm text-gray-500 mb-1">총 예산</p>
-          <p className="text-lg font-bold text-neuro-income">
+          <p className="font-bold text-neuro-income text-base">
             {formatCurrency(targetAmount)}
           </p>
         </div>
         <div className="neuro-card">
           <p className="text-sm text-gray-500 mb-1">총 지출</p>
-          <p className="text-lg font-bold text-neuro-income">
+          <p className="font-bold text-neuro-income text-base">
             {formatCurrency(totalExpenses)}
           </p>
         </div>
       </div>
-    </header>
+    </header>;
-  );
 };
-
+export default TransactionsHeader;
-export default TransactionsHeader;