From 13bff57266769c9edd2eb8808e7c18a9cdab11d1 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 16 Mar 2025 05:53:36 +0000
Subject: [PATCH] Adjust card width for mobile

Adjust card width to fit mobile screens.
---
 src/components/analytics/PeriodSelector.tsx |  5 ++++-
 src/components/analytics/SummaryCards.tsx   | 11 +++++++----
 src/pages/Analytics.tsx                     | 16 +++++++++-------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/analytics/PeriodSelector.tsx b/src/components/analytics/PeriodSelector.tsx
index 4a9ead4..3115f54 100644
--- a/src/components/analytics/PeriodSelector.tsx
+++ b/src/components/analytics/PeriodSelector.tsx
@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface PeriodSelectorProps {
   selectedPeriod: string;
@@ -13,8 +14,10 @@ const PeriodSelector: React.FC<PeriodSelectorProps> = ({
   onPrevPeriod,
   onNextPeriod
 }) => {
+  const isMobile = useIsMobile();
+
   return (
-    <div className="flex items-center justify-between mb-6">
+    <div className={`flex items-center justify-between mb-6 ${isMobile ? 'w-full' : ''}`}>
       <button 
         className="neuro-flat p-2 rounded-full"
         onClick={onPrevPeriod}
diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 75697d4..0333fb1 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { Wallet, CreditCard, PiggyBank } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface SummaryCardsProps {
   totalBudget: number;
@@ -14,9 +15,11 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   totalExpense,
   savingsPercentage
 }) => {
+  const isMobile = useIsMobile();
+
   return (
-    <div className="grid grid-cols-3 gap-3 mb-8">
-      <div className="neuro-card">
+    <div className={`grid ${isMobile ? 'grid-cols-1 gap-3' : 'grid-cols-3 gap-3'} mb-8`}>
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <Wallet size={24} className="text-gray-500" />
           <p className="text-gray-500 text-base">예산</p>
@@ -25,7 +28,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
           {formatCurrency(totalBudget)}
         </p>
       </div>
-      <div className="neuro-card">
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <CreditCard size={24} className="text-gray-500" />
           <p className="text-gray-500 font-medium text-base">지출</p>
@@ -34,7 +37,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
           {formatCurrency(totalExpense)}
         </p>
       </div>
-      <div className="neuro-card">
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <PiggyBank size={24} className="text-gray-500" />
           <p className="text-gray-500 text-base">저축</p>
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 29ac245..ed9dd33 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -110,13 +110,15 @@ const Analytics = () => {
         
         {/* Category Pie Chart */}
         <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
-        {expenseData.some(item => item.value > 0) ? (
-          <ExpenseChart data={expenseData} />
-        ) : (
-          <div className="neuro-card h-52 flex items-center justify-center text-gray-400">
-            <p>데이터가 없습니다</p>
-          </div>
-        )}
+        <div className="w-full">
+          {expenseData.some(item => item.value > 0) ? (
+            <ExpenseChart data={expenseData} />
+          ) : (
+            <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
+              <p>데이터가 없습니다</p>
+            </div>
+          )}
+        </div>
         
         {/* Top Spending Categories */}
         <h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>