Reverted to edit edt-0b69430e-05e6-40e3-9ee2-b28a21c97d9a: "Adjust font sizes

Reduce font sizes in several components for better readability and UI consistency."
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 12:06:53 +00:00
parent acea18c368
commit 3b90e7396d
3 changed files with 7 additions and 72 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Label } from 'recharts'; import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { getCategoryColor } from '@/utils/categoryColorUtils'; import { getCategoryColor } from '@/utils/categoryColorUtils';
interface ExpenseData { interface ExpenseData {
@@ -17,7 +17,7 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
return ( return (
<div className="neuro-card h-64 desktop-card"> <div className="neuro-card h-64 desktop-card">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}> <PieChart>
<Pie <Pie
data={data} data={data}
cx="50%" cx="50%"
@@ -27,34 +27,10 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
paddingAngle={5} paddingAngle={5}
dataKey="value" dataKey="value"
labelLine={true} labelLine={true}
label={({ name, percent, x, y }) => { label={({ name, percent }) => (
// 좌표 조정으로 레이블 위치 최적화 `${name} ${(percent * 100).toFixed(0)}%`
const radius = 90; // 레이블을 더 바깥쪽으로 배치 )}
const centerX = parseInt(x.toString()); fontSize={12}
const centerY = parseInt(y.toString());
// 차트 중심으로부터의 각도 계산
const angle = Math.atan2(centerY - 100, centerX - 100);
// 레이블을 원 바깥으로 배치
const labelX = 100 + Math.cos(angle) * radius;
const labelY = 100 + Math.sin(angle) * radius;
return (
<g>
<text
x={labelX}
y={labelY}
fill="#666"
textAnchor={labelX > 100 ? "start" : "end"}
dominantBaseline="central"
fontSize={12}
>
{`${name} ${(percent * 100).toFixed(0)}%`}
</text>
</g>
);
}}
> >
{data.map((entry, index) => ( {data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} /> <Cell key={`cell-${index}`} fill={entry.color} />

View File

@@ -1,41 +0,0 @@
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;

View File

@@ -27,7 +27,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
return ( return (
<div className={`neuro-card mb-6 w-full ${className}`}> <div className={`neuro-card mb-6 w-full ${className}`}>
{categories.some(cat => cat.current > 0) ? ( {categories.some(cat => cat.current > 0) ? (
<div className="space-y-4 px-4 py-4"> <div className="space-y-4">
{categories.map((category) => { {categories.map((category) => {
// 카테고리 이름을 직접 표시 // 카테고리 이름을 직접 표시
const categoryName = category.title; const categoryName = category.title;