From 4cacb315225e02c3e0df8d66943c8eaf26a9ab6f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:05:00 +0000
Subject: [PATCH] Center align pie chart

The pie chart was not properly centered. This commit aligns the pie chart to the center of the component.
---
 src/components/ExpenseChart.tsx               |  2 +-
 src/components/SimpleAvatar.tsx               | 41 +++++++++++++++++++
 .../analytics/CategorySpendingList.tsx        |  2 +-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index d530485..5d60d63 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -17,7 +17,7 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
     <div className="neuro-card h-64 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ left: 20, right: 20, top: 10, bottom: 10 }}>
+        <PieChart margin={{ left: 20, right: 20, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
diff --git a/src/components/SimpleAvatar.tsx b/src/components/SimpleAvatar.tsx
index e69de29..d86aa91 100644
--- a/src/components/SimpleAvatar.tsx
+++ b/src/components/SimpleAvatar.tsx
@@ -0,0 +1,41 @@
+
+import React from 'react';
+
+interface SimpleAvatarProps {
+  src?: string;
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const SimpleAvatar: React.FC<SimpleAvatarProps> = ({ 
+  src, 
+  name, 
+  size = 'md',
+  className = '' 
+}) => {
+  const initials = name
+    .split(' ')
+    .map(part => part.charAt(0))
+    .join('')
+    .toUpperCase()
+    .substring(0, 2);
+
+  const sizeClasses = {
+    sm: 'w-8 h-8 text-xs',
+    md: 'w-10 h-10 text-sm',
+    lg: 'w-12 h-12 text-base'
+  };
+
+  return (
+    <div className={`flex items-center justify-center rounded-full bg-neuro-income text-white ${sizeClasses[size]} ${className}`}>
+      {src ? (
+        <img src={src} alt={name} className="w-full h-full rounded-full object-cover" />
+      ) : (
+        <span>{initials}</span>
+      )}
+    </div>
+  );
+};
+
+export default SimpleAvatar;
diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx
index 3db340c..4019456 100644
--- a/src/components/analytics/CategorySpendingList.tsx
+++ b/src/components/analytics/CategorySpendingList.tsx
@@ -27,7 +27,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
   return (
     <div className={`neuro-card mb-6 w-full ${className}`}>
       {categories.some(cat => cat.current > 0) ? (
-        <div className="space-y-4">
+        <div className="space-y-4 px-4 py-4">
           {categories.map((category) => {
             // 카테고리 이름을 직접 표시
             const categoryName = category.title;