Visual edit in Lovable

Edited UI in Lovable

src/pages/Analytics.tsx

@@ -1,40 +1,66 @@
-
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
-  
+
   // Sample data for the expense categories
-  const expenseData = [
+  const expenseData = [{
-    { name: '식비', value: 350000, color: '#9b87f5' },
+    name: '식비',
-    { name: '주거', value: 650000, color: '#6e59a5' },
+    value: 350000,
-    { name: '교통', value: 125000, color: '#81c784' },
+    color: '#9b87f5'
-    { name: '취미', value: 200000, color: '#64b5f6' },
+  }, {
-    { name: '기타', value: 175000, color: '#e57373' },
+    name: '주거',
-  ];
+    value: 650000,
-  
+    color: '#6e59a5'
+  }, {
+    name: '교통',
+    value: 125000,
+    color: '#81c784'
+  }, {
+    name: '취미',
+    value: 200000,
+    color: '#64b5f6'
+  }, {
+    name: '기타',
+    value: 175000,
+    color: '#e57373'
+  }];
+
   // Sample data for the monthly comparison
-  const monthlyData = [
+  const monthlyData = [{
-    { name: '3월', income: 2400000, expense: 1800000 },
+    name: '3월',
-    { name: '4월', income: 2300000, expense: 1700000 },
+    income: 2400000,
-    { name: '5월', income: 2700000, expense: 1900000 },
+    expense: 1800000
-    { name: '6월', income: 2200000, expense: 1500000 },
+  }, {
-    { name: '7월', income: 2500000, expense: 1650000 },
+    name: '4월',
-    { name: '8월', income: 2550000, expense: 1740000 },
+    income: 2300000,
-  ];
+    expense: 1700000
-  
+  }, {
+    name: '5월',
+    income: 2700000,
+    expense: 1900000
+  }, {
+    name: '6월',
+    income: 2200000,
+    expense: 1500000
+  }, {
+    name: '7월',
+    income: 2500000,
+    expense: 1650000
+  }, {
+    name: '8월',
+    income: 2550000,
+    expense: 1740000
+  }];
   const totalIncome = 2550000;
   const totalExpense = 1740000;
   const savings = totalIncome - totalExpense;
-  const savingsPercentage = Math.round((savings / totalIncome) * 100);
+  const savingsPercentage = Math.round(savings / totalIncome * 100);
-  
+  return <div className="min-h-screen bg-neuro-background pb-24">
-  return (
-    <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
         <header className="py-8">
@@ -58,25 +84,25 @@ const Analytics = () => {
           {/* Summary Cards */}
           <div className="grid grid-cols-3 gap-3 mb-8">
             <div className="neuro-card">
-              <p className="text-xs text-gray-500 mb-1">수입</p>
+              <p className="text-xs text-gray-500 mb-1">예산</p>
               <p className="text-sm font-bold text-neuro-income">
                 {new Intl.NumberFormat('ko-KR', {
-                  style: 'currency',
+                style: 'currency',
-                  currency: 'KRW',
+                currency: 'KRW',
-                  notation: 'compact',
+                notation: 'compact',
-                  maximumFractionDigits: 1
+                maximumFractionDigits: 1
-                }).format(totalIncome)}
+              }).format(totalIncome)}
               </p>
             </div>
             <div className="neuro-card">
               <p className="text-xs text-gray-500 mb-1">지출</p>
               <p className="text-sm font-bold text-neuro-expense">
                 {new Intl.NumberFormat('ko-KR', {
-                  style: 'currency',
+                style: 'currency',
-                  currency: 'KRW',
+                currency: 'KRW',
-                  notation: 'compact',
+                notation: 'compact',
-                  maximumFractionDigits: 1
+                maximumFractionDigits: 1
-                }).format(totalExpense)}
+              }).format(totalExpense)}
               </p>
             </div>
             <div className="neuro-card">
@@ -96,51 +122,32 @@ 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,
+            }}>
-                  bottom: 5,
-                }}
-              >
                 <XAxis dataKey="name" />
-                <YAxis 
+                <YAxis tickFormatter={value => new Intl.NumberFormat('ko-KR', {
-                  tickFormatter={(value) => 
+                style: 'currency',
-                    new Intl.NumberFormat('ko-KR', {
+                currency: 'KRW',
-                      style: 'currency',
+                notation: 'compact',
-                      currency: 'KRW',
+                maximumFractionDigits: 1
-                      notation: 'compact',
+              }).format(Number(value))} />
-                      maximumFractionDigits: 1
+                <Tooltip formatter={value => {
-                    }).format(Number(value))
+                if (typeof value === 'number') {
-                  } 
+                  return new Intl.NumberFormat('ko-KR', {
-                />
+                    style: 'currency',
-                <Tooltip 
+                    currency: 'KRW',
-                  formatter={(value) => {
+                    maximumFractionDigits: 0
-                    if (typeof value === 'number') {
+                  }).format(value);
-                      return new Intl.NumberFormat('ko-KR', {
+                }
-                        style: 'currency',
+                return value;
-                        currency: 'KRW',
+              }} />
-                        maximumFractionDigits: 0
-                      }).format(value);
-                    }
-                    return value;
-                  }}
-                />
                 <Legend />
-                <Bar 
+                <Bar dataKey="income" name="수입" fill="#81c784" radius={[4, 4, 0, 0]} />
-                  dataKey="income" 
+                <Bar dataKey="expense" name="지출" fill="#e57373" radius={[4, 4, 0, 0]} />
-                  name="수입" 
-                  fill="#81c784" 
-                  radius={[4, 4, 0, 0]} 
-                />
-                <Bar 
-                  dataKey="expense" 
-                  name="지출" 
-                  fill="#e57373" 
-                  radius={[4, 4, 0, 0]} 
-                />
               </BarChart>
             </ResponsiveContainer>
           </div>
@@ -150,34 +157,32 @@ const Analytics = () => {
         <h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
         <div className="neuro-card mb-6">
           <div className="space-y-4">
-            {expenseData.slice(0, 3).map((category, index) => (
+            {expenseData.slice(0, 3).map((category, index) => <div key={category.name} className="flex items-center justify-between">
-              <div key={category.name} className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full" style={{ backgroundColor: category.color }}></div>
+                  <div className="w-6 h-6 rounded-full" style={{
+                backgroundColor: category.color
+              }}></div>
                   <span>{category.name}</span>
                 </div>
                 <div className="text-right">
                   <p className="font-medium">
                     {new Intl.NumberFormat('ko-KR', {
-                      style: 'currency',
+                  style: 'currency',
-                      currency: 'KRW',
+                  currency: 'KRW',
-                      maximumFractionDigits: 0
+                  maximumFractionDigits: 0
-                    }).format(category.value)}
+                }).format(category.value)}
                   </p>
                   <p className="text-xs text-gray-500">
-                    {Math.round((category.value / totalExpense) * 100)}%
+                    {Math.round(category.value / totalExpense * 100)}%
                   </p>
                 </div>
-              </div>
+              </div>)}
-            ))}
           </div>
         </div>
       </div>
 
       <AddTransactionButton />
       <NavBar />
-    </div>
+    </div>;
-  );
 };
-
+export default Analytics;
-export default Analytics;