[Update] Config Window: Add Entry component.

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

@@ -8,6 +8,7 @@ export const Appearance = () => {
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+
+            <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
         </>
     );
 };

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

@@ -8,6 +8,7 @@ export const Appearance = () => {
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
             <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
+
+            <EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import styles from "./Entry.module.scss";
+
+export const Entry = (props) => {
+    const [input_value, setInputValue] = useState();
+
+    const onChangeFunction = (e) => {
+        setInputValue(e.currentTarget.value);
+    };
+
+
+    return (
+        <div className={styles.entry_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/entry/Entry.module.scss

@@ -0,0 +1,15 @@
+.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/useSettingBox.jsx

@@ -4,6 +4,7 @@ import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { Slider } from "./slider/Slider";
 import { Checkbox } from "./checkbox/Checkbox";
 import { Switchbox } from "./switchbox/Switchbox";
+import { Entry } from "./entry/Entry";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
@@ -49,10 +50,20 @@ export const useSettingBox = () => {
         );
     };
 
+    const EntryContainer = (props) => {
+        return (
+            <div className={styles.container}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Entry {...props}/>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
+        EntryContainer,
     };
 };