Refactor SyncSettings component

Refactor SyncSettings component into smaller components and extract logic into a separate hook.

src/components/sync/SyncExplanation.tsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+interface SyncExplanationProps {
+  enabled: boolean;
+}
+
+const SyncExplanation: React.FC<SyncExplanationProps> = ({ enabled }) => {
+  if (!enabled) return null;
+
+  return (
+    <Alert className="bg-amber-50 text-amber-800 border-amber-200">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>동기화 작동 방식</AlertTitle>
+      <AlertDescription className="text-sm">
+        이 기능은 양방향 동기화입니다. 로그인 후 동기화를 켜면 서버 데이터와 로컬 데이터가 병합됩니다.
+        데이터 초기화 후에도 동기화 버튼을 누르면 서버에 저장된 데이터를 다시 불러옵니다.
+      </AlertDescription>
+    </Alert>
+  );
+};
+
+export default SyncExplanation;

src/components/sync/SyncStatus.tsx

@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+
+interface SyncStatusProps {
+  enabled: boolean;
+  syncing: boolean;
+  lastSync: string;
+  user: any; // User 타입 또는 null
+  onManualSync: () => Promise<void>;
+}
+
+const SyncStatus: React.FC<SyncStatusProps> = ({
+  enabled,
+  syncing,
+  lastSync,
+  user,
+  onManualSync
+}) => {
+  const navigate = useNavigate();
+
+  if (!enabled) return null;
+
+  return (
+    <div className="space-y-3">
+      {user ? (
+        <div className="flex justify-between items-center text-sm">
+          <span className="text-muted-foreground">마지막 동기화: {lastSync}</span>
+          <button 
+            onClick={onManualSync}
+            disabled={syncing}
+            className="neuro-button py-1 px-3 flex items-center gap-1 bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
+            <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
+          </button>
+        </div>
+      ) : (
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-muted-foreground">로그인이 필요합니다</span>
+          <Button 
+            onClick={() => navigate('/login')}
+            size="sm"
+            className="py-1 px-3 bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            로그인하여 동기화
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SyncStatus;