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/App.tsx

@@ -1,9 +1,13 @@
+
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import Transactions from "./pages/Transactions";
+import Analytics from "./pages/Analytics";
+import Settings from "./pages/Settings";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -16,7 +20,9 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="/transactions" element={<Transactions />} />
+          <Route path="/analytics" element={<Analytics />} />
+          <Route path="/settings" element={<Settings />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>

src/components/AddTransactionButton.tsx

@@ -0,0 +1,45 @@
+
+import React, { useState } from 'react';
+import { PlusIcon, MinusIcon, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const AddTransactionButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <div className="fixed bottom-24 right-6 z-20">
+      {isOpen && (
+        <div className="absolute bottom-16 right-0 flex flex-col gap-3 items-end animate-slide-up">
+          <button 
+            className="neuro-flat p-4 text-neuro-expense flex items-center gap-2"
+            onClick={() => setIsOpen(false)}
+          >
+            <span className="text-sm font-medium">지출</span>
+            <MinusIcon size={18} />
+          </button>
+          <button 
+            className="neuro-flat p-4 text-neuro-income flex items-center gap-2"
+            onClick={() => setIsOpen(false)}
+          >
+            <span className="text-sm font-medium">수입</span>
+            <PlusIcon size={18} />
+          </button>
+        </div>
+      )}
+      
+      <button 
+        className={cn(
+          "p-4 rounded-full transition-all duration-300 text-white",
+          isOpen 
+            ? "bg-red-500 rotate-45 shadow-lg" 
+            : "bg-neuro-accent shadow-neuro-flat hover:shadow-neuro-convex animate-pulse-subtle"
+        )}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? <X size={24} /> : <PlusIcon size={24} />}
+      </button>
+    </div>
+  );
+};
+
+export default AddTransactionButton;

src/components/BudgetCard.tsx

