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 */}
-
+
+
+ {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 */