[Refactor] Organize file structures.

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -0,0 +1,11 @@
+export { ActionButton } from "./action_button/ActionButton";
+export { Checkbox } from "./checkbox/Checkbox";
+export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
+export { Entry } from "./entry/Entry";
+export { LabelComponent } from "./label_component/LabelComponent";
+export { RadioButton } from "./radio_button/RadioButton";
+export { Slider } from "./slider/Slider";
+export { SwitchBox } from "./switch_box/SwitchBox";
+export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
+export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";

src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { useState } from "react";
-import styles from "./Switchbox.module.scss";
+import styles from "./SwitchBox.module.scss";
 
-export const Switchbox = (props) => {
+export const SwitchBox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -0,0 +1,121 @@
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu } from "@store";
+
+import {
+    LabelComponent,
+    DropdownMenu,
+    Slider,
+    Checkbox,
+    SwitchBox,
+    Entry,
+    RadioButton,
+    OpenWebpage_DeeplAuthKey,
+    DeeplAuthKey,
+    ActionButton,
+    WordFilter,
+    WordFilterListToggleComponent,
+} from "../_components/";
+
+export const useOnMouseLeaveDropdownMenu = () => {
+    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
+
+    const onMouseLeaveFunction = () => {
+        updateIsOpenedDropdownMenu("");
+    };
+
+    return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
+    return (
+        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DropdownMenu {...props} />
+        </div>
+    );
+};
+
+
+export const SliderContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Slider {...props}/>
+        </div>
+    );
+};
+
+export const CheckboxContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Checkbox {...props}/>
+        </div>
+    );
+};
+
+export const SwitchBoxContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <SwitchBox {...props}/>
+        </div>
+    );
+};
+
+export const EntryContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Entry {...props}/>
+        </div>
+    );
+};
+
+export const RadioButtonContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <RadioButton {...props}/>
+        </div>
+    );
+};
+
+export const DeeplAuthKeyContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.deepl_auth_key_label_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <OpenWebpage_DeeplAuthKey />
+            </div>
+            <DeeplAuthKey {...props}/>
+        </div>
+    );
+};
+
+export const ActionButtonContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <ActionButton {...props}/>
+        </div>
+    );
+};
+
+export const WordFilterContainer = (props) => {
+    return (
+        <div className={styles.word_filter_container}>
+            <div className={styles.word_filter_switch_section}>
+                <div className={styles.word_filter_label_wrapper}>
+                    <LabelComponent label={props.label} desc={props.desc}/>
+                </div>
+                <WordFilterListToggleComponent/>
+            </div>
+            <div className={styles.word_filter_section}>
+                <WordFilter {...props}/>
+            </div>
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -17,26 +17,6 @@
     width: 100%;
 }
 
-// .threshold_container {
-//     display: flex;
-//     width: 100%;
-//     flex-direction: column;
-//     justify-content: space-between;
-//     align-items: center;
-//     gap: 2rem;
-// }
-
-// .threshold_switch_section {
-//     display: flex;
-//     width: 100%;
-//     justify-content: space-between;
-//     align-items: center;
-// }
-
-// .threshold_section {
-//     width: 100%;
-// }
-
 .deepl_auth_key_label_section {
     max-width: 34rem;
     display: flex;

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -2,11 +2,6 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
-import { LabelComponent } from "../components/label_component/LabelComponent";
-import {
-    SliderContainer,
-    DropdownMenuContainer,
-} from "../components/useSettingBox";
 import { useStore_SelectableFontFamilyList } from "@store";
 import {
     useUiLanguage,
@@ -16,6 +11,15 @@ import {
     useTransparency,
 } from "@logics_configs";
 
+import {
+    LabelComponent
+} from "../_components/";
+
+import {
+    SliderContainer,
+    DropdownMenuContainer,
+} from "../_templates/Templates";
+
 export const Appearance = () => {
     return (
         <>

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -1,132 +0,0 @@
-import styles from "./useSettingBox.module.scss";
-import { useStore_IsOpenedDropdownMenu } from "@store";
-import clsx from "clsx";
-
-import { LabelComponent } from "./label_component/LabelComponent";
-import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
-import { Slider } from "./slider/Slider";
-import { Checkbox } from "./checkbox/Checkbox";
-import { Switchbox } from "./switchbox/Switchbox";
-import { Entry } from "./entry/Entry";
-import { RadioButton } from "./radio_button/RadioButton";
-import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-import { ActionButton } from "./action_button/ActionButton";
-import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
-
-
-export const useOnMouseLeaveDropdownMenu = () => {
-    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
-
-    const onMouseLeaveFunction = () => {
-        updateIsOpenedDropdownMenu("");
-    };
-
-    return { onMouseLeaveFunction };
-};
-
-export const DropdownMenuContainer = (props) => {
-    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
-    return (
-        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <DropdownMenu {...props} />
-        </div>
-    );
-};
-
-
-export const SliderContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Slider {...props}/>
-        </div>
-    );
-};
-
-export const CheckboxContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Checkbox {...props}/>
-        </div>
-    );
-};
-
-export const useSettingBox = () => {
-    const SwitchboxContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <Switchbox {...props}/>
-            </div>
-        );
-    };
-
-    const EntryContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <Entry {...props}/>
-            </div>
-        );
-    };
-
-    const RadioButtonContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <RadioButton {...props}/>
-            </div>
-        );
-    };
-
-    const DeeplAuthKeyContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <div className={styles.deepl_auth_key_label_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <OpenWebpage_DeeplAuthKey />
-                </div>
-                <DeeplAuthKey {...props}/>
-            </div>
-        );
-    };
-
-    const ActionButtonContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <ActionButton {...props}/>
-            </div>
-        );
-    };
-
-
-    const WordFilterContainer = (props) => {
-        return (
-            <div className={styles.word_filter_container}>
-                <div className={styles.word_filter_switch_section}>
-                    <div className={styles.word_filter_label_wrapper}>
-                        <LabelComponent label={props.label} desc={props.desc}/>
-                    </div>
-                    <WordFilterListToggleComponent/>
-                </div>
-                <div className={styles.word_filter_section}>
-                    <WordFilter {...props}/>
-                </div>
-            </div>
-        );
-    };
-
-    return {
-        CheckboxContainer,
-        SwitchboxContainer,
-        EntryContainer,
-        RadioButtonContainer,
-        DeeplAuthKeyContainer,
-        WordFilterContainer,
-        ActionButtonContainer,
-    };
-};

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
 import {
@@ -13,13 +12,17 @@ import {
     useSelectedSpeakerDevice,
     useSpeakerThreshold,
 } from "@logics_configs";
+
 import {
     useOnMouseLeaveDropdownMenu,
-} from "../components/useSettingBox";
+} from "../_templates/Templates";
-import { LabelComponent } from "../components/label_component/LabelComponent";
+
-import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
+import {
-import { ThresholdComponent } from "../components/threshold_component/ThresholdComponent";
+    LabelComponent,
-import { Switchbox } from "../components/switchbox/Switchbox";
+    DropdownMenu,
+    ThresholdComponent,
+    SwitchBox,
+} from "../_components/";
 
 export const Device = () => {
     return (
@@ -74,7 +77,7 @@ const Mic_Container = () => {
 
                     <div className={styles.device_auto_select_wrapper}>
                         <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_auto_select")}</p>
-                        <Switchbox
+                        <SwitchBox
                             variable={currentEnableAutoMicSelect}
                             toggleFunction={toggleEnableAutoMicSelect}
                         />
@@ -111,7 +114,7 @@ const Mic_Container = () => {
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()} />
-                    <Switchbox
+                    <SwitchBox
                         variable={currentEnableAutomaticMicThreshold}
                         toggleFunction={toggleEnableAutomaticMicThreshold}
                     />
@@ -165,7 +168,7 @@ const Speaker_Container = () => {
 
                     <div className={styles.device_auto_select_wrapper}>
                         <p className={styles.device_secondary_label}>{t("config_page.speaker_device.label_auto_select")}</p>
-                        <Switchbox
+                        <SwitchBox
                             variable={currentEnableAutoSpeakerSelect}
                             toggleFunction={toggleEnableAutoSpeakerSelect}
                         />
@@ -188,7 +191,7 @@ const Speaker_Container = () => {
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()}/>
-                    <Switchbox
+                    <SwitchBox
                         variable={currentEnableAutomaticSpeakerThreshold}
                         toggleFunction={toggleEnableAutomaticSpeakerThreshold}
                     />

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
+import { useSettingBox } from "../_components/useSettingBox";
 import { useConfig } from "@logics/useConfig";
 
 export const Others = () => {