[에러패널] 복호화 추가

com.twin.app.shoptime/src/api/TAxios.js

@@ -102,6 +102,8 @@ export const TAxios = (
             console.log("TAxios response", url, res);
 
             const apiSysStatus = res.headers["api-sys-status"];
+            const apiSysMessage = res.headers["api-sys-message"];
+
             const { systemNotice, systemTermination, appStatus } =
               getState().common;
             const isInitialLoad = !appStatus.loadingComplete;
@@ -109,19 +111,29 @@ export const TAxios = (
             if (apiSysStatus === "800" && !systemNotice) {
               dispatch(setSystemNotice());
             } else if (apiSysStatus === "900" && !systemTermination) {
+              const decodedURL = decodeURIComponent(atob(apiSysMessage));
+
               dispatch(setSystemTermination(isInitialLoad));
               dispatch(resetPanels());
               dispatch(
                 pushPanel({
                   name: Config.panel_names.ERROR_PANEL,
+                  panelInfo: {
+                    apiSysMessage: decodedURL,
+                  },
                 })
               );
             } else if (apiSysStatus === "901" && !systemTermination) {
+              const decodedURL = decodeURIComponent(atob(apiSysMessage));
+
               dispatch(setSystemTermination(isInitialLoad));
               dispatch(resetPanels());
               dispatch(
                 pushPanel({
                   name: Config.panel_names.ERROR_PANEL,
+                  panelInfo: {
+                    apiSysMessage: decodedURL,
+                  },
                 })
               );
             }

com.twin.app.shoptime/src/views/ErrorPanel/ErrorPanel.jsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect } from "react";
-
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-
 import ServiceLogoImage from "../../../assets/images/img-service-logo@3x.png";
 import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import { $L } from "../../utils/helperMethods";
 import css from "./ErrorPanel.module.less";
 import useDebugKey from "../../hooks/useDebugKey";
+import { useSelector } from "react-redux";
+import { removeSpecificTags } from "../../utils/helperMethods";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -27,13 +27,17 @@ export default function ErrorPanel({ spotlightId }) {
     }
   }, []);
 
+  const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
+
   useEffect(() => {
     Spotlight.focus("exit");
   }, []);
 
-  const description = $L(
-    "The service will be temporarily suspended due to system maintenance for approximately 1 minute. We deeply apologize for the inconvenience."
-  );
+  const description = panelInfo?.apiSysMessage;
+
+  const sanitizedDescription = description
+    ? removeSpecificTags(description)
+    : "";
 
   return (
     <TPanel
@@ -43,7 +47,10 @@ export default function ErrorPanel({ spotlightId }) {
     >
       <Container className={css.serviceLayout}>
         <img src={ServiceLogoImage} className={css.serviceLogo} />
-        <div className={css.serviceDescription}>{description}</div>
+        <div
+          className={css.serviceDescription}
+          dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
+        />
         <div className={css.bottomBtnLayer}>
           <TButton
             onClick={confirmExit}