[Update] Config Window: Add Checkbox component.

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

@@ -6,6 +6,7 @@ export const Appearance = () => {
     const {
         DropdownMenuContainer,
         SliderContainer,
+        CheckboxContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -25,6 +26,7 @@ export const Appearance = () => {
             <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
+            <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
         </>
     );
 };

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

@@ -6,6 +6,7 @@ export const Appearance = () => {
     const {
         DropdownMenuContainer,
         SliderContainer,
+        CheckboxContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -25,6 +26,7 @@ export const Appearance = () => {
             <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
+            <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/checkbox/Checkbox.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import styles from "./Checkbox.module.scss";
+
+export const Checkbox = (props) => {
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleCheckboxChange = () => {
+        setIsChecked(!isChecked);
+    };
+
+    return (
+        <div className={styles.checkbox_container}>
+            <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
+                <input
+                    type="checkbox"
+                    id={props.checkbox_id}
+                    checked={isChecked}
+                    onChange={handleCheckboxChange}
+                />
+                <span className={styles.cbx}>
+                    <svg viewBox="0 0 12 12">
+                        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
+                    </svg>
+                </span>
+            </label>
+        </div>
+    );
+};

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

@@ -0,0 +1,53 @@
+.checkbox_container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.checkbox_wrapper {
+    display: inline-block;
+    cursor: pointer;
+    padding: 2rem;
+    &:hover {
+        & .cbx {
+            border: var(--primary_600_color) solid 0.2rem;
+        }
+    }
+}
+
+.checkbox_wrapper .cbx {
+    display: block;
+    width: 2.8rem;
+    height: 2.8rem;
+    border-radius: 0.4rem;
+    border: var(--dark_700_color) solid 0.2rem;
+    transition: all 0.15s ease;
+    padding: 0.4rem;
+}
+
+.checkbox_wrapper .cbx svg {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: var(--dark_basic_text_color);
+    stroke-width: 0.2rem;
+    stroke-dasharray: 1.7rem;
+    stroke-dashoffset: 1.7rem;
+}
+
+.checkbox_wrapper input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
+    background-color: var(--primary_600_color);
+    border: none;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
+    stroke-dashoffset: 0;
+    transition: all 0.15s ease;
+}

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

@@ -2,6 +2,7 @@ import styles from "./useSettingBox.module.scss";
 import { LabelComponent } from "./label_component/LabelComponent";
 import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { Slider } from "./slider/Slider";
+import { Checkbox } from "./checkbox/Checkbox";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
@@ -29,8 +30,18 @@ export const useSettingBox = () => {
         );
     };
 
+    const CheckboxContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Checkbox {...props}/>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
+        CheckboxContainer,
     };
 };