ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix spacing in CategorySpendingList

Browse Source 
Reduce the spacing between lines in the CategorySpendingList component.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 13:03:29 +00:00
parent ab38a1931e
commit b8e2dc8252
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/analytics/CategorySpendingList.tsx
View File

@@ -30,7 +30,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
const renderCategoryList = () => { const renderCategoryList = () => {
if (categories.some(cat => cat.current > 0)) { if (categories.some(cat => cat.current > 0)) {
return ( return (
<div className="space-y-4 px-1 py-4"> <div className="space-y-2 px-1 py-2">
{categories.map((category) => { {categories.map((category) => {
// 카테고리 이름을 직접 표시 // 카테고리 이름을 직접 표시
const categoryName = category.title; const categoryName = category.title;
@@ -39,11 +39,11 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
return ( return (
<div key={categoryName} className="flex items-center justify-between"> <div key={categoryName} className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
<div className="w-4 h-4 rounded-full" style={{ <div className="w-3 h-3 rounded-full" style={{
backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용 backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용
}}></div> }}></div>
<span className="text-sm"> <span className="text-xs">
{categoryName} {categoryName}
{description && ( {description && (
<span className="text-gray-500 text-xs ml-1"> <span className="text-gray-500 text-xs ml-1">
@@ -53,10 +53,9 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
</span> </span>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-medium text-sm"> <p className="font-medium text-xs">
{formatCurrency(category.current)} {formatCurrency(category.current)}
</p> </p>
{/* 퍼센트 표시 제거 */}
</div> </div>
</div> </div>
); );
@@ -65,7 +64,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
); );
} else { } else {
return ( return (
<div className="py-8 text-center text-gray-400"> <div className="py-6 text-center text-gray-400">
<p>아직 지출 내역이 없습니다</p> <p>아직 지출 내역이 없습니다</p>
</div> </div>
); );