[Update] Config Page: Add notification ui. show error messages.

src-ui/app/App.jsx

@@ -8,6 +8,7 @@ import { ConfigPage } from "./config_page/ConfigPage";
 import { SplashComponent } from "./splash_component/SplashComponent";
 import { UpdatingComponent } from "./updating_component/UpdatingComponent";
 import { ModalController } from "./modal_controller/ModalController";
+import { SnackbarController } from "./snackbar_controller/SnackbarController";
 import styles from "./App.module.scss";
 import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common";
 
@@ -45,6 +46,7 @@ const Contents = () => {
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
+                <SnackbarController />
             </div>
             :
             <UpdatingComponent />

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -170,4 +170,4 @@ const findKeyByDeviceValue = (devices, target_value) => {
         }
     }
     return null;
-};
+};

src-ui/app/snackbar_controller/SnackbarController.jsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
+import Slide from "@mui/material/Slide";
+
+import styles from "./SnackbarController.module.scss";
+import { useNotificationStatus } from "@logics_common";
+import { clsx } from "clsx";
+
+export const SnackbarController = () => {
+    const { currentNotificationStatus, closeNotification } = useNotificationStatus();
+
+    const handleClose = (event, reason) => {
+        closeNotification(event, reason);
+    };
+
+    const snackbar_classname = clsx(styles.snackbar_content, {
+        [styles.is_success]: currentNotificationStatus.data.status === "success",
+        [styles.is_error]: currentNotificationStatus.data.status === "error",
+    });
+
+    return (
+        <div>
+            <Snackbar
+                open={currentNotificationStatus.data.is_open}
+                onClose={handleClose}
+                TransitionComponent={SlideTransition}
+                key={currentNotificationStatus.data.key}
+                autoHideDuration={5000}
+            >
+                <div className={snackbar_classname}>
+                    <p className={styles.snackbar_message}>{currentNotificationStatus.data.message}</p>
+                </div>
+            </Snackbar>
+        </div>
+    );
+};
+
+const SlideTransition = (props) => {
+    return <Slide {...props} direction="up" />;
+};

src-ui/app/snackbar_controller/SnackbarController.module.scss

@@ -0,0 +1,16 @@
+.snackbar_content {
+    width: 100%;
+    height: 100%;
+    padding: 2rem;
+    color: #fff;
+    &.is_success {
+        background-color: #368777;
+    }
+    &.is_error {
+        background-color: #bb4448;
+    }
+}
+
+.snackbar_message {
+    font-size: 1.4rem;
+}