[SearchPanel]

- SearchPanel onCancel 함수에서 setCurrentPage(1)로 초기화 - SearchResultsType.module.less에서 paddingRight 60px 추가 - TInput.module.less에서 아이콘의 width, height 40px로 축소 - TInput - handleContainerClick 함수 추가 - TInput - handleButtonKeyDown 함수 추가
2024-06-07 15:53:28 +09:00
parent abbf3878e1
commit eea7e9aabf
5 changed files with 77 additions and 55 deletions
--- a/com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx
+++ b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx
@@ -89,21 +89,11 @@ export default function TIconButton({

  const _onKeyDown = useCallback(
    (e) => {
-      if (forcedSpotlight) {
-        if (e.key === "ArrowDown" || e.key === "Down") {
-          Spotlight.focus(forcedSpotlight);
-          e.stopPropagation();
-        }
-        if (e.key === "ArrowLeft" || e.key === "Left") {
-          Spotlight.focus("input-field-box");
-        }
-      }
-
      if (onKeyDown) {
        onKeyDown(e);
      }
    },
-    [forcedSpotlight, onKeyDown]
+    [onKeyDown]
  );

  return (
--- a/com.twin.app.shoptime/src/components/TInput/TInput.jsx
+++ b/com.twin.app.shoptime/src/components/TInput/TInput.jsx
@@ -1,8 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useState } from "react";

 import classNames from "classnames";

 import { InputField } from "@enact/sandstone/Input";
+import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";

 import useScrollReset from "../../hooks/useScrollReset";
@@ -31,16 +32,32 @@ export default function TInput({
  ...rest
 }) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
-  const handleKeyDown = (e) => {
+  const handleKeyDown = useCallback((e) => {
    if (e.key === "Enter") {
      onIconClick();
    }
-  };
+  }, []);
+
+  const handleContainerClick = useCallback(() => {
+    Spotlight.focus("input-field-box");
+  }, []);
+
+  const handleButtonKeyDown = useCallback((e) => {
+    if (e.key === "ArrowDown" || e.key === "Down") {
+      Spotlight.move("down");
+    }
+
+    if (e.key === "ArrowLeft" || e.key === "Left") {
+      Spotlight.focus("input-field-box");
+    }
+  }, []);
+
  return (
    <Container
      className={classNames(css.container, className ? className : null)}
      spotlightId={spotlightId}
-      spotlightDisabled={spotlightBoxDisabled}
+      onClick={handleContainerClick}
+      onFocus={() => console.log("chw container focused")}
    >
      <InputField
        {...rest}
@@ -60,6 +77,7 @@ export default function TInput({
          onClick={onIconClick}
          forcedSpotlight={forcedSpotlight}
          ariaLabel="Search, button"
+          onKeyDown={handleButtonKeyDown}
        />
      )}
    </Container>
--- a/com.twin.app.shoptime/src/components/TInput/TInput.module.less
+++ b/com.twin.app.shoptime/src/components/TInput/TInput.module.less
@@ -44,16 +44,16 @@
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
-    width: 41px;
-    height: 41px;
+    width: 40px;
+    height: 40px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background-image: url("../../../assets/images/searchpanel/ico_search_submit.png");

    &:focus {
-      width: 43px;
-      height: 43px;
+      width: 42px;
+      height: 42px;
      transform: translateY(-50%) scale(1.1);
      background-position: center bottom;
    }
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
@@ -12,14 +12,14 @@ import TBody from "../../components/TBody/TBody";
 import TButton from "../../components/TButton/TButton";
 import TInput, { ICONS, KINDS } from "../../components/TInput/TInput";
 import TPanel from "../../components/TPanel/TPanel";
+import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
+import useLogService from "../../hooks/useLogService";
+import usePrevious from "../../hooks/usePrevious";
 import { LOG_MENU, panel_names } from "../../utils/Config";
 import NoSearchResults from "./NoSearchResults/NoSearchResults";
 import RecommendedKeywords from "./RecommendedKeywords/RecommendedKeywords";
 import css from "./SearchPanel.module.less";
 import SearchResults from "./SearchResults/SearchResults";
-import usePrevious from "../../hooks/usePrevious";
-import useLogService from "../../hooks/useLogService";
-import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";

 const ContainerBasic = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -27,8 +27,7 @@ const ContainerBasic = SpotlightContainerDecorator(
 );
 const ITEMS_PER_PAGE = 9;

-
-export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
+export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
  const { sendLogGNB } = useLogService();
  const dispatch = useDispatch();

@@ -41,7 +40,6 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
  const [currentPage, setCurrentPage] = useState(1);
  const [paginatedKeywords, setPaginatedKeywords] = useState([]);
  const [pageChanged, setPageChanged] = useState(false);
-  const [spotBoxDisabled, setSpotBoxDisabled] = useState(false);
  const [timer, setTimer] = useState(null);
  const [searchQuery, setSearchQuery] = useState(
    panelInfo.searchVal ? panelInfo.searchVal : null
@@ -54,7 +52,9 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
  const firstButtonSpotlightId = "first-keyword-button";
  const focusJob = useRef(new Job((func) => func(), 100));
  const cbChangePageRef = useRef(null);
-  const [focusedContainerId, setFocusedContainerId] = useState(panelInfo?.focusedContainerId);
+  const [focusedContainerId, setFocusedContainerId] = useState(
+    panelInfo?.focusedContainerId
+  );
  const focusedContainerIdRef = usePrevious(focusedContainerId);

  useEffect(() => {
@@ -99,6 +99,8 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {

  const handleSearchSubmit = useCallback(
    (query) => {
+      if (!searchPerformed && query === "") return;
+
      if (query.trim()) {
        dispatch(
          getSearch({
@@ -112,11 +114,11 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
      }
      setSearchQuery(query);
    },
-    [dispatch]
+    [dispatch, searchPerformed]
  );

  const handleNext = useCallback(() => {
-    if(!isOnTopRef.current){
+    if (!isOnTopRef.current) {
      return;
    }
    setCurrentPage((prev) => prev + 1);
@@ -124,7 +126,7 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
  }, [currentPage]);

  const handlePrev = useCallback(() => {
-    if(!isOnTopRef.current){
+    if (!isOnTopRef.current) {
      return;
    }
    setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev));
@@ -136,13 +138,18 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
    currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;

  useEffect(() => {
-      const focusJobValue = focusJob.current;
-      if (panelInfo && isOnTop) {
-        if (panelInfo?.currentSpot) {
-          Spotlight.focus(panelInfo.currentSpot);
-          focusJobValue.start(() => Spotlight.focus(panelInfo?.currentSpot));
-        }
+    const focusJobValue = focusJob.current;
+
+    console.log("chw", isOnTop);
+    if (panelInfo && isOnTop) {
+      if (panelInfo?.currentSpot) {
+        Spotlight.focus(panelInfo.currentSpot);
+        focusJobValue.start(() => Spotlight.focus(panelInfo?.currentSpot));
+        const currentFocusedItem = Spotlight.getCurrent();
+
+        console.log("chw", currentFocusedItem);
      }
+    }
  }, [panelInfo, isOnTop]);

  useEffect(() => {
@@ -160,28 +167,23 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
  }, []);

  const handleKeydown = (e) => {
-    if(!isOnTopRef.current){
+    if (!isOnTopRef.current) {
      return;
    }
    if (e.key === "Enter") {
      handleSearchSubmit(searchQuery);
-    } else if (e.key === "ArrowDown" || e.key === "Down") {
-      if (timer) clearTimeout(timer);
-      const newTimer = setTimeout(() => {
-        Spotlight.focus("first-keyword-button");
-      }, 100);
-      setTimer(newTimer);
    }
  };

  const onCancel = useCallback(() => {
-    if(!isOnTopRef.current){
+    if (!isOnTopRef.current) {
      return;
    }
    if (searchQuery === null || searchQuery === "") {
      dispatch(popPanel(panel_names.SEARCH_PANEL));
    } else {
      setSearchQuery("");
+      setCurrentPage(1);
      dispatch(resetSearch());
      Spotlight.focus("search-input-box");
    }
@@ -197,18 +199,30 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
    setFocusedContainerId(containerId);
  }, []);
  return (
-    <TPanel className={css.container} handleCancel={onCancel} spotlightId={spotlightId}>
-      <TBody className={css.tBody} scrollable={false} spotlightDisabled={!isOnTop}>
+    <TPanel
+      className={css.container}
+      handleCancel={onCancel}
+      spotlightId={spotlightId}
+    >
+      <TBody
+        className={css.tBody}
+        scrollable={false}
+        spotlightDisabled={!isOnTop}
+      >
        <TVerticalPagenator
-              className={css.tVerticalPagenator}
-              spotlightId={'search_verticalPagenator'}
-              defaultContainerId={panelInfo?.focusedContainerId}
-              disabled={!isOnTop}
-              // onScrollStop={onScrollStop}
-              onFocusedContainerId={onFocusedContainerId}
-              cbChangePageRef={cbChangePageRef}
-              topMargin={36}>
-          <ContainerBasic className={css.inputContainer} data-wheel-point={true}>
+          className={css.tVerticalPagenator}
+          spotlightId={"search_verticalPagenator"}
+          defaultContainerId={panelInfo?.focusedContainerId}
+          disabled={!isOnTop}
+          // onScrollStop={onScrollStop}
+          onFocusedContainerId={onFocusedContainerId}
+          cbChangePageRef={cbChangePageRef}
+          topMargin={36}
+        >
+          <ContainerBasic
+            className={css.inputContainer}
+            data-wheel-point={true}
+          >
            <TInput
              className={css.inputBox}
              kind={KINDS.withIcon}
@@ -219,7 +233,6 @@ export default function SearchPanel({panelInfo, isOnTop, spotlightId}) {
              onKeyDown={handleKeydown}
              forcedSpotlight="first-keyword-button"
              spotlightId={"search-input-box"}
-              spotlightBoxDisabled={spotBoxDisabled}
            />
          </ContainerBasic>

--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less
@@ -11,6 +11,7 @@
    width: 100%;
  }
  .grid {
+    padding-right: 60px;
    padding-left: 60px;
  }