Remove CharacterComponent and CharacterDetail components

- Deleted `CharacterComponent` and `CharacterDetail` files from the project.
- Refactored related logic to improve code maintainability and reduce redundancy.

components/book/settings/BookSetting.tsx

@@ -1,18 +1,25 @@
+'use client'
 import {useState} from "react";
 import BookSettingSidebar from "@/components/book/settings/BookSettingSidebar";
 import BookSettingOption from "@/components/book/settings/BookSettingOption";
+import SettingsPanel from "@/components/SettingsPanel";
+import {useTranslations} from "next-intl";
 
-export default function BookSetting() {
-    const [currentSetting, setCurrentSetting] = useState<string>('basic-information')
-    return (
-        <div
-            className={'flex justify-start bg-tertiary/90 backdrop-blur-sm rounded-2xl overflow-hidden border border-secondary/50 shadow-2xl'}>
-            <div className={'bg-secondary/30 backdrop-blur-sm w-1/4 border-r border-secondary/50'}>
-                <BookSettingSidebar selectedSetting={currentSetting} setSelectedSetting={setCurrentSetting}/>
-            </div>
-            <div className={'flex-1 setting-container bg-tertiary/50 p-6'}>
-                <BookSettingOption setting={currentSetting}/>
-            </div>
-        </div>
-    )
+interface BookSettingProps {
+    onClose: () => void;
+}
+
+export default function BookSetting({onClose}: BookSettingProps) {
+    const t = useTranslations();
+    const [currentSetting, setCurrentSetting] = useState<string>('basic-information');
+
+    return (
+        <SettingsPanel
+            title={t("controllerBar.bookSettings")}
+            sidebar={<BookSettingSidebar selectedSetting={currentSetting} setSelectedSetting={setCurrentSetting}/>}
+            onClose={onClose}
+        >
+            <BookSettingOption setting={currentSetting}/>
+        </SettingsPanel>
+    );
 }