Increase bottom margin of section
Increase the bottom margin of the recent transactions section from 30px to 50px.
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Transaction } from '@/contexts/budget/types';
|
import { Transaction } from '@/contexts/budget/types';
|
||||||
import TransactionEditDialog from './TransactionEditDialog';
|
import TransactionEditDialog from './TransactionEditDialog';
|
||||||
@@ -40,7 +39,7 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-4 mb-[30px]">
|
<div className="mt-4 mb-[50px]">
|
||||||
<div className="flex justify-between items-center mb-2">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<h2 className="text-lg font-semibold">최근 지출</h2>
|
<h2 className="text-lg font-semibold">최근 지출</h2>
|
||||||
<Link to="/transactions" className="text-sm text-neuro-income flex items-center">
|
<Link to="/transactions" className="text-sm text-neuro-income flex items-center">
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import BudgetProgressCard from '@/components/BudgetProgressCard';
|
import BudgetProgressCard from '@/components/BudgetProgressCard';
|
||||||
import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
|
import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
|
||||||
@@ -48,15 +47,12 @@ const HomeContent: React.FC<HomeContentProps> = ({
|
|||||||
getCategorySpending
|
getCategorySpending
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="pb-[30px]">
|
<div className="pb-[50px]">
|
||||||
{/* 지출 카테고리 */}
|
|
||||||
{getCategorySpending().some(cat => cat.current > 0 || cat.total > 0) ? (
|
{getCategorySpending().some(cat => cat.current > 0 || cat.total > 0) ? (
|
||||||
<BudgetCategoriesSection categories={getCategorySpending()} />
|
<BudgetCategoriesSection categories={getCategorySpending()} />
|
||||||
) : (
|
) : (
|
||||||
<EmptyState />
|
<EmptyState />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 목표 진행 상황 */}
|
|
||||||
<h2 className="text-lg font-semibold mb-2 mt-4">월간 예산과 지출</h2>
|
<h2 className="text-lg font-semibold mb-2 mt-4">월간 예산과 지출</h2>
|
||||||
<BudgetProgressCard
|
<BudgetProgressCard
|
||||||
budgetData={budgetData}
|
budgetData={budgetData}
|
||||||
@@ -66,15 +62,13 @@ const HomeContent: React.FC<HomeContentProps> = ({
|
|||||||
calculatePercentage={calculatePercentage}
|
calculatePercentage={calculatePercentage}
|
||||||
onSaveBudget={handleBudgetGoalUpdate}
|
onSaveBudget={handleBudgetGoalUpdate}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 최근 지출 */}
|
|
||||||
{transactions.length > 0 ? (
|
{transactions.length > 0 ? (
|
||||||
<RecentTransactionsSection
|
<RecentTransactionsSection
|
||||||
transactions={transactions.slice(0, 5)}
|
transactions={transactions.slice(0, 5)}
|
||||||
onUpdateTransaction={updateTransaction}
|
onUpdateTransaction={updateTransaction}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="mt-4 mb-[30px]">
|
<div className="mt-4 mb-[50px]">
|
||||||
<h2 className="text-lg font-semibold mb-3">최근 지출</h2>
|
<h2 className="text-lg font-semibold mb-3">최근 지출</h2>
|
||||||
<EmptyState />
|
<EmptyState />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user