@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface BudgetCardProps {
+  title: string;
+  current: number;
+  total: number;
+  color?: string;
+}
+
+const BudgetCard: React.FC<BudgetCardProps> = ({ 
+  title, 
+  current, 
+  total,
+  color = 'neuro-accent'
+}) => {
+  const percentage = Math.min(Math.round((current / total) * 100), 100);
+  
+  const formattedCurrent = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+    maximumFractionDigits: 0
+  }).format(current);
+  
+  const formattedTotal = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+    maximumFractionDigits: 0
+  }).format(total);
+  
+  return (
+    <div className="neuro-card">
+      <h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
+      
+      <div className="flex items-center justify-between mb-2">
+        <p className="text-lg font-semibold">{formattedCurrent}</p>
+        <p className="text-sm text-gray-500">/ {formattedTotal}</p>
+      </div>
+      
+      <div className="relative h-3 neuro-pressed overflow-hidden">
+        <div 
+          className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-${color}`}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      
+      <div className="mt-2 flex justify-end">
+        <span className={cn(
+          "text-xs font-medium",
+          percentage >= 90 ? "text-neuro-expense" : "text-gray-500"
+        )}>
+          {percentage}%
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default BudgetCard;

src/components/ExpenseChart.tsx

@@ -0,0 +1,43 @@
+
+import React from 'react';
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
+
+interface ExpenseData {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface ExpenseChartProps {
+  data: ExpenseData[];
+}
+
+const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
+  return (
+    <div className="neuro-card h-64">
+      <h3 className="text-sm font-medium text-gray-600 mb-3">카테고리별 지출</h3>
+      
+      <ResponsiveContainer width="100%" height="85%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={50}
+            outerRadius={70}
+            paddingAngle={5}
+            dataKey="value"
+            labelLine={false}
+            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ExpenseChart;

src/components/NavBar.tsx

@@ -0,0 +1,49 @@
+
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Home, BarChart2, Calendar, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const NavBar = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  const navItems = [
+    { icon: Home, label: '홈', path: '/' },
+    { icon: Calendar, label: '거래', path: '/transactions' },
+    { icon: BarChart2, label: '분석', path: '/analytics' },
+    { icon: Settings, label: '설정', path: '/settings' },
+  ];
+  
+  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">
+        {navItems.map((item) => {
+          const isActive = location.pathname === item.path;
+          return (
+            <button
+              key={item.path}
+              onClick={() => navigate(item.path)}
+              className={cn(
+                "flex flex-col items-center gap-1 p-2 rounded-lg transition-all duration-300",
+                isActive ? "text-neuro-accent" : "text-gray-500"
+              )}
+            >
+              <div 
+                className={cn(
+                  "p-2 rounded-full transition-all duration-300",
+                  isActive ? "neuro-pressed" : "neuro-flat"
+                )}
+              >
+                <item.icon size={20} />
+              </div>
+              <span className="text-xs font-medium">{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default NavBar;

src/components/TransactionCard.tsx

@@ -0,0 +1,72 @@
+
+import React from 'react';
+import { ArrowDownIcon, ArrowUpIcon, ShoppingBag, Coffee, Home, Car, Gift } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type Transaction = {
+  id: string;
+  title: string;
+  amount: number;
+  date: string;
+  category: string;
+  type: 'expense' | 'income';
+};
+
+const categoryIcons: Record<string, React.ReactNode> = {
+  shopping: <ShoppingBag size={18} />,
+  food: <Coffee size={18} />,
+  housing: <Home size={18} />,
+  transportation: <Car size={18} />,
+  entertainment: <Gift size={18} />,
+  // Add more categories as needed
+};
+
+interface TransactionCardProps {
+  transaction: Transaction;
+}
+
+const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
+  const { title, amount, date, category, type } = transaction;
+  
+  const formattedAmount = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+    maximumFractionDigits: 0
+  }).format(amount);
+  
+  return (
+    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={cn(
+            "p-2 rounded-full",
+            type === 'expense' ? "bg-neuro-expense/10 text-neuro-expense" : "bg-neuro-income/10 text-neuro-income"
+          )}>
+            {categoryIcons[category] || <ShoppingBag size={18} />}
+          </div>
+          
+          <div>
+            <h3 className="text-sm font-medium">{title}</h3>
+            <p className="text-xs text-gray-500">{date}</p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-1">
+          {type === 'expense' ? (
+            <ArrowDownIcon size={12} className="text-neuro-expense" />
+          ) : (
+            <ArrowUpIcon size={12} className="text-neuro-income" />
+          )}
+          <span className={cn(
+            "font-medium",
+            type === 'expense' ? "text-neuro-expense" : "text-neuro-income"
+          )}>
+            {formattedAmount}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionCard;

src/index.css

@@ -1,7 +1,10 @@
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -32,7 +35,7 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
 
-    --radius: 0.5rem;
+    --radius: 1rem;
 
     --sidebar-background: 0 0% 98%;
 
@@ -96,6 +99,53 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-neuro-background text-foreground font-inter antialiased;
   }
-}
+  
+  html, body, #root {
+    @apply h-full overflow-x-hidden;
+  }
+}
+
+@layer components {
+  .neuro-flat {
+    @apply bg-neuro-background shadow-neuro-flat rounded-xl;
+  }
+  
+  .neuro-pressed {
+    @apply bg-neuro-background shadow-neuro-pressed rounded-xl;
+  }
+  
+  .neuro-convex {
+    @apply bg-neuro-background shadow-neuro-convex rounded-xl;
+  }
+  
+  .neuro-text {
+    @apply font-medium tracking-wide;
+  }
+  
+  .page-transition-enter {
+    @apply animate-fade-in;
+  }
+  
+  .glass-effect {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl;
+  }
+  
+  .neuro-button {
+    @apply neuro-flat px-4 py-3 text-neuro-accent font-medium transition-all duration-200
+    hover:shadow-neuro-convex hover:text-neuro-accent-light active:shadow-neuro-pressed;
+  }
+  
+  .neuro-card {
+    @apply neuro-flat p-6 transition-all duration-300 hover:shadow-neuro-convex;
+  }
+  
+  .neuro-input {
+    @apply neuro-pressed px-4 py-3 w-full focus:outline-none focus:ring-2 focus:ring-neuro-accent/30;
+  }
+}
+
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}

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="min-h-screen bg-neuro-background pb-24">
-      <div className="text-center">
+      <div className="max-w-md mx-auto px-6">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
+        {/* Header */}
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
+        <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;

tailwind.config.ts

@@ -1,3 +1,4 @@
+
 import type { Config } from "tailwindcss";
 
 export default {
@@ -61,6 +62,17 @@ export default {
 					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
 					border: 'hsl(var(--sidebar-border))',
 					ring: 'hsl(var(--sidebar-ring))'
+				},
+				neuro: {
+					background: '#f0f0f3',
+					light: '#ffffff',
+					dark: '#d1d9e6',
+					shadow: 'rgba(209, 217, 230, 0.5)',
+					highlight: 'rgba(255, 255, 255, 0.5)',
+					accent: '#6e59a5',
+					'accent-light': '#9b87f5',
+					expense: '#e57373',
+					income: '#81c784'
 				}
 			},
 			borderRadius: {
@@ -84,11 +96,46 @@ export default {
 					to: {
 						height: '0'
 					}
+				},
+				'float': {
+					'0%, 100%': { transform: 'translateY(0)' },
+					'50%': { transform: 'translateY(-5px)' }
+				},
+				'pulse-subtle': {
+					'0%, 100%': { opacity: '1' },
+					'50%': { opacity: '0.8' }
+				},
+				'slide-up': {
+					'0%': { transform: 'translateY(10px)', opacity: '0' },
+					'100%': { transform: 'translateY(0)', opacity: '1' }
+				},
+				'slide-down': {
+					'0%': { transform: 'translateY(-10px)', opacity: '0' },
+					'100%': { transform: 'translateY(0)', opacity: '1' }
+				},
+				'fade-in': {
+					'0%': { opacity: '0' },
+					'100%': { opacity: '1' }
+				},
+				'scale-in': {
+					'0%': { transform: 'scale(0.95)', opacity: '0' },
+					'100%': { transform: 'scale(1)', opacity: '1' }
 				}
 			},
 			animation: {
 				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out'
+				'accordion-up': 'accordion-up 0.2s ease-out',
+				'float': 'float 3s ease-in-out infinite',
+				'pulse-subtle': 'pulse-subtle 3s ease-in-out infinite',
+				'slide-up': 'slide-up 0.3s ease-out',
+				'slide-down': 'slide-down 0.3s ease-out',
+				'fade-in': 'fade-in 0.4s ease-out',
+				'scale-in': 'scale-in 0.3s ease-out'
+			},
+			boxShadow: {
+				'neuro-flat': '5px 5px 10px rgba(209, 217, 230, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.5)',
+				'neuro-pressed': 'inset 5px 5px 10px rgba(209, 217, 230, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.5)',
+				'neuro-convex': '5px 5px 10px rgba(209, 217, 230, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.5), inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset -1px -1px 2px rgba(209, 217, 230, 0.25)'
 			}
 		}
 	},