Reverted to edit edt-ac485f97-7774-4a29-9d0a-ec4295ecbab8: "Configure Supabase environment variables
Sets Supabase URL and anon key using environment variables."
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,172 +1,89 @@
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
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 { Button } from "@/components/ui/button";
|
||||
import { Bell, Lock, Moon, User, HelpCircle, CreditCard } from "lucide-react";
|
||||
import SyncSettings from "@/components/SyncSettings";
|
||||
import SupabaseTestPanel from "@/components/SupabaseTestPanel";
|
||||
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>;
|
||||
};
|
||||
|
||||
const Settings = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
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>
|
||||
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>
|
||||
|
||||
<TabsContent value="general" className="space-y-6">
|
||||
{/* 프로필 관리 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>사용자 설정</CardTitle>
|
||||
<CardDescription>
|
||||
계정 정보 및 개인 설정을 관리합니다.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => navigate('/profile')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
<span>프로필 관리</span>
|
||||
</div>
|
||||
<span>›</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => navigate('/security-privacy')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="h-4 w-4" />
|
||||
<span>보안 및 개인정보</span>
|
||||
</div>
|
||||
<span>›</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => navigate('/notifications')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-4 w-4" />
|
||||
<span>알림 설정</span>
|
||||
</div>
|
||||
<span>›</span>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 결제 방법 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>결제 방법</CardTitle>
|
||||
<CardDescription>
|
||||
결제 카드 및 계좌 정보를 관리합니다.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => navigate('/payment-methods')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<CreditCard className="h-4 w-4" />
|
||||
<span>결제 수단 관리</span>
|
||||
</div>
|
||||
<span>›</span>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 동기화 설정 */}
|
||||
<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 className="space-y-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Moon className="h-4 w-4" />
|
||||
<span>테마 설정</span>
|
||||
</div>
|
||||
<span>준비 중</span>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 도움말 및 지원 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>도움말 및 지원</CardTitle>
|
||||
<CardDescription>
|
||||
문의사항 및 문제 해결을 위한 지원을 받으세요.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => navigate('/help')}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<HelpCircle className="h-4 w-4" />
|
||||
<span>도움말 보기</span>
|
||||
</div>
|
||||
<span>›</span>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
{/* 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>
|
||||
|
||||
<NavBar />
|
||||
</div>
|
||||
);
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
|
||||
Reference in New Issue
Block a user