Refactor form component

Refactor the form component to use a hybrid approach.

src/pages/Settings.tsx

@@ -2,6 +2,7 @@
 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';
 
@@ -52,6 +53,12 @@ const Settings = () => {
           </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>