From 56291927601b69a9f17bd302b24774ba930b5680 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 13 Oct 2024 08:16:24 +0900
Subject: [PATCH] [Refactor] Organize file structures.

---
 .../_atoms/_entry/_Entry.jsx                  |   0
 .../_atoms/_entry/_Entry.module.scss          |   0
 .../action_button/ActionButton.jsx            |   0
 .../action_button/ActionButton.module.scss    |   0
 .../checkbox/Checkbox.jsx                     |   0
 .../checkbox/Checkbox.module.scss             |   0
 .../deepl_auth_key/DeeplAuthKey.jsx           |   0
 .../deepl_auth_key/DeeplAuthKey.module.scss   |   0
 .../dropdown_menu/DropdownMenu.jsx            |   0
 .../dropdown_menu/DropdownMenu.module.scss    |   0
 .../entry/Entry.jsx                           |   0
 .../entry/Entry.module.scss                   |   0
 .../setting_box/_components/index.js          |  11 ++
 .../label_component/LabelComponent.jsx        |   0
 .../LabelComponent.module.scss                |   0
 .../radio_button/RadioButton.jsx              |   0
 .../radio_button/RadioButton.module.scss      |   0
 .../slider/Slider.jsx                         |   0
 .../slider/Slider.module.scss                 |   0
 .../switch_box/SwitchBox.jsx}                 |   4 +-
 .../switch_box/SwitchBox.module.scss}         |   0
 .../ThresholdComponent.jsx                    |   0
 .../ThresholdComponent.module.scss            |   0
 .../slider_and_meter/SliderAndMeter.jsx       |   0
 .../SliderAndMeter.module.scss                |   0
 .../threshold_entry/ThresholdEntry.jsx        |   0
 .../ThresholdEntry.module.scss                |   0
 .../volume_check_button/VolumeCheckButton.jsx |   0
 .../VolumeCheckButton.module.scss             |   0
 .../word_filter/WordFilter.jsx                |   0
 .../word_filter/WordFilter.module.scss        |   0
 .../setting_box/_templates/Templates.jsx      | 121 ++++++++++++++++
 .../Templates.module.scss}                    |  20 ---
 .../setting_box/appearance/Appearance.jsx     |  14 +-
 .../setting_box/components/useSettingBox.jsx  | 132 ------------------
 .../setting_box/device/Device.jsx             |  23 +--
 .../setting_box/others/Others.jsx             |   2 +-
 37 files changed, 157 insertions(+), 170 deletions(-)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/_atoms/_entry/_Entry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/_atoms/_entry/_Entry.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/action_button/ActionButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/action_button/ActionButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/checkbox/Checkbox.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/checkbox/Checkbox.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/deepl_auth_key/DeeplAuthKey.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/deepl_auth_key/DeeplAuthKey.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/dropdown_menu/DropdownMenu.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/dropdown_menu/DropdownMenu.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/entry/Entry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/entry/Entry.module.scss (100%)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/index.js
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/label_component/LabelComponent.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/label_component/LabelComponent.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/radio_button/RadioButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/radio_button/RadioButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/slider/Slider.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/slider/Slider.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components/switchbox/Switchbox.jsx => _components/switch_box/SwitchBox.jsx} (91%)
 rename src-ui/app/config_page/setting_section/setting_box/{components/switchbox/Switchbox.module.scss => _components/switch_box/SwitchBox.module.scss} (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/ThresholdComponent.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/ThresholdComponent.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/slider_and_meter/SliderAndMeter.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/slider_and_meter/SliderAndMeter.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/threshold_entry/ThresholdEntry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/threshold_entry/ThresholdEntry.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/volume_check_button/VolumeCheckButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/volume_check_button/VolumeCheckButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/word_filter/WordFilter.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/word_filter/WordFilter.module.scss (100%)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
 rename src-ui/app/config_page/setting_section/setting_box/{components/useSettingBox.module.scss => _templates/Templates.module.scss} (67%)
 delete mode 100644 src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

diff --git a/src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
new file mode 100644
index 00000000..41c044b4
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
similarity index 91%
rename from src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
index ba19dfd9..2d77a673 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
+++ b/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);
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
new file mode 100644
index 00000000..7cbbae33
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
similarity index 67%
rename from src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index 8eb56996..622f5224 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
+++ b/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;
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 54bb5abe..0bcab768 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/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 (
         <>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
deleted file mode 100644
index 58a874fe..00000000
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
+++ /dev/null
@@ -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,
-    };
-};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 48d7a62e..877dc019 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/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";
-import { LabelComponent } from "../components/label_component/LabelComponent";
-import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
-import { ThresholdComponent } from "../components/threshold_component/ThresholdComponent";
-import { Switchbox } from "../components/switchbox/Switchbox";
+} from "../_templates/Templates";
+
+import {
+    LabelComponent,
+    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}
                     />
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index a85c1837..3f4c3d0f 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/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 = () => {