Refactor SupabaseSettingsForm component

The SupabaseSettingsForm component was refactored into smaller, more manageable components to improve readability and maintainability.

src/components/supabase/SupabaseSettingsForm.tsx

@@ -19,11 +19,19 @@ interface SupabaseSettingsFormProps {
 }
 
 const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved }) => {
-  const [supabaseUrl, setSupabaseUrl] = useState('');
-  const [supabaseKey, setSupabaseKey] = useState('');
-  const [useProxy, setUseProxy] = useState(false);
-  const [proxyType, setProxyType] = useState('corsproxy.io');
-  const [isSaving, setIsSaving] = useState(false);
+  // 상태 관리
+  const [formState, setFormState] = useState({
+    supabaseUrl: '',
+    supabaseKey: '',
+    useProxy: false,
+    proxyType: 'corsproxy.io',
+    isSaving: false
+  });
+
+  // 상태 업데이트 핸들러
+  const updateState = (update: Partial<typeof formState>) => {
+    setFormState(prev => ({ ...prev, ...update }));
+  };
   
   // 저장된 설정 불러오기
   useEffect(() => {
@@ -32,18 +40,25 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
     const proxyEnabled = isCorsProxyEnabled();
     const savedProxyType = getProxyType();
     
-    if (savedUrl) setSupabaseUrl(savedUrl);
-    if (savedKey) setSupabaseKey(savedKey);
-    setUseProxy(proxyEnabled);
-    setProxyType(savedProxyType);
+    setFormState(prev => ({
+      ...prev,
+      supabaseUrl: savedUrl || '',
+      supabaseKey: savedKey || '',
+      useProxy: proxyEnabled,
+      proxyType: savedProxyType
+    }));
   }, []);
   
+  // URL 유효성 검사
   const validateUrl = (url: string): boolean => {
-    // URL 유효성 검사: http:// 또는 https://로 시작하는지 확인
     return /^https?:\/\/.+/.test(url);
   };
   
+  // 폼 제출 및 설정 저장
   const handleSave = () => {
+    const { supabaseUrl, supabaseKey, useProxy, proxyType } = formState;
+    
+    // 입력값 검증
     if (!supabaseUrl || !supabaseKey) {
       toast({
         title: "입력 오류",
@@ -62,7 +77,8 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
       return;
     }
     
-    setIsSaving(true);
+    // 저장 처리
+    updateState({ isSaving: true });
     
     try {
       // Supabase 설정 적용
@@ -81,38 +97,38 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
         description: "Supabase 설정을 저장하는 중 오류가 발생했습니다.",
         variant: "destructive"
       });
-      setIsSaving(false);
+      updateState({ isSaving: false });
     }
   };
   
   return (
     <div className="space-y-6">
       <SupabaseUrlInput 
-        supabaseUrl={supabaseUrl} 
-        setSupabaseUrl={setSupabaseUrl}
-        useProxy={useProxy}
+        supabaseUrl={formState.supabaseUrl} 
+        setSupabaseUrl={(url) => updateState({ supabaseUrl: url })}
+        useProxy={formState.useProxy}
       />
       
       <SupabaseKeyInput 
-        supabaseKey={supabaseKey} 
-        setSupabaseKey={setSupabaseKey} 
+        supabaseKey={formState.supabaseKey} 
+        setSupabaseKey={(key) => updateState({ supabaseKey: key })} 
       />
       
       <CorsProxyToggle 
-        useProxy={useProxy} 
-        setUseProxy={setUseProxy} 
+        useProxy={formState.useProxy} 
+        setUseProxy={(value) => updateState({ useProxy: value })} 
       />
       
-      {useProxy && (
+      {formState.useProxy && (
         <ProxyTypeSelector 
-          proxyType={proxyType} 
-          setProxyType={setProxyType} 
+          proxyType={formState.proxyType} 
+          setProxyType={(type) => updateState({ proxyType: type })} 
         />
       )}
       
       <SaveSettingsButton 
         onClick={handleSave} 
-        isSaving={isSaving} 
+        isSaving={formState.isSaving} 
       />
     </div>
   );