fix ccolor one page

src/pages/editor/components/SettingsPanel.tsx

@@ -27,11 +27,21 @@ const BACKGROUND_TYPE_OPTIONS: { value: BackgroundType; label: string }[] = [
 ]
 
 const SettingsPanel = () => {
-  const { documentSettings, updateDocumentSettings } = useEditorStore()
+  const {
+    documentSettings,
+    pages,
+    currentPageId,
+    updateDocumentSettings,
+    updateCurrentPageBackground,
+  } = useEditorStore()
   const colorInputRef = useRef<HTMLInputElement>(null)
   const { mutateAsync: uploadFile, isPending: imageLoading } = useSingleUpload()
+  const currentPage = pages.find((page) => page.id === currentPageId)
+  const backgroundType = currentPage?.backgroundType ?? 'color'
+  const backgroundColor = currentPage?.backgroundColor ?? '#ffffff'
+  const backgroundImageUrl = currentPage?.backgroundImageUrl ?? ''
   const [uploadedPreviews, setUploadedPreviews] = useState<string[]>(
-    documentSettings.backgroundImageUrl ? [documentSettings.backgroundImageUrl] : []
+    backgroundImageUrl ? [backgroundImageUrl] : []
   )
 
   const {
@@ -39,15 +49,13 @@ const SettingsPanel = () => {
     autoPlay,
     pageFlipSound,
     leftToRightFlip,
-    backgroundType,
-    backgroundColor,
   } = documentSettings
 
   useEffect(() => {
     setUploadedPreviews(
-      documentSettings.backgroundImageUrl ? [documentSettings.backgroundImageUrl] : []
+      backgroundImageUrl ? [backgroundImageUrl] : []
     )
-  }, [documentSettings.backgroundImageUrl])
+  }, [backgroundImageUrl])
 
   const handleImageFiles = async (files: File[]) => {
     if (files.length === 0) return
@@ -59,7 +67,7 @@ const SettingsPanel = () => {
       const imageUrl = result?.data?.url
       if (!imageUrl) return
 
-      updateDocumentSettings({ backgroundImageUrl: imageUrl })
+      updateCurrentPageBackground({ backgroundImageUrl: imageUrl })
       setUploadedPreviews([imageUrl])
     } catch {
       // TODO: show error toast
@@ -69,7 +77,7 @@ const SettingsPanel = () => {
   const handlePreviewChange = (previews: string[]) => {
     setUploadedPreviews(previews)
     if (previews.length === 0) {
-      updateDocumentSettings({ backgroundImageUrl: '' })
+      updateCurrentPageBackground({ backgroundImageUrl: '' })
     }
   }
 
@@ -137,7 +145,7 @@ const SettingsPanel = () => {
             <label key={opt.value} className="flex items-center gap-1.5 cursor-pointer select-none">
               <span className="text-xs text-gray-600">{opt.label}</span>
               <div
-                onClick={() => updateDocumentSettings({ backgroundType: opt.value })}
+                onClick={() => updateCurrentPageBackground({ backgroundType: opt.value })}
                 className={clx(
                   'w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors cursor-pointer',
                   backgroundType === opt.value
@@ -161,7 +169,7 @@ const SettingsPanel = () => {
               {PRESET_COLORS.map((color) => (
                 <button
                   key={color}
-                  onClick={() => updateDocumentSettings({ backgroundColor: color })}
+                  onClick={() => updateCurrentPageBackground({ backgroundColor: color })}
                   className={clx(
                     'w-9 h-9 rounded-xl border-2 transition-all',
                     backgroundColor === color
@@ -184,7 +192,7 @@ const SettingsPanel = () => {
                   ref={colorInputRef}
                   type="color"
                   value={backgroundColor}
-                  onChange={(e) => updateDocumentSettings({ backgroundColor: e.target.value })}
+                  onChange={(e) => updateCurrentPageBackground({ backgroundColor: e.target.value })}
                   className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
                 />
               </button>