optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[통합로그]search 로그 정보 수정

Browse Source
This commit is contained in:
opacity@t-win.kr
2025-12-05 16:10:21 +09:00
parent 4e2014ae41
commit 7a9a778b71
1 changed files with 81 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
View File

@@ -4,55 +4,41 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from 'react'; } from "react";
import { import { useDispatch, useSelector } from "react-redux";
useDispatch,
useSelector,
} from 'react-redux';
import { Job } from '@enact/core/util'; import { Job } from "@enact/core/util";
import Spotlight from '@enact/spotlight'; import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import { import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
sendLogGNB, import { getMyRecommandedKeyword } from "../../actions/myPageActions";
sendLogTotalRecommend, import { popPanel, updatePanel } from "../../actions/panelActions";
} from '../../actions/logActions'; import { getSearch, resetSearch } from "../../actions/searchActions";
import { getMyRecommandedKeyword } from '../../actions/myPageActions'; import TBody from "../../components/TBody/TBody";
import { import TInput, { ICONS, KINDS } from "../../components/TInput/TInput";
popPanel, import TPanel from "../../components/TPanel/TPanel";
updatePanel, import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
} from '../../actions/panelActions'; import usePrevious from "../../hooks/usePrevious";
import { import useSearchVoice from "../../hooks/useSearchVoice";
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 { import {
LOG_CONTEXT_NAME, LOG_CONTEXT_NAME,
LOG_MENU, LOG_MENU,
LOG_MESSAGE_ID, LOG_MESSAGE_ID,
panel_names, panel_names,
} from '../../utils/Config'; } from "../../utils/Config";
import { SpotlightIds } from '../../utils/SpotlightIds'; import { SpotlightIds } from "../../utils/SpotlightIds";
import NoSearchResults from './NoSearchResults/NoSearchResults'; import NoSearchResults from "./NoSearchResults/NoSearchResults";
import RecommendedKeywords from './RecommendedKeywords/RecommendedKeywords'; import RecommendedKeywords from "./RecommendedKeywords/RecommendedKeywords";
import css from './SearchPanel.module.less'; import css from "./SearchPanel.module.less";
import SearchResults from './SearchResults/SearchResults'; import SearchResults from "./SearchResults/SearchResults";
const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); const ContainerBasic = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const ITEMS_PER_PAGE = 9; const ITEMS_PER_PAGE = 9;
export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) { export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
@@ -69,7 +55,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [paginatedKeywords, setPaginatedKeywords] = useState([]); const [paginatedKeywords, setPaginatedKeywords] = useState([]);
const [pageChanged, setPageChanged] = useState(false); 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); const [position, setPosition] = useState(null);
let searchQueryRef = usePrevious(searchQuery); let searchQueryRef = usePrevious(searchQuery);
@@ -77,12 +65,16 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
const isRecommendedSearchRef = useRef(false); const isRecommendedSearchRef = useRef(false);
const firstButtonSpotlightId = 'first-keyword-button'; const firstButtonSpotlightId = "first-keyword-button";
const focusJob = useRef(new Job((func) => func(), 100)); const focusJob = useRef(new Job((func) => func(), 100));
const cbChangePageRef = useRef(null); const cbChangePageRef = useRef(null);
const [focusedContainerId, setFocusedContainerId] = useState(panelInfo?.focusedContainerId); const [focusedContainerId, setFocusedContainerId] = useState(
panelInfo?.focusedContainerId
);
const focusedContainerIdRef = usePrevious(focusedContainerId); const focusedContainerIdRef = usePrevious(focusedContainerId);
const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller); const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData.bestSeller
);
useEffect(() => { useEffect(() => {
if (loadingComplete && !recommandedKeywords) { if (loadingComplete && !recommandedKeywords) {
@@ -136,23 +128,23 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
} }
}, []); }, []);
// useEffect(() => { useEffect(() => {
// const result = Object.values(searchDatas).reduce((acc, curr) => { const result = Object.values(searchDatas).reduce((acc, curr) => {
// return acc + curr.length; return acc + curr.length;
// }, 0); }, 0);
// if (searchQuery) { if (searchQuery) {
// dispatch( dispatch(
// sendLogTotalRecommend({ sendLogTotalRecommend({
// query: searchQuery, query: searchQuery,
// searchType: searchPerformed ? 'query' : 'keyword', searchType: searchPerformed ? "query" : "keyword",
// result: result, result: result,
// contextName: LOG_CONTEXT_NAME.SEARCH, contextName: LOG_CONTEXT_NAME.SEARCH,
// messageId: LOG_MESSAGE_ID.SEARCH_ITEM, messageId: LOG_MESSAGE_ID.SEARCH_ITEM,
// }) })
// ); );
// } }
// }, [searchDatas, searchPerformed, dispatch, handleSearchSubmit]); }, [searchDatas, searchPerformed, dispatch, handleSearchSubmit]);
const handleSearchSubmit = useCallback( const handleSearchSubmit = useCallback(
(query) => { (query) => {
@@ -160,9 +152,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
if (query.trim()) { if (query.trim()) {
dispatch( dispatch(
getSearch({ getSearch({
service: 'com.lgshop.app', service: "com.lgshop.app",
query: query, query: query,
domain: 'theme,show,item', domain: "theme,show,item",
}) })
); );
} else { } else {
@@ -176,7 +168,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
// STT 텍스트 수신 핸들러 // STT 텍스트 수신 핸들러
const handleSTTText = useCallback( const handleSTTText = useCallback(
(sttText) => { (sttText) => {
console.log('[SearchPanel] STT text received:', sttText); console.log("[SearchPanel] STT text received:", sttText);
// 1. searchQuery 업데이트 // 1. searchQuery 업데이트
setSearchQuery(sttText); setSearchQuery(sttText);
@@ -185,9 +177,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
if (sttText && sttText.trim()) { if (sttText && sttText.trim()) {
dispatch( dispatch(
getSearch({ getSearch({
service: 'com.lgshop.app', service: "com.lgshop.app",
query: sttText.trim(), query: sttText.trim(),
domain: 'theme,show,item', domain: "theme,show,item",
}) })
); );
} }
@@ -215,7 +207,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
}, [currentPage]); }, [currentPage]);
const hasPrevPage = currentPage > 1; const hasPrevPage = currentPage > 1;
const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length; const hasNextPage =
currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
useEffect(() => { useEffect(() => {
if (panelInfo && isOnTop) { if (panelInfo && isOnTop) {
@@ -244,19 +237,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
return; return;
} }
if (e.key === 'Enter') { if (e.key === "Enter") {
handleSearchSubmit(searchQuery); handleSearchSubmit(searchQuery);
} }
if (position === 0) { if (position === 0) {
if (e.key === 'Left' || e.key === 'ArrowLeft') { if (e.key === "Left" || e.key === "ArrowLeft") {
e.preventDefault(); e.preventDefault();
} }
} }
}; };
const cursorPosition = () => { 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) { if (input) {
setPosition(input.selectionStart); setPosition(input.selectionStart);
} }
@@ -266,13 +261,13 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
if (!isOnTopRef.current) { if (!isOnTopRef.current) {
return; return;
} }
if (searchQuery === null || searchQuery === '') { if (searchQuery === null || searchQuery === "") {
dispatch(popPanel(panel_names.SEARCH_PANEL)); dispatch(popPanel(panel_names.SEARCH_PANEL));
} else { } else {
setSearchQuery(''); setSearchQuery("");
setCurrentPage(1); setCurrentPage(1);
dispatch(resetSearch()); dispatch(resetSearch());
Spotlight.focus('search-input-box'); Spotlight.focus("search-input-box");
} }
}, [searchQuery, dispatch]); }, [searchQuery, dispatch]);
@@ -284,7 +279,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
Spotlight.resume(); Spotlight.resume();
setFirstSpot(true); setFirstSpot(true);
if (panelInfo.currentSpot) { if (panelInfo.currentSpot) {
if (panels[panels.length - 1]?.name === 'searchpanel') { if (panels[panels.length - 1]?.name === "searchpanel") {
Spotlight.focus(panelInfo.currentSpot); Spotlight.focus(panelInfo.currentSpot);
} }
} }
@@ -303,13 +298,21 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
}, [panelInfo, firstSpot]); }, [panelInfo, firstSpot]);
return ( return (
<TPanel className={css.container} handleCancel={onCancel} spotlightId={spotlightId}> <TPanel
<TBody className={css.tBody} scrollable={false} spotlightDisabled={!isOnTop}> className={css.container}
handleCancel={onCancel}
spotlightId={spotlightId}
>
<TBody
className={css.tBody}
scrollable={false}
spotlightDisabled={!isOnTop}
>
<ContainerBasic> <ContainerBasic>
{isOnTop && ( {isOnTop && (
<TVerticalPagenator <TVerticalPagenator
className={css.tVerticalPagenator} className={css.tVerticalPagenator}
spotlightId={'search_verticalPagenator'} spotlightId={"search_verticalPagenator"}
defaultContainerId={panelInfo?.focusedContainerId} defaultContainerId={panelInfo?.focusedContainerId}
disabled={!isOnTop} disabled={!isOnTop}
// onScrollStop={onScrollStop} // onScrollStop={onScrollStop}
@@ -320,7 +323,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
<ContainerBasic <ContainerBasic
className={css.inputContainer} className={css.inputContainer}
data-wheel-point={true} data-wheel-point={true}
spotlightId={'search-input-layer'} spotlightId={"search-input-layer"}
> >
<TInput <TInput
className={css.inputBox} className={css.inputBox}
@@ -332,7 +335,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
onKeyDown={handleKeydown} onKeyDown={handleKeydown}
onKeyUp={cursorPosition} onKeyUp={cursorPosition}
forcedSpotlight="first-keyword-button" forcedSpotlight="first-keyword-button"
spotlightId={'search-input-box'} spotlightId={"search-input-box"}
/> />
</ContainerBasic> </ContainerBasic>