[Update] Config Page: Add Advanced Settings Tab.

src-ui/app/App.jsx

@@ -62,6 +62,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOscIpAddress,
+    useOscPort,
 } from "@logics_configs";
 
 import {
@@ -126,6 +128,8 @@ const StartPythonFacadeComponent = () => {
     const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { getSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { getOscIpAddress } = useOscIpAddress();
+    const { getOscPort } = useOscPort();
 
     useEffect(() => {
         if (!hasRunRef.current) {
@@ -185,6 +189,9 @@ const StartPythonFacadeComponent = () => {
                 getEnableAutoExportMessageLogs();
                 getEnableVrcMicMuteSync();
                 getEnableSendMessageToVrc();
+
+                getOscIpAddress();
+                getOscPort();
             }).catch((err) => {
                 console.error(err);
             });

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -4,6 +4,7 @@ import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
 import { Transcription } from "./transcription/Transcription";
 import { Others } from "./others/Others";
+import { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -17,6 +18,8 @@ export const SettingBox = () => {
             return <Transcription />;
         case "others":
             return <Others />;
+        case "advanced_settings":
+            return <AdvancedSettings />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./AdvancedSettings.module.scss";
+
+import { useOpenFolder } from "@logics_common";
+import {
+    useOscIpAddress,
+    useOscPort,
+} from "@logics_configs";
+
+import {
+    ActionButtonContainer,
+    EntryContainer,
+} from "../_templates/Templates";
+
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
+
+export const AdvancedSettings = () => {
+    return (
+        <>
+            <OscIpAddressContainer />
+            <OscPortContainer />
+            <OpenConfigFolderContainer />
+        </>
+    );
+};
+
+const OscIpAddressContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscIpAddress(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscIpAddress.data);
+    }, [currentOscIpAddress]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_ip_address.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+
+const OscPortContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscPort, setOscPort } = useOscPort();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscPort(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscPort.data);
+    }, [currentOscPort]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_port.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const OpenConfigFolderContainer = () => {
+    const { t } = useTranslation();
+    const { openFolder_ConfigFile } = useOpenFolder();
+
+    return (
+        <>
+            <ActionButtonContainer
+                label={t("config_page.auto_export_message_logs.label")}
+                desc={t("config_page.auto_export_message_logs.desc")}
+                IconComponent={OpenFolderSvg}
+                onclickFunction={openFolder_ConfigFile}
+            />
+        </>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss

@@ -0,0 +1,22 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+    border-bottom: solid 0.1rem var(--dark_800_color);
+}
+
+.switch_section_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    align-items: center;
+    gap: 2rem;
+}