Visual edit in Lovable

Edited UI in Lovable

src/pages/Analytics.tsx

@@ -4,7 +4,6 @@ import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChevronLeft, ChevronRight, Wallet, CreditCard, PiggyBank } from 'lucide-react';
-
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
 
@@ -72,7 +71,6 @@ const Analytics = () => {
     }
     return value;
   };
-  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -97,9 +95,9 @@ const Analytics = () => {
           {/* Summary Cards */}
           <div className="grid grid-cols-3 gap-3 mb-8">
             <div className="neuro-card">
-              <div className="flex items-center gap-2 mb-1">
+              <div className="flex items-center gap-2 mb-1 py-[5px]">
                 <Wallet size={24} className="text-gray-500" />
-                <p className="text-xs text-gray-500">예산</p>
+                <p className="text-gray-500 text-base">예산</p>
               </div>
               <p className="text-sm font-bold text-neuro-income">
                 {new Intl.NumberFormat('ko-KR', {
@@ -110,9 +108,9 @@ const Analytics = () => {
               </p>
             </div>
             <div className="neuro-card">
-              <div className="flex items-center gap-2 mb-1">
+              <div className="flex items-center gap-2 mb-1 py-[5px]">
                 <CreditCard size={24} className="text-gray-500" />
-                <p className="text-xs text-gray-500">지출</p>
+                <p className="text-gray-500 font-medium text-base">지출</p>
               </div>
               <p className="text-sm font-bold text-neuro-income">
                 {new Intl.NumberFormat('ko-KR', {
@@ -123,9 +121,9 @@ const Analytics = () => {
               </p>
             </div>
             <div className="neuro-card">
-              <div className="flex items-center gap-2 mb-1">
+              <div className="flex items-center gap-2 mb-1 py-[5px]">
                 <PiggyBank size={24} className="text-gray-500" />
-                <p className="text-xs text-gray-500">저축</p>
+                <p className="text-gray-500 text-base">저축</p>
               </div>
               <p className="text-sm font-bold text-neuro-income">
                 {savingsPercentage}%
@@ -139,16 +137,14 @@ const Analytics = () => {
           <h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
           <div className="neuro-card h-72">
             <ResponsiveContainer width="100%" height="100%">
-              <BarChart 
-                data={monthlyData} 
-                margin={{
+              <BarChart data={monthlyData} margin={{
               top: 20,
               right: 10,
               left: -10,
               bottom: 5
-                }}
-                style={{ fontSize: '11px' }}
-              >
+            }} style={{
+              fontSize: '11px'
+            }}>
                 <XAxis dataKey="name" />
                 <YAxis tickFormatter={formatYAxisTick} />
                 <Tooltip formatter={formatTooltip} />
@@ -196,5 +192,4 @@ const Analytics = () => {
       <NavBar />
     </div>;
 };
-
 export default Analytics;