Create new Flutter app

The prompt requests the creation of a new app with a neumorphic design, similar to a household account book, using Flutter.

src/pages/Analytics.tsx

@@ -0,0 +1,180 @@
+
+import React, { useState } from 'react';
+import NavBar from '@/components/NavBar';
+import ExpenseChart from '@/components/ExpenseChart';
+import AddTransactionButton from '@/components/AddTransactionButton';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const Analytics = () => {
+  const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
+  
+  // Sample data for the expense categories
+  const expenseData = [
+    { name: '식비', value: 350000, color: '#9b87f5' },
+    { name: '주거', value: 650000, color: '#6e59a5' },
+    { name: '교통', value: 125000, color: '#81c784' },
+    { name: '취미', value: 200000, color: '#64b5f6' },
+    { name: '기타', value: 175000, color: '#e57373' },
+  ];
+  
+  // Sample data for the monthly comparison
+  const monthlyData = [
+    { name: '3월', income: 2400000, expense: 1800000 },
+    { name: '4월', income: 2300000, expense: 1700000 },
+    { name: '5월', income: 2700000, expense: 1900000 },
+    { name: '6월', income: 2200000, expense: 1500000 },
+    { name: '7월', income: 2500000, expense: 1650000 },
+    { name: '8월', income: 2550000, expense: 1740000 },
+  ];
+  
+  const totalIncome = 2550000;
+  const totalExpense = 1740000;
+  const savings = totalIncome - totalExpense;
+  const savingsPercentage = Math.round((savings / totalIncome) * 100);
+  
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <h1 className="text-2xl font-bold neuro-text mb-5">지출 분석</h1>
+          
+          {/* Period Selector */}
+          <div className="flex items-center justify-between mb-6">
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronLeft size={20} />
+            </button>
+            
+            <div className="flex items-center">
+              <span className="font-medium text-lg">{selectedPeriod}</span>
+            </div>
+            
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronRight size={20} />
+            </button>
+          </div>
+          
+          {/* Summary Cards */}
+          <div className="grid grid-cols-3 gap-3 mb-8">
+            <div className="neuro-card">
+              <p className="text-xs text-gray-500 mb-1">수입</p>
+              <p className="text-sm font-bold text-neuro-income">
+                {new Intl.NumberFormat('ko-KR', {
+                  style: 'currency',
+                  currency: 'KRW',
+                  notation: 'compact',
+                  maximumFractionDigits: 1
+                }).format(totalIncome)}
+              </p>
+            </div>
+            <div className="neuro-card">
+              <p className="text-xs text-gray-500 mb-1">지출</p>
+              <p className="text-sm font-bold text-neuro-expense">
+                {new Intl.NumberFormat('ko-KR', {
+                  style: 'currency',
+                  currency: 'KRW',
+                  notation: 'compact',
+                  maximumFractionDigits: 1
+                }).format(totalExpense)}
+              </p>
+            </div>
+            <div className="neuro-card">
+              <p className="text-xs text-gray-500 mb-1">저축</p>
+              <p className="text-sm font-bold">
+                {savingsPercentage}%
+              </p>
+            </div>
+          </div>
+        </header>
+        
+        {/* Category Pie Chart */}
+        <ExpenseChart data={expenseData} />
+        
+        {/* Monthly Comparison */}
+        <div className="mt-6 mb-8">
+          <h2 className="text-lg font-semibold mb-3">월별 추이</h2>
+          <div className="neuro-card h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={monthlyData}
+                margin={{
+                  top: 20,
+                  right: 10,
+                  left: -10,
+                  bottom: 5,
+                }}
+              >
+                <XAxis dataKey="name" />
+                <YAxis 
+                  tickFormatter={(value) => 
+                    new Intl.NumberFormat('ko-KR', {
+                      style: 'currency',
+                      currency: 'KRW',
+                      notation: 'compact',
+                      maximumFractionDigits: 1
+                    }).format(value)
+                  } 
+                />
+                <Tooltip 
+                  formatter={(value) => 
+                    new Intl.NumberFormat('ko-KR', {
+                      style: 'currency',
+                      currency: 'KRW',
+                      maximumFractionDigits: 0
+                    }).format(value)
+                  }
+                />
+                <Legend />
+                <Bar 
+                  dataKey="income" 
+                  name="수입" 
+                  fill="#81c784" 
+                  radius={[4, 4, 0, 0]} 
+                />
+                <Bar 
+                  dataKey="expense" 
+                  name="지출" 
+                  fill="#e57373" 
+                  radius={[4, 4, 0, 0]} 
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+        
+        {/* Top Spending Categories */}
+        <h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
+        <div className="neuro-card mb-6">
+          <div className="space-y-4">
+            {expenseData.slice(0, 3).map((category, index) => (
+              <div key={category.name} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="w-6 h-6 rounded-full" style={{ backgroundColor: category.color }}></div>
+                  <span>{category.name}</span>
+                </div>
+                <div className="text-right">
+                  <p className="font-medium">
+                    {new Intl.NumberFormat('ko-KR', {
+                      style: 'currency',
+                      currency: 'KRW',
+                      maximumFractionDigits: 0
+                    }).format(category.value)}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {Math.round((category.value / totalExpense) * 100)}%
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <AddTransactionButton />
+      <NavBar />
+    </div>
+  );
+};
+
+export default Analytics;

src/pages/Index.tsx

@@ -1,12 +1,111 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+
+import React from 'react';
+import NavBar from '@/components/NavBar';
+import BudgetCard from '@/components/BudgetCard';
+import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import AddTransactionButton from '@/components/AddTransactionButton';
+import { Wallet, TrendingUp, Bell } from 'lucide-react';
 
 const Index = () => {
+  // Sample data - in a real app, this would come from a data source
+  const transactions: Transaction[] = [
+    { 
+      id: '1', 
+      title: '식료품 구매', 
+      amount: 25000, 
+      date: '오늘, 12:30 PM', 
+      category: 'shopping',
+      type: 'expense' 
+    },
+    { 
+      id: '2', 
+      title: '주유소', 
+      amount: 50000, 
+      date: '어제, 3:45 PM', 
+      category: 'transportation',
+      type: 'expense' 
+    },
+    { 
+      id: '3', 
+      title: '월급', 
+      amount: 2500000, 
+      date: '2일전, 9:00 AM', 
+      category: 'income',
+      type: 'income' 
+    },
+  ];
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <div className="flex justify-between items-center">
+            <div>
+              <h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
+              <p className="text-gray-500">오늘의 재정 현황</p>
+            </div>
+            <button className="neuro-flat p-2.5 rounded-full">
+              <Bell size={20} className="text-gray-600" />
+            </button>
+          </div>
+        </header>
+
+        {/* Balance Card */}
+        <div className="neuro-card mb-6 overflow-hidden">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Wallet className="text-neuro-accent" size={20} />
+              <h2 className="font-semibold">총 잔액</h2>
+            </div>
+            <TrendingUp className="text-neuro-income" size={20} />
+          </div>
+          
+          <p className="text-3xl font-bold tracking-tight mb-1">
+            ₩2,580,000
+          </p>
+          <p className="text-neuro-income text-sm font-medium">
+            지난 달보다 12% 증가
+          </p>
+        </div>
+
+        {/* Budget Progress */}
+        <h2 className="text-lg font-semibold mb-3 mt-8">예산 현황</h2>
+        <div className="grid gap-4 mb-8">
+          <BudgetCard
+            title="이번 달 총 예산"
+            current={850000}
+            total={1500000}
+          />
+          <BudgetCard
+            title="식비"
+            current={240000}
+            total={400000}
+            color="neuro-accent-light"
+          />
+          <BudgetCard
+            title="교통비"
+            current={190000}
+            total={200000}
+            color="neuro-expense"
+          />
+        </div>
+
+        {/* Recent Transactions */}
+        <h2 className="text-lg font-semibold mb-3">최근 거래</h2>
+        <div className="grid gap-3 mb-6">
+          {transactions.map(transaction => (
+            <TransactionCard key={transaction.id} transaction={transaction} />
+          ))}
+        </div>
+        
+        <div className="flex justify-center mb-6">
+          <button className="text-neuro-accent font-medium">모든 거래 보기</button>
+        </div>
       </div>
+
+      <AddTransactionButton />
+      <NavBar />
     </div>
   );
 };

src/pages/Settings.tsx

@@ -0,0 +1,113 @@
+
+import React from 'react';
+import NavBar from '@/components/NavBar';
+import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const SettingsOption = ({ 
+  icon: Icon, 
+  label, 
+  description, 
+  onClick,
+  color = "text-gray-700"
+}: { 
+  icon: React.ElementType; 
+  label: string; 
+  description?: string;
+  onClick?: () => void;
+  color?: string;
+}) => {
+  return (
+    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex" onClick={onClick}>
+      <div className="flex items-center">
+        <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
+          <Icon size={20} />
+        </div>
+        <div className="flex-1">
+          <h3 className="font-medium">{label}</h3>
+          {description && <p className="text-xs text-gray-500">{description}</p>}
+        </div>
+        <ChevronRight size={18} className="text-gray-400" />
+      </div>
+    </div>
+  );
+};
+
+const Settings = () => {
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <h1 className="text-2xl font-bold neuro-text mb-6">설정</h1>
+          
+          {/* User Profile */}
+          <div className="neuro-flat p-6 mb-8 flex items-center">
+            <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-accent">
+              <User size={24} />
+            </div>
+            <div>
+              <h2 className="font-semibold text-lg">홍길동</h2>
+              <p className="text-sm text-gray-500">honggildong@example.com</p>
+            </div>
+          </div>
+        </header>
+        
+        {/* Settings Options */}
+        <div className="space-y-4 mb-8">
+          <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">계정</h2>
+          <SettingsOption 
+            icon={User} 
+            label="프로필 관리" 
+            description="개인정보 및 프로필 설정"
+            color="text-neuro-accent"
+          />
+          <SettingsOption 
+            icon={CreditCard} 
+            label="결제 방법" 
+            description="카드 및 은행 계좌 관리"
+            color="text-blue-500"
+          />
+          <SettingsOption 
+            icon={Bell} 
+            label="알림 설정" 
+            description="앱 알림 및 리마인더"
+            color="text-yellow-500"
+          />
+        </div>
+        
+        <div className="space-y-4 mb-8">
+          <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">앱 설정</h2>
+          <SettingsOption 
+            icon={Lock} 
+            label="보안 및 개인정보" 
+            description="보안 및 데이터 설정"
+            color="text-green-500"
+          />
+          <SettingsOption 
+            icon={HelpCircle} 
+            label="도움말 및 지원" 
+            description="FAQ 및 고객 지원"
+            color="text-purple-500"
+          />
+        </div>
+        
+        <div className="mt-8">
+          <SettingsOption 
+            icon={LogOut} 
+            label="로그아웃" 
+            color="text-neuro-expense"
+          />
+        </div>
+        
+        <div className="mt-12 text-center text-xs text-gray-400">
+          <p>앱 버전 1.0.0</p>
+        </div>
+      </div>
+
+      <NavBar />
+    </div>
+  );
+};
+
+export default Settings;

