From 30c76a2e1ae9967732676b41c63f12f3c6213997 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 06:16:55 +0000
Subject: [PATCH] Adjust card width on desktop

The card width was too wide on desktop. Adjusted the width to be slightly smaller than the four icon area at the bottom.
---
 src/components/BudgetCategoriesSection.tsx   |  2 +-
 src/components/BudgetProgressCard.tsx        |  2 +-
 src/components/ExpenseChart.tsx              |  2 +-
 src/components/NavBar.tsx                    |  2 +-
 src/components/RecentTransactionsSection.tsx |  2 +-
 src/components/analytics/SummaryCards.tsx    |  2 +-
 src/index.css                                | 19 +++++++++++++++++++
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx
index e1d6623..d66eea6 100644
--- a/src/components/BudgetCategoriesSection.tsx
+++ b/src/components/BudgetCategoriesSection.tsx
@@ -14,7 +14,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({ categ
   return (
     <>
       <h2 className="text-lg font-semibold mb-3 mt-8">지출 카테고리</h2>
-      <div className="grid gap-4 mb-8">
+      <div className="grid gap-4 mb-8 desktop-card">
         {categories.map((category, index) => (
           <BudgetCard 
             key={index}
diff --git a/src/components/BudgetProgressCard.tsx b/src/components/BudgetProgressCard.tsx
index b8ccfb9..ed9a630 100644
--- a/src/components/BudgetProgressCard.tsx
+++ b/src/components/BudgetProgressCard.tsx
@@ -32,7 +32,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   onSaveBudget
 }) => {
   return (
-    <div className="neuro-card mb-6 overflow-hidden">
+    <div className="neuro-card mb-6 overflow-hidden desktop-card">
       <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
         <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
           <TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 20ec49f..6a96208 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -14,7 +14,7 @@ interface ExpenseChartProps {
 
 const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
-    <div className="neuro-card h-64">
+    <div className="neuro-card h-64 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
         <PieChart>
           <Pie
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index e346cb0..febaa8c 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -29,7 +29,7 @@ const NavBar = () => {
   
   return (
     <div className="fixed bottom-0 left-0 right-0 p-4 z-10 animate-slide-up">
-      <div className="neuro-flat mx-auto max-w-md flex justify-around items-center py-3 px-6">
+      <div className="neuro-flat mx-auto max-w-[500px] flex justify-around items-center py-3 px-6">
         {navItems.map((item) => {
           return (
             <button
diff --git a/src/components/RecentTransactionsSection.tsx b/src/components/RecentTransactionsSection.tsx
index 689a9a3..205e047 100644
--- a/src/components/RecentTransactionsSection.tsx
+++ b/src/components/RecentTransactionsSection.tsx
@@ -70,7 +70,7 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
           더보기 <ChevronRight size={16} />
         </Link>
       </div>
-      <div className="neuro-card divide-y divide-gray-100">
+      <div className="neuro-card divide-y divide-gray-100 desktop-card">
         {transactions.length > 0 ? (
           transactions.map((transaction) => (
             <div 
diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 179246a..9045046 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -18,7 +18,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   const isMobile = useIsMobile();
 
   return (
-    <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full`}>
+    <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
       <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <Wallet size={24} className="text-gray-500" />
diff --git a/src/index.css b/src/index.css
index dd536e1..8acc300 100644
--- a/src/index.css
+++ b/src/index.css
@@ -169,6 +169,25 @@
       @apply rounded-xl overflow-hidden;
     }
   }
+  
+  /* 데스크탑 화면에서의 추가 스타일 */
+  @media (min-width: 769px) {
+    #root {
+      @apply px-4;
+    }
+    
+    .desktop-container {
+      @apply max-w-[500px] mx-auto;
+    }
+    
+    .desktop-card {
+      @apply max-w-[500px] mx-auto;
+    }
+    
+    .neuro-card {
+      @apply max-w-[500px] mx-auto;
+    }
+  }
 }
 
 .font-inter {