[251104] fix: SearchResults.new.v2 sorting dropdown

🕐 커밋 시간: 2025. 11. 04. 09:19:26

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

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

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

Performance: 코드 최적화로 성능 개선 기대

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

@@ -29,13 +29,14 @@ import Dropdown from '@enact/sandstone/Dropdown';
 
 const ITEMS_PER_PAGE = 10;
 
-// 정렬 타입 매핑
+// 정렬 타입 매핑 (동적 API 라벨 + 5개 옵션)
 const SORTING_TYPE_MAP = {
-  0: 'Price(highest)',
-  1: 'Price(lowest)', 
-  2: 'Top Review Rate',
-  3: 'Most Reviewed', 
-  4: 'Newest Arrivals'
+  0: 'API_RECOMMENDED',  // 동적 라벨 (LG Recommended 등)
+  1: 'Price(highest)',
+  2: 'Price(lowest)',
+  3: 'Top Review Rate',
+  4: 'Most Reviewed',
+  5: 'Newest Arrivals'
 };
 
 // 📌 [251104] 이전 버전 (더 이상 사용하지 않음 - 참고용으로 유지)
@@ -83,11 +84,12 @@ const sortItems = (items, sortType) => {
   const sortedItems = [...items];
 
   switch (sortType) {
-    case 'api': // API에서 제공한 순서 (기본 정렬)
-      console.log('[SearchResultsNew] ✅ API 정렬 (기본 순서 유지)');
+    case 0: { // API_RECOMMENDED - API에서 제공한 순서 (기본 정렬)
+      console.log('[SearchResultsNew] ✅ API Recommended 정렬 (기본 순서 유지)');
       return sortedItems;
+    }
 
-    case 0: { // Price(highest) - 가격 높은순
+    case 1: { // Price(highest) - 가격 높은순
       console.log('[SearchResultsNew] ✅ Price(highest) 정렬 (가격 높은순)');
       const result = sortedItems.sort((a, b) => {
         const priceA = parseInt(a.dcPrice?.replace(/[^0-9]/g, '') || '0');
@@ -102,7 +104,7 @@ const sortItems = (items, sortType) => {
       return result;
     }
 
-    case 1: { // Price(lowest) - 가격 낮은순
+    case 2: { // Price(lowest) - 가격 낮은순
       console.log('[SearchResultsNew] ✅ Price(lowest) 정렬 (가격 낮은순)');
       const result = sortedItems.sort((a, b) => {
         const priceA = parseInt(a.dcPrice?.replace(/[^0-9]/g, '') || '0');
@@ -117,7 +119,7 @@ const sortItems = (items, sortType) => {
       return result;
     }
 
-    case 2: { // Top Review Rate - 리뷰 평점 높은순
+    case 3: { // Top Review Rate - 리뷰 평점 높은순
       console.log('[SearchResultsNew] ✅ Top Review Rate 정렬 (리뷰 평점 높은순)');
       const result = sortedItems.sort((a, b) => {
         const ratingA = parseFloat(a.reviewGrade || '0');
@@ -132,7 +134,7 @@ const sortItems = (items, sortType) => {
       return result;
     }
 
-    case 3: { // Most Reviewed - 가장 많이 리뷰된순 (인기순)
+    case 4: { // Most Reviewed - 가장 많이 리뷰된순 (인기순)
       console.log('[SearchResultsNew] ✅ Most Reviewed 정렬 (인기순)');
       const result = sortedItems.sort((a, b) => (b.rankInfo || 0) - (a.rankInfo || 0));
       console.log('[SearchResultsNew] 정렬 후 데이터 샘플:', result.slice(0, 3).map(item => ({
@@ -142,7 +144,7 @@ const sortItems = (items, sortType) => {
       return result;
     }
 
-    case 4: { // Newest Arrivals - 최신순 (기본 순서 유지)
+    case 5: { // Newest Arrivals - 최신순 (기본 순서 유지)
       console.log('[SearchResultsNew] ✅ Newest Arrivals 정렬 (기본 순서 유지)');
       return sortedItems;
     }
@@ -282,18 +284,18 @@ const SearchResultsNew = ({
     ].filter(Boolean);
   };
 
-  // 동적 정렬 옵션 배열 - SORTING_TYPE_MAP 기반
+  // 동적 정렬 옵션 배열 - SORTING_TYPE_MAP 기반 (0~5 숫자 값)
   const filterOptions = useMemo(() => {
     const apiSortingType = convertedShopperHouseItems?.[0]?.sortingType;
     const apiLabel = formatSortingTypeLabel(apiSortingType);
 
     return [
-      { label: apiLabel, value: 'api' },                    // ⭐ 첫번째: API sortingType (동적, 주로 'LG Recommended')
-      { label: SORTING_TYPE_MAP[0], value: 0 },             // 두번째: Price(highest)
-      { label: SORTING_TYPE_MAP[1], value: 1 },             // 세번째: Price(lowest)
-      { label: SORTING_TYPE_MAP[2], value: 2 },             // 네번째: Top Review Rate
-      { label: SORTING_TYPE_MAP[3], value: 3 },             // 다섯번째: Most Reviewed
-      { label: SORTING_TYPE_MAP[4], value: 4 }              // 여섯번째: Newest Arrivals
+      { label: apiLabel, value: 0 },              // ⭐ 0: API sortingType (동적, 주로 'LG 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]);
 
@@ -830,26 +832,11 @@ const SearchResultsNew = ({
               )}
               selected={selectedDropdownIndex}
               width="small"
-              onSelect={handleDropdownSelect}
-              direction="above"
+              onSelect={handleDropdownSelect}              
           >
               {filterMethods}
           </Dropdown>
-
-          {/* 필터링 dropdown - ShopperHouse 데이터가 있을 때 정렬 옵션 표시 */}
-          {/* <TDropDown
-            className={classNames(
-              css.dropdown,
-              styleChange === true ? css.categoryDropdown : null
-            )}
-            onOpen={handleStyle}
-            onClose={handleStyleOut}
-            onSelect={handleSelectFilter}
-            selectedIndex={dropDownTab}
-            width="small"
-          >
-            {filterMethods}
-          </TDropDown> */}
+          
         </TabContainer>
 
         {/* 아이템/쇼 컨텐츠 */}

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

@@ -429,7 +429,9 @@
 
       .dropdown {
         position: absolute;
-        right: 0;
+        width: 290px !important;
+        right: auto;
+        left: 1380px !important;
         top: 50%;
         transform: translateY(-50%);
 
@@ -437,6 +439,7 @@
           > div {
             > div {
               border-radius: 6px 6px 0 0 !important;
+              width: 290px !important;
             }
           }
         }
@@ -453,14 +456,14 @@
     filter: none !important;
     > div:nth-child(1) {
       height: 335px !important;
-      width: 300px !important;
+      width: 290px !important;
       margin-top: 0 !important;
       border-radius: 0 0 6px 6px !important;
       background-color: #f5f5f5 !important;
       overflow-y: auto !important;
      
       > div {
-        width: 300px !important;
+        width: 290px !important;
         height: auto !important;
         border-radius: 0 !important;
         padding-top: 0 !important;