[못올린 파일들 업로드]

- TPOPUP KIND추가
 - cartgorypanel, 홈 bestseller 에너지 라벨 노출처리때문에 Titemcardnew로 변경.
 - productallsection. 우측포커스시 버튼 색 변경관련 처리 미상신건 처리.

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

@@ -1,22 +1,38 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import Alert from "@enact/sandstone/Alert";
+import Alert from '@enact/sandstone/Alert';
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
-import Spottable from "@enact/spotlight/Spottable";
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
+import defaultImageItem
-import { cancelFocusElement, focusElement } from "../../actions/commonActions";
+  from '../../../assets/images/img-thumb-empty-product@3x.png';
-import { SpotlightIds } from "../../utils/SpotlightIds";
+import {
-import CustomImage from "../CustomImage/CustomImage";
+  cancelFocusElement,
-import TButton from "../TButton/TButton";
+  focusElement,
-import css from "../TPopUp/TPopUp.module.less";
+} from '../../actions/commonActions';
-import { $L, scaleH, scaleW } from "../../utils/helperMethods";
+import {
-import TButtonTab from "../TButtonTab/TButtonTab";
+  $L,
-import TButtonScroller from "../TButtonScroller/TButtonScroller";
+  scaleH,
+  scaleW,
+} from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import CustomImage from '../CustomImage/CustomImage';
+import TButton from '../TButton/TButton';
+import TButtonScroller from '../TButtonScroller/TButtonScroller';
+import TButtonTab from '../TButtonTab/TButtonTab';
+import css from '../TPopUp/TPopUp.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
@@ -46,6 +62,7 @@ const KINDS = [
   "introTermsPopup",
   "optionPopup",
   "eventBannerPopup",
+  "energyPopup",
   "supportPopup",
   "exitPopup",
   "couponPopup",
@@ -64,15 +81,14 @@ const KINDS = [
   "trackPackagePopup",
   "optionalAgreement",
   "wideLeftPopup",
-  "normal",  
+  "normal",
 ];
 
 export const CONTENT_TYPES = {
-  TERMS: 'terms',
+  TERMS: "terms",
-  DEFAULT: 'default'
+  DEFAULT: "default",
 };
 
-
 export default function TPopUp({
   kind,
   children,
@@ -110,7 +126,7 @@ export default function TPopUp({
 }) {
   const dispatch = useDispatch();
   const popupVisible = useSelector((state) => state.common.popup.popupVisible);
-  const httpHeader = useSelector((state) => state.common.httpHeader);  
+  const httpHeader = useSelector((state) => state.common.httpHeader);
 
   // useEffect(() => {
   //   if (popupVisible) {
@@ -133,14 +149,16 @@ export default function TPopUp({
   //   }
   // }, [spotlightId, popupVisible]);
 
-  
   useEffect(() => {
     if (popupVisible) {
       let focusTarget;
       if (spotlightId) {
         // console.log("focusTarget-1", spotlightId);
         focusTarget = spotlightId;
-      } else if (kind === "introTermsPopup" || contentType === CONTENT_TYPES.TERMS) {
+      } else if (
+        kind === "introTermsPopup" ||
+        contentType === CONTENT_TYPES.TERMS
+      ) {
         // console.log("focusTarget-2", "tPopupBtn1");
         focusTarget = "tPopupBtn1";
       } else {
@@ -148,7 +166,7 @@ export default function TPopUp({
         focusTarget = SpotlightIds.TPOPUP;
       }
 
-      const timerId = setTimeout(() => {        
+      const timerId = setTimeout(() => {
         console.log("focusTarget", focusTarget);
         Spotlight.focus(focusTarget);
       }, 200);
@@ -181,28 +199,29 @@ export default function TPopUp({
     }
     return ButtonContainer;
   }, [kind]);
-  
+
-  
   // optionalAgreement
   // 자동으로 Yes/No 버튼 텍스트 설정
-  
+
   const finalButton1Text = useMemo(() => {
     if (kind === "optionalAgreement" && !button1Text) {
       return "Yes";
     }
     return button1Text;
   }, [kind, button1Text]);
-  
+
   const finalButton2Text = useMemo(() => {
     if (kind === "optionalAgreement" && !button2Text) {
       return "No";
     }
     return button2Text;
   }, [kind, button2Text]);
-  
+
   // optionalAgreement일 경우 항상 버튼 표시
   const shouldShowButtons = useMemo(() => {
-    return hasButton || kind === "optionalAgreement" || kind === "introTermsPopup";
+    return (
+      hasButton || kind === "optionalAgreement" || kind === "introTermsPopup"
+    );
   }, [hasButton, kind]);
 
   //-------------------------------------------------------
@@ -306,7 +325,7 @@ export default function TPopUp({
 
   // 약관 제목 매핑 함수
   const getTermsTitle = useCallback((trmsTpCd) => {
-    switch(trmsTpCd) {
+    switch (trmsTpCd) {
       case "MST00401":
         return $L("Privacy Policy");
       case "MST00402":
@@ -347,20 +366,22 @@ export default function TPopUp({
     );
   }, [termsData, getTermsTitle]);
 
-
   // 약관 동의 핸들러
-  const handleTermsAgree = useCallback((e) => {
+  const handleTermsAgree = useCallback(
-    if (onTermsAgree) {
+    (e) => {
-      onTermsAgree(e);
+      if (onTermsAgree) {
-    }
+        onTermsAgree(e);
-    if (onClick) {
+      }
-      onClick(e);
+      if (onClick) {
-    }
+        onClick(e);
-  }, [onTermsAgree, onClick]);
+      }
+    },
+    [onTermsAgree, onClick]
+  );
 
   // 컨텐츠 타입별 렌더링 함수
   const renderContent = useMemo(() => {
-    switch(contentType) {
+    switch (contentType) {
       case CONTENT_TYPES.TERMS:
         return renderTermsContent();
       default:
@@ -368,7 +389,6 @@ export default function TPopUp({
     }
   }, [contentType, children, renderTermsContent]);
 
-  
   return (
     <Alert
       open={open}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx

@@ -10,6 +10,7 @@ import SpotlightContainerDecorator
 
 import { pushPanel } from '../../../../actions/panelActions';
 import TItemCard from '../../../../components/TItemCard/TItemCard';
+import TItemCardNew from '../../../../components/TItemCard/TItemCard.new';
 import { panel_names } from '../../../../utils/Config';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import NoResultsCategoryItems
@@ -54,10 +55,17 @@ export default function ItemContents({ onClick }) {
         {itemListDatas &&
           itemListDatasItem.length > 0 &&
           itemListDatasItem.map((item, index) => {
-            const { imgUrl, offerInfo, patnrId, prdtId, prdtNm, priceInfo } =
+            const {
-              item;
+              imgUrl,
+              offerInfo,
+              patnrId,
+              prdtId,
+              prdtNm,
+              priceInfo,
+              euEnrgLblInfos,
+            } = item;
             return (
-              <TItemCard
+              <TItemCardNew
                 key={prdtId}
                 imageAlt={prdtId}
                 imageSource={imgUrl}
@@ -70,6 +78,7 @@ export default function ItemContents({ onClick }) {
                 label={index * 1 + 1 + " of " + itemListDatas.total}
                 lastLabel=" go to detail, button"
                 data-wheel-point={index >= 5}
+                euEnrgLblInfos={euEnrgLblInfos}
               />
             );
           })}

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -290,8 +290,8 @@
   }
 
   &.active {
-    outline: 2px solid @PRIMARY_COLOR_RED !important;
+    background: #4f172c;
-
+    outline: 2px solid #4f172c;
     .shopByMobileText {
       color: white !important;
     }
@@ -410,7 +410,8 @@
   }
 
   &.active {
-    border: 4px solid @PRIMARY_COLOR_RED;
+    border: 4px solid #4f172c;
+    background: #4f172c;
   }
 }
 

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -229,6 +229,7 @@ const BestSeller = ({
                 patncNm,
                 catNm,
                 foryou,
+                euEnrgLblInfos,
               },
               itemIndex
             ) => {
@@ -267,6 +268,7 @@ const BestSeller = ({
                   firstLabel={rankText}
                   label={itemIndex * 1 + 1 + " of " + bestSellerNewData.length}
                   lastLabel=" go to detail, button"
+                  euEnrgLblInfos={euEnrgLblInfos}
                 >
                   {foryou === true && <Tag text={"For You"} />}
                 </TItemCardNew>