[251123] fix: DetailPanel ThemeContent-6

🕐 커밋 시간: 2025. 11. 23. 12:58:04

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less

@@ -9,7 +9,6 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 30px;
   padding: 60px;
   background: linear-gradient(
       0deg,
@@ -20,6 +19,14 @@
     linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.4) 100%),
     rgba(30, 30, 30, 0.8);
   overflow: visible; // 포커스 테두리가 잘리지 않도록
+
+  > * {
+    margin-bottom: 30px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .topButtonWrapper {
@@ -36,7 +43,6 @@
   padding: 20px;
   display: inline-flex;
   flex-direction: row;
-  gap: 18px;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
@@ -45,6 +51,14 @@
   flex-shrink: 0;
   scrollbar-width: none; // Firefox 스크롤바 숨김
 
+  > * {
+    margin-right: 18px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
   &::-webkit-scrollbar {
     display: none; // WebKit 스크롤바 숨김
   }
@@ -111,7 +125,6 @@
     flex-direction: row !important;
     align-items: center !important;
     justify-content: center !important;
-    gap: 15px !important;
     width: auto !important;
     height: auto !important;
     caret-color: transparent !important;
@@ -121,9 +134,14 @@
     > * {
       display: inline !important;
       margin: 0 !important;
+      margin-right: 15px !important;
       caret-color: transparent !important;
       user-select: none !important;
       -webkit-user-select: none !important;
+
+      &:last-child {
+        margin-right: 0 !important;
+      }
     }
   }
 

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx

@@ -7,7 +7,6 @@
     borderRadius: 12,
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
-    gap: 15,
     display: 'inline-flex',
   }}
 >
@@ -29,7 +28,6 @@
       flexDirection: 'column',
       justifyContent: 'flex-start',
       alignItems: 'flex-start',
-      gap: 10,
       display: 'inline-flex',
     }}
   >
@@ -52,7 +50,6 @@
         paddingBottom: 1,
         justifyContent: 'flex-start',
         alignItems: 'center',
-        gap: 5,
         display: 'inline-flex',
       }}
     >
@@ -82,9 +79,7 @@
         $150.00
       </div>
     </div>
-    <div
+    <div style={{ justifyContent: 'flex-end', alignItems: 'flex-end', display: 'inline-flex' }}>
-      style={{ justifyContent: 'flex-end', alignItems: 'flex-end', gap: 5, display: 'inline-flex' }}
-    >
       <div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
         <div
           style={{

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less

@@ -10,7 +10,6 @@
   border-radius: 12px;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 15px;
   display: flex;
   flex-shrink: 0;
   cursor: pointer;
@@ -19,6 +18,14 @@
   position: relative;
   overflow: visible; // 포커스 테두리 노출
 
+  > * {
+    margin-right: 15px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
   // LiveChannel 카드와 유사하게 포커스 테두리를 pseudo-element로 표시
   &::after {
     .position(@position: absolute, @top: -4px, @right: -4px, @bottom: -4px, @left: -4px);
@@ -54,8 +61,15 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 10px;
   display: inline-flex;
+
+  > * {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .itemName {
@@ -73,8 +87,15 @@
   padding-bottom: 1px;
   justify-content: flex-start;
   align-items: center;
-  gap: 5px;
   display: inline-flex;
+
+  > * {
+    margin-right: 5px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .salePrice {
@@ -99,8 +120,15 @@
 .energyLabels {
   justify-content: flex-end;
   align-items: flex-end;
-  gap: 5px;
   display: inline-flex;
+
+  > * {
+    margin-right: 5px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .energyLabel {
@@ -141,8 +169,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 15px;                // 텍스트와 아이콘 사이 간격
     width: 100%;
+
+    > * {
+      margin-right: 15px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 
   // 텍스트 스타일