diff --git a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx index b38b2b35..86931a9a 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx @@ -3,9 +3,6 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { useDispatch } from 'react-redux'; -import Marquee from '@enact/sandstone/Marquee'; -import Spottable from '@enact/spotlight/Spottable'; - import icShoptime from '../../../../assets/images/icons/ic-shoptime.png'; import { getShopperHouseSearch } from '../../../actions/searchActions'; import { updatePanel } from '../../../actions/panelActions'; @@ -83,6 +80,9 @@ const HowAboutTheseSmall = ({ // 첫 번째 다섯개까지 쿼리만 표시 (small 버전) const displayQueries = queries.slice(0, 5); + // 마퀴 효과: 2배만 복제 (끝없는 루프) + const infiniteQueries = [...displayQueries, ...displayQueries]; + return (
{/* Header Section */} @@ -97,13 +97,15 @@ const HowAboutTheseSmall = ({
{/* Bubbles Section */} - - {displayQueries.map((query, index) => ( -
handleQueryClick(query)}> -
{query}
-
- ))} -
+
+
+ {infiniteQueries.map((query, index) => ( +
handleQueryClick(query)}> +
{query}
+
+ ))} +
+
{/* See More Button */} diff --git a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less index 8bedbe9b..c6d877ab 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less @@ -6,9 +6,11 @@ height: 100%; padding: 32px 60px; // 상하 32px (30px + 2px for focus border), 좌우 60px background: #dddddd; - display: inline-flex; + display: flex; + flex-direction: row; justify-content: space-between; align-items: center; + position: relative; } .container > * + * { @@ -60,33 +62,45 @@ /* Bubbles Section */ .bubblesContainer { - width: 1200px; + flex: 1; + min-width: 0; height: 64px; - display: inline-flex; - justify-content: flex-start; - align-items: center; - > div { - > div { - display: flex; - justify-content: space-between; - } - } + overflow: hidden; + position: relative; + margin: 0 19px; } -// .bubblesContainer > * + * { -// margin-left: 15px; -// } +.bubblesTrack { + display: inline-flex; + align-items: center; + animation: scrollBubbles 25s linear infinite; +} + +@keyframes scrollBubbles { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); // 10개 중 5개만 이동 (2배 복제이므로) + } +} .bubble { flex: none; margin-right: 15px; + min-width: max-content; // 텍스트를 다 표시하도록 + flex-shrink: 0; // 크기 유지 background: white; border-radius: 100px; border: 4px solid #dadada; cursor: pointer; - width: 300px; - .elip(@clamp:1); + padding: 0 20px; + height: 64px; + display: flex; + align-items: center; + white-space: nowrap; + &:focus { border: 4px solid @PRIMARY_COLOR_RED; } @@ -94,10 +108,6 @@ &:hover { background: #f8f8f8; } - - > * + * { - margin-top: 10px; - } } .fadeContainer { @@ -127,18 +137,11 @@ } .bubbleText { - padding: 0 16px; - text-align: center; color: black; font-size: 24px; font-family: "LG Smart UI", sans-serif; font-weight: 700; - line-height: 24px; - white-space: nowrap; // ✨ 텍스트를 한 줄로 유지 - text-overflow: ellipsis; // ✨ 넘치는 부분 "..." 표시 - overflow: hidden; // ✨ 넘친 부분 숨김 - height: 64px; - line-height: 64px; + white-space: nowrap; } /* See More Button */