Add supabase functionality test

This commit adds a test to verify that Supabase is functioning correctly.

src/pages/Settings.tsx

@@ -1,89 +1,65 @@
 
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import NavBar from '@/components/NavBar';
-import SyncSettings from '@/components/SyncSettings';
-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-neuro-income"
-}: {
-  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 cursor-pointer" 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>;
-};
+import { Helmet } from 'react-helmet';
+import NavBar from "@/components/NavBar";
+import Header from "@/components/Header";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import SyncSettings from "@/components/SyncSettings";
+import SupabaseTestPanel from "@/components/SupabaseTestPanel";
 
 const Settings = () => {
-  const navigate = useNavigate();
-  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>
+  return (
+    <div className="min-h-screen bg-background">
+      <Helmet>
+        <title>설정 | 예산 관리</title>
+      </Helmet>
+      <Header title="설정" />
+
+      <main className="container mx-auto pt-6 pb-32">
+        <Tabs defaultValue="general" className="w-full">
+          <TabsList className="grid grid-cols-2 w-full max-w-md mx-auto mb-8">
+            <TabsTrigger value="general">일반 설정</TabsTrigger>
+            <TabsTrigger value="advanced">고급 설정</TabsTrigger>
+          </TabsList>
           
-          {/* 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-income">
-              <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>
-        
-        {/* Data Sync Settings */}
-        <div className="mb-8">
-          <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">데이터 동기화</h2>
-          <SyncSettings />
-        </div>
-        
-        {/* 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="프로필 및 비밀번호 설정" onClick={() => navigate('/profile-management')} />
-          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" onClick={() => navigate('/payment-methods')} />
-          <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => navigate('/notification-settings')} />
-        </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="보안 및 데이터 설정" onClick={() => navigate('/security-privacy-settings')} />
-          <SettingsOption icon={HelpCircle} label="도움말 및 지원" description="FAQ 및 고객 지원" onClick={() => navigate('/help-support')} />
-        </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>앱 버전 0.1</p>
-        </div>
-      </div>
+          <TabsContent value="general" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>동기화 설정</CardTitle>
+                <CardDescription>
+                  클라우드 동기화 및 백업 기능을 관리합니다.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <SyncSettings />
+              </CardContent>
+            </Card>
+            
+            {/* Supabase 테스트 패널 */}
+            <SupabaseTestPanel />
+          </TabsContent>
+          
+          <TabsContent value="advanced" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>고급 설정</CardTitle>
+                <CardDescription>
+                  앱의 고급 기능 및 최적화 옵션을 설정합니다.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-gray-500">
+                  현재 사용 가능한 고급 설정이 없습니다.
+                </p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </main>
 
       <NavBar />
-    </div>;
+    </div>
+  );
 };
 
 export default Settings;