[251026] fix: HowAboutThese.small Animation

🕐 커밋 시간: 2025. 10. 26. 13:25:39

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +41줄
  • 삭제: -36줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화

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 (
     <div className={css.container}>
       {/* Header Section */}
@@ -97,13 +97,15 @@ const HowAboutTheseSmall = ({
       </div>
 
       {/* Bubbles Section */}
-      <Marquee className={css.bubblesContainer} marqueeOn="render">
-        {displayQueries.map((query, index) => (
-          <div className={css.bubble} key={index} onClick={() => handleQueryClick(query)}>
-            <div className={css.bubbleText}>{query}</div>
-          </div>
-        ))}
-      </Marquee>
+      <div className={css.bubblesContainer}>
+        <div className={css.bubblesTrack}>
+          {infiniteQueries.map((query, index) => (
+            <div className={css.bubble} key={index} onClick={() => handleQueryClick(query)}>
+              <div className={css.bubbleText}>{query}</div>
+            </div>
+          ))}
+        </div>
+      </div>
 
       {/* See More Button */}
       <TButton className={css.seeMoreButton} size="small" onClick={handleSeeMoreClick}>

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 */