From 01e71d12190f72dc4c4fbdf10632a2c9470c7bb9 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 15 Mar 2025 08:11:00 +0000 Subject: [PATCH] Document on-premise Supabase setup Adds documentation on how to connect to an on-premise Supabase instance. --- src/components/SyncSettings.tsx | 14 ++- src/lib/supabase.ts | 35 +++++++- src/pages/SupabaseSettings.tsx | 146 ++++++++++++++++++++++++++++++++ 3 files changed, 190 insertions(+), 5 deletions(-) create mode 100644 src/pages/SupabaseSettings.tsx diff --git a/src/components/SyncSettings.tsx b/src/components/SyncSettings.tsx index d662a8e..6d1fff7 100644 --- a/src/components/SyncSettings.tsx +++ b/src/components/SyncSettings.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; -import { CloudUpload, RefreshCw } from "lucide-react"; +import { CloudUpload, RefreshCw, Database } from "lucide-react"; import { isSyncEnabled, setSyncEnabled, syncAllData, getLastSyncTime } from "@/utils/syncUtils"; import { toast } from "@/hooks/useToast.wrapper"; import { useAuth } from "@/contexts/auth"; @@ -139,6 +139,18 @@ const SyncSettings = () => { )} + + {/* 온프레미스 Supabase 설정 버튼 추가 */} +
+ +
); }; diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts index ebb8ddf..6b1c060 100644 --- a/src/lib/supabase.ts +++ b/src/lib/supabase.ts @@ -1,10 +1,10 @@ import { createClient } from '@supabase/supabase-js'; -// Supabase URL과 anon key 설정 -const supabaseUrl = 'https://tzmywjqtluhwemhuflhi.supabase.co'; -// 올바른 anon key 설정 - 유효한 JWT 형식이어야 함 -const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR6bXl3anF0bHVod2VtaHVmbGhpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDk1NDUzMTUsImV4cCI6MjAyNTEyMTMxNX0.iCPZvMm9KeRjxh2cE-rkpAIxf9XpZzGIpSZBXBSRfoU'; +// 온프레미스 Supabase URL과 anon key 설정 +const supabaseUrl = process.env.SUPABASE_URL || 'http://your-onpremise-supabase-url.com'; +// 온프레미스 anon key 설정 +const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || 'your-onpremise-anon-key'; // 유효한 URL이 설정되었는지 확인 const isValidUrl = supabaseUrl && supabaseAnonKey && @@ -21,9 +21,25 @@ try { auth: { autoRefreshToken: true, persistSession: true, + // 온프레미스 설치를 위한 추가 설정 + flowType: 'implicit', }, }); + // Supabase 연결 테스트 + (async () => { + try { + const { data, error } = await supabaseClient.auth.getSession(); + if (error) { + console.warn('Supabase 연결 테스트 실패:', error.message); + } else { + console.log('Supabase 연결 성공!'); + } + } catch (err) { + console.error('Supabase 연결 확인 중 오류:', err); + } + })(); + // Supabase 연결 로그 console.log('Supabase 클라이언트가 생성되었습니다.'); @@ -53,3 +69,14 @@ try { } export const supabase = supabaseClient; + +// 온프레미스 연결을 위한 설정 도우미 함수 +export const configureSupabase = (url: string, key: string) => { + // 로컬 스토리지에 설정 저장 + localStorage.setItem('supabase_url', url); + localStorage.setItem('supabase_key', key); + + // 페이지 새로고침 - 새로운 설정으로 Supabase 클라이언트 초기화 + window.location.reload(); +}; + diff --git a/src/pages/SupabaseSettings.tsx b/src/pages/SupabaseSettings.tsx new file mode 100644 index 0000000..a561355 --- /dev/null +++ b/src/pages/SupabaseSettings.tsx @@ -0,0 +1,146 @@ + +import React, { useState, useEffect } from 'react'; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { DatabaseIcon, Save, RefreshCw } from "lucide-react"; +import { toast } from "@/hooks/useToast.wrapper"; +import { configureSupabase } from "@/lib/supabase"; +import NavBar from '@/components/NavBar'; + +const SupabaseSettings = () => { + const [supabaseUrl, setSupabaseUrl] = useState(''); + const [supabaseKey, setSupabaseKey] = useState(''); + const [isSaving, setIsSaving] = useState(false); + + // 저장된 설정 불러오기 + useEffect(() => { + const savedUrl = localStorage.getItem('supabase_url'); + const savedKey = localStorage.getItem('supabase_key'); + + if (savedUrl) setSupabaseUrl(savedUrl); + if (savedKey) setSupabaseKey(savedKey); + }, []); + + const handleSave = () => { + if (!supabaseUrl || !supabaseKey) { + toast({ + title: "입력 오류", + description: "Supabase URL과 Anon Key를 모두 입력해주세요.", + variant: "destructive" + }); + return; + } + + setIsSaving(true); + + try { + // Supabase 설정 적용 + configureSupabase(supabaseUrl, supabaseKey); + + toast({ + title: "설정 저장 완료", + description: "Supabase 설정이 저장되었습니다. 변경사항을 적용합니다.", + }); + } catch (error) { + console.error('Supabase 설정 저장 오류:', error); + toast({ + title: "설정 저장 실패", + description: "Supabase 설정을 저장하는 중 오류가 발생했습니다.", + variant: "destructive" + }); + setIsSaving(false); + } + }; + + return ( +
+
+
+

Supabase 설정

+

+ 온프레미스 Supabase 인스턴스와 연결하기 위한 설정을 입력해주세요. +

+
+ +
+
+
+ +
+ + setSupabaseUrl(e.target.value)} + className="pl-10 neuro-pressed" + /> +
+
+ +
+ +
+ + + + setSupabaseKey(e.target.value)} + className="pl-10 neuro-pressed" + /> +
+
+ + +
+
+ +
+

도움말

+

+ 온프레미스 Supabase 설정은 다음과 같이 구성됩니다: +

+
    +
  • + Supabase URL: 온프레미스로 설치한 Supabase 인스턴스의 URL을 입력합니다. + (예: http://192.168.1.100:8000) +
    • +
  • + Anon Key: Supabase 대시보드의 API 설정에서 찾을 수 있는 anon/public 키를 입력합니다. +
    • +
+
+
+ + +
+ ); +}; + +export default SupabaseSettings;