From 49bb7d7c5fa2869f4b57562309117a2ac27a64dc Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 9 Sep 2024 20:09:32 +0900
Subject: [PATCH 1/8] [Update] Config Page: Device Tab. Add threshold slider
 functionally.

---
 .../ThresholdComponent.jsx                    |  2 +-
 .../slider_and_meter/SliderAndMeter.jsx       | 26 +++++++---
 .../threshold_entry/ThresholdEntry.jsx        | 48 ++++++++++++++-----
 src-ui/logics/useConfig.js                    | 31 ++++++++++++
 src-ui/logics/useReceiveRoutes.js             |  5 ++
 src-ui/store.js                               |  4 ++
 6 files changed, 96 insertions(+), 20 deletions(-)

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
index 09bd00c5..f3c86b1e 100644
--- 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
@@ -8,7 +8,7 @@ export const ThresholdComponent = (props) => {
         <div className={styles.container}>
             <VolumeCheckButton {...props}/>
             <SliderAndMeter {...props}/>
-            <ThresholdEntry/>
+            <ThresholdEntry {...props}/>
         </div>
     );
 };
\ No newline at end of file
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
index c1076294..bf98c313 100644
--- 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
@@ -6,6 +6,7 @@ import {
 } from "@store";
 
 import { useVolume } from "@logics/useVolume";
