[Update] Config Window: Add Mic/Speaker Threshold component.

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

@@ -9,6 +9,7 @@ export const Appearance = () => {
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
+        ThresholdContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -32,6 +33,8 @@ export const Appearance = () => {
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
 
             <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+
+            <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
         </>
     );
 };

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

@@ -9,6 +9,7 @@ export const Appearance = () => {
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
+        ThresholdContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -32,6 +33,8 @@ export const Appearance = () => {
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
 
             <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+
+            <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -0,0 +1,14 @@
+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";
+
+export const ThresholdComponent = (props) => {
+    return (
+        <div className={styles.container}>
+            <VolumeCheckButton {...props}/>
+            <SliderAndMeter {...props}/>
+            <ThresholdEntry/>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    gap: 3rem;
+}

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import styles from "./SliderAndMeter.module.scss";
+
+export const SliderAndMeter = (props) => {
+    const [volume, setVolume] = useState(0);
+    const [threshold, setThreshold] = useState(props.max / 2);
+
+    const updateVolume = () => {
+        setVolume(Math.random());
+    };
+
+    // useEffect(() => {
+    //     const intervalId = setInterval(updateVolume, 200);
+    //     return () => clearInterval(intervalId);
+    // }, []);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.meter_container}>
+                <div
+                    className={styles.volume_meter}
+                    style={{
+                        width: `${(volume * 100)}%`,
+                        backgroundColor: volume < (threshold / props.max) ? "var(--primary_750_color)" : "var(--primary_400_color)"
+                    }}
+                />
+                <input
+                    type="range"
+                    min={props.min}
+                    max={props.max}
+                    value={threshold}
+                    onChange={(e) => setThreshold(e.target.value)}
+                    className={styles.threshold_slider}
+                />
+            </div>
+            <div className={styles.dev_info_box}>
+                <p>dev</p>
+                <button onClick={updateVolume}>Update Volume</button>
+                <div className={styles.volume_info}>
+                    <span>Current Volume: {(volume * props.max).toFixed(2)}</span>
+                </div>
+                <div className={styles.threshold_info}>
+                    <span>Threshold: {threshold}</span>
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss

@@ -0,0 +1,76 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+    // width: 100%;
+    position: relative; // for dev
+}
+
+.meter_container {
+    position: relative;
+    width: 100%;
+    height: 0.8rem;
+    background: var(--dark_800_color);
+    border-radius: 0.4rem;
+}
+
+.volume_meter {
+    height: 100%;
+    border-radius: inherit;
+    transition: width 0.1s ease, background-color 0.1s ease;
+}
+
+.threshold_slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        background: transparent;
+        cursor: pointer;
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 0.4rem;
+        height: 4rem;
+        background: var(--primary_600_color);
+        border-radius: 0.2rem;
+        cursor: pointer;
+    }
+
+    &:hover::-webkit-slider-thumb{
+        background: var(--primary_500_color);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.volume_info, .threshold_info {
+    font-size: 1.2rem;
+}
+
+
+
+
+
+
+
+
+
+
+//  for dev
+.dev_info_box {
+    position: absolute;
+    top: -4rem;
+    display: flex;
+    gap: 2rem
+}

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import styles from "./ThresholdEntry.module.scss";
+
+export const ThresholdEntry = () => {
+    const [input_value, setInputValue] = useState();
+
+    const onChangeFunction = (e) => {
+        setInputValue(e.currentTarget.value);
+    };
+
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.entry_wrapper}>
+                <input
+                    className={styles.entry_input_area}
+                    onChange={onChangeFunction}
+                />
+            </div>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss

@@ -0,0 +1,19 @@
+.container {
+    background-color: green;
+}
+
+.entry_wrapper {
+    width: 10rem;
+    height: 100%;
+    padding: 0.6rem;
+    background-color: var(--dark_875_color);
+    border: 0.1rem solid var(--dark_750_color);
+    border-radius: 0.4rem;
+}
+
+.entry_input_area {
+    width: 100%;
+    height: 100%;
+    font-size: 1.4rem;
+    resize: none;
+}

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -0,0 +1,24 @@
+import styles from "./VolumeCheckButton.module.scss";
+import MicSvg from "@images/mic.svg?react";
+import HeadphonesSvg from "@images/headphones.svg?react";
+import clsx from "clsx";
+
+export const VolumeCheckButton = (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,
+    });
+
+
+    return (
+        <div className={styles.container}>
+            <div className={getClassNames(styles.button_button)}>
+                <SvgComponent className={getClassNames(styles.button_svg)} />
+            </div>
+        </div>
+    );
+};

src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss

@@ -0,0 +1,14 @@
+.button_button {
+    width: 100%;
+    background-color: var(--dark_800_color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 50%;
+}
+
+.button_svg {
+    width: 2.6rem;
+    color: var(--dark_350_color);
+}

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

@@ -5,6 +5,7 @@ import { Slider } from "./slider/Slider";
 import { Checkbox } from "./checkbox/Checkbox";
 import { Switchbox } from "./switchbox/Switchbox";
 import { Entry } from "./entry/Entry";
+import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
@@ -59,11 +60,26 @@ 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>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
+        ThresholdContainer,
     };
 };

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss

@@ -6,3 +6,25 @@
     background-color: var(--dark_888_color);
     padding: 2rem;
 }
+
+.threshold_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+    background-color: var(--dark_888_color);
+    padding: 2rem;
+}
+
+.threshold_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.threshold_section {
+    width: 100%;
+}