src/pages/Transactions.tsx

@@ -0,0 +1,146 @@
+
+import React, { useState } from 'react';
+import NavBar from '@/components/NavBar';
+import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import AddTransactionButton from '@/components/AddTransactionButton';
+import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+
+const Transactions = () => {
+  const [selectedMonth, setSelectedMonth] = useState('8월');
+  
+  // Sample data - in a real app, this would come from a data source
+  const transactions: Transaction[] = [
+    { 
+      id: '1', 
+      title: '식료품 구매', 
+      amount: 25000, 
+      date: '8월 25일, 12:30 PM', 
+      category: 'shopping',
+      type: 'expense' 
+    },
+    { 
+      id: '2', 
+      title: '주유소', 
+      amount: 50000, 
+      date: '8월 24일, 3:45 PM', 
+      category: 'transportation',
+      type: 'expense' 
+    },
+    { 
+      id: '3', 
+      title: '월급', 
+      amount: 2500000, 
+      date: '8월 20일, 9:00 AM', 
+      category: 'income',
+      type: 'income' 
+    },
+    { 
+      id: '4', 
+      title: '아마존 프라임', 
+      amount: 9900, 
+      date: '8월 18일, 6:00 AM', 
+      category: 'entertainment',
+      type: 'expense' 
+    },
+    { 
+      id: '5', 
+      title: '집세', 
+      amount: 650000, 
+      date: '8월 15일, 10:00 AM', 
+      category: 'housing',
+      type: 'expense' 
+    },
+    { 
+      id: '6', 
+      title: '카페', 
+      amount: 5500, 
+      date: '8월 12일, 2:15 PM', 
+      category: 'food',
+      type: 'expense' 
+    },
+  ];
+
+  // Group transactions by date
+  const groupedTransactions: Record<string, Transaction[]> = {};
+  
+  transactions.forEach(transaction => {
+    const datePart = transaction.date.split(',')[0];
+    if (!groupedTransactions[datePart]) {
+      groupedTransactions[datePart] = [];
+    }
+    groupedTransactions[datePart].push(transaction);
+  });
+
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <h1 className="text-2xl font-bold neuro-text mb-5">거래 내역</h1>
+          
+          {/* Search */}
+          <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
+            <Search size={18} className="text-gray-500 mr-2" />
+            <input 
+              type="text"
+              placeholder="거래 검색..."
+              className="bg-transparent flex-1 outline-none text-sm"
+            />
+          </div>
+          
+          {/* Month Selector */}
+          <div className="flex items-center justify-between mb-5">
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronLeft size={20} />
+            </button>
+            
+            <div className="flex items-center gap-2">
+              <Calendar size={18} className="text-neuro-accent" />
+              <span className="font-medium text-lg">{selectedMonth}</span>
+            </div>
+            
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronRight size={20} />
+            </button>
+          </div>
+          
+          {/* Summary */}
+          <div className="grid grid-cols-2 gap-4 mb-8">
+            <div className="neuro-card">
+              <p className="text-sm text-gray-500 mb-1">총 수입</p>
+              <p className="text-lg font-bold text-neuro-income">₩2,500,000</p>
+            </div>
+            <div className="neuro-card">
+              <p className="text-sm text-gray-500 mb-1">총 지출</p>
+              <p className="text-lg font-bold text-neuro-expense">₩740,400</p>
+            </div>
+          </div>
+        </header>
+
+        {/* Transactions By Date */}
+        <div className="space-y-6">
+          {Object.entries(groupedTransactions).map(([date, transactions]) => (
+            <div key={date}>
+              <div className="flex items-center gap-2 mb-3">
+                <div className="h-1 flex-1 neuro-pressed"></div>
+                <h2 className="text-sm font-medium text-gray-500">{date}</h2>
+                <div className="h-1 flex-1 neuro-pressed"></div>
+              </div>
+              
+              <div className="grid gap-3">
+                {transactions.map(transaction => (
+                  <TransactionCard key={transaction.id} transaction={transaction} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <AddTransactionButton />
+      <NavBar />
+    </div>
+  );
+};
+
+export default Transactions;