[Refactor] Config Window: SettingBox. rename and tidy them up a bit.

src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx

@@ -1,4 +1,4 @@
-import { useSettingBox } from "../useSettingBox";
+import { useSettingBox } from "../components/useSettingBox";
 import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
 export const Appearance = () => {
     const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();

src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx

@@ -1,4 +1,3 @@
-import styles from "./SettingBox.module.scss";
 import { useSelectedConfigTabId } from "@store";
 
 import { Appearance } from "./appearance/Appearance";

src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx

@@ -0,0 +1,25 @@
+import { useSettingBox } from "../components/useSettingBox";
+import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
+export const Appearance = () => {
+    const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
+    const { currentMicDeviceListStatus } = useMicDeviceListStatus();
+    const { DropdownMenuContainer } = useSettingBox();
+
+    const selectFunction = (selected_data) => {
+        const asyncFunction = () => {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve(selected_data.selected_id);
+                }, 3000);
+            });
+        };
+        updateSelectedMicDeviceStatus(asyncFunction);
+    };
+
+    return (
+        <>
+            <DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
+            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
+        </>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx

@@ -1,6 +1,6 @@
 import styles from "./useSettingBox.module.scss";
-import { LabelComponent } from "./components/label_component/LabelComponent";
-import { DropdownMenu } from "./components/dropdown_menu/DropdownMenu";
+import { LabelComponent } from "./label_component/LabelComponent";
+import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {