From bf2d275d9afc7413d9871c1c8780a72a990b7cc1 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 08:48:14 +0000
Subject: [PATCH] Enhance budget tab appearance

Improve the visual distinction of the selected tab in the BudgetProgressCard component by adjusting the shadow.
---
 src/components/BudgetProgressCard.tsx | 15 ++++++++++++---
 src/components/ui/tabs.tsx            |  3 ++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/BudgetProgressCard.tsx b/src/components/BudgetProgressCard.tsx
index 83ec2fd..926faef 100644
--- a/src/components/BudgetProgressCard.tsx
+++ b/src/components/BudgetProgressCard.tsx
@@ -35,13 +35,22 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
     <div className="neuro-card mb-6 overflow-hidden w-full">
       <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">
+          <TabsTrigger 
+            value="daily"
+            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
+          >
             오늘
           </TabsTrigger>
-          <TabsTrigger value="weekly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+          <TabsTrigger 
+            value="weekly" 
+            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
+          >
             주간
           </TabsTrigger>
-          <TabsTrigger value="monthly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+          <TabsTrigger 
+            value="monthly" 
+            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
+          >
             월간
           </TabsTrigger>
         </TabsList>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index f57fffd..4bdcf53 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
@@ -27,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:text-gray-500 data-[state=inactive]:hover:text-gray-700 data-[state=inactive]:hover:bg-gray-100/30",
       className
     )}
     {...props}