[251022] feat: HowAboutThese-2

🕐 커밋 시간: 2025. 10. 22. 20:13:22

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +28줄
  • 삭제: -6줄

📁 추가된 파일:
  + com.twin.app.shoptime/assets/images/icons/ic-shoptime.png

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.module.less
  ~ 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.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx (javascript):
    🔄 Modified: Spottable()

com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.jsx

@@ -7,6 +7,7 @@ import Spottable from '@enact/spotlight/Spottable';
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
 
 import { getShopperHouseSearch } from '../../../actions/searchActions';
+import icShoptime from '../../../../assets/images/icons/ic-shoptime.png';
 import css from './HowAboutThese.module.less';
 
 const OverlayContainer = SpotlightContainerDecorator(
@@ -76,8 +77,10 @@ const HowAboutThese = ({ relativeQueries = [], onQueryClick, onClose }) => {
       <div className={css.header}>
         <div className={css.headerLeft}>
           <div className={css.headerContent}>
-            {/* 아이콘 자리 - 현재는 비워둠 */}
+            {/* 아이콘 */}
-            <div className={css.iconPlaceholder} />
+            <div className={css.iconPlaceholder}>
+              <img src={icShoptime} alt="Shoptime" className={css.icon} />
+            </div>
             <div className={css.titleContainer}>
               <div className={css.title}>How about these?</div>
             </div>

com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.module.less

@@ -48,7 +48,15 @@
   position: absolute;
   left: 0;
   top: 0;
-  /* TODO: Add icon styling when needed */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
 }
 
 .titleContainer {

com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx

@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import Spottable from '@enact/spotlight/Spottable';
 
 import { getShopperHouseSearch } from '../../../actions/searchActions';
+import icShoptime from '../../../../assets/images/icons/ic-shoptime.png';
 import css from './HowAboutThese.small.module.less';
 
 const SpottableBubble = Spottable('div');
@@ -62,8 +63,10 @@ const HowAboutTheseSmall = ({ relativeQueries = [], onQueryClick, onSeeMoreClick
     <div className={css.container}>
       {/* Header Section */}
       <div className={css.header}>
-        {/* 아이콘 자리 - 현재는 비워둠 */}
+        {/* 아이콘 */}
-        <div className={css.iconPlaceholder} />
+        <div className={css.iconPlaceholder}>
+          <img src={icShoptime} alt="Shoptime" className={css.icon} />
+        </div>
         <div className={css.titleContainer}>
           <div className={css.title}>How about these?</div>
         </div>

com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.module.less

@@ -23,7 +23,15 @@
   width: 48px;
   height: 48px;
   flex-shrink: 0;
-  /* TODO: Add icon styling when needed */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
 }
 
 .titleContainer {