[251012] fear: VoicePanel and GNB update

🕐 커밋 시간: 2025. 10. 12. 16:42:36

📊 변경 통계:
  • 총 파일: 10개
  • 추가: +56줄
  • 삭제: -12줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/components/TabLayout/iconComponents/VoiceIcon.jsx
  + com.twin.app.shoptime/src/views/VoicePanel/VoiceHeader.jsx
  + com.twin.app.shoptime/src/views/VoicePanel/VoiceHeader.module.less
  + com.twin.app.shoptime/src/views/VoicePanel/VoicePanel.jsx
  + com.twin.app.shoptime/src/views/VoicePanel/VoicePanel.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
  ~ com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
  ~ com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
  ~ com.twin.app.shoptime/src/utils/Config.js
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 공통 유틸리티 함수 최적화
  • 소규모 기능 개선
  • 모듈 구조 개선

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -1,18 +1,18 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import classNames from "classnames";
-import compose from "ramda/src/compose";
+import classNames from 'classnames';
+import compose from 'ramda/src/compose';
 
-import { Job } from "@enact/core/util";
-import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import { Marquee, MarqueeController } from '@enact/sandstone/Marquee';
+import Spottable from '@enact/spotlight/Spottable';
 
-import css from "./TabItemSub.module.less";
-import { sendLogTotalRecommend } from "../../actions/logActions";
-import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from "../../utils/Config";
-import { useDispatch } from "react-redux";
+import css from './TabItemSub.module.less';
+import { sendLogTotalRecommend } from '../../actions/logActions';
+import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from '../../utils/Config';
+import { useDispatch } from 'react-redux';
 
-const SpottableComponent = Spottable("div");
+const SpottableComponent = Spottable('div');
 
 const TabItemBase = ({
   selected = false,
@@ -34,6 +34,7 @@ const TabItemBase = ({
   setSelectedSubItemId,
   setSelectedSubIndex,
   label,
+  icons,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -43,7 +44,7 @@ const TabItemBase = ({
 
   const _onClick = useCallback(
     (ev) => {
-      const subtitle = title.split("-")[0];
+      const subtitle = title.split('-')[0];
       const buttonTitle = patncNm ? patncNm : subtitle;
       clearPressedJob.current.start(() => {
         if (itemId) {
@@ -63,7 +64,7 @@ const TabItemBase = ({
             contextName: LOG_CONTEXT_NAME.GNB,
             messageId: LOG_MESSAGE_ID.GNB,
             buttonTitle: buttonTitle,
-            buttonId: `GNB_CLICK_${buttonTitle.toUpperCase().replace(" ", "_")}`,
+            buttonId: `GNB_CLICK_${buttonTitle.toUpperCase().replace(' ', '_')}`,
           })
         );
       });
@@ -88,7 +89,7 @@ const TabItemBase = ({
 
   const onKeyDown = useCallback(
     (event) => {
-      if (event.key === "ArrowRight") {
+      if (event.key === 'ArrowRight') {
         _onClick();
       }
     },
@@ -105,9 +106,7 @@ const TabItemBase = ({
             focused && selected && css.selectedFocus
           )}
         >
-          <div
-            className={classNames(css.iconContainer, focused && css.focused)}
-          >
+          <div className={classNames(css.iconContainer, focused && css.focused)}>
             <img src={path} alt="" />
             <h3>{patncNm}</h3>
           </div>
@@ -117,21 +116,29 @@ const TabItemBase = ({
   }, [path, focused]);
 
   const TextComponent = useCallback(() => {
-    const subtitle = title.split("-")[0];
+    const subtitle = title.split('-')[0];
+    const IconComponent = icons;
     return (
       <>
         {subtitle && (
-          <Marquee
-            marqueeDisabled={!focused}
-            marqueeOn={"focus"}
-            className={classNames(css.text, isSubItem && css.subItem)}
-          >
-            {subtitle}
-          </Marquee>
+          <div className={css.textWithIcon}>
+            {IconComponent && (
+              <span className={css.iconWrapper}>
+                <IconComponent iconType={focused ? 'focused' : selected ? 'selected' : 'normal'} />
+              </span>
+            )}
+            <Marquee
+              marqueeDisabled={!focused}
+              marqueeOn={'focus'}
+              className={classNames(css.text, isSubItem && css.subItem)}
+            >
+              {subtitle}
+            </Marquee>
+          </div>
         )}
       </>
     );
-  }, [title, focused, expanded]);
+  }, [title, focused, expanded, icons, selected]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
@@ -154,9 +161,9 @@ const TabItemBase = ({
       aria-label={
         patncNm
           ? selected && path
-            ? "Selected Channel " + patncNm + " button " + label
-            : "Channel " + patncNm + " button " + label
-          : title.split("-")[0] + " Button " + label
+            ? 'Selected Channel ' + patncNm + ' button ' + label
+            : 'Channel ' + patncNm + ' button ' + label
+          : title.split('-')[0] + ' Button ' + label
       }
     >
       <div className={classNames(isSubItem && css.subWrap)}>