[SHOPTIME-3538] [요청] 3.X 버전에 대한 서비스 종료 안내문구 처리

수정 내용: 4버전 미만에서 앱 미지원 화면 추가

com.twin.app.shoptime/src/App/App.js

@@ -4,20 +4,17 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import platform from '@enact/core/platform';
-import { Job } from '@enact/core/util';
-import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
-import Spotlight from '@enact/spotlight';
+import platform from "@enact/core/platform";
+import { Job } from "@enact/core/util";
+import ThemeDecorator from "@enact/sandstone/ThemeDecorator";
+import Spotlight from "@enact/spotlight";
 
-import appinfo from '../../webos-meta/appinfo.json';
-import { types } from '../actions/actionTypes';
+import appinfo from "../../webos-meta/appinfo.json";
+import { types } from "../actions/actionTypes";
 import {
   changeAppStatus,
   deleteOldDb8Datas,
@@ -26,38 +23,29 @@ import {
   getSystemSettings,
   sendBroadCast,
   setDeepLink,
-} from '../actions/commonActions';
-import { getShoptimeTerms } from '../actions/empActions';
-import {
-  getHomeMenu,
-  getHomeTerms,
-} from '../actions/homeActions';
+} from "../actions/commonActions";
+import { getShoptimeTerms } from "../actions/empActions";
+import { getHomeMenu, getHomeTerms } from "../actions/homeActions";
 import {
   getMyRecommandedKeyword,
   getMyUpcomingAlertShow,
   setMyTermsWithdraw,
-} from '../actions/myPageActions';
-import { pushPanel } from '../actions/panelActions';
-import {
-  countryCode,
-  ricCode,
-} from '../api/apiConfig';
-import TPopUp from '../components/TPopUp/TPopUp';
-import usePrevious from '../hooks/usePrevious';
-import { checkValidCountry } from '../lunaSend/common';
-import { lunaTest } from '../lunaSend/lunaTest';
-import { store } from '../store/store';
-import * as Config from '../utils/Config';
-import {
-  $L,
-  clearLaunchParams,
-  getLaunchParams,
-} from '../utils/helperMethods';
-import { SpotlightIds } from '../utils/SpotlightIds';
-import ErrorBoundary from '../views/ErrorBoundary';
-import MainView from '../views/MainView/MainView';
-import css from './App.module.less';
-import { handleDeepLink } from './deepLinkHandler';
+} from "../actions/myPageActions";
+import { pushPanel } from "../actions/panelActions";
+import { countryCode, ricCode } from "../api/apiConfig";
+import NotSupportedVersion from "../components/NotSupportedVersion/NotSupportedVersion";
+import TPopUp from "../components/TPopUp/TPopUp";
+import usePrevious from "../hooks/usePrevious";
+import { checkValidCountry } from "../lunaSend/common";
+import { lunaTest } from "../lunaSend/lunaTest";
+import { store } from "../store/store";
+import * as Config from "../utils/Config";
+import { $L, clearLaunchParams, getLaunchParams } from "../utils/helperMethods";
+import { SpotlightIds } from "../utils/SpotlightIds";
+import ErrorBoundary from "../views/ErrorBoundary";
+import MainView from "../views/MainView/MainView";
+import css from "./App.module.less";
+import { handleDeepLink } from "./deepLinkHandler";
 
 let foreGroundChangeTimer = null;
 
@@ -364,16 +352,22 @@ function AppBase(props) {
   }, [dispatch]);
 
   return (
-    <ErrorBoundary>
-      <MainView
-        className={
-          typeof window === "object" &&
-          !window.PalmSystem &&
-          !cursorVisible &&
-          css.preventMouse
-        }
-      />
-    </ErrorBoundary>
+    <>
+      {webOSVersion > 4 ? (
+        <ErrorBoundary>
+          <MainView
+            className={
+              typeof window === "object" &&
+              !window.PalmSystem &&
+              !cursorVisible &&
+              css.preventMouse
+            }
+          />
+        </ErrorBoundary>
+      ) : (
+        <NotSupportedVersion />
+      )}
+    </>
   );
 }
 

com.twin.app.shoptime/src/components/NotSupportedVersion/NotSupportedVersion.jsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+
+import { useDispatch } from "react-redux";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import Logo from "../../../assets/images/img-service-logo@3x.png";
+import { setExitApp } from "../../actions/commonActions";
+import { $L } from "../../utils/helperMethods";
+import CustomImage from "../CustomImage/CustomImage";
+import TButton from "../TButton/TButton";
+import css from "./NotSupportedVersion.module.less";
+
+const Container = SpotlightContainerDecorator("div");
+
+export default function NotSupportedVersion() {
+  const dispatch = useDispatch();
+
+  const exitButtonClick = useCallback(() => {
+    dispatch(setExitApp());
+  }, [dispatch]);
+
+  return (
+    <Container className={css.container}>
+      <CustomImage className={css.logo} src={Logo} alt="logo" />
+      <p className={css.text}>
+        {$L(
+          "The ShopTime service is no longer available on your current TV. To continue using the service, please access ShopTime on 2018 and later TV models (webOS 4.0 or higher). "
+        )}
+      </p>
+      <TButton className={css.exitButton} onClick={exitButtonClick}>
+        {$L("EXIT")}
+      </TButton>
+    </Container>
+  );
+}

com.twin.app.shoptime/src/components/NotSupportedVersion/NotSupportedVersion.module.less

@@ -0,0 +1,30 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .size(@w: 100vw, @h: 100vh);
+  background-image: url("../../../assets/images/img-service-bg@3x.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .logo {
+    .size(@w: 340px, @h:340px);
+  }
+
+  .text {
+    width: 1260px;
+    margin-top: 60px;
+    line-height: 1.27;
+    color: #1a1a1a;
+    .font(@fontFamily: @baseFont, @fontSize: 30px);
+    text-align: center;
+  }
+
+  .exitButton {
+    margin-top: 110px;
+  }
+}