Merge remote-tracking branch 'gitlab/develop_si' into develop_si

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -33,25 +33,24 @@ import {
   setHidePopup,
   setShowPopup,
 } from '../../../actions/commonActions.js';
-import {
-  sendLogGNB,
-  sendLogDetail,
-  sendLogTotalRecommend,
-  sendLogProductDetail,
-  sendLogShopByMobile,
-} from '../../../actions/logActions';
-import { updatePanel } from '../../../actions/panelActions';
-import { panel_names, LOG_CONTEXT_NAME, LOG_MESSAGE_ID, LOG_TP_NO } from '../../../utils/Config';
 import {
   getProductCouponDownload,
   getProductCouponSearch,
   getProductCouponTotDownload,
 } from '../../../actions/couponActions.js';
+import {
+  sendLogDetail,
+  sendLogGNB,
+  sendLogProductDetail,
+  sendLogShopByMobile,
+  sendLogTotalRecommend,
+} from '../../../actions/logActions';
 // import { pushPanel } from '../../../actions/panelActions';
 import {
   minimizeModalMedia,
   restoreModalMedia,
 } from '../../../actions/mediaActions';
+import { updatePanel } from '../../../actions/panelActions';
 import { pauseFullscreenVideo } from '../../../actions/playActions';
 import { resetShowAllReviews } from '../../../actions/productActions';
 import {
@@ -67,8 +66,13 @@ import TVirtualGridList
   from '../../../components/TVirtualGridList/TVirtualGridList.jsx';
 import useReviews from '../../../hooks/useReviews/useReviews';
 import useScrollTo from '../../../hooks/useScrollTo';
-import { formatGMTString } from '../../../utils/helperMethods';
 import { BUYNOW_CONFIG } from '../../../utils/BuyNowConfig';
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MESSAGE_ID,
+  LOG_TP_NO,
+  panel_names,
+} from '../../../utils/Config';
 import * as Config from '../../../utils/Config.js';
 import {
   andThen,
@@ -85,7 +89,10 @@ import {
   tap,
   when,
 } from '../../../utils/fp';
-import { $L } from '../../../utils/helperMethods';
+import {
+  $L,
+  formatGMTString,
+} from '../../../utils/helperMethods';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import ShowUserReviews from '../../UserReview/ShowUserReviews';
 // import CustomScrollbar from '../components/CustomScrollbar/CustomScrollbar';
@@ -1781,6 +1788,7 @@ export default function ProductAllSection({
                           onScrollToImages={handleScrollToImagesV1}
                           onFocus={() => {}}
                           data-spotlight-id="product-video-player-container"
+                          disclaimer={productData.disclaimer}
                         />
                       ) : (
                         <ProductVideoV2

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less

@@ -215,3 +215,32 @@
     border-radius: 0;
   }
 }
+
+.notice {
+    width: 100%;
+    height: 54px;
+    background: #000000;
+    .flex(@justifyCenter:flex-start);
+    padding: 6px 18px 18px 18px;
+    position: absolute;
+    bottom: 0;
+    border-radius: 0 0 12px 12px;
+
+    .marquee {
+      width: 100%;
+      height: 100%;
+    }
+    img {
+      width: 18px;
+      height: 18px;
+      margin: 10px 12px 0 0;
+      object-fit: contain;
+    }
+    span {
+      line-height: normal;
+      letter-spacing: normal;
+      text-align: left;
+      .font(@fontFamily:@baseFont, @fontSize:20px);
+      color: @COLOR_GRAY04;
+    }
+  }

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx

@@ -1,17 +1,31 @@
-import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
+import Marquee from '@enact/sandstone/Marquee';
 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
+
+import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
+import ic_warning from '../../../../../assets/images/icons/ic-warning@3x.png';
 import {
-  startMediaPlayer,
   finishMediaPreview,
-  switchMediaToFullscreen,
   minimizeModalMedia,
   restoreModalMedia,
+  startMediaPlayer,
+  switchMediaToFullscreen,
 } from '../../../../actions/mediaActions';
 import CustomImage from '../../../../components/CustomImage/CustomImage';
 import { panel_names } from '../../../../utils/Config';
-import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
 import css from './ProductVideo.module.less';
 
 const SpottableComponent = Spottable('div');
@@ -25,6 +39,7 @@ export default function ProductVideo({
   autoPlay = false, // 자동 재생 여부
   continuousPlay = false, // 반복 재생 여부
   onFocus = null, // 외부에서 전달된 포커스 핸들러
+  disclaimer,
 }) {
   const dispatch = useDispatch();
 
@@ -315,6 +330,12 @@ export default function ProductVideo({
           <img src={playImg} alt="재생" />
         </div>
       </div>
+      <div className={css.notice}>
+        <Marquee className={css.marquee} marqueeOn="render">
+          <img src={ic_warning} alt={disclaimer} />
+          <span>{disclaimer}</span>
+        </Marquee>
+      </div>
     </SpottableComponent>
   );
 }