+import { useConfig } from "@logics/useConfig";
 
 export const SliderAndMeter = (props) => {
     return (
@@ -23,13 +24,17 @@ export const SliderAndMeter = (props) => {
 
 
 const ThresholdVolumeMeter_Mic = ({min, max}) => {
-    const [threshold, setThreshold] = useState(max / 2);
-
     const { currentMicVolume } = useMicVolume();
+    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const [threshold, setThreshold] = useState(currentMicThreshold);
 
     const currentVolumeVariable = Math.min(currentMicVolume.data, max);
     const volume_width_percentage = (currentVolumeVariable / max) * 100;
 
+    const onMOuseUpFunction = () => {
+        setMicThreshold(threshold);
+    };
+
     return (
         <>
             <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
@@ -39,6 +44,7 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
                 max={max}
                 value={threshold}
                 onChange={(e) => setThreshold(e.target.value)}
+                onMouseUp={() => onMOuseUpFunction()}
                 className={styles.threshold_slider}
             />
         </>
@@ -46,23 +52,28 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
 };
 
 
-const ThresholdVolumeMeter_Speaker = ({min, max}) => {
-    const [threshold, setThreshold] = useState(max / 2);
-
+const ThresholdVolumeMeter_Speaker = ({ min, max }) => {
     const { currentSpeakerVolume } = useSpeakerVolume();
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const [threshold, setThreshold] = useState(currentSpeakerThreshold);
 
     const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
     const volume_width_percentage = (currentVolumeVariable / max) * 100;
 
+    const onMouseUpFunction = () => {
+        setSpeakerThreshold(threshold);
+    };
+
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
-                <input
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold} />
+            <input
                 type="range"
                 min={min}
                 max={max}
                 value={threshold}
                 onChange={(e) => setThreshold(e.target.value)}
+                onMouseUp={() => onMouseUpFunction()}
                 className={styles.threshold_slider}
             />
         </>
@@ -70,6 +81,7 @@ const ThresholdVolumeMeter_Speaker = ({min, max}) => {
 };
 
 
+
 const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
 
     return (
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
index ca67927e..95d9f825 100644
--- 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
@@ -1,22 +1,46 @@
 import { useState, useEffect } from "react";
 import styles from "./ThresholdEntry.module.scss";
+import { useConfig } from "@logics/useConfig";
 
-export const ThresholdEntry = () => {
-    const [input_value, setInputValue] = useState();
-
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
-    };
-
-
+export const ThresholdEntry = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.entry_wrapper}>
-                <input
-                    className={styles.entry_input_area}
-                    onChange={onChangeFunction}
-                />
+                {props.id === "mic_threshold"
+                    ? <ThresholdEntry_Mic />
+                    : <ThresholdEntry_Speaker />
+                }
             </div>
         </div>
     );
+};
+
+const ThresholdEntry_Mic = () => {
+    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const onChangeFunction = (e) => {
+        setMicThreshold(e.currentTarget.value);
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={currentMicThreshold}
+        />
+    );
+};
+
+const ThresholdEntry_Speaker = () => {
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const onChangeFunction = (e) => {
+        setSpeakerThreshold(e.currentTarget.value);
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={currentSpeakerThreshold}
+        />
+    );
 };
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index 1557c119..51f2a7a5 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -9,6 +9,8 @@ import {
 
     useEnableAutoClearMessageBox,
     useSendMessageButtonType,
+    useMicThreshold,
+    useSpeakerThreshold,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -27,6 +29,8 @@ export const useConfig = () => {
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
     const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
+    const { currentMicThreshold, updateMicThreshold } = useMicThreshold();
+    const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -37,6 +41,7 @@ export const useConfig = () => {
         },
         updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
 
+        // Device
         getMicHostList: () => {
             updateMicHostList(asyncPending);
             asyncStdoutToPython("/controller/list_mic_host");
@@ -99,6 +104,32 @@ export const useConfig = () => {
             updateSelectedMicDevice(payload.data.device);
         },
 
+        getMicThreshold: () => {
+            // updateMicThreshold(asyncPending);
+            asyncStdoutToPython("/config/input_mic_energy_threshold");
+        },
+        setMicThreshold: (mic_threshold) => {
+            // updateMicThreshold(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+        },
+        currentMicThreshold: currentMicThreshold,
+        updateMicThreshold: (payload) => {
+            updateMicThreshold(payload.data);
+        },
+
+        getSpeakerThreshold: () => {
+            // updateSpeakerThreshold(asyncPending);
+            asyncStdoutToPython("/config/input_speaker_energy_threshold");
+        },
+        setSpeakerThreshold: (speaker_threshold) => {
+            // updateSpeakerThreshold(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+        },
+        currentSpeakerThreshold: currentSpeakerThreshold,
+        updateSpeakerThreshold: (payload) => {
+            updateSpeakerThreshold(payload.data);
+        },
+
 
 
         // Others
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 18d5ecd5..76ecfd21 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -29,6 +29,8 @@ export const useReceiveRoutes = () => {
 
         updateEnableAutoClearMessageBox,
         updateSendMessageButtonType,
+        updateMicThreshold,
+        updateSpeakerThreshold,
     } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -66,6 +68,9 @@ export const useReceiveRoutes = () => {
         "/config/send_message_button_type": updateSendMessageButtonType,
         "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
+        "/controller/callback_set_mic_energy_threshold": updateMicThreshold,
+        "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index 3c57adb4..52b8b47c 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -127,6 +127,10 @@ export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpe
 export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
 export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
 
+export const { atomInstance: Atom_MicThreshold, useHook: useMicThreshold } = createAtomWithHook(0, "MicThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useSpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+
+
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",
     after: "",

From 37989d5f7a05bbcb7c5bd7139cc548ac7e197cb2 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 07:46:37 +0900
Subject: [PATCH 2/8] [Update] Config Page: Device Tab. To sync Threshold value
 between slider and entry component.

---
 .../ThresholdComponent.jsx                    | 70 ++++++++++++++++++-
 .../slider_and_meter/SliderAndMeter.jsx       | 53 ++++++--------
 .../threshold_entry/ThresholdEntry.jsx        | 20 +++---
 3 files changed, 95 insertions(+), 48 deletions(-)

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
index f3c86b1e..0ce81361 100644
--- 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
@@ -1,14 +1,78 @@
+import { useState } from "react";
+
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
+import { useConfig } from "@logics/useConfig";
 
 export const ThresholdComponent = (props) => {
     return (
         <div className={styles.container}>
-            <VolumeCheckButton {...props}/>
-            <SliderAndMeter {...props}/>
-            <ThresholdEntry {...props}/>
+            <VolumeCheckButton {...props} />
+            {props.id === "mic_threshold"
+                ? <MicComponent {...props} />
+                : <SpeakerComponent {...props} />
+            }
         </div>
     );
+};
+
+const MicComponent = (props) => {
+    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setMicThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
+};
+
+const SpeakerComponent = (props) => {
+
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setSpeakerThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
 };
\ No newline at end of file
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
index bf98c313..e22ab890 100644
--- 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
@@ -6,15 +6,14 @@ import {
 } from "@store";
 
 import { useVolume } from "@logics/useVolume";
-import { useConfig } from "@logics/useConfig";
 
 export const SliderAndMeter = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.meter_container}>
                 {props.id === "mic_threshold"
-                    ? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
-                    : <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
+                    ? <ThresholdVolumeMeter_Mic {...props}/>
+                    : <ThresholdVolumeMeter_Speaker {...props}/>
                 }
             </div>
             <DevSection {...props}/>
@@ -23,28 +22,22 @@ export const SliderAndMeter = (props) => {
 };
 
 
-const ThresholdVolumeMeter_Mic = ({min, max}) => {
+const ThresholdVolumeMeter_Mic = (props) => {
     const { currentMicVolume } = useMicVolume();
-    const { currentMicThreshold, setMicThreshold } = useConfig();
-    const [threshold, setThreshold] = useState(currentMicThreshold);
 
-    const currentVolumeVariable = Math.min(currentMicVolume.data, max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
-
-    const onMOuseUpFunction = () => {
-        setMicThreshold(threshold);
-    };
+    const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/>
             <input
                 type="range"
-                min={min}
-                max={max}
-                value={threshold}
-                onChange={(e) => setThreshold(e.target.value)}
-                onMouseUp={() => onMOuseUpFunction()}
+                min={props.min}
+                max={props.max}
+                value={props.ui_threshold}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>
@@ -52,28 +45,22 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
 };
 
 
-const ThresholdVolumeMeter_Speaker = ({ min, max }) => {
+const ThresholdVolumeMeter_Speaker = (props) => {
     const { currentSpeakerVolume } = useSpeakerVolume();
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
-    const [threshold, setThreshold] = useState(currentSpeakerThreshold);
 
-    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
-
-    const onMouseUpFunction = () => {
-        setSpeakerThreshold(threshold);
-    };
+    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold} />
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} />
             <input
                 type="range"
-                min={min}
-                max={max}
-                value={threshold}
-                onChange={(e) => setThreshold(e.target.value)}
-                onMouseUp={() => onMouseUpFunction()}
+                min={props.min}
+                max={props.max}
+                value={props.ui_threshold}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>
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
index 95d9f825..a464c7ea 100644
--- 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
@@ -1,46 +1,42 @@
-import { useState, useEffect } from "react";
 import styles from "./ThresholdEntry.module.scss";
-import { useConfig } from "@logics/useConfig";
 
 export const ThresholdEntry = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.entry_wrapper}>
                 {props.id === "mic_threshold"
-                    ? <ThresholdEntry_Mic />
-                    : <ThresholdEntry_Speaker />
+                    ? <ThresholdEntry_Mic {...props}/>
+                    : <ThresholdEntry_Speaker {...props}/>
                 }
             </div>
         </div>
     );
 };
 
-const ThresholdEntry_Mic = () => {
-    const { currentMicThreshold, setMicThreshold } = useConfig();
+const ThresholdEntry_Mic = (props) => {
     const onChangeFunction = (e) => {
-        setMicThreshold(e.currentTarget.value);
+        props.setThresholdFunction(e.currentTarget.value);
     };
 
     return (
         <input
             className={styles.entry_input_area}
             onChange={onChangeFunction}
-            value={currentMicThreshold}
+            value={props.ui_threshold}
         />
     );
 };
 
-const ThresholdEntry_Speaker = () => {
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+const ThresholdEntry_Speaker = (props) => {
     const onChangeFunction = (e) => {
-        setSpeakerThreshold(e.currentTarget.value);
+        props.setThresholdFunction(e.currentTarget.value);
     };
 
     return (
         <input
             className={styles.entry_input_area}
             onChange={onChangeFunction}
-            value={currentSpeakerThreshold}
+            value={props.ui_threshold}
         />
     );
 };
\ No newline at end of file

From ac6b898a460d6c3c77c65eedff39cd4eb8055c70 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 17:21:03 +0900
Subject: [PATCH 3/8] [Perf/bugfix] Separate custom hooks and prevent re-render
 issues. Config Page: Device Tab. threshold component. fix problem that the
 input component focused out when input something each time. Set threshold
 data when started python.

---
 src-ui/app/App.jsx                            |  35 +--
 .../setting_box/SettingBox.jsx                |   8 +-
 .../ThresholdComponent.jsx                    |  19 +-
 .../setting_box/components/useSettingBox.jsx  |  66 +++---
 .../setting_box/device/Device.jsx             | 220 +++++++++---------
 .../message_input_box/MessageInputBox.jsx     |   4 +-
 .../configs/useEnableAutoClearMessageBox.js   |  28 +++
 src-ui/logics/configs/useMicDeviceList.js     |  14 ++
 src-ui/logics/configs/useMicHostList.js       |  14 ++
 src-ui/logics/configs/useMicThreshold.js      |  17 ++
 src-ui/logics/configs/useSelectedMicDevice.js |  19 ++
 src-ui/logics/configs/useSelectedMicHost.js   |  19 ++
 .../configs/useSelectedSpeakerDevice.js       |  19 ++
 .../configs/useSendMessageButtonType.js       |  24 ++
 src-ui/logics/configs/useSoftwareVersion.js   |  14 ++
 src-ui/logics/configs/useSpeakerDeviceList.js |  14 ++
 src-ui/logics/configs/useSpeakerThreshold.js  |  17 ++
 src-ui/logics/useConfig.js                    | 169 --------------
 src-ui/logics/useMainFunction.js              |  91 ++++----
 src-ui/logics/useMessage.js                   |  74 +++---
 src-ui/logics/useReceiveRoutes.js             |  60 +++--
 src-ui/logics/useVolume.js                    |  11 +-
 vite.config.js                                |   1 +
 23 files changed, 514 insertions(+), 443 deletions(-)
 create mode 100644 src-ui/logics/configs/useEnableAutoClearMessageBox.js
 create mode 100644 src-ui/logics/configs/useMicDeviceList.js
 create mode 100644 src-ui/logics/configs/useMicHostList.js
 create mode 100644 src-ui/logics/configs/useMicThreshold.js
 create mode 100644 src-ui/logics/configs/useSelectedMicDevice.js
 create mode 100644 src-ui/logics/configs/useSelectedMicHost.js
 create mode 100644 src-ui/logics/configs/useSelectedSpeakerDevice.js
 create mode 100644 src-ui/logics/configs/useSendMessageButtonType.js
 create mode 100644 src-ui/logics/configs/useSoftwareVersion.js
 create mode 100644 src-ui/logics/configs/useSpeakerDeviceList.js
 create mode 100644 src-ui/logics/configs/useSpeakerThreshold.js
 delete mode 100644 src-ui/logics/useConfig.js

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 03ae751f..8cd46ab6 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -1,7 +1,7 @@
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
-import { useConfig } from "@logics/useConfig";
+// import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
@@ -17,22 +17,28 @@ export const App = () => {
 };
 
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const {
-        getSoftwareVersion,
-        // getMicHostList,
-        getSelectedMicHost,
-        // getMicDeviceList,
-        getSelectedMicDevice,
-        getSelectedSpeakerDevice,
-
-        getEnableAutoClearMessageBox,
-        getSendMessageButtonType,
-    } = useConfig();
+    const { getSoftwareVersion } = useSoftwareVersion();
+    const { getSelectedMicHost } = useSelectedMicHost();
+    const { getSelectedMicDevice } = useSelectedMicDevice();
+    const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { getMicThreshold } = useMicThreshold();
+    const { getSpeakerThreshold } = useSpeakerThreshold();
+    const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { getSendMessageButtonType } = useSendMessageButtonType();
 
 
     useEffect(() => {
@@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                // getMicHostList();
                 getSelectedMicHost();
-                // getMicDeviceList();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();
 
+                getMicThreshold();
+                getSpeakerThreshold();
+
                 getEnableAutoClearMessageBox();
                 getSendMessageButtonType();
             }).catch((err) => {
diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
index 90669da1..2969622e 100644
--- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -2,16 +2,16 @@ import { useSelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
-import { Others } from "./others/Others";
-import { AboutVrct } from "./about_vrct/AboutVrct";
+// import { Others } from "./others/Others";
+// import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useSelectedConfigTabId();
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
-        case "others":
-            return <Others />;
+        // case "others":
+        //     return <Others />;
         // case "appearance":
         //     return <Appearance />;
         // case "about_vrct":
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
index 0ce81361..1670b73f 100644
--- 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
@@ -1,10 +1,8 @@
-import { useState } from "react";
-
+import { useEffect, useState } from "react";
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
-import { useConfig } from "@logics/useConfig";
 
 export const ThresholdComponent = (props) => {
     return (
@@ -18,10 +16,15 @@ export const ThresholdComponent = (props) => {
     );
 };
 
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const MicComponent = (props) => {
-    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const { currentMicThreshold, setMicThreshold } = useMicThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentMicThreshold);
+    }, [currentMicThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };
@@ -47,11 +50,15 @@ const MicComponent = (props) => {
     );
 };
 
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const SpeakerComponent = (props) => {
-
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentSpeakerThreshold);
+    }, [currentSpeakerThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };
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
index 6fd300da..5c1dc118 100644
--- 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
@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
-export const useSettingBox = () => {
+
+const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
 
-    const DropdownMenuContainer = (props) => {
-        const onMouseLeaveFunction = () => {
-            updateIsOpenedDropdownMenu("");
-        };
-
-        return (
-            <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <DropdownMenu {...props}/>
-            </div>
-        );
+    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 ThresholdContainer = (props) => {
+    return (
+        <div className={styles.threshold_container}>
+            <div className={styles.threshold_switch_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Switchbox {...props}/>
+            </div>
+            <div className={styles.threshold_section}>
+                <ThresholdComponent {...props}/>
+            </div>
+        </div>
+    );
+};
+
+
+export const useSettingBox = () => {
+    console.log("useSettingBox______________");
+
+
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
         );
     };
 
-    const ThresholdContainer = (props) => {
-        return (
-            <div className={styles.threshold_container}>
-                <div className={styles.threshold_switch_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <Switchbox {...props}/>
-                </div>
-                <div className={styles.threshold_section}>
-                    <ThresholdComponent {...props}/>
-                </div>
-            </div>
-        );
-    };
-
     const DeeplAuthKeyContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
     };
 
     return {
-        DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
-        ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,
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 731e288d..0354f438 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,119 +1,119 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
 import {
-    useMicHostList,
-    useSelectedMicHost,
-    useSelectedMicDevice,
-    useMicDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerDeviceList,
-} from "@store";
-
-import { useConfig } from "@logics/useConfig";
-
+    DropdownMenuContainer,
+    ThresholdContainer,
+} from "../components/useSettingBox";
 export const Device = () => {
-    const { t } = useTranslation();
-    const {
-        DropdownMenuContainer,
-        ThresholdContainer,
-    } = useSettingBox();
-
-
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicHost } = useSelectedMicHost();
-
-    const { currentMicDeviceList } = useMicDeviceList();
-    const { currentSelectedMicDevice } = useSelectedMicDevice();
-
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
-    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-
-    const {
-        setSelectedMicHost,
-        setSelectedMicDevice,
-        getMicHostList,
-        getMicDeviceList,
-        setSelectedSpeakerDevice,
-        getSpeakerDeviceList,
-    } = useConfig();
-
-    const selectFunction = (selected_data) => {
-        switch (selected_data.dropdown_id) {
-            case "mic_host":
-                setSelectedMicHost(selected_data.selected_id);
-                break;
-
-            case "mic_device":
-                setSelectedMicDevice(selected_data.selected_id);
-                break;
-
-            case "speaker_device":
-                setSelectedSpeakerDevice(selected_data.selected_id);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    // const volumeCheckStartFunction_Mic = () => {
-    //     volumeCheckStart_Mic();
-    // };
-    // const volumeCheckStopFunction_Mic = () => {
-    //     volumeCheckStop_Mic();
-    // };
-
 
     return (
         <>
-            <DropdownMenuContainer
-                dropdown_id="mic_host"
-                label={t("config_page.mic_host.label")}
-                selected_id={currentSelectedMicHost.data}
-                list={currentMicHostList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicHostList}
-                state={currentSelectedMicHost.state}
-            />
-
-            <DropdownMenuContainer
-                dropdown_id="mic_device"
-                label={t("config_page.mic_device.label")}
-                selected_id={currentSelectedMicDevice.data}
-                list={currentMicDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicDeviceList}
-                state={currentSelectedMicDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
-                id="mic_threshold"
-                min="0"
-                max="2000"
-                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
-                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
-            />
-
-
-            <DropdownMenuContainer
-                dropdown_id="speaker_device"
-                label={t("config_page.speaker_device.label")}
-                selected_id={currentSelectedSpeakerDevice.data}
-                list={currentSpeakerDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getSpeakerDeviceList}
-                state={currentSelectedSpeakerDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
-                id="speaker_threshold"
-                min="0"
-                max="4000"
-            />
+            <DropdownMenuContainer_MicHost />
+            <DropdownMenuContainer_MicDevice />
+            <ThresholdContainer_Mic />
+            <DropdownMenuContainer_SpeakerDevice />
+            <ThresholdContainer_Speaker />
         </>
     );
+};
+
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+const DropdownMenuContainer_MicHost = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
+    const { currentMicHostList, getMicHostList } = useMicHostList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicHost(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_host"
+            label={t("config_page.mic_host.label")}
+            selected_id={currentSelectedMicHost.data}
+            list={currentMicHostList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicHostList}
+            state={currentSelectedMicHost.state}
+        />
+    );
+};
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+const DropdownMenuContainer_MicDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+    const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_device"
+            label={t("config_page.mic_device.label")}
+            selected_id={currentSelectedMicDevice.data}
+            list={currentMicDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicDeviceList}
+            state={currentSelectedMicDevice.state}
+        />
+    );
+};
+
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+const DropdownMenuContainer_SpeakerDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedSpeakerDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="speaker_device"
+            label={t("config_page.speaker_device.label")}
+            selected_id={currentSelectedSpeakerDevice.data}
+            list={currentSpeakerDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getSpeakerDeviceList}
+            state={currentSelectedSpeakerDevice.state}
+        />
+    );
+};
+
+const ThresholdContainer_Mic = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+            id="mic_threshold"
+            min="0"
+            max="2000"
+        />
+    );
+};
+
+const ThresholdContainer_Speaker = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
+            id="speaker_threshold"
+            min="0"
+            max="4000"
+        />
+    );
 };
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index dfffc2cb..4c987dab 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -4,14 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
 import { store, useEnableAutoClearMessageBox } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
-import { useConfig } from "@logics/useConfig";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
     const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType } = useConfig();
+    const { currentSendMessageButtonType } = useSendMessageButtonType();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();
diff --git a/src-ui/logics/configs/useEnableAutoClearMessageBox.js b/src-ui/logics/configs/useEnableAutoClearMessageBox.js
new file mode 100644
index 00000000..bd115357
--- /dev/null
+++ b/src-ui/logics/configs/useEnableAutoClearMessageBox.js
@@ -0,0 +1,28 @@
+import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
+
+    const getEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        if (currentEnableAutoClearMessageBox.data) {
+            asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+        }
+    };
+
+    return {
+        getEnableAutoClearMessageBox,
+        toggleEnableAutoClearMessageBox,
+        currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicDeviceList.js b/src-ui/logics/configs/useMicDeviceList.js
new file mode 100644
index 00000000..201bcd19
--- /dev/null
+++ b/src-ui/logics/configs/useMicDeviceList.js
@@ -0,0 +1,14 @@
+import { useMicDeviceList as useStoreMicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
+
+    const getMicDeviceList = () => {
+        updateMicDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_device");
+    };
+
+    return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicHostList.js b/src-ui/logics/configs/useMicHostList.js
new file mode 100644
index 00000000..08a33be2
--- /dev/null
+++ b/src-ui/logics/configs/useMicHostList.js
@@ -0,0 +1,14 @@
+import { useMicHostList as useStoreMicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
+
+    const getMicHostList = () => {
+        updateMicHostList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_host");
+    };
+
+    return { currentMicHostList, getMicHostList, updateMicHostList };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js
new file mode 100644
index 00000000..bdcc4b36
--- /dev/null
+++ b/src-ui/logics/configs/useMicThreshold.js
@@ -0,0 +1,17 @@
+import { useMicThreshold as useStoreMicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
+
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/config/input_mic_energy_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+    };
+
+    return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedMicDevice.js b/src-ui/logics/configs/useSelectedMicDevice.js
new file mode 100644
index 00000000..4e4eeb06
--- /dev/null
+++ b/src-ui/logics/configs/useSelectedMicDevice.js
@@ -0,0 +1,19 @@
+import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
+
+    const getSelectedMicDevice = () => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+    };
+
+    return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedMicHost.js b/src-ui/logics/configs/useSelectedMicHost.js
new file mode 100644
index 00000000..108a4ef3
--- /dev/null
+++ b/src-ui/logics/configs/useSelectedMicHost.js
@@ -0,0 +1,19 @@
+import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
+
+    const getSelectedMicHost = () => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+    };
+
+    return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedSpeakerDevice.js b/src-ui/logics/configs/useSelectedSpeakerDevice.js
new file mode 100644
index 00000000..2437e55d
--- /dev/null
+++ b/src-ui/logics/configs/useSelectedSpeakerDevice.js
@@ -0,0 +1,19 @@
+import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSendMessageButtonType.js b/src-ui/logics/configs/useSendMessageButtonType.js
new file mode 100644
index 00000000..479469fc
--- /dev/null
+++ b/src-ui/logics/configs/useSendMessageButtonType.js
@@ -0,0 +1,24 @@
+import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (selected_type) => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+    };
+
+    return {
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        currentSendMessageButtonType,
+        updateSendMessageButtonType
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSoftwareVersion.js b/src-ui/logics/configs/useSoftwareVersion.js
new file mode 100644
index 00000000..f215084e
--- /dev/null
+++ b/src-ui/logics/configs/useSoftwareVersion.js
@@ -0,0 +1,14 @@
+import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
+
+    const getSoftwareVersion = () => {
+        updateSoftwareVersion(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/version");
+    };
+
+    return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSpeakerDeviceList.js b/src-ui/logics/configs/useSpeakerDeviceList.js
new file mode 100644
index 00000000..1027d8d7
--- /dev/null
+++ b/src-ui/logics/configs/useSpeakerDeviceList.js
@@ -0,0 +1,14 @@
+import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
+
+    const getSpeakerDeviceList = () => {
+        updateSpeakerDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_speaker_device");
+    };
+
+    return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js
new file mode 100644
index 00000000..87d239da
--- /dev/null
+++ b/src-ui/logics/configs/useSpeakerThreshold.js
@@ -0,0 +1,17 @@
+import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
+
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/config/input_speaker_energy_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+    };
+
+    return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
deleted file mode 100644
index 51f2a7a5..00000000
--- a/src-ui/logics/useConfig.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import {
-    useSoftwareVersion,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-
-    useEnableAutoClearMessageBox,
-    useSendMessageButtonType,
-    useMicThreshold,
-    useSpeakerThreshold,
-} from "@store";
-
-import { useStdoutToPython } from "./useStdoutToPython";
-
-import { arrayToObject } from "@utils/arrayToObject";
-
-export const useConfig = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-
-    const { updateSoftwareVersion } = useSoftwareVersion();
-    const { updateMicHostList } = useMicHostList();
-    const { updateSelectedMicHost } = useSelectedMicHost();
-    const { updateMicDeviceList } = useMicDeviceList();
-    const { updateSelectedMicDevice } = useSelectedMicDevice();
-    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
-    const { currentMicThreshold, updateMicThreshold } = useMicThreshold();
-    const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold();
-
-
-    const asyncPending = () => new Promise(() => {});
-    return {
-        getSoftwareVersion: () => {
-            updateSoftwareVersion(asyncPending);
-            asyncStdoutToPython("/config/version");
-        },
-        updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
-
-        // Device
-        getMicHostList: () => {
-            updateMicHostList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_host");
-        },
-        updateMicHostList: (payload) => {
-            updateMicHostList(arrayToObject(payload.data));
-        },
-        getSelectedMicHost: () => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_host");
-        },
-        updateSelectedMicHost: (payload) => {
-            updateSelectedMicHost(payload.data);
-        },
-        setSelectedMicHost: (selected_mic_host) => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
-        },
-
-        getMicDeviceList: () => {
-            updateMicDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_device");
-        },
-        updateMicDeviceList: (payload) => {
-            updateMicDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedMicDevice: () => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_device");
-        },
-        updateSelectedMicDevice: (payload) => {
-            updateSelectedMicDevice(payload.data);
-        },
-        setSelectedMicDevice: (selected_mic_device) => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
-        },
-
-        getSpeakerDeviceList: () => {
-            updateSpeakerDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_speaker_device");
-        },
-        updateSpeakerDeviceList: (payload) => {
-            updateSpeakerDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedSpeakerDevice: () => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_speaker_device");
-        },
-        updateSelectedSpeakerDevice: (payload) => {
-            updateSelectedSpeakerDevice(payload.data);
-        },
-        setSelectedSpeakerDevice: (selected_speaker_device) => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
-        },
-
-        updateMicHostAndDevice: (payload) => {
-            updateSelectedMicHost(payload.data.host);
-            updateSelectedMicDevice(payload.data.device);
-        },
-
-        getMicThreshold: () => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_mic_energy_threshold");
-        },
-        setMicThreshold: (mic_threshold) => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
-        },
-        currentMicThreshold: currentMicThreshold,
-        updateMicThreshold: (payload) => {
-            updateMicThreshold(payload.data);
-        },
-
-        getSpeakerThreshold: () => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_speaker_energy_threshold");
-        },
-        setSpeakerThreshold: (speaker_threshold) => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
-        },
-        currentSpeakerThreshold: currentSpeakerThreshold,
-        updateSpeakerThreshold: (payload) => {
-            updateSpeakerThreshold(payload.data);
-        },
-
-
-
-        // Others
-        getEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            asyncStdoutToPython("/config/enable_auto_clear_message_box");
-        },
-        toggleEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            if (currentEnableAutoClearMessageBox.data) {
-                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
-            }
-        },
-        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox: (payload) => {
-            updateEnableAutoClearMessageBox(payload.data);
-        },
-
-        getSendMessageButtonType: () => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/config/send_message_button_type");
-        },
-        setSendMessageButtonType: (selected_type) => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
-        },
-        currentSendMessageButtonType: currentSendMessageButtonType,
-        updateSendMessageButtonType: (payload) => {
-            updateSendMessageButtonType(payload.data);
-        },
-
-
-
-    };
-};
\ No newline at end of file
diff --git a/src-ui/logics/useMainFunction.js b/src-ui/logics/useMainFunction.js
index c91d6785..f6ffa55a 100644
--- a/src-ui/logics/useMainFunction.js
+++ b/src-ui/logics/useMainFunction.js
@@ -7,7 +7,7 @@ import {
     useForegroundStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMainFunction = () => {
     const {
@@ -33,53 +33,56 @@ export const useMainFunction = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const asyncPending = () => new Promise(() => {});
+    const toggleTranslation = () => {
+        asyncUpdateTranslationStatus(asyncPending);
+        if (currentTranslationStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_translation");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_translation");
+        }
+    };
+
+    const toggleTranscriptionSend = () => {
+        asyncUpdateTranscriptionSendStatus(asyncPending);
+        if (currentTranscriptionSendStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_send");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_send");
+        }
+    };
+
+    const toggleTranscriptionReceive = () => {
+        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        if (currentTranscriptionReceiveStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_receive");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_receive");
+        }
+    };
+
+    const toggleForeground = () => {
+        const main_page = getCurrent();
+        const is_foreground_enabled = !currentForegroundStatus.data;
+        main_page.setAlwaysOnTop(is_foreground_enabled);
+        updateForegroundStatus(is_foreground_enabled);
+    };
+
     return {
-        toggleTranslation: () => {
-            asyncUpdateTranslationStatus(asyncPending);
-            if (currentTranslationStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_translation");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_translation");
-            }
-        },
-        currentTranslationStatus: currentTranslationStatus,
-        updateTranslationStatus: (payload) => {
-            updateTranslationStatus(payload.data);
-        },
+        currentTranslationStatus,
+        toggleTranslation,
+        updateTranslationStatus,
 
-        toggleTranscriptionSend: () => {
-            asyncUpdateTranscriptionSendStatus(asyncPending);
-            if (currentTranscriptionSendStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_transcription_send");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_send");
-            }
-        },
-        currentTranscriptionSendStatus: currentTranscriptionSendStatus,
-        updateTranscriptionSendStatus: (payload) => {
-            updateTranscriptionSendStatus(payload.data);
-        },
+        currentTranscriptionSendStatus,
+        toggleTranscriptionSend,
+        updateTranscriptionSendStatus,
 
-        toggleTranscriptionReceive: () => {
-            asyncUpdateTranscriptionReceiveStatus(asyncPending);
-            if (currentTranscriptionReceiveStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_transcription_receive");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_receive");
-            }
-        },
-        currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
-        updateTranscriptionReceiveStatus: (payload) => {
-            updateTranscriptionReceiveStatus(payload.data);
-        },
+        currentTranscriptionReceiveStatus,
+        toggleTranscriptionReceive,
+        updateTranscriptionReceiveStatus,
 
-        toggleForeground: () => {
-            const main_page = getCurrent();
-            const is_foreground_enabled = !currentForegroundStatus.data;
-            main_page.setAlwaysOnTop(is_foreground_enabled);
-            updateForegroundStatus(is_foreground_enabled);
+        currentForegroundStatus,
+        toggleForeground,
+        updateForegroundStatus,
 
-        },
-        currentForegroundStatus: currentForegroundStatus,
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useMessage.js b/src-ui/logics/useMessage.js
index 089a72b4..1ff5c448 100644
--- a/src-ui/logics/useMessage.js
+++ b/src-ui/logics/useMessage.js
@@ -2,48 +2,50 @@ import {
     useMessageLogsStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMessage = () => {
     const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
+    const sendMessage = (message) => {
+        const uuid = crypto.randomUUID();
+        const send_message_object = {
+            id: uuid,
+            message: message,
+        };
+        asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
+
+        addMessageLogsStatus({
+            id: uuid,
+            category: "sent",
+            status: "pending",
+            created_at: generateTimeData(),
+            messages: {
+                original: message,
+                translated: [],
+            },
+        });
+    };
+
+    const updateSentMessageLogById = (payload) => {
+        updateMessageLogsStatus(updateItemById(data.id, payload.translation));
+    };
+    const addSentMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "sent");
+        addMessageLogsStatus(message_object);
+    };
+    const addReceivedMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "received");
+        addMessageLogsStatus(message_object);
+    };
+
     return {
-        sendMessage: (message) => {
-            const uuid = crypto.randomUUID();
-            const send_message_object = {
-                id: uuid,
-                message: message,
-            };
-            asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
-
-            addMessageLogsStatus({
-                id: uuid,
-                category: "sent",
-                status: "pending",
-                created_at: generateTimeData(),
-                messages: {
-                    original: message,
-                    translated: [],
-                },
-            });
-        },
-        currentMessageLogsStatus: currentMessageLogsStatus,
-
-        updateSentMessageLog: (payload) => {
-            const data = payload.data;
-            updateMessageLogsStatus(updateItemById(data.id, data.translation));
-        },
-        addSentMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "sent");
-            addMessageLogsStatus(message_object);
-        },
-        addReceivedMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "received");
-            addMessageLogsStatus(message_object);
-        },
+        currentMessageLogsStatus,
+        sendMessage,
+        updateSentMessageLogById,
+        addSentMessageLog,
+        addReceivedMessageLog,
     };
 };
 
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 76ecfd21..e57cd785 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -1,8 +1,21 @@
+import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
-import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
 import { useVolume } from "./useVolume";
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
+
 export const useReceiveRoutes = () => {
     const {
         updateTranslationStatus,
@@ -11,27 +24,23 @@ export const useReceiveRoutes = () => {
     } = useMainFunction();
 
     const {
-        updateSentMessageLog,
+        updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
 
-    const {
-        updateSoftwareVersion,
-        updateMicHostList,
-        updateSelectedMicHost,
-        updateMicDeviceList,
-        updateSelectedMicDevice,
-        updateMicHostAndDevice,
+    const { updateSoftwareVersion } = useSoftwareVersion();
+    const { updateMicHostList } = useMicHostList();
+    const { updateSelectedMicHost } = useSelectedMicHost();
+    const { updateMicDeviceList } = useMicDeviceList();
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { updateMicThreshold } = useMicThreshold();
+    const { updateSpeakerThreshold } = useSpeakerThreshold();
+    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { updateSendMessageButtonType } = useSendMessageButtonType();
 
-        updateSpeakerDeviceList,
-        updateSelectedSpeakerDevice,
-
-        updateEnableAutoClearMessageBox,
-        updateSendMessageButtonType,
-        updateMicThreshold,
-        updateSpeakerThreshold,
-    } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
 
@@ -46,15 +55,18 @@ export const useReceiveRoutes = () => {
 
         "/config/version": updateSoftwareVersion,
 
-        "/controller/list_mic_host": updateMicHostList,
+        "/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
         "/config/choice_mic_host": updateSelectedMicHost,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+        "/controller/callback_set_mic_host": (payload) => {
+            updateSelectedMicHost(payload.host);
+            updateSelectedMicDevice(payload.device);
+        },
 
-        "/controller/list_mic_device": updateMicDeviceList,
+        "/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
         "/config/choice_mic_device": updateSelectedMicDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
-        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
@@ -68,11 +80,13 @@ export const useReceiveRoutes = () => {
         "/config/send_message_button_type": updateSendMessageButtonType,
         "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
+        "/config/input_mic_energy_threshold": updateMicThreshold,
         "/controller/callback_set_mic_energy_threshold": updateMicThreshold,
+        "/config/input_speaker_energy_threshold": updateSpeakerThreshold,
         "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
 
 
-        "/controller/callback_messagebox_send": updateSentMessageLog,
+        "/controller/callback_messagebox_send": updateSentMessageLogById,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
     };
@@ -81,7 +95,7 @@ export const useReceiveRoutes = () => {
         switch (parsed_data.status) {
             case 200:
                 const route = routes[parsed_data.endpoint];
-                (route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
+                (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
                 break;
 
             case 348:
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
index 674a02e1..cde153bc 100644
--- a/src-ui/logics/useVolume.js
+++ b/src-ui/logics/useVolume.js
@@ -3,28 +3,25 @@ import {
     useSpeakerVolume,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
-
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useMicVolume();
     const { updateSpeakerVolume } = useSpeakerVolume();
 
-    // const asyncPending = () => new Promise(() => {});
     return {
         volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
         volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
         updateVolumeVariable_Mic: (payload) => {
-            updateMicVolume(payload.data);
+            updateMicVolume(payload);
         },
 
         volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
         volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
         updateVolumeVariable_Speaker: (payload) => {
-            updateSpeakerVolume(payload.data);
-        }
-
+            updateSpeakerVolume(payload);
+        },
 
     };
 };
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 0aa096e4..35329ef6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -40,6 +40,7 @@ export default defineConfig(async () => ({
             "@images": path.resolve(__dirname, "src-ui/assets"),
             "@utils": path.resolve(__dirname, "src-ui/utils"),
             "@logics": path.resolve(__dirname, "src-ui/logics"),
+            "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
         },
     },
 

From f0cadb1335e7bdefd5a3029d174ded8dd82ed3ff Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 18:10:52 +0900
Subject: [PATCH 4/8] [bugfix] Main Page: Message Log. fix format error that
 receive from python.

---
 src-ui/logics/useMessage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/logics/useMessage.js b/src-ui/logics/useMessage.js
index 1ff5c448..8c441ff5 100644
--- a/src-ui/logics/useMessage.js
+++ b/src-ui/logics/useMessage.js
@@ -29,7 +29,7 @@ export const useMessage = () => {
     };
 
     const updateSentMessageLogById = (payload) => {
-        updateMessageLogsStatus(updateItemById(data.id, payload.translation));
+        updateMessageLogsStatus(updateItemById(payload.id, payload.translation));
     };
     const addSentMessageLog = (payload) => {
         const message_object = generateMessageObject(payload, "sent");

From be7e77787ee9af7dafcd50c49f0bf5b86c528b63 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 20:08:32 +0900
Subject: [PATCH 5/8] [Update] Config Page: Device Tab. Threshold section. Add
 validation that when input area to be blank, put 0 automatically.

---
 .../threshold_entry/ThresholdEntry.jsx               | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

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
index a464c7ea..9b5b5e62 100644
--- 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
@@ -15,7 +15,11 @@ export const ThresholdEntry = (props) => {
 
 const ThresholdEntry_Mic = (props) => {
     const onChangeFunction = (e) => {
-        props.setThresholdFunction(e.currentTarget.value);
+        if (e.currentTarget.value === "") {
+            props.setThresholdFunction("0");
+        } else {
+            props.setThresholdFunction(e.currentTarget.value);
+        }
     };
 
     return (
@@ -29,7 +33,11 @@ const ThresholdEntry_Mic = (props) => {
 
 const ThresholdEntry_Speaker = (props) => {
     const onChangeFunction = (e) => {
-        props.setThresholdFunction(e.currentTarget.value);
+        if (e.currentTarget.value === "") {
+            props.setThresholdFunction("0");
+        } else {
+            props.setThresholdFunction(e.currentTarget.value);
+        }
     };
 
     return (

From b4d164e116cd83f90de38bb0bc377e2efffaed5a Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 20:16:22 +0900
Subject: [PATCH 6/8] [bugfix] Config Page: Device Tab. ThresholdEntry. fix
 that can see green background color that I forgot to remove.

---
 .../threshold_entry/ThresholdEntry.module.scss                   | 1 -
 1 file changed, 1 deletion(-)

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
index acc18f07..cb6e470a 100644
--- 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
@@ -1,5 +1,4 @@
 .container {
-    background-color: green;
 }
 
 .entry_wrapper {

From e1d8f598905eb60291dfe9fd814781b228850497 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 10 Sep 2024 21:11:15 +0900
Subject: [PATCH 7/8] [Refactor] Change the function names.

---
 src-ui/app/config_page/ConfigPage.jsx         |  2 +-
 .../setting_box/SettingBox.jsx                |  4 +-
 .../setting_box/about_vrct/AboutVrct.jsx      |  6 +-
 .../PosterShowcaseWorldsContents.jsx          |  6 +-
 .../posters_contents/PostersContents.jsx      | 10 +--
 .../setting_box/appearance/Appearance.jsx     |  6 +-
 .../components/dropdown_menu/DropdownMenu.jsx |  4 +-
 .../message_format/MessageFormat.jsx          | 22 +++---
 .../slider_and_meter/SliderAndMeter.jsx       |  8 +-
 .../setting_box/components/useSettingBox.jsx  |  4 +-
 .../components/word_filter/WordFilter.jsx     | 10 +--
 .../setting_box/others/Others.jsx             |  2 +-
 .../sidebar_section/SidebarSection.jsx        |  4 +-
 src-ui/app/config_page/topbar/Topbar.jsx      |  4 +-
 .../section_title_box/SectionTitleBox.jsx     |  4 +-
 src-ui/app/main_page/MainPage.jsx             |  4 +-
 .../main_page/main_section/MainSection.jsx    |  4 +-
 .../LanguageSelectorTopBar.jsx                |  4 +-
 .../message_container/log_box/LogBox.jsx      |  8 +-
 .../message_input_box/MessageInputBox.jsx     |  3 +-
 .../SidebarCompactModeButton.jsx              |  8 +-
 .../sidebar_section/SidebarSection.jsx        |  8 +-
 .../language_settings/LanguageSettings.jsx    |  8 +-
 .../preset_tab_selector/PresetTabSelector.jsx |  8 +-
 .../TranslatorSelectorOpenButton.jsx          | 12 +--
 .../TranslatorSelector.jsx                    | 14 ++--
 .../main_page/sidebar_section/logo/Logo.jsx   |  6 +-
 .../MainFunctionSwitch.jsx                    |  6 +-
 .../open_settings/OpenSettings.jsx            |  4 +-
 .../configs/useEnableAutoClearMessageBox.js   |  8 +-
 src-ui/logics/configs/useMicDeviceList.js     | 10 ++-
 src-ui/logics/configs/useMicHostList.js       | 10 ++-
 src-ui/logics/configs/useMicThreshold.js      | 11 ++-
 src-ui/logics/configs/useSelectedMicDevice.js | 11 ++-
 src-ui/logics/configs/useSelectedMicHost.js   | 11 ++-
 .../configs/useSelectedSpeakerDevice.js       | 11 ++-
 .../configs/useSendMessageButtonType.js       |  8 +-
 src-ui/logics/configs/useSoftwareVersion.js   | 10 ++-
 src-ui/logics/configs/useSpeakerDeviceList.js | 10 ++-
 src-ui/logics/configs/useSpeakerThreshold.js  | 11 ++-
 src-ui/logics/useMainFunction.js              | 16 ++--
 src-ui/logics/useMessage.js                   | 14 ++--
 src-ui/logics/useVolume.js                    |  8 +-
 src-ui/logics/useWindow.js                    |  4 +-
 src-ui/store.js                               | 75 +++++++++----------
 45 files changed, 230 insertions(+), 191 deletions(-)

diff --git a/src-ui/app/config_page/ConfigPage.jsx b/src-ui/app/config_page/ConfigPage.jsx
index 2756e520..8c679d0f 100644
--- a/src-ui/app/config_page/ConfigPage.jsx
+++ b/src-ui/app/config_page/ConfigPage.jsx
@@ -4,7 +4,7 @@ import { Topbar } from "./topbar/Topbar.jsx";
 import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
 import { SettingSection } from "./setting_section/SettingSection.jsx";
 
-import { useSoftwareVersion  } from "@store";
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
 import { useTranslation } from "react-i18next";
 
 export const ConfigPage = () => {
diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
index 2969622e..4e9dbb04 100644
--- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -1,4 +1,4 @@
-import { useSelectedConfigTabId } from "@store";
+import { useStore_SelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
@@ -6,7 +6,7 @@ import { Appearance } from "./appearance/Appearance";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
-    const { currentSelectedConfigTabId } = useSelectedConfigTabId();
+    const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx
index 201e9c1c..a00f0424 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx
@@ -19,12 +19,12 @@ import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png";
 
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { useUiLanguageStatus } from "@store";
+import { useStore_UiLanguage } from "@store";
 import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
 
 export const AboutVrct = () => {
     const { t } = useTranslation();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentUiLanguage } = useStore_UiLanguage();
     return (
         <div className={styles.container}>
             <div className={styles.dev_section}>
@@ -74,7 +74,7 @@ export const AboutVrct = () => {
                 <img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
                 <img src={special_thanks_members} className={styles.special_thanks_members_img} />
                 {
-                    currentUiLanguageStatus === "ja"
+                    currentUiLanguage === "ja"
                     ? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
                     : <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
                 }
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
index e18b27e3..1863b42b 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import styles from "./PosterShowcaseWorldsContents.module.scss";
-import { usePosterShowcaseWorldPageIndex } from "@store";
+import { useStore_PosterShowcaseWorldPageIndex } from "@store";
 const images = import.meta.glob("@images/about_vrct/showcased_worlds/*.{png,jpg,jpeg,svg}", { eager: true });
 
 const getImageByFileName = (file_name) => {
@@ -12,7 +12,7 @@ import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
 import { chunkArray } from "@utils/chunkArray";
 
 export const PosterShowcaseWorldsContents = () => {
-    const { currentPosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
+    const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
     const poster_showcase_world_images = poster_showcase_worlds_settings.map((setting) => ({
         img: getImageByFileName(setting.image_file_name),
         x_post_num: setting.x_post_num
@@ -59,7 +59,7 @@ import chat_white_square from "@images/chato_white_square.png";
 import { useEffect } from "react";
 import { randomIntMinMax } from "@utils/randomIntMinMax";
 const PosterShowcaseWorldsPagination = ({ page_length }) => {
-    const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
+    const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
 
     useEffect(() => {
         updatePosterShowcaseWorldPageIndex(randomIntMinMax(page_length -1));
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
index 575a874c..886f40a3 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import styles from "./PostersContents.module.scss";
-import { useUiLanguageStatus } from "@store";
+import { useStore_UiLanguage } from "@store";
 
-import { useVrctPosterIndex } from "@store";
+import { useStore_VrctPosterIndex } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import iya_vrct_poster_ja from "@images/about_vrct/vrct_posters/iya_vrct_poster_ja.png";
@@ -29,8 +29,8 @@ import poster_images_authors_m_ja from "@images/about_vrct/vrct_posters/authors/
 import poster_images_authors_m_en from "@images/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png";
 
 export const PostersContents = () => {
-    const { currentVrctPosterIndex, updateVrctPosterIndex } = useVrctPosterIndex();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentVrctPosterIndex, updateVrctPosterIndex } = useStore_VrctPosterIndex();
+    const { currentUiLanguage } = useStore_UiLanguage();
 
 
     const updateIndex = (delta) => {
@@ -60,7 +60,7 @@ export const PostersContents = () => {
                 </button>
             </div>
             {
-                currentUiLanguageStatus === "ja"
+                currentUiLanguage === "ja"
                 ? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
                 : <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
             }
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 fe89e3c6..33f96c08 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,11 @@ import { useTranslation } from "react-i18next";
 import FolderOpenSvg from "@images/folder_open.svg?react";
 
 import { useSettingBox } from "../components/useSettingBox";
-import { useSelectedMicDevice, useMicDeviceList } from "@store";
+import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store";
 export const Appearance = () => {
     const { t } = useTranslation();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
-    const { currentMicDeviceList } = useMicDeviceList();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
+    const { currentMicDeviceList } = useStore_MicDeviceList();
     const {
         DropdownMenuContainer,
         SliderContainer,
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
index 8e34ffad..4194fc15 100644
--- 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
@@ -1,10 +1,10 @@
 import styles from "./DropdownMenu.module.scss";
 import clsx from "clsx";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-import { useIsOpenedDropdownMenu } from "@store";
+import { useStore_IsOpenedDropdownMenu } from "@store";
 
 export const DropdownMenu = (props) => {
-    const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
+    const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const toggleDropdownMenu = () => {
         if (currentIsOpenedDropdownMenu === props.dropdown_id) {
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx b/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx
index d3d38eca..9e9e13db 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx
@@ -1,20 +1,20 @@
 import styles from "./MessageFormat.module.scss";
 import { useTranslation } from "react-i18next";
 import {
-    useUiLanguageStatus,
-    useSendMessageFormat,
-    useSendMessageFormatWithT,
-    useReceivedMessageFormat,
-    useReceivedMessageFormatWithT,
+    useStore_UiLanguage,
+    useStore_SendMessageFormat,
+    useStore_SendMessageFormatWithT,
+    useStore_ReceivedMessageFormat,
+    useStore_ReceivedMessageFormatWithT,
 } from "@store";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import SwapImg from "@images/swap_icon.png";
 
 export const MessageFormat = (props) => {
-    const { currentSendMessageFormat, updateSendMessageFormat } = useSendMessageFormat();
-    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useSendMessageFormatWithT();
-    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useReceivedMessageFormat();
-    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useReceivedMessageFormatWithT();
+    const { currentSendMessageFormat, updateSendMessageFormat } = useStore_SendMessageFormat();
+    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useStore_SendMessageFormatWithT();
+    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useStore_ReceivedMessageFormat();
+    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useStore_ReceivedMessageFormatWithT();
 
     let atoms = [];
     switch (props.id) {
@@ -49,14 +49,14 @@ export const MessageFormat = (props) => {
 
 const ExampleComponent = ({ id, current_format }) => {
     const { t } = useTranslation();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentUiLanguage } = useStore_UiLanguage();
 
     const createExampleMessage = () => {
         const originalLangMessage = t("config_page.send_message_format.example_text");
         let format = current_format;
 
         if (["send_with_t", "received_with_t"].includes(id)) {
-            const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
+            const translationLocale = currentUiLanguage === "en" ? "ja" : "en";
             const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
 
             return format.is_message_first
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
index e22ab890..acb84acd 100644
--- 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
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styles from "./SliderAndMeter.module.scss";
 import {
-    useMicVolume,
-    useSpeakerVolume,
+    useStore_MicVolume,
+    useStore_SpeakerVolume,
 } from "@store";
 
 import { useVolume } from "@logics/useVolume";
@@ -23,7 +23,7 @@ export const SliderAndMeter = (props) => {
 
 
 const ThresholdVolumeMeter_Mic = (props) => {
-    const { currentMicVolume } = useMicVolume();
+    const { currentMicVolume } = useStore_MicVolume();
 
     const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
@@ -46,7 +46,7 @@ const ThresholdVolumeMeter_Mic = (props) => {
 
 
 const ThresholdVolumeMeter_Speaker = (props) => {
-    const { currentSpeakerVolume } = useSpeakerVolume();
+    const { currentSpeakerVolume } = useStore_SpeakerVolume();
 
     const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
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
index 5c1dc118..03df067f 100644
--- 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
@@ -1,5 +1,5 @@
 import styles from "./useSettingBox.module.scss";
-import { useIsOpenedDropdownMenu } from "@store";
+import { useStore_IsOpenedDropdownMenu } from "@store";
 import clsx from "clsx";
 
 import { LabelComponent } from "./label_component/LabelComponent";
@@ -17,7 +17,7 @@ import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFil
 
 
 const useOnMouseLeaveDropdownMenu = () => {
-    const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
+    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const onMouseLeaveFunction = () => {
         updateIsOpenedDropdownMenu("");
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
index 49b54c11..4fc3b70e 100644
--- 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
@@ -1,11 +1,11 @@
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
-import { useWordFilterList, useIsOpenedWordFilterList } from "@store";
+import { useStore_WordFilterList, useStore_IsOpenedWordFilterList } from "@store";
 export const WordFilter = () => {
     const [input_value, setInputValue] = useState();
-    const { currentWordFilterList, updateWordFilterList } = useWordFilterList();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
+    const { currentWordFilterList, updateWordFilterList } = useStore_WordFilterList();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
 
     const onChangeEntry = (e) => {
         setInputValue(e.target.value);
@@ -112,8 +112,8 @@ import { useTranslation } from "react-i18next";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 export const WordFilterListToggleComponent = (props) => {
     const { t } = useTranslation();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
-    const { currentWordFilterList } = useWordFilterList();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
+    const { currentWordFilterList } = useStore_WordFilterList();
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {
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 dabb27d1..09864c98 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,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { useSettingBox } from "../components/useSettingBox";
 // import {
-//     useEnableAutoClearMessageBox,
+//     useStore_EnableAutoClearMessageBox,
 // } from "@store";
 
 import { useConfig } from "@logics/useConfig";
diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.jsx b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx
index e227989e..1003b00b 100644
--- a/src-ui/app/config_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx
@@ -22,11 +22,11 @@ export const SidebarSection = () => {
 
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { useSelectedConfigTabId } from "@store";
+import { useStore_SelectedConfigTabId } from "@store";
 
 const Tab = (props) => {
     const { t } = useTranslation();
-    const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useSelectedConfigTabId();
+    const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     const onclickFunction = () => {
         updateSelectedConfigTabId(props.tab_id);
     };
diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index b9f88ebe..40824747 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./Topbar.module.scss";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import { TitleBox } from "./title_box/TitleBox";
@@ -9,7 +9,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
-    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
     const closeConfigPage = () => {
         updateIsOpenedConfigPage(false);
     };
diff --git a/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
index 7e313965..ff4d9292 100644
--- a/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
+++ b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
@@ -1,10 +1,10 @@
 import { useTranslation } from "react-i18next";
 import styles from "./SectionTitleBox.module.scss";
-import { useSelectedConfigTabId } from "@store";
+import { useStore_SelectedConfigTabId } from "@store";
 
 export const SectionTitleBox = () => {
     const { t } = useTranslation();
-    const { currentSelectedConfigTabId } = useSelectedConfigTabId();
+    const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     return (
         <div className={styles.container}>
             <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
diff --git a/src-ui/app/main_page/MainPage.jsx b/src-ui/app/main_page/MainPage.jsx
index 66ee6bba..037b53aa 100644
--- a/src-ui/app/main_page/MainPage.jsx
+++ b/src-ui/app/main_page/MainPage.jsx
@@ -2,10 +2,10 @@ import clsx from "clsx";
 import styles from "./MainPage.module.scss";
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 
 export const MainPage = () => {
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     return (
         <div className={clsx(styles.page, styles.main_page, {
diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx
index 2b62be6a..52362925 100644
--- a/src-ui/app/main_page/main_section/MainSection.jsx
+++ b/src-ui/app/main_page/main_section/MainSection.jsx
@@ -4,7 +4,7 @@ import { TopBar } from "./top_bar/TopBar";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { LanguageSelector } from "./language_selector/LanguageSelector";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const MainSection = () => {
 
@@ -18,7 +18,7 @@ export const MainSection = () => {
 };
 
 const HandleLanguageSelector = () => {
-    const { currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     if (currentIsOpenedLanguageSelector.your_language === true) {
         return <LanguageSelector id="your_language"/>;
diff --git a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
index d1eecc73..fba4ba89 100644
--- a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
+++ b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
@@ -1,9 +1,9 @@
 import styles from "./LanguageSelectorTopBar.module.scss";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const LanguageSelectorTopBar = (props) => {
-    const { updateIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const closeLanguageSelector = () => {
         updateIsOpenedLanguageSelector({
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
index e6bdd07f..fb34148c 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
@@ -1,11 +1,11 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
-import { useMessageLogsStatus, store } from "@store";
+import { useStore_MessageLogs, store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { scrollToBottom } from "@logics/scrollToBottom";
 
 export const LogBox = () => {
-    const { currentMessageLogsStatus } = useMessageLogsStatus();
+    const { currentMessageLogs } = useStore_MessageLogs();
     const log_container_ref = useRef(null);
     const [is_scrolling, setIsScrolling] = useState(false);
 
@@ -14,7 +14,7 @@ export const LogBox = () => {
         if (!is_scrolling) {
             scrollToBottom(store.log_box_ref, true);
         }
-    }, [currentMessageLogsStatus]);
+    }, [currentMessageLogs]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -39,7 +39,7 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
-            {currentMessageLogsStatus.map(message_data => (
+            {currentMessageLogs.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 4c987dab..4e60b266 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -2,9 +2,10 @@ import { useState } from "react";
 import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
-import { store, useEnableAutoClearMessageBox } from "@store";
+import { store } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
diff --git a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
index 889a0e6e..0ad2be9e 100644
--- a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
+++ b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
@@ -1,18 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentMainPageCompactModeStatus
+        [styles["reverse"]]: currentIsMainPageCompactMode
     });
 
     return (
diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
index 71d5ea4d..1d00ea55 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
 import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
     const container_class_name = clsx(styles["container"], {
-        [styles["is_compact_mode"]]: currentMainPageCompactModeStatus
+        [styles["is_compact_mode"]]: currentIsMainPageCompactMode
     });
 
     return (
         <div className={container_class_name}>
             <Logo />
             <MainFunctionSwitch />
-            {!currentMainPageCompactModeStatus && <LanguageSettings />}
+            {!currentIsMainPageCompactMode && <LanguageSettings />}
             <OpenSettings />
         </div>
     );
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
index 18539e60..130b467b 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
@@ -6,10 +6,10 @@ import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
 import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
 import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
-import { useIsOpenedTranslatorSelector } from "@store";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
-    const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
     const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
 
     return (
@@ -24,12 +24,12 @@ export const LanguageSettings = () => {
 
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 import { useMainFunction } from "@logics/useMainFunction";
 
 const PresetContainer = () => {
     const { t } = useTranslation();
-    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const {
         currentTranscriptionSendStatus,
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
index ec855226..9442ea60 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
@@ -12,16 +12,16 @@ export const PresetTabSelector = () => {
 
 import clsx from "clsx";
 
-import { useSelectedPresetTabStatus } from "@store";
+import { useStore_SelectedPresetTabNumber } from "@store";
 
 const Tab = (props) => {
-    const { updateSelectedPresetTabStatus, currentSelectedPresetTabStatus } = useSelectedPresetTabStatus();
+    const { updateSelectedPresetTabNumber, currentSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
     const onclickFunction = () => {
-        updateSelectedPresetTabStatus(props.preset_number);
+        updateSelectedPresetTabNumber(props.preset_number);
     };
 
     const class_names = clsx(styles["tab_container"], {
-        [styles["is_selected"]]: (currentSelectedPresetTabStatus === props.preset_number) ? true : false
+        [styles["is_selected"]]: (currentSelectedPresetTabNumber === props.preset_number) ? true : false
     });
 
     return (
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
index 2be44a04..2a76b220 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
@@ -2,17 +2,17 @@ import { useTranslation } from "react-i18next";
 
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
-import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
+import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const TranslatorSelectorOpenButton = () => {
     const { t } = useTranslation();
-    const { currentSelectedTranslatorIdStatus } = useSelectedTranslatorIdStatus();
-    const { currentTranslatorListStatus } = useTranslatorListStatus();
-    const currentTranslator = currentTranslatorListStatus.find(
-        translator_data => translator_data.translator_key === currentSelectedTranslatorIdStatus
+    const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
+    const { currentTranslatorList } = useStore_TranslatorList();
+    const currentTranslator = currentTranslatorList.find(
+        translator_data => translator_data.translator_key === currentSelectedTranslatorId
     );
 
-    const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
 
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
index 4bff71ce..8cf654dd 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
@@ -1,10 +1,10 @@
 import styles from "./TranslatorSelector.module.scss";
 import { chunkArray } from "@utils/chunkArray";
 
-import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
+import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
 export const TranslatorSelector = () => {
-    const { currentTranslatorListStatus } = useTranslatorListStatus();
-    const columns = chunkArray(currentTranslatorListStatus, 2);
+    const { currentTranslatorList } = useStore_TranslatorList();
+    const columns = chunkArray(currentTranslatorList, 2);
 
     return (
         <div className={styles.container}>
@@ -28,17 +28,17 @@ export const TranslatorSelector = () => {
 
 import clsx from "clsx";
 const TranslatorBox = (props) => {
-    const { currentSelectedTranslatorIdStatus, updateSelectedTranslatorIdStatus} = useSelectedTranslatorIdStatus();
-    const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
+    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const box_class_name = clsx(
         styles.box,
-        { [styles["is_selected"]]: (currentSelectedTranslatorIdStatus === props.translator_id) ? true : false },
+        { [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
         { [styles["is_available"]]: (props.is_available === true) ? true : false }
     );
 
     const selectTranslator = () => {
-        updateSelectedTranslatorIdStatus(props.translator_id);
+        updateSelectedTranslatorId(props.translator_id);
         updateIsOpenedTranslatorSelector(false);
     };
     return (
diff --git a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx
index 9bdae239..3c6ebf85 100644
--- a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx
+++ b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx
@@ -11,11 +11,11 @@ export const Logo = () => {
 
 import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
 import chato_img from "@images/chato_white.png";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 export const LogoBox = () => {
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
-    if (currentMainPageCompactModeStatus === true) {
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    if (currentIsMainPageCompactMode === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {
         return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;
diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
index b038ed0c..c39ee167 100644
--- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import ForegroundSvg from "@images/foreground.svg?react";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 import { useMainFunction } from "@logics/useMainFunction";
 
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
-        [styles.is_compact_mode]: currentMainPageCompactModeStatus,
+        [styles.is_compact_mode]: currentIsMainPageCompactMode,
         [styles.is_active]: (currentState.data === true),
         [styles.is_loading]: (currentState.state === "loading"),
         [styles.is_hovered]: is_hovered,
diff --git a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
index 92cc97fb..0c77e865 100644
--- a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
@@ -1,9 +1,9 @@
 import styles from "./OpenSettings.module.scss";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 import ConfigurationSvg from "@images/configuration.svg?react";
 
 export const OpenSettings = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     const openConfigPage = () => {
         updateIsOpenedConfigPage(true);
diff --git a/src-ui/logics/configs/useEnableAutoClearMessageBox.js b/src-ui/logics/configs/useEnableAutoClearMessageBox.js
index bd115357..44a45a8c 100644
--- a/src-ui/logics/configs/useEnableAutoClearMessageBox.js
+++ b/src-ui/logics/configs/useEnableAutoClearMessageBox.js
@@ -1,9 +1,9 @@
-import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
+import { useStore_EnableAutoClearMessageBox } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoClearMessageBox = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
 
     const getEnableAutoClearMessageBox = () => {
         updateEnableAutoClearMessageBox(() => new Promise(() => {}));
@@ -20,9 +20,9 @@ export const useEnableAutoClearMessageBox = () => {
     };
 
     return {
+        currentEnableAutoClearMessageBox,
         getEnableAutoClearMessageBox,
         toggleEnableAutoClearMessageBox,
-        currentEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox
+        updateEnableAutoClearMessageBox,
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicDeviceList.js b/src-ui/logics/configs/useMicDeviceList.js
index 201bcd19..ac2ad813 100644
--- a/src-ui/logics/configs/useMicDeviceList.js
+++ b/src-ui/logics/configs/useMicDeviceList.js
@@ -1,14 +1,18 @@
-import { useMicDeviceList as useStoreMicDeviceList } from "@store";
+import { useStore_MicDeviceList } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
+    const { currentMicDeviceList, updateMicDeviceList } = useStore_MicDeviceList();
 
     const getMicDeviceList = () => {
         updateMicDeviceList(() => new Promise(() => {}));
         asyncStdoutToPython("/controller/list_mic_device");
     };
 
-    return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
+    return {
+        currentMicDeviceList,
+        getMicDeviceList,
+        updateMicDeviceList,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicHostList.js b/src-ui/logics/configs/useMicHostList.js
index 08a33be2..9dcd044c 100644
--- a/src-ui/logics/configs/useMicHostList.js
+++ b/src-ui/logics/configs/useMicHostList.js
@@ -1,14 +1,18 @@
-import { useMicHostList as useStoreMicHostList } from "@store";
+import { useStore_MicHostList } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicHostList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
+    const { currentMicHostList, updateMicHostList } = useStore_MicHostList();
 
     const getMicHostList = () => {
         updateMicHostList(() => new Promise(() => {}));
         asyncStdoutToPython("/controller/list_mic_host");
     };
 
-    return { currentMicHostList, getMicHostList, updateMicHostList };
+    return {
+        currentMicHostList,
+        getMicHostList,
+        updateMicHostList,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js
index bdcc4b36..14b2a91c 100644
--- a/src-ui/logics/configs/useMicThreshold.js
+++ b/src-ui/logics/configs/useMicThreshold.js
@@ -1,9 +1,9 @@
-import { useMicThreshold as useStoreMicThreshold } from "@store";
+import { useStore_MicThreshold } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
+    const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
 
     const getMicThreshold = () => {
         asyncStdoutToPython("/config/input_mic_energy_threshold");
@@ -13,5 +13,10 @@ export const useMicThreshold = () => {
         asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
     };
 
-    return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
+    return {
+        currentMicThreshold,
+        getMicThreshold,
+        setMicThreshold,
+        updateMicThreshold,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedMicDevice.js b/src-ui/logics/configs/useSelectedMicDevice.js
index 4e4eeb06..9eb9288c 100644
--- a/src-ui/logics/configs/useSelectedMicDevice.js
+++ b/src-ui/logics/configs/useSelectedMicDevice.js
@@ -1,9 +1,9 @@
-import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
+import { useStore_SelectedMicDevice } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
 
     const getSelectedMicDevice = () => {
         updateSelectedMicDevice(() => new Promise(() => {}));
@@ -15,5 +15,10 @@ export const useSelectedMicDevice = () => {
         asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
     };
 
-    return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
+    return {
+        currentSelectedMicDevice,
+        getSelectedMicDevice,
+        updateSelectedMicDevice,
+        setSelectedMicDevice,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedMicHost.js b/src-ui/logics/configs/useSelectedMicHost.js
index 108a4ef3..ee624705 100644
--- a/src-ui/logics/configs/useSelectedMicHost.js
+++ b/src-ui/logics/configs/useSelectedMicHost.js
@@ -1,9 +1,9 @@
-import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
+import { useStore_SelectedMicHost } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicHost = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStore_SelectedMicHost();
 
     const getSelectedMicHost = () => {
         updateSelectedMicHost(() => new Promise(() => {}));
@@ -15,5 +15,10 @@ export const useSelectedMicHost = () => {
         asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
     };
 
-    return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
+    return {
+        currentSelectedMicHost,
+        getSelectedMicHost,
+        updateSelectedMicHost,
+        setSelectedMicHost,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedSpeakerDevice.js b/src-ui/logics/configs/useSelectedSpeakerDevice.js
index 2437e55d..4bef87c0 100644
--- a/src-ui/logics/configs/useSelectedSpeakerDevice.js
+++ b/src-ui/logics/configs/useSelectedSpeakerDevice.js
@@ -1,9 +1,9 @@
-import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStore_SelectedSpeakerDevice } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedSpeakerDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
 
     const getSelectedSpeakerDevice = () => {
         updateSelectedSpeakerDevice(() => new Promise(() => {}));
@@ -15,5 +15,10 @@ export const useSelectedSpeakerDevice = () => {
         asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
     };
 
-    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+    return {
+        currentSelectedSpeakerDevice,
+        getSelectedSpeakerDevice,
+        updateSelectedSpeakerDevice,
+        setSelectedSpeakerDevice,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSendMessageButtonType.js b/src-ui/logics/configs/useSendMessageButtonType.js
index 479469fc..27d19ef8 100644
--- a/src-ui/logics/configs/useSendMessageButtonType.js
+++ b/src-ui/logics/configs/useSendMessageButtonType.js
@@ -1,9 +1,9 @@
-import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
+import { useStore_SendMessageButtonType } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSendMessageButtonType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStore_SendMessageButtonType();
 
     const getSendMessageButtonType = () => {
         updateSendMessageButtonType(() => new Promise(() => {}));
@@ -16,9 +16,9 @@ export const useSendMessageButtonType = () => {
     };
 
     return {
+        currentSendMessageButtonType,
         getSendMessageButtonType,
         setSendMessageButtonType,
-        currentSendMessageButtonType,
-        updateSendMessageButtonType
+        updateSendMessageButtonType,
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSoftwareVersion.js b/src-ui/logics/configs/useSoftwareVersion.js
index f215084e..055184fa 100644
--- a/src-ui/logics/configs/useSoftwareVersion.js
+++ b/src-ui/logics/configs/useSoftwareVersion.js
@@ -1,14 +1,18 @@
-import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
+import { useStore_SoftwareVersion } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSoftwareVersion = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStore_SoftwareVersion();
 
     const getSoftwareVersion = () => {
         updateSoftwareVersion(() => new Promise(() => {}));
         asyncStdoutToPython("/config/version");
     };
 
-    return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
+    return {
+        currentSoftwareVersion,
+        getSoftwareVersion,
+        updateSoftwareVersion,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSpeakerDeviceList.js b/src-ui/logics/configs/useSpeakerDeviceList.js
index 1027d8d7..ec8cac1c 100644
--- a/src-ui/logics/configs/useSpeakerDeviceList.js
+++ b/src-ui/logics/configs/useSpeakerDeviceList.js
@@ -1,14 +1,18 @@
-import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
+import { useStore_SpeakerDeviceList } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSpeakerDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStore_SpeakerDeviceList();
 
     const getSpeakerDeviceList = () => {
         updateSpeakerDeviceList(() => new Promise(() => {}));
         asyncStdoutToPython("/controller/list_speaker_device");
     };
 
-    return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
+    return {
+        currentSpeakerDeviceList,
+        getSpeakerDeviceList,
+        updateSpeakerDeviceList,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js
index 87d239da..f30c4382 100644
--- a/src-ui/logics/configs/useSpeakerThreshold.js
+++ b/src-ui/logics/configs/useSpeakerThreshold.js
@@ -1,9 +1,9 @@
-import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
+import { useStore_SpeakerThreshold } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSpeakerThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
 
     const getSpeakerThreshold = () => {
         asyncStdoutToPython("/config/input_speaker_energy_threshold");
@@ -13,5 +13,10 @@ export const useSpeakerThreshold = () => {
         asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
     };
 
-    return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
+    return {
+        currentSpeakerThreshold,
+        getSpeakerThreshold,
+        setSpeakerThreshold,
+        updateSpeakerThreshold,
+    };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useMainFunction.js b/src-ui/logics/useMainFunction.js
index f6ffa55a..88e20245 100644
--- a/src-ui/logics/useMainFunction.js
+++ b/src-ui/logics/useMainFunction.js
@@ -1,10 +1,10 @@
 import { getCurrent } from "@tauri-apps/api/window";
 
 import {
-    useTranslationStatus,
-    useTranscriptionSendStatus,
-    useTranscriptionReceiveStatus,
-    useForegroundStatus,
+    useStore_TranslationStatus,
+    useStore_TranscriptionSendStatus,
+    useStore_TranscriptionReceiveStatus,
+    useStore_ForegroundStatus,
 } from "@store";
 
 import { useStdoutToPython } from "@logics/useStdoutToPython";
@@ -14,21 +14,21 @@ export const useMainFunction = () => {
         currentTranslationStatus,
         updateTranslationStatus,
         asyncUpdateTranslationStatus,
-    } = useTranslationStatus();
+    } = useStore_TranslationStatus();
     const {
         currentTranscriptionSendStatus,
         updateTranscriptionSendStatus,
         asyncUpdateTranscriptionSendStatus,
-    } = useTranscriptionSendStatus();
+    } = useStore_TranscriptionSendStatus();
     const {
         currentTranscriptionReceiveStatus,
         updateTranscriptionReceiveStatus,
         asyncUpdateTranscriptionReceiveStatus,
-    } = useTranscriptionReceiveStatus();
+    } = useStore_TranscriptionReceiveStatus();
     const {
         currentForegroundStatus,
         updateForegroundStatus,
-    } = useForegroundStatus();
+    } = useStore_ForegroundStatus();
 
     const { asyncStdoutToPython } = useStdoutToPython();
 
diff --git a/src-ui/logics/useMessage.js b/src-ui/logics/useMessage.js
index 8c441ff5..bb3a1ea2 100644
--- a/src-ui/logics/useMessage.js
+++ b/src-ui/logics/useMessage.js
@@ -1,11 +1,11 @@
 import {
-    useMessageLogsStatus,
+    useStore_MessageLogs,
 } from "@store";
 
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMessage = () => {
-    const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
+    const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs();
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const sendMessage = (message) => {
@@ -16,7 +16,7 @@ export const useMessage = () => {
         };
         asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
 
-        addMessageLogsStatus({
+        addMessageLogs({
             id: uuid,
             category: "sent",
             status: "pending",
@@ -29,19 +29,19 @@ export const useMessage = () => {
     };
 
     const updateSentMessageLogById = (payload) => {
-        updateMessageLogsStatus(updateItemById(payload.id, payload.translation));
+        updateMessageLogs(updateItemById(payload.id, payload.translation));
     };
     const addSentMessageLog = (payload) => {
         const message_object = generateMessageObject(payload, "sent");
-        addMessageLogsStatus(message_object);
+        addMessageLogs(message_object);
     };
     const addReceivedMessageLog = (payload) => {
         const message_object = generateMessageObject(payload, "received");
-        addMessageLogsStatus(message_object);
+        addMessageLogs(message_object);
     };
 
     return {
-        currentMessageLogsStatus,
+        currentMessageLogs,
         sendMessage,
         updateSentMessageLogById,
         addSentMessageLog,
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
index cde153bc..ee0dc138 100644
--- a/src-ui/logics/useVolume.js
+++ b/src-ui/logics/useVolume.js
@@ -1,14 +1,14 @@
 import {
-    useMicVolume,
-    useSpeakerVolume,
+    useStore_MicVolume,
+    useStore_SpeakerVolume,
 } from "@store";
 
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateMicVolume } = useMicVolume();
-    const { updateSpeakerVolume } = useSpeakerVolume();
+    const { updateMicVolume } = useStore_MicVolume();
+    const { updateSpeakerVolume } = useStore_SpeakerVolume();
 
     return {
         volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
diff --git a/src-ui/logics/useWindow.js b/src-ui/logics/useWindow.js
index 7502c1a9..21cee2cf 100644
--- a/src-ui/logics/useWindow.js
+++ b/src-ui/logics/useWindow.js
@@ -1,9 +1,9 @@
 import { WebviewWindow } from "@tauri-apps/api/window";
-import { store, useIsOpenedConfigPage } from "@store";
+import { store, useStore_IsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 
 export const useWindow = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     const createConfigPage = async () => {
         const main_page = getCurrent();
diff --git a/src-ui/store.js b/src-ui/store.js
index 52b8b47c..721a0b9d 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -94,79 +94,76 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
     return { atomInstance, useHook };
 };
 
-export const { atomInstance: Atom_SoftwareVersion, useHook: useSoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
 
-export const { atomInstance: Atom_UiLanguageStatus, useHook: useUiLanguageStatus } = createAtomWithHook("en", "UiLanguageStatus");
-export const { atomInstance: Atom_TranslationStatus, useHook: useTranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
-export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useTranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
-export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useTranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
-export const { atomInstance: Atom_ForegroundStatus, useHook: useForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
+export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
+export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
+export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
 
-export const { atomInstance: Atom_MessageLogsStatus, useHook: useMessageLogsStatus } = createAtomWithHook(generateTestData(20), "MessageLogsStatus");
-export const { atomInstance: Atom_MainPageCompactModeStatus, useHook: useMainPageCompactModeStatus } = createAtomWithHook(false, "MainPageCompactModeStatus");
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpenedLanguageSelector } = createAtomWithHook(
+export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
 
-export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
-export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useIsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
 
 
 // Config Page
-export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList");
-export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
-export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
-export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
-export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
-export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
 
-export const { atomInstance: Atom_MicThreshold, useHook: useMicThreshold } = createAtomWithHook(0, "MicThreshold");
-export const { atomInstance: Atom_SpeakerThreshold, useHook: useSpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
 
 
-export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
+export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
     before: "",
     after: "",
 }, "SendMessageFormat");
-export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useSendMessageFormatWithT } = createAtomWithHook({
+export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useStore_SendMessageFormatWithT } = createAtomWithHook({
     before: "",
     between: "",
     after: "",
     is_message_first: true,
 }, "SendMessageFormatWithT");
-export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useReceivedMessageFormat } = createAtomWithHook({
+export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useStore_ReceivedMessageFormat } = createAtomWithHook({
     before: "",
     after: "",
 }, "ReceivedMessageFormat");
-export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceivedMessageFormatWithT } = createAtomWithHook({
+export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_ReceivedMessageFormatWithT } = createAtomWithHook({
     before: "",
     between: "",
     after: "",
     is_message_first: true,
 }, "ReceivedMessageFormatWithT");
 
-export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
-export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
-
+export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
+export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
 
 
+export const { atomInstance: Atom_TranslatorList, useHook: useStore_TranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
+export const { atomInstance: Atom_SelectedTranslatorId, useHook: useStore_SelectedTranslatorId } = createAtomWithHook("CTranslate2", "SelectedTranslatorId");
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
-
-export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
-export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
-export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
-
-export const { atomInstance: Atom_VrctPosterIndex, useHook: useVrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: usePosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
\ No newline at end of file
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
\ No newline at end of file

From 4d9a6fedb79775e2177c8eff0af40d6d8b1dea78 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 11 Sep 2024 00:33:09 +0900
Subject: [PATCH 8/8] [Update] Config Page: Device Tab. Threshold section. Add
 check volume button and remove dev component.

---
 .../ThresholdComponent.jsx                    | 24 +++++++++--
 .../ThresholdComponent.module.scss            |  2 +-
 .../slider_and_meter/SliderAndMeter.jsx       | 43 -------------------
 .../SliderAndMeter.module.scss                | 29 -------------
 .../ThresholdEntry.module.scss                |  2 +-
 .../volume_check_button/VolumeCheckButton.jsx | 30 ++++++-------
 .../VolumeCheckButton.module.scss             | 39 +++++++++++++++--
 src-ui/logics/useReceiveRoutes.js             | 11 ++++-
 src-ui/logics/useVolume.js                    | 29 +++++++++++--
 src-ui/store.js                               |  3 ++
 10 files changed, 108 insertions(+), 104 deletions(-)

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
index 1670b73f..f10c114e 100644
--- 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
@@ -3,11 +3,10 @@ import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
-
+import { useVolume } from "@logics/useVolume";
 export const ThresholdComponent = (props) => {
     return (
         <div className={styles.container}>
-            <VolumeCheckButton {...props} />
             {props.id === "mic_threshold"
                 ? <MicComponent {...props} />
                 : <SpeakerComponent {...props} />
@@ -15,11 +14,13 @@ export const ThresholdComponent = (props) => {
         </div>
     );
 };
-
+import MicSvg from "@images/mic.svg?react";
 import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const MicComponent = (props) => {
     const { currentMicThreshold, setMicThreshold } = useMicThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+    const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
+
 
     useEffect(() => {
         setUiThreshold(currentMicThreshold);
@@ -34,6 +35,13 @@ const MicComponent = (props) => {
 
     return (
         <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={MicSvg}
+                startFunction={volumeCheckStart_Mic}
+                stopFunction={volumeCheckStop_Mic}
+                isChecking={currentMicThresholdCheckStatus}
+            />
             <SliderAndMeter
                 {...props}
                 ui_threshold={ui_threshold}
@@ -49,11 +57,12 @@ const MicComponent = (props) => {
         </>
     );
 };
-
+import HeadphonesSvg from "@images/headphones.svg?react";
 import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const SpeakerComponent = (props) => {
     const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+    const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
 
     useEffect(() => {
         setUiThreshold(currentSpeakerThreshold);
@@ -68,6 +77,13 @@ const SpeakerComponent = (props) => {
 
     return (
         <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={HeadphonesSvg}
+                startFunction={volumeCheckStart_Speaker}
+                stopFunction={volumeCheckStop_Speaker}
+                isChecking={currentSpeakerThresholdCheckStatus}
+            />
             <SliderAndMeter
                 {...props}
                 ui_threshold={ui_threshold}
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
index 775b476b..205b7160 100644
--- 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
@@ -3,5 +3,5 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    gap: 3rem;
+    gap: 2rem;
 }
\ No newline at end of file
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
index acb84acd..bb3e2dcf 100644
--- 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
@@ -5,8 +5,6 @@ import {
     useStore_SpeakerVolume,
 } from "@store";
 
-import { useVolume } from "@logics/useVolume";
-
 export const SliderAndMeter = (props) => {
     return (
         <div className={styles.container}>
@@ -16,7 +14,6 @@ export const SliderAndMeter = (props) => {
                     : <ThresholdVolumeMeter_Speaker {...props}/>
                 }
             </div>
-            <DevSection {...props}/>
         </div>
     );
 };
@@ -80,44 +77,4 @@ const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
             }}
         />
     );
-};
-
-
-const DevSection = (props) => {
-    const {
-        volumeCheckStart_Mic,
-        volumeCheckStop_Mic,
-        volumeCheckStart_Speaker,
-        volumeCheckStop_Speaker,
-    } = useVolume();
-
-    const volumeCheckStart = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStart_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStart_Speaker();
-        }
-    };
-
-    const volumeCheckStop = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStop_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStop_Speaker();
-        }
-    };
-
-    return (
-        <div className={styles.dev_info_box}>
-            <p>dev</p>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
-            <div className={styles.volume_info}>
-                {/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
-            </div>
-            <div className={styles.threshold_info}>
-                {/* <span>Threshold: {props.threshold}</span> */}
-            </div>
-        </div>
-    );
 };
\ No newline at end of file
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
index 68558a76..1ff43512 100644
--- 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
@@ -52,33 +52,4 @@
     &:focus {
         outline: none;
     }
-}
-
-
-
-
-//  for dev
-.dev_info_box {
-    position: absolute;
-    top: -4rem;
-    display: flex;
-    gap: 2rem
-}
-
-
-
-.volume_info, .threshold_info {
-    font-size: 1.2rem;
-}
-
-
-
-.volume_check_button {
-    font-size: 1.4rem;
-    background-color: var(--dark_800_color);
-    padding: 1rem;
-    cursor: pointer;
-    &:hover {
-        background-color: var(--dark_775_color);
-    }
 }
\ No newline at end of file
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
index cb6e470a..2f6a2522 100644
--- 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
@@ -2,7 +2,7 @@
 }
 
 .entry_wrapper {
-    width: 10rem;
+    width: 6rem;
     height: 100%;
     padding: 0.6rem;
     background-color: var(--dark_875_color);
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
index 4ed584ed..398f9b57 100644
--- 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
@@ -1,31 +1,27 @@
 import React from "react";
 import styles from "./VolumeCheckButton.module.scss";
-import MicSvg from "@images/mic.svg?react";
-import HeadphonesSvg from "@images/headphones.svg?react";
 import clsx from "clsx";
-// import { useVolume } from "@logics/useVolume";
 
 export const VolumeCheckButton = React.memo((props) => {
-    const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
-
-
     const getClassNames = (baseClass) => clsx(baseClass, {
-        // [styles.is_active]: (currentState.data === true),
-        // [styles.is_loading]: (currentState.state === "loading"),
-        // [styles.is_hovered]: is_hovered,
-        // [styles.is_mouse_down]: is_mouse_down,
+        [styles.is_active]: (props.isChecking?.data === true),
+        [styles.is_loading]: (props.isChecking.state === "loading"),
     });
-    // const {
-    //     volumeCheckStart_Mic,
-    //     volumeCheckStop_Mic,
-    // } = useVolume();
+
+    const toggleFunction = () => {
+        if (props.isChecking?.data === true) {
+            props.stopFunction();
+        } else if (props.isChecking?.data === false) {
+            props.startFunction();
+        }
+    };
 
 
     return (
-        // <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
         <div className={styles.container}>
-            <div className={getClassNames(styles.button_button)}>
-                <SvgComponent className={getClassNames(styles.button_svg)} />
+            <div className={getClassNames(styles.button)} onClick={toggleFunction}>
+                <props.SvgComponent className={styles.button_svg} />
+                <p className={styles.button_text}>Check Volume</p>
             </div>
         </div>
     );
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
index 00d07b69..622323fb 100644
--- 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
@@ -1,14 +1,45 @@
-.button_button {
+.button {
     width: 100%;
     background-color: var(--dark_800_color);
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 1rem;
-    border-radius: 50%;
+    padding: 0.8rem 1rem;
+    border-radius: 0.4rem;
+    gap: 0.4rem;
+    cursor: pointer;
+    &.is_active {
+        background-color: var(--primary_500_color);
+        &:hover {
+            background-color: var(--primary_450_color);
+        }
+        &:active {
+            background-color: var(--primary_550_color);
+        }
+    }
+    &.is_loading {
+        background-color: var(--dark_850_color);
+        pointer-events: none;
+        .button_svg, .button_text {
+            color: var(--dark_500_color);
+        }
+    }
+
+
+    &:hover {
+        background-color: var(--dark_775_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
 }
 
 .button_svg {
-    width: 2.6rem;
+    width: 1.4rem;
     color: var(--dark_350_color);
+}
+
+.button_text {
+    font-size: 1.2rem;
+    color: var(--dark_basic_text_color);
 }
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index e57cd785..badd556b 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -42,7 +42,12 @@ export const useReceiveRoutes = () => {
     const { updateSendMessageButtonType } = useSendMessageButtonType();
 
 
-    const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
+    const {
+        updateVolumeVariable_Mic,
+        updateVolumeVariable_Speaker,
+        updateMicThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus,
+    } = useVolume();
 
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
@@ -72,6 +77,10 @@ export const useReceiveRoutes = () => {
 
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
+        "/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
+        "/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
+        "/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
+        "/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
 
         "/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
index ee0dc138..a1991159 100644
--- a/src-ui/logics/useVolume.js
+++ b/src-ui/logics/useVolume.js
@@ -1,6 +1,8 @@
 import {
     useStore_MicVolume,
     useStore_SpeakerVolume,
+    useStore_MicThresholdCheckStatus,
+    useStore_SpeakerThresholdCheckStatus,
 } from "@store";
 
 import { useStdoutToPython } from "@logics/useStdoutToPython";
@@ -9,19 +11,38 @@ export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useStore_MicVolume();
     const { updateSpeakerVolume } = useStore_SpeakerVolume();
+    const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
+    const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
 
+    const asyncPending = () => new Promise(() => {});
     return {
-        volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
-        volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+        volumeCheckStart_Mic: () => {
+            updateMicThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_enable_check_mic_threshold");
+        },
+        volumeCheckStop_Mic: () => {
+            updateMicThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_mic_threshold");
+        },
         updateVolumeVariable_Mic: (payload) => {
             updateMicVolume(payload);
         },
+        currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
+        updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
 
-        volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
-        volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
+        volumeCheckStart_Speaker: () => {
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
+        },
+        volumeCheckStop_Speaker: () => {
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold");
+        },
         updateVolumeVariable_Speaker: (payload) => {
             updateSpeakerVolume(payload);
         },
+        currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
 
     };
 };
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
index 721a0b9d..9a161d83 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -127,6 +127,9 @@ export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_Selec
 export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
 export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
 
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
+
 export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
 export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");