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('이번 달');
 
@@ -49,18 +48,18 @@ const Analytics = () => {
     budget: 2550000,
     expense: 1740000
   }];
-  
+
   // Updated variable names to match new terminology
   const totalBudget = 2550000;
   const totalExpense = 1740000;
   const savings = totalBudget - totalExpense;
   const savingsPercentage = Math.round(savings / totalBudget * 100);
-  
+
   // Custom formatter for Y-axis that removes currency symbol and uses K format
   const formatYAxisTick = (value: number) => {
     return `${Math.round(value / 1000)}K`;
   };
-  
+
   // Custom formatter for tooltip that keeps the original formatting with currency symbol
   const formatTooltip = (value: number | string) => {
     if (typeof value === 'number') {
@@ -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 
+              <BarChart data={monthlyData} margin={{
-                data={monthlyData} 
+              top: 20,
-                margin={{
+              right: 10,
-                  top: 20,
+              left: -10,
-                  right: 10,
+              bottom: 5
-                  left: -10,
+            }} style={{
-                  bottom: 5
+              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;
-export default Analytics;