diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx index 2cdb026c..fe46df8e 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx @@ -4,55 +4,41 @@ import React, { useMemo, useRef, useState, -} from 'react'; +} 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 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 { - sendLogGNB, - sendLogTotalRecommend, -} from '../../actions/logActions'; -import { getMyRecommandedKeyword } from '../../actions/myPageActions'; -import { - popPanel, - updatePanel, -} from '../../actions/panelActions'; -import { - getSearch, - resetSearch, -} from '../../actions/searchActions'; -import TBody from '../../components/TBody/TBody'; -import TInput, { - ICONS, - KINDS, -} from '../../components/TInput/TInput'; -import TPanel from '../../components/TPanel/TPanel'; -import TVerticalPagenator - from '../../components/TVerticalPagenator/TVerticalPagenator'; -import usePrevious from '../../hooks/usePrevious'; -import useSearchVoice from '../../hooks/useSearchVoice'; +import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions"; +import { getMyRecommandedKeyword } from "../../actions/myPageActions"; +import { popPanel, updatePanel } from "../../actions/panelActions"; +import { getSearch, resetSearch } from "../../actions/searchActions"; +import TBody from "../../components/TBody/TBody"; +import TInput, { ICONS, KINDS } from "../../components/TInput/TInput"; +import TPanel from "../../components/TPanel/TPanel"; +import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator"; +import usePrevious from "../../hooks/usePrevious"; +import useSearchVoice from "../../hooks/useSearchVoice"; import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names, -} from '../../utils/Config'; -import { SpotlightIds } from '../../utils/SpotlightIds'; -import NoSearchResults from './NoSearchResults/NoSearchResults'; -import RecommendedKeywords from './RecommendedKeywords/RecommendedKeywords'; -import css from './SearchPanel.module.less'; -import SearchResults from './SearchResults/SearchResults'; +} from "../../utils/Config"; +import { SpotlightIds } from "../../utils/SpotlightIds"; +import NoSearchResults from "./NoSearchResults/NoSearchResults"; +import RecommendedKeywords from "./RecommendedKeywords/RecommendedKeywords"; +import css from "./SearchPanel.module.less"; +import SearchResults from "./SearchResults/SearchResults"; -const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); +const ContainerBasic = SpotlightContainerDecorator( + { enterTo: "last-focused" }, + "div" +); const ITEMS_PER_PAGE = 9; export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { @@ -69,7 +55,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { const [currentPage, setCurrentPage] = useState(1); const [paginatedKeywords, setPaginatedKeywords] = useState([]); const [pageChanged, setPageChanged] = useState(false); - const [searchQuery, setSearchQuery] = useState(panelInfo.searchVal ? panelInfo.searchVal : null); + const [searchQuery, setSearchQuery] = useState( + panelInfo.searchVal ? panelInfo.searchVal : null + ); const [position, setPosition] = useState(null); let searchQueryRef = usePrevious(searchQuery); @@ -77,12 +65,16 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { const isRecommendedSearchRef = useRef(false); - const firstButtonSpotlightId = 'first-keyword-button'; + 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); - const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller); + const bestSellerDatas = useSelector( + (state) => state.product.bestSellerData.bestSeller + ); useEffect(() => { if (loadingComplete && !recommandedKeywords) { @@ -136,23 +128,23 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { } }, []); - // useEffect(() => { - // const result = Object.values(searchDatas).reduce((acc, curr) => { - // return acc + curr.length; - // }, 0); + useEffect(() => { + const result = Object.values(searchDatas).reduce((acc, curr) => { + return acc + curr.length; + }, 0); - // if (searchQuery) { - // dispatch( - // sendLogTotalRecommend({ - // query: searchQuery, - // searchType: searchPerformed ? 'query' : 'keyword', - // result: result, - // contextName: LOG_CONTEXT_NAME.SEARCH, - // messageId: LOG_MESSAGE_ID.SEARCH_ITEM, - // }) - // ); - // } - // }, [searchDatas, searchPerformed, dispatch, handleSearchSubmit]); + if (searchQuery) { + dispatch( + sendLogTotalRecommend({ + query: searchQuery, + searchType: searchPerformed ? "query" : "keyword", + result: result, + contextName: LOG_CONTEXT_NAME.SEARCH, + messageId: LOG_MESSAGE_ID.SEARCH_ITEM, + }) + ); + } + }, [searchDatas, searchPerformed, dispatch, handleSearchSubmit]); const handleSearchSubmit = useCallback( (query) => { @@ -160,9 +152,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { if (query.trim()) { dispatch( getSearch({ - service: 'com.lgshop.app', + service: "com.lgshop.app", query: query, - domain: 'theme,show,item', + domain: "theme,show,item", }) ); } else { @@ -176,7 +168,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { // STT 텍스트 수신 핸들러 const handleSTTText = useCallback( (sttText) => { - console.log('[SearchPanel] STT text received:', sttText); + console.log("[SearchPanel] STT text received:", sttText); // 1. searchQuery 업데이트 setSearchQuery(sttText); @@ -185,9 +177,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { if (sttText && sttText.trim()) { dispatch( getSearch({ - service: 'com.lgshop.app', + service: "com.lgshop.app", query: sttText.trim(), - domain: 'theme,show,item', + domain: "theme,show,item", }) ); } @@ -215,7 +207,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { }, [currentPage]); const hasPrevPage = currentPage > 1; - const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length; + const hasNextPage = + currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length; useEffect(() => { if (panelInfo && isOnTop) { @@ -244,19 +237,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { return; } - if (e.key === 'Enter') { + if (e.key === "Enter") { handleSearchSubmit(searchQuery); } if (position === 0) { - if (e.key === 'Left' || e.key === 'ArrowLeft') { + if (e.key === "Left" || e.key === "ArrowLeft") { e.preventDefault(); } } }; const cursorPosition = () => { - const input = document.querySelector(`[data-spotlight-id="input-field-box"] > input`); + const input = document.querySelector( + `[data-spotlight-id="input-field-box"] > input` + ); if (input) { setPosition(input.selectionStart); } @@ -266,13 +261,13 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { if (!isOnTopRef.current) { return; } - if (searchQuery === null || searchQuery === '') { + if (searchQuery === null || searchQuery === "") { dispatch(popPanel(panel_names.SEARCH_PANEL)); } else { - setSearchQuery(''); + setSearchQuery(""); setCurrentPage(1); dispatch(resetSearch()); - Spotlight.focus('search-input-box'); + Spotlight.focus("search-input-box"); } }, [searchQuery, dispatch]); @@ -284,7 +279,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { Spotlight.resume(); setFirstSpot(true); if (panelInfo.currentSpot) { - if (panels[panels.length - 1]?.name === 'searchpanel') { + if (panels[panels.length - 1]?.name === "searchpanel") { Spotlight.focus(panelInfo.currentSpot); } } @@ -303,13 +298,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { }, [panelInfo, firstSpot]); return ( - - + + {isOnTop && (