Refactor budget card component
Moves the title above the card and updates the progress display.
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import NavBar from '@/components/NavBar';
|
||||
import BudgetCard from '@/components/BudgetCard';
|
||||
@@ -82,7 +83,8 @@ const Index = () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 예산 카드 - 탭 추가 */}
|
||||
{/* 목표 진행 상황 - 제목을 카드 위로 이동 */}
|
||||
<h2 className="text-lg font-semibold mb-3">목표 진행 상황</h2>
|
||||
<div className="neuro-card mb-6 overflow-hidden">
|
||||
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
|
||||
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
|
||||
@@ -100,8 +102,6 @@ const Index = () => {
|
||||
<TabsContent value="daily" className="space-y-4 mt-0">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p>
|
||||
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p>
|
||||
@@ -135,8 +135,6 @@ const Index = () => {
|
||||
<TabsContent value="weekly" className="space-y-4 mt-0">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p>
|
||||
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p>
|
||||
@@ -170,8 +168,6 @@ const Index = () => {
|
||||
<TabsContent value="monthly" className="space-y-4 mt-0">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p>
|
||||
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p>
|
||||
|
||||
Reference in New Issue
Block a user