[251009] refactor CSS gap 대신 margin 사용 및 불필요 코드 정리messag...

변경사항을 반영했습니다

🕐 커밋 시간: 2025. 10. 09. 24:15:20

📊 변경 통계:
  • 총 파일: 8개
  • 추가: +174줄
  • 삭제: -69줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TItemCard/TItemCard.v2.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.v2.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 중간 규모 기능 개선
  • 모듈 구조 개선

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

@@ -7,6 +7,7 @@ import Spottable from "@enact/spotlight/Spottable";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { LOG_MENU } from "../../../../utils/Config";
+import { $L } from "../../../../utils/helperMethods";
 import css from "./TabContainer.v2.module.less";
 import LiveChannelContents from "../TabContents/LiveChannelContents";
 import ShopNowContents from "../TabContents/ShopNowContents";
@@ -37,7 +38,15 @@ export default function TabContainerV2({
   tabIndex = 1, // tabIndex prop으로 제어 (0: ShopNow, 1: LiveChannel, 2: ShopNowButton)
   onShopNowButtonClick,
   onLiveChannelButtonClick,
+  onTabClose, // 탭 닫기 콜백 함수
 }) {
+  const tabList = [
+    $L("SHOP NOW"),
+    panelInfo?.shptmBanrTpNm === "LIVE"
+      ? $L("LIVE CHANNEL")
+      : $L("FEATURED SHOWS"),
+  ];
+
   useEffect(() => {
     let nowMenu;
 
@@ -77,6 +86,21 @@ export default function TabContainerV2({
     [videoVerticalVisible]
   );
 
+  const handleCloseButtonClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (onTabClose) {
+        onTabClose(-1); // tabIndex를 -1로 설정
+      }
+    },
+    [onTabClose]
+  );
+
+  useEffect(()=>{
+    console.log('[tabIndex]',tabIndex)
+  },[tabIndex])
+
   return (
     <Container
       className={classNames(
@@ -89,12 +113,21 @@ export default function TabContainerV2({
       {tabIndex === 0 && (
         <>
           <div className={css.shopNowHeader}>
-            <div className={css.shopNowIconWrapper}>
-              <img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
+            <div className={css.shopNowHeaderLeft}>
+              <div className={css.shopNowIconWrapper}>
+                <img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
+              </div>
+              <div className={css.shopNowHeaderText}>SHOP NOW</div>
+            </div>
+            <div
+              className={css.closeButton}
+              onClick={handleCloseButtonClick}
+            >
+              ×
             </div>
-            <div className={css.shopNowHeaderText}>SHOP NOW</div>
           </div>
           <ShopNowContents
+            tabTitle={tabList}
             shopNowInfo={shopNowInfo}
             playListInfo={playListInfo && playListInfo[selectedIndex]}
             videoVerticalVisible={videoVerticalVisible}
@@ -104,6 +137,15 @@ export default function TabContainerV2({
             version={2}
             direction="horizontal"
           />
+          {shopNowInfo && shopNowInfo.length < 3 && (
+            <YouMayLikeContents
+              shopNowInfo={shopNowInfo}
+              handleItemFocus={_handleItemFocus}
+              playListInfo={playListInfo && playListInfo[selectedIndex]}
+              version={2}
+              direction="horizontal"
+            />
+          )}
         </>
       )}
 
@@ -122,6 +164,7 @@ export default function TabContainerV2({
 
           {panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
             <LiveChannelContents
+              tabTitle={tabList}
               selectedIndex={selectedIndex}
               setSelectedIndex={setSelectedIndex}
               videoVerticalVisible={videoVerticalVisible}
@@ -141,16 +184,6 @@ export default function TabContainerV2({
       {tabIndex === 2 && (
         <ShopNowButton onClick={onShopNowButtonClick} />
       )}
-
-      {shopNowInfo && shopNowInfo.length < 3 && tabIndex === 0 && (
-        <YouMayLikeContents
-          shopNowInfo={shopNowInfo}
-          handleItemFocus={_handleItemFocus}
-          playListInfo={playListInfo && playListInfo[selectedIndex]}
-          version={2}
-          direction="horizontal"
-        />
-      )}
     </Container>
   );
 }