diff --git a/src/components/CategoryBudgetInputs.tsx b/src/components/CategoryBudgetInputs.tsx index f185d27..42f6d3d 100644 --- a/src/components/CategoryBudgetInputs.tsx +++ b/src/components/CategoryBudgetInputs.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Input } from '@/components/ui/input'; import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons'; +import { useIsMobile } from '@/hooks/use-mobile'; interface CategoryBudgetInputsProps { categoryBudgets: Record; @@ -12,6 +13,8 @@ const CategoryBudgetInputs: React.FC = ({ categoryBudgets, handleCategoryInputChange }) => { + const isMobile = useIsMobile(); + // Format number with commas for display const formatWithCommas = (value: number): string => { if (value === 0) return ''; @@ -26,15 +29,15 @@ const CategoryBudgetInputs: React.FC = ({ }; return ( -
+
{EXPENSE_CATEGORIES.map(category => ( -
+
handleInput(e, category)} placeholder="예산 입력" - className="neuro-pressed max-w-[150px] text-xs" + className={`neuro-pressed ${isMobile ? 'w-[150px]' : 'max-w-[150px]'} text-xs`} />
))} diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx index 2577255..e7f1468 100644 --- a/src/components/analytics/CategorySpendingList.tsx +++ b/src/components/analytics/CategorySpendingList.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { formatCurrency } from '@/utils/formatters'; +import { useIsMobile } from '@/hooks/use-mobile'; interface CategorySpending { title: string; @@ -17,6 +18,8 @@ const CategorySpendingList: React.FC = ({ categories, totalExpense }) => { + const isMobile = useIsMobile(); + // 카테고리별 색상 매핑 const getCategoryColor = (title: string) => { switch (title) { @@ -28,7 +31,7 @@ const CategorySpendingList: React.FC = ({ }; return ( -
+
{categories.some(cat => cat.current > 0) ? (
{categories.map((category) => ( diff --git a/src/components/analytics/PeriodSelector.tsx b/src/components/analytics/PeriodSelector.tsx index 3115f54..d57d824 100644 --- a/src/components/analytics/PeriodSelector.tsx +++ b/src/components/analytics/PeriodSelector.tsx @@ -17,7 +17,7 @@ const PeriodSelector: React.FC = ({ const isMobile = useIsMobile(); return ( -
+