[Update] Add some localization texts(Japanese).

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -43,14 +43,14 @@ export const DeeplAuthKey = (props) => {
                 <button className={save_button_class_names} onClick={saveAuthKey}>
                     {is_disabled
                     ? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
-                    : <p className={styles.save_button_label}>Save</p>
+                    : <p className={styles.save_button_label}>{t("config_page.translation.deepl_auth_key.save")}</p>
                 }
                 </button>
                 {is_editable
                 ? null
                 :
                     <div className={styles.entry_edit_cover} onClick={revealEditAuthKey}>
-                        <button className={styles.edit_button}>Edit</button>
+                        <button className={styles.edit_button}>{t("config_page.translation.deepl_auth_key.edit")}</button>
                     </div>
                 }
             </div>
@@ -60,10 +60,11 @@ export const DeeplAuthKey = (props) => {
 
 
 export const OpenWebpage_DeeplAuthKey = () => {
+    const { t } = useTranslation();
     return (
         <div className={styles.open_webpage_button_wrapper}>
             <a className={styles.open_webpage_button} href="https://www.deepl.com/ja/your-account/keys" target="_blank" rel="noreferrer" >
-                <p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
+                <p className={styles.open_webpage_text}>{t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}</p>
                 <ExternalLink className={styles.external_link_svg} />
             </a>
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -1,8 +1,10 @@
 import React from "react";
-import styles from "./VolumeCheckButton.module.scss";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import styles from "./VolumeCheckButton.module.scss";
 
 export const VolumeCheckButton = React.memo((props) => {
+    const { t } = useTranslation();
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
         [styles.is_pending]: (props.isChecking.state === "pending"),
@@ -21,7 +23,7 @@ export const VolumeCheckButton = React.memo((props) => {
         <div className={styles.container}>
             <div className={getClassNames(styles.button)} onClick={toggleFunction}>
                 <props.SvgComponent className={styles.button_svg} />
-                <p className={styles.button_text}>Check Volume</p>
+                <p className={styles.button_text}>{t("config_page.device.check_volume")}</p>
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -40,8 +40,8 @@ export const Vr = () => {
                 <PageSwitcherContainer
                     toggleFunction={toggleIsOpenedSmallSettings}
                     is_selected={is_opened_small_settings}
-                    label_1="Small"
-                    label_2="Large"
+                    label_1={t("config_page.vr.single_line")}
+                    label_2={t("config_page.vr.multi_lines")}
                     />
                 {is_opened_small_settings ? (
                     <OverlaySettingsContainer
@@ -112,7 +112,7 @@ const OverlaySettingsContainer = ({
     return (
         <>
             <SwitchBoxContainer
-                label={t("config_page.vr.enable")}
+                label={t("config_page.vr.overlay_enable")}
                 variable={current_is_enabled_overlay}
                 toggleFunction={toggle_is_enabled_overlay}
             />
@@ -136,9 +136,9 @@ const OverlaySettingsContainer = ({
                 selectFunction={selectTrackerFunction}
                 name={id}
                 options={[
-                    { id: "HMD", label: "HMD" },
-                    { id: "LeftHand", label: "LeftHand" },
-                    { id: "RightHand", label: "RightHand" },
+                    { id: "HMD", label: t("config_page.vr.hmd") },
+                    { id: "LeftHand", label: t("config_page.vr.left_hand") },
+                    { id: "RightHand", label: t("config_page.vr.right_hand") },
                 ]}
                 checked_variable={{data: settings.tracker}}
                 column={true}
@@ -328,7 +328,7 @@ const CommonSettingsContainer = () => {
 
     return (
         <div className={styles.common_container}>
-            <SectionLabelComponent label="Common Settings" />
+            <SectionLabelComponent label={t("config_page.vr.common_settings")} />
             <CheckboxContainer
                 label={t("config_page.vr.overlay_show_only_translated_messages.label")}
                 variable={currentOverlayShowOnlyTranslatedMessages}

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -92,7 +92,7 @@ export const MessageInputBox = () => {
                     className={styles.message_box_input_area}
                     onChange={onChangeFunction}
                     onBlur={stopTyping}
-                    placeholder="Input Textfield"
+                    // placeholder="Input Textfield"
                     value={currentMessageInputValue.data}
                     onKeyDown={onKeyDownFunction}
                 />