[LoadingPanel]

- RUC Intro > Shop On Tv img 변경
- Intro 애니메이션 3단계 > 수정 필요(미완)

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

@@ -1,7 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { Job } from "@enact/core/util";
 import { Panel } from "@enact/sandstone/Panels";
@@ -9,7 +15,10 @@ import Region from "@enact/sandstone/Region";
 import Spotlight from "@enact/spotlight";
 import Cancelable from "@enact/ui/Cancelable";
 
+import LoadingPreloadImage from "../../../assets/images/intro/splash_02_stop.webp";
 import LoadingAnimation from "../../../assets/images/intro/splash_03_end.webp";
+import LoadingCompleteImage from "../../../assets/images/intro/splash_04_end.webp";
+import LoadingShopOnTvImage from "../../../assets/images/intro/splash_end.jpg";
 import { changeAppStatus, loadingComplete } from "../../actions/commonActions";
 import CustomImage from "../../components/CustomImage/CustomImage";
 import Loader from "../../components/Loader/Loader";
@@ -18,7 +27,13 @@ import TPopUp from "../../components/TPopUp/TPopUp";
 import { $L } from "../../utils/helperMethods";
 import css from "./LoadingPanel.module.less";
 
-const MIN_SHOWING_TIME = { launching: 2500, wait: 300, default: 1000 };
+const loadingImages = [
+  LoadingPreloadImage,
+  LoadingAnimation,
+  LoadingCompleteImage,
+];
+
+const MIN_SHOWING_TIME = { launching: 4500, wait: 300, default: 1000 };
 const MAX_SHOWING_TIME = 60000;
 const MAX_SHOWING_TIME_UNLIMITED = Number.MAX_SAFE_INTEGER;
 const DUMMY_DELAY = 1000;
@@ -43,7 +58,17 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) {
   const [readyToAni, setReadyToAni] = useState(false);
   const [readyToHide, setReadyToHide] = useState(false);
 
+  const [loadingStep, setLoadingStep] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const webOSVersion = useSelector(
+    (state) => state.common.appStatus?.webOSVersion
+  );
+
+  const httpHeader = useSelector((state) => state.common.httpHeader);
+  const deviceCountryCode = httpHeader?.["X-Device-Country"] || "";
+
   const resumeSpotlightTimeoutRef = useRef(null);
+  const containerRef = useRef(null);
 
   useEffect(() => {
     if (showLoadingPanel.show) {
@@ -186,16 +211,57 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) {
     }
   }, [showingStatus, loadingType]);
 
+  const handleLoad = () => {
+    setIsVisible(true); // 이미지가 로드되면 visible 상태를 true로 설정
+  };
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.classList.add(css.visible);
+    }
+  }, [loadingStep]);
+
+  useEffect(() => {
+    let timer;
+    if (isVisible) {
+      if (loadingStep < 2) {
+        timer = setTimeout(
+          () => {
+            setIsVisible(false); // 다음 이미지를 로드하기 전에 숨김
+            setLoadingStep((prevStep) => prevStep + 1);
+          },
+          loadingStep === 0 ? 1000 : loadingStep === 1 ? 1500 : 2000
+        );
+      } else {
+        return;
+      }
+    }
+    return () => clearTimeout(timer);
+  }, [isVisible, loadingStep]);
+
+  const getImageSrc = () => {
+    if (deviceCountryCode === "RU") {
+      return LoadingShopOnTvImage;
+    } else {
+      if (webOSVersion && Number(webOSVersion) < 5) return LoadingCompleteImage;
+      else return loadingImages[loadingStep];
+    }
+  };
+
   const renderImages = useCallback(() => {
     switch (loadingType) {
       case "launching":
         return (
           <>
-            <CustomImage
-              className={css.fullpageImage}
-              src={loadingImage}
-              alt="Loading animation"
-            ></CustomImage>
+            {loadingStep < 3 && (
+              <img
+                // <CustomImage
+                className={css.fullpageImage}
+                src={getImageSrc()}
+                onLoad={handleLoad}
+                alt="Loading preloadImage"
+              />
+            )}
             <div className={css.baseFontLoading}>fontLoading</div>
             <div className={css.arialFontLoading}>fontLoading</div>
             <div className={css.arialFontBoldLoading}>fontLoading</div>
@@ -208,7 +274,7 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) {
       default:
         return null;
     }
-  }, [loadingType]);
+  }, [loadingType, loadingStep]);
 
   const hidingStyle = showingStatus.hiding
     ? { transition: "opacity " + HIDING_TIME + "ms ease", opacity: 0 }
@@ -231,8 +297,10 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) {
             <div
               className={classNames(
                 css.container,
-                loadingType === "launching" ? css.launchingWrap : null
+                loadingType === "launching" ? css.launchingWrap : null,
+                isVisible && css.visible
               )}
+              ref={containerRef}
             >
               {renderImages()}
             </div>

com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.module.less

@@ -22,6 +22,12 @@
   .flex(@direction: column);
   &.launchingWrap {
     background-color: #fff;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  &.visible {
+    opacity: 1;
   }
 }