[251025] feat: ProductAllSection 관련 CSS호환성

🕐 커밋 시간: 2025. 10. 24. 23:07:25

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +55줄
  • 삭제: -9줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    ✅ Added: handleFocusIn(), handleFocusOut()
    🔄 Modified: extractProductMeta()

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

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

@@ -532,6 +532,39 @@ export default function ProductAllSection({
     }
   }, [onReady, isOnRender]);
 
+  // WebOS TV focus-within 대체 로직
+  useEffect(() => {
+    const detailAreaElement = document.querySelector('.detailArea');
+    if (!detailAreaElement) return;
+
+    let hasFocus = false;
+
+    const handleFocusIn = () => {
+      if (!hasFocus) {
+        hasFocus = true;
+        detailAreaElement.classList.add('focused');
+      }
+    };
+
+    const handleFocusOut = () => {
+      setTimeout(() => {
+        const activeElement = document.activeElement;
+        if (!detailAreaElement.contains(activeElement)) {
+          hasFocus = false;
+          detailAreaElement.classList.remove('focused');
+        }
+      }, 10);
+    };
+
+    detailAreaElement.addEventListener('focusin', handleFocusIn);
+    detailAreaElement.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      detailAreaElement.removeEventListener('focusin', handleFocusIn);
+      detailAreaElement.removeEventListener('focusout', handleFocusOut);
+    };
+  }, []);
+
   // 컴포넌트 unmount 시 모든 timer cleanup
   useEffect(() => {
     return () => {

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -12,8 +12,8 @@
   align-items: flex-start;
   position: relative; // 절대 위치 기준점
 
-  // Spotlight 좌우 이동을 위한 설정
-  &:focus-within {
+  // Spotlight 좌우 이동을 위한 설정 (WebOS TV 호환성)
+  &.focused {
     outline: none;
   }
 }
@@ -478,8 +478,8 @@
   align-items: flex-start;
   position: relative; // 절대 위치 기준점
 
-  // Spotlight 좌우 이동을 위한 설정
-  &:focus-within {
+  // Spotlight 좌우 이동을 위한 설정 (WebOS TV 호환성)
+  &.focused {
     outline: none;
   }
 }

com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less

@@ -2,7 +2,14 @@
 .price_block {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+
+  // gap 대신 margin 사용 (WebOS TV 호환성)
+  > * {
+    margin-bottom: 8px;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .price_row {
@@ -20,7 +27,14 @@
 .price_value_group {
   display: flex;
   align-items: center;
-  gap: 8px;
+
+  // gap 대신 margin 사용 (WebOS TV 호환성)
+  > * {
+    margin-right: 8px;
+  }
+  > *:last-child {
+    margin-right: 0;
+  }
 }
 
 .price_value {

com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less

@@ -38,9 +38,8 @@
         }
       }
 
-      // 스크롤바에 포커스가 있을 때
-      &:focus,
-      &:focus-within {
+      // 스크롤바에 포커스가 있을 때 (WebOS TV 호환성)
+      &:focus {
         > div:nth-child(1) {
           > div {
             background-color: @PRIMARY_COLOR_RED !important;