fix: TDropDown을 원본 컴포넌트로 변경 (arrow key 이동 복구)

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

@@ -13,7 +13,8 @@ import { pushPanel } from '../../actions/panelActions';
 import { hideShopperHouseError } from '../../actions/searchActions';
 import CustomImage from '../../components/CustomImage/CustomImage';
 import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
-import TDropDown from './components/TDropDown/TDropDown';
+import TDropDown from '../../components/TDropDown/TDropDown';
+import TestDropDown from './components/TestDropDown/TestDropDown';
 import TVirtualGridList from '../../components/TVirtualGridList/TVirtualGridList';
 import { panel_names } from '../../utils/Config';
 import { $L } from '../../utils/helperMethods';
@@ -750,22 +751,24 @@ const SearchResultsNew = ({
 
           {/* 필터링 dropdown - ShopperHouse 데이터가 있을 때 정렬 옵션 표시 */}
           {tab === 0 && hasShopperHouseItems && (
-            <TDropDown
-              className={classNames(
-                css.dropdown,
-                styleChange === true ? css.categoryDropdown : null
-              )}
-              onSelect={handleSelectFilter}
-              onOpen={handleStyle}
-              onClose={handleStyleOut}
-              selectedIndex={dropDownTab}
-              size="small"
-              width="small"
-              spotlightId="sortingDropdown"
-              data-spotlight-up={SpotlightIds.SEARCH_TAB_CONTAINER}
-            >
-              {filterMethods}
-            </TDropDown>
+            <>
+              <TDropDown
+                className={classNames(
+                  css.dropdown,
+                  styleChange === true ? css.categoryDropdown : null
+                )}
+                onOpen={handleStyle}
+                onClose={handleStyleOut}
+                onSelect={handleSelectFilter}
+                selectedIndex={dropDownTab}
+                width="small"
+              >
+                {filterMethods}
+              </TDropDown>
+
+              {/* TestDropDown - 테스트용 드롭다운 */}
+              <TestDropDown className={css.dropdown} />
+            </>
           )}
         </div>
 

com.twin.app.shoptime/src/views/SearchPanel/components/TDropDown/TDropDown.jsx

@@ -3,19 +3,11 @@ import React, { memo, useCallback } from "react";
 import classNames from "classnames";
 
 import DropDown from "@enact/sandstone/Dropdown";
-import Spottable from "@enact/spotlight/Spottable";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { countryCode } from "../../../../api/apiConfig";
 import useScrollReset from "../../../../hooks/useScrollReset";
 import css from "./TDropDown.module.less";
 
-const SpottableDropDown = Spottable(DropDown);
-const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
-  "div"
-);
-
 export default memo(function TDropDown({
   children,
   className,
@@ -27,8 +19,6 @@ export default memo(function TDropDown({
   scrollTop,
   selectedIndex,
   size,
-  spotlightId,
-  width,
   ...rest
 }) {
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
@@ -46,52 +36,11 @@ export default memo(function TDropDown({
   }, [onClose]);
 
   const _onChange = useCallback((event) => {
-    console.log('[TDropDown LOCAL] 🔥 onChange 이벤트 발생!');
-    console.log('[TDropDown LOCAL] event:', event);
-    console.log('[TDropDown LOCAL] event.selected:', event?.selected);
-    console.log('[TDropDown LOCAL] event.value:', event?.value);
-    console.log('[TDropDown LOCAL] onSelect 콜백:', !!onSelect);
     if (onSelect) {
-      console.log('[TDropDown LOCAL] ✅ onSelect 호출:', { selected: event.selected });
       onSelect({ selected: event.selected });
     }
   }, [onSelect]);
 
-  console.log('[TDropDown LOCAL] ⚠️ TDropDown 렌더링 - selectedIndex:', selectedIndex, 'onSelect:', !!onSelect, 'children:', Array.isArray(children) ? children.length : typeof children);
-
-  // Spotlight을 사용하지 않는 버전 (필터링 테스트용)
-  if (spotlightId) {
-    return (
-      <Container spotlightId={spotlightId}>
-        <SpottableDropDown
-          className={classNames(
-            css.tDropdown,
-            css[size],
-            css[color],
-            selectedIndex !== undefined && selectedIndex !== null && css.selected,
-            className
-          )}
-          direction={direction}
-          selected={selectedIndex}
-          onChange={_onChange}
-          onFocus={handleScrollReset}
-          onBlur={handleStopScrolling}
-          onOpen={_onOpen}
-          onClose={_onClose}
-          style={width === 'small' ? { width: '240px', minWidth: '240px' } :
-                  width === 'medium' ? { width: '320px', minWidth: '320px' } :
-                  width === 'large' ? { width: '400px', minWidth: '400px' } : undefined}
-          aria-disabled={countryCode && countryCode !== "US"}
-          aria-label={children}
-          {...rest}
-        >
-          {children}
-        </SpottableDropDown>
-      </Container>
-    );
-  }
-
-  // Spotlight 없이 기본 DropDown 사용
   return (
     <DropDown
       className={classNames(
@@ -108,9 +57,6 @@ export default memo(function TDropDown({
       onBlur={handleStopScrolling}
       onOpen={_onOpen}
       onClose={_onClose}
-      style={width === 'small' ? { width: '240px', minWidth: '240px' } :
-              width === 'medium' ? { width: '320px', minWidth: '320px' } :
-              width === 'large' ? { width: '400px', minWidth: '400px' } : undefined}
       aria-disabled={countryCode && countryCode !== "US"}
       aria-label={children}
       {...rest}
@@ -118,4 +64,4 @@ export default memo(function TDropDown({
       {children}
     </DropDown>
   );
-});
+});

com.twin.app.shoptime/src/views/SearchPanel/components/TestDropDown/TestDropDown.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useCallback } from 'react';
+import TDropDown from '../../../../components/TDropDown/TDropDown';
+
+const TestDropDown = ({ className }) => {
+  // 하드코딩된 필터 옵션
+  const testOptions = ['Option 1', 'Option 2', 'Option 3'];
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleSelect = useCallback((selected) => {
+    const newSelectedIndex = selected.selected;
+    console.log('[TestDropDown] Selected:', newSelectedIndex, testOptions[newSelectedIndex]);
+    setSelectedIndex(newSelectedIndex);
+  }, [testOptions]);
+
+  console.log('[TestDropDown] Rendering with selectedIndex:', selectedIndex);
+
+  return (
+    <TDropDown
+      className={className}
+      onSelect={handleSelect}
+      selectedIndex={selectedIndex}
+      size="small"
+    >
+      {testOptions}
+    </TDropDown>
+  );
+};
+
+export default TestDropDown;