[251024] fix: HowAboutThese

🕐 커밋 시간: 2025. 10. 24. 11:44:50

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx (javascript):
    ❌ Deleted: SearchResultsNew()

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -148,7 +148,7 @@ export default function ProductAllSection({
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
 
   // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
-  const [productVideoVersion, setProductVideoVersion] = useState(3);
+  const [productVideoVersion, setProductVideoVersion] = useState(2);
 
   // const [currentHeight, setCurrentHeight] = useState(0);
   //하단부분까지 갔을때 체크용

com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx

@@ -62,18 +62,17 @@ const SafeImage = ({ src, alt, className, ...props }) => {
     };
   }, []);
 
-  return (
-    <img
-      ref={imgRef}
-      src={src}
-      alt={alt}
-      className={className}
-      {...props}
-    />
-  );
+  return <img ref={imgRef} src={src} alt={alt} className={className} {...props} />;
 };
 
-const SearchResultsNew = ({ panelInfo, itemInfo, showInfo, themeInfo, shopperHouseInfo, keywordClick }) => {
+const SearchResultsNew = ({
+  panelInfo,
+  itemInfo,
+  showInfo,
+  themeInfo,
+  shopperHouseInfo,
+  keywordClick,
+}) => {
   // ShopperHouse 데이터를 ItemCard 형식으로 변환
   const convertedShopperHouseItems = useMemo(() => {
     if (!shopperHouseInfo || !shopperHouseInfo.results || shopperHouseInfo.results.length === 0) {
@@ -168,11 +167,10 @@ const SearchResultsNew = ({ panelInfo, itemInfo, showInfo, themeInfo, shopperHou
   );
 
   // buttonTabList 최적화 - 의존성이 변경될 때만 재계산
-  const buttonTabList = useMemo(() => getButtonTabList(), [
-    convertedShopperHouseItems?.length,
-    itemInfo?.length,
-    showInfo?.length
-  ]);
+  const buttonTabList = useMemo(
+    () => getButtonTabList(),
+    [convertedShopperHouseItems?.length, itemInfo?.length, showInfo?.length]
+  );
 
   // 현재 탭의 데이터 가져오기 - ShopperHouse 데이터 우선
   const currentData = tab === 0 ? convertedShopperHouseItems || itemInfo : showInfo;
@@ -296,11 +294,11 @@ const SearchResultsNew = ({ panelInfo, itemInfo, showInfo, themeInfo, shopperHou
     const targetId = panelInfo?.currentSpot
       ? panelInfo?.currentSpot
       : themeInfo?.length > 0
-        ? "searchProduct-0"
+        ? 'searchProduct-0'
         : itemInfo?.length > 0
-          ? "searchItemContents0"
+          ? 'searchItemContents0'
           : showInfo?.length > 0
-            ? "categoryShowContents0"
+            ? 'categoryShowContents0'
             : null;
 
     if (!targetId) return;
@@ -312,17 +310,21 @@ const SearchResultsNew = ({ panelInfo, itemInfo, showInfo, themeInfo, shopperHou
     themeInfo?.length,
     itemInfo?.length,
     showInfo?.length,
-    convertedShopperHouseItems?.length // shopperHouseInfo 대신 구체적인 의존성 사용
+    convertedShopperHouseItems?.length, // shopperHouseInfo 대신 구체적인 의존성 사용
   ]);
 
   return (
     <div className={css.searchBox}>
-      {/* HowAboutThese Small 버전 - 기본 인라인 표시 */}
-      <HowAboutTheseSmall
-        relativeQueries={relativeQueries}
-        onQueryClick={handleSmallQueryClick}
-        onSeeMoreClick={handleShowFullHowAboutThese}
-      />
+      {/* HowAboutThese Small 버전 - relativeQueries가 존재할 때만 표시 */}
+      {relativeQueries && relativeQueries.length > 0 && (
+        <SpottableDiv spotlightId="how-about-these-small-wrapper">
+          <HowAboutTheseSmall
+            relativeQueries={relativeQueries}
+            onQueryClick={handleSmallQueryClick}
+            onSeeMoreClick={handleShowFullHowAboutThese}
+          />
+        </SpottableDiv>
+      )}
 
       {/* HowAboutThese Full 버전 - 오버레이로 표시 */}
       {howAboutTheseMode === HOW_ABOUT_THESE_MODES.FULL && (