[TV앱테스트]Dropdown 메뉴에 현재 선택된 메뉴에 체크 표시 등이 없음

[CLM] https://harmony.lge.com:8443/issue/browse/SHOPTIME-2354 [DESC] - TDropdown에서 스타일변경. - 카테고리 / 체크아웃부분에서 각자 클래스 추가하여 다른 스타일 적용되도록변경.
2024-05-28 10:36:08 +09:00
parent 87543c345e
commit 90cddf259d
8 changed files with 291 additions and 100 deletions
--- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";

 import classNames from "classnames";

@@ -15,17 +15,36 @@ export default function TDropDown({
  color,
  selectedIndex,
  scrollTop,
+  onOpen,
+  onClose,
  ...rest
 }) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
-
+  const _onOpen = useCallback(() => {
+    if (onOpen) {
+      onOpen();
+    }
+  }, [onOpen]);
+  const _onClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
  return (
    <DropDown
-      className={classNames(css.tDropdown, css[size], css[color], className)}
+      className={classNames(
+        css.tDropdown,
+        css[size],
+        css[color],
+        selectedIndex && css.selected,
+        className
+      )}
      direction={direction}
      selected={selectedIndex}
      onFocus={handleScrollReset}
      onBlur={handleStopScrolling}
+      onOpen={_onOpen}
+      onClose={_onClose}
      {...rest}
    >
      {children}
--- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
@@ -31,6 +31,9 @@
    &:focus {
      background-color: @PRIMARY_COLOR_RED !important;
    }
+    &.selected {
+      background-color: @PRIMARY_COLOR_RED !important;
+    }
  }
 }

@@ -63,7 +66,10 @@
        > div > div {
          > div {
            padding: 0 15px !important;
-
+            > div[aria-checked="true"] {
+              background-color: @SELECTED_COLOR_RED !important;
+              color: @COLOR_WHITE !important;
+            }
            &:focus {
              background-color: var(
                --list-item-focus-background-color
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
@@ -4,51 +4,47 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from 'react';
+} from "react";

-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";

-import { Job } from '@enact/core/util';
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";

 import {
  clearSubCategory,
  continueGetSubCategory,
  getSubCategory,
-} from '../../actions/mainActions';
-import { updatePanel } from '../../actions/panelActions';
-import SectionTitle from '../../components/SectionTitle/SectionTitle';
-import TBody from '../../components/TBody/TBody';
-import TButton, { TYPES } from '../../components/TButton/TButton';
-import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
-import TDropDown from '../../components/TDropDown/TDropDown';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import useLogService from '../../hooks/useLogService';
-import usePrevious from '../../hooks/usePrevious';
-import useScrollTo from '../../hooks/useScrollTo';
+} from "../../actions/mainActions";
+import { updatePanel } from "../../actions/panelActions";
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
+import TBody from "../../components/TBody/TBody";
+import TButton, { TYPES } from "../../components/TButton/TButton";
+import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
+import TDropDown from "../../components/TDropDown/TDropDown";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
+import usePrevious from "../../hooks/usePrevious";
+import useScrollTo from "../../hooks/useScrollTo";
 import {
  CATEGORY_DATA_MAX_RESULTS_LIMIT,
  LOG_MENU,
  LOG_TP_NO,
  panel_names,
-} from '../../utils/Config';
+} from "../../utils/Config";
 import {
  $L,
  getSpottableDescendants,
  isElementInContainer,
-} from '../../utils/helperMethods';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import ItemContents from './CategoryContents/ItemContents/ItemContents';
-import ShowContents from './CategoryContents/ShowContents/ShowContents';
-import css from './CategoryPanel.module.less';
+} from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
+import ItemContents from "./CategoryContents/ItemContents/ItemContents";
+import ShowContents from "./CategoryContents/ShowContents/ShowContents";
+import css from "./CategoryPanel.module.less";

 const TabContainer = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -342,6 +338,15 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
    }
  }, [categoryItemInfos, categoryShowInfos, tab]);

+  useEffect(() => {
+    const c = document.getElementById("floatLayer");
+
+    c.classList.add("category_dropdown");
+    return () => {
+      c.classList.remove("category_dropdown");
+    };
+  }, []);
+
  return (
    <TPanel>
      <THeader title="CATEGORY" />
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less
@@ -36,7 +36,7 @@
  }
 }

-[id="floatLayer"] {
+[class="category_dropdown"] {
  > div > div[id] > div:nth-child(2) {
    -webkit-filter: none !important;
    filter: none !important;
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
@@ -1,36 +1,33 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";

-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
+
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";

 import {
  getMyInfoCheckoutInfo,
  getTaxInfos,
-} from '../../actions/checkoutActions';
-import { changeAppStatus } from '../../actions/commonActions';
-import { getShoptimeTerms } from '../../actions/empActions';
-import { popPanel } from '../../actions/panelActions';
-import TBody from '../../components/TBody/TBody';
-import TFullPopup from '../../components/TFullPopup/TFullPopup';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import TScroller from '../../components/TScroller/TScroller';
-import { $L } from '../../utils/helperMethods';
-import css from './CheckOutPanel.module.less';
-import CheckoutQRCode from './components/CheckoutQRCode';
-import CheckOutTerms from './components/CheckOutTerms';
-import PinCode from './components/PinCode';
-import PinCodeInput from './components/PinCodeInput';
-import FixedSideBar from './container/FixedSideBar';
-import InformationContainer from './container/InformationContainer';
-import OrderItemsSideBar from './container/OrderItemsSideBar';
-import SummaryContainer from './container/SummaryCotainer';
+} from "../../actions/checkoutActions";
+import { changeAppStatus } from "../../actions/commonActions";
+import { getShoptimeTerms } from "../../actions/empActions";
+import { popPanel } from "../../actions/panelActions";
+import TBody from "../../components/TBody/TBody";
+import TFullPopup from "../../components/TFullPopup/TFullPopup";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import TScroller from "../../components/TScroller/TScroller";
+import useScrollTo from "../../hooks/useScrollTo";
+import { $L } from "../../utils/helperMethods";
+import css from "./CheckOutPanel.module.less";
+import CheckoutQRCode from "./components/CheckoutQRCode";
+import CheckOutTerms from "./components/CheckOutTerms";
+import PinCode from "./components/PinCode";
+import PinCodeInput from "./components/PinCodeInput";
+import FixedSideBar from "./container/FixedSideBar";
+import InformationContainer from "./container/InformationContainer";
+import OrderItemsSideBar from "./container/OrderItemsSideBar";
+import SummaryContainer from "./container/SummaryCotainer";

 export default function CheckOutPanel() {
  const dispatch = useDispatch();
@@ -55,6 +52,10 @@ export default function CheckOutPanel() {
  const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
  const [placeOrderPopup, setPlaceOrderPopup] = useState(false);

+  const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
+    useScrollTo();
+  const spotJob = useRef(new Job((func) => func(), 1000));
+
  useEffect(() => {
    dispatch(getShoptimeTerms());

@@ -96,6 +97,15 @@ export default function CheckOutPanel() {
    );
  }, [dispatch, infoForCheckoutData, productData]);

+  useEffect(() => {
+    spotJob.current.start(() => {
+      Spotlight.focus("spotlightId_backBtn");
+    });
+    return () => {
+      spotJob.current.stop();
+    };
+  }, []);
+
  const onBackClick = useCallback(() => {
    dispatch(popPanel());
  }, [dispatch]);
@@ -114,7 +124,7 @@ export default function CheckOutPanel() {
        isTabActivated={false}
        spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
      >
-        <TBody className={css.tbody}>
+        <TBody className={css.tbody} cbScrollTo={getScrollToBody}>
          <THeader
            className={css.theader}
            title="CHECKOUT"
@@ -126,6 +136,7 @@ export default function CheckOutPanel() {
            <InformationContainer
              toggleOrderSideBar={toggleOrderSideBar}
              toggleOfferSideBar={toggleOfferSideBar}
+              scrollTopBody={scrollTopBody}
            />
          </div>
          {/* <CheckoutQRCode open={false} /> */}
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx
@@ -1,20 +1,14 @@
-import React, {
-  memo,
-  useCallback,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useEffect, useState } from "react";

-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import classNames from "classnames";

-import CustomImage from '../../../components/CustomImage/CustomImage';
-import TDropDown from '../../../components/TDropDown/TDropDown';
-import {
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from './OffersPromotionItemCard.module.less';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import TDropDown from "../../../components/TDropDown/TDropDown";
+import { $L, scaleW } from "../../../utils/helperMethods";
+import css from "./OffersPromotionItemCard.module.less";

 const OffersPromotionItemContainer = SpotlightContainerDecorator("div");

@@ -43,7 +37,7 @@ export default memo(function OffersPromotionItemCard({
  const [selectedCoupon, setSelectedCoupon] = useState(null);
  const [dcPrice, setDcPrice] = useState(price3 || price2);
  const [selectedIndex, setSelectedIndex] = useState(-1);
-
+  const [openChk, setOpenChk] = useState(false);
  const couponSetting = useCallback(
    (info, param) => {
      const itemPrice = price3 ? Number(price3) : Number(price2);
@@ -88,6 +82,21 @@ export default memo(function OffersPromotionItemCard({
    console.log("chw", selectedCoupon, dcPrice);
  };

+  const dropDownOpen = useCallback(() => {
+    setOpenChk(true);
+  }, []);
+  const dropDownClose = useCallback(() => {
+    setOpenChk(false);
+  }, []);
+
+  useEffect(() => {
+    const c = document.getElementById("floatLayer");
+
+    c.classList.add("checkout_dropdown");
+    return () => {
+      c.classList.remove("checkout_dropdown");
+    };
+  }, []);
  return (
    <OffersPromotionItemContainer className={css.itemContainer}>
      <div className={css.itemHeader}>
@@ -143,10 +152,15 @@ export default memo(function OffersPromotionItemCard({
      </div>
      <div className={css.dropDownWrap}>
        <TDropDown
-          className={css.dropDown}
+          className={classNames(
+            css.dropDown,
+            openChk === true ? css.selected : null
+          )}
          width="x-large"
          selectedIndex={selectedIndex}
          onSelect={handleCouponSelect}
+          onOpen={dropDownOpen}
+          onClose={dropDownClose}
        >
          {prdtCoupon.map((item) => item.cpnTtl)}
        </TDropDown>
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less
@@ -88,4 +88,112 @@
      }
    }
  }
+  > .dropDownWrap {
+    width: 600px;
+    margin: 10px auto 0;
+    > div.dropDown {
+      width: 100%;
+      &.selected {
+        > div {
+          > div {
+            background-color: @COLOR_WHITE !important;
+            color: @PRIMARY_COLOR_RED !important;
+            border: 1px solid @PRIMARY_COLOR_RED !important;
+            box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+            > div:nth-child(2) {
+              > div:first-child {
+                color: @PRIMARY_COLOR_RED !important;
+              }
+            }
+          }
+        }
+      }
+
+      > div {
+        width: 100%;
+
+        > div {
+          width: 100% !important;
+          background-color: @COLOR_WHITE !important;
+          color: @COLOR_GRAY03 !important;
+          border: 1px solid @COLOR_GRAY02;
+          > div:nth-child(2) {
+            > div:first-child {
+              color: @COLOR_GRAY03 !important;
+            }
+          }
+          &:focus,
+          &:active {
+            background-color: @COLOR_WHITE !important;
+            color: @PRIMARY_COLOR_RED !important;
+            border: 1px solid @PRIMARY_COLOR_RED !important;
+            box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+            > div:nth-child(2) {
+              > div:first-child {
+                color: @PRIMARY_COLOR_RED !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+[class="checkout_dropdown"] {
+  > div > div[id] > div:nth-child(2) {
+    -webkit-filter: none !important;
+    filter: none !important;
+    > div:nth-child(1) {
+      height: 123px !important;
+      width: 600px !important;
+      margin-top: 0 !important;
+      border-radius: 0 0 6px 6px !important;
+      background-color: @COLOR_GRAY03 !important;
+      overflow: hidden;
+      > div {
+        width: 600px !important;
+        height: 123px !important;
+        border-radius: 0 !important;
+        padding-top: 0 !important;
+        > div {
+          > div {
+            > div {
+              padding: 0 !important;
+
+              &:first-child {
+                > div:nth-child(1) {
+                  border-radius: 6px 6px 0 0 !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 !important;
+                  }
+                  > div:first-child {
+                    will-change: unset !important;
+                  }
+                }
+              }
+              &:last-child {
+                > div:nth-child(1) {
+                  border-radius: 0 0 6px 6px !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 0 6px 6px !important;
+                  }
+                }
+              }
+              > div:nth-child(1) {
+                height: 61px !important;
+                padding: 20px 19px !important;
+                &:focus {
+                  background-color: @PRIMARY_COLOR_RED !important;
+                  color: @COLOR_WHITE !important;
+                  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
@@ -1,21 +1,19 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from "react";

-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";

-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

-import TButton from '../../../components/TButton/TButton';
-import { $L } from '../../../utils/helperMethods';
-import BillingAddressCard from '../components/BillingAddressCard';
-import PaymentCard from '../components/PaymentCard';
-import ShippingAddressCard from '../components/ShippingAddressCard';
-import Subject from '../components/Subject';
-import css from './InformationContainer.module.less';
+import TButton from "../../../components/TButton/TButton";
+import useScrollTo from "../../../hooks/useScrollTo";
+import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
+import { $L } from "../../../utils/helperMethods";
+import BillingAddressCard from "../components/BillingAddressCard";
+import PaymentCard from "../components/PaymentCard";
+import ShippingAddressCard from "../components/ShippingAddressCard";
+import Subject from "../components/Subject";
+import css from "./InformationContainer.module.less";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -27,19 +25,42 @@ const BtnSpot = Spottable("p");
 export default function InformationContainer({
  toggleOfferSideBar,
  toggleOrderSideBar,
+  scrollTopBody,
 }) {
-  const dispatch = useDispatch();
-
  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);

-  const handleButtonClick = useCallback(() => {}, []);
+  const { getScrollTo } = useScrollTo();
+  const { scrollTopByDistance } = useScrollTopByDistance();
+
+  const handleFocus = (e) => {
+    const test = e;
+    const target = e.currentTarget.getAttribute("data-spotlight-id");
+
+    const targetValue = '[data-spotlight-id="' + target + '"]';
+    if (cursorVisible) {
+      return;
+    }
+    scrollTopByDistance(
+      `[data-marker="scroll-marker"]`,
+      targetValue,
+      scrollTopBody,
+      40
+    );
+  };

  return (
    <>
      <Container className={css.container}>
+        <div data-marker="scroll-marker" />
        <Subject title="ORDER ITEMS" />
        <div className={css.markBtn}>
-          <BtnSpot onClick={toggleOrderSideBar}>
+          <BtnSpot
+            onClick={toggleOrderSideBar}
+            scrollTopBody={scrollTopBody}
+            spotlightId="checkout-btn-first"
+            onFocus={handleFocus}
+          >
            {checkoutData.productList?.length} ITEMS
          </BtnSpot>
        </div>
@@ -61,7 +82,14 @@ export default function InformationContainer({
        <div className={css.listBox}>
          <Subject title="OFFERS & PROMOTION" />
          <div className={css.markBtn}>
-            <BtnSpot onClick={toggleOfferSideBar}>$12.60</BtnSpot>
+            <BtnSpot
+              onClick={toggleOfferSideBar}
+              scrollTopBody={scrollTopBody}
+              spotlightId="checkout-btn-fifth"
+              onFocus={handleFocus}
+            >
+              $12.60
+            </BtnSpot>
          </div>
        </div>
      </Container>