[251104] fix: ShopperHouse sortingType,rangeType처리

🕐 커밋 시간: 2025. 11. 04. 14:25:46

📊 변경 통계:
  • 총 파일: 2개

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

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

@@ -31,7 +31,7 @@ const ITEMS_PER_PAGE = 10;
 
 // 정렬 타입 매핑 (동적 API 라벨 + 5개 옵션)
 const SORTING_TYPE_MAP = {
-  0: 'API_RECOMMENDED',  // 동적 라벨 (LG Recommended 등)
+  0: 'LG_RECOMMENDED',   // LG추천순 (기본값)
   1: 'Price(highest)',
   2: 'Price(lowest)',
   3: 'Top Review Rate',
@@ -39,6 +39,16 @@ const SORTING_TYPE_MAP = {
   5: 'Newest Arrivals'
 };
 
+// API sortingType 문자열값 → 인덱스 매핑 (정렬 필터 자동 적용)
+const SORTING_TYPE_TO_INDEX = {
+  'LG_RECOMMENDED': 0,    // 기본값 - LG추천순
+  'PRICE_DESC': 1,        // 높은가격순
+  'PRICE_ASC': 2,         // 낮은가격순
+  'RATING_DESC': 3,       // 평점순
+  'REVIEW_DESC': 4,       // 리뷰수순
+  'NEWEST_DESC': 5        // 최신순
+};
+
 // 📌 [251104] 이전 버전 (더 이상 사용하지 않음 - 참고용으로 유지)
 // const SORTING_TYPE_MAP_OLD = {
 //   0: 'NEW',        // New
@@ -284,20 +294,17 @@ const SearchResultsNew = ({
     ].filter(Boolean);
   };
 
-  // 동적 정렬 옵션 배열 - SORTING_TYPE_MAP 기반 (0~5 숫자 값)
+  // 정렬 옵션 배열 - 고정 라벨 (표시용)
   const filterOptions = useMemo(() => {
-    const apiSortingType = convertedShopperHouseItems?.[0]?.sortingType;
-    const apiLabel = formatSortingTypeLabel(apiSortingType);
-
     return [
-      { label: apiLabel, value: 0 },              // ⭐ 0: API sortingType (동적, 주로 'LG Recommended')
+      { label: SORTING_TYPE_MAP[0], value: 0 },   // 0: API_RECOMMENDED (고정 라벨)
       { label: SORTING_TYPE_MAP[1], value: 1 },   // 1: Price(highest)
       { label: SORTING_TYPE_MAP[2], value: 2 },   // 2: Price(lowest)
       { label: SORTING_TYPE_MAP[3], value: 3 },   // 3: Top Review Rate
       { label: SORTING_TYPE_MAP[4], value: 4 },   // 4: Most Reviewed
       { label: SORTING_TYPE_MAP[5], value: 5 }    // 5: Newest Arrivals
     ];
-  }, [convertedShopperHouseItems]);
+  }, []);
 
   // UI에 표시되는 라벨만 추출 (문자열 배열)
   const filterMethods = useMemo(() =>
@@ -333,6 +340,26 @@ const SearchResultsNew = ({
     setVisibleCount(ITEMS_PER_PAGE); // 표시 개수도 리셋
   }, [shopperHouseInfo?.results?.[0]?.searchId]);
 
+  // API sortingType 감지 후 dropdown 자동 설정
+  useEffect(() => {
+    const apiSortingType = convertedShopperHouseItems?.[0]?.sortingType;
+
+    if (apiSortingType) {
+      // API sortingType 문자열을 인덱스로 매핑
+      const mappedIndex = SORTING_TYPE_TO_INDEX[apiSortingType];
+
+      console.log('[SearchResultsNew] 🔍 API sortingType 감지:', apiSortingType);
+      console.log('[SearchResultsNew]   → 매핑된 인덱스:', mappedIndex);
+
+      // 유효한 매핑값이 있으면 dropdown 업데이트
+      if (mappedIndex !== undefined && mappedIndex !== dropDownTab) {
+        console.log('[SearchResultsNew] ✅ dropdown 자동 설정:', mappedIndex);
+        setDropDownTab(mappedIndex);
+        setSelectedDropdownIndex(mappedIndex);
+      }
+    }
+  }, [convertedShopperHouseItems?.[0]?.sortingType]);
+
   // dropDownTab 변경 감시
   useEffect(() => {
     console.log('[SearchResultsNew] 📍 dropDownTab 변경됨:', dropDownTab);
@@ -825,6 +852,13 @@ const SearchResultsNew = ({
             data-spotlight-up="howAboutThese-seeMore"
           />
 
+          {/* No matches 텍스트 - rangeType이 'SIMILAR'이 아닐 때만 표시 */}
+          {convertedShopperHouseItems?.[0]?.rangeType?.toUpperCase?.() !== 'SIMILAR' && (
+            <div className={css.noMatchesText}>
+              No matches, Showing suggestions
+            </div>
+          )}
+
           <Dropdown
               className={classNames(
                 css.dropdown,

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

@@ -444,6 +444,19 @@
           }
         }
       }
+
+      // ITEM과 Dropdown 사이 가운데 정렬 텍스트
+      .noMatchesText {
+        position: absolute;
+        top: calc(50% - 5px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        font-weight: bold;
+        color: #000000;
+        white-space: nowrap;
+        z-index: 10;
+      }
     }
   }
 }