[Update] Config Page: Device Tab. Add threshold slider functionally.

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>
     );
 };

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 (

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}
+        />
+    );
 };