[251118] feat: LiveChannelNext

🕐 커밋 시간: 2025. 11. 18. 20:09:01

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

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.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.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx (javascript):
    ✅ Added: handleSpotlightUp()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less (unknown):
    ✅ Added: translateX(), focused(), gradient()

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less

@@ -0,0 +1,114 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+
+.liveChannelButton {
+  width: 100%;
+  max-width: 455px;
+  height: 92px;
+  padding: 10px 10px 10px 10px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(234, 234, 234, 0.3);
+  border-radius: 100px;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(234, 234, 234, 0.5);
+  }
+
+  &:focus {
+    background: @PRIMARY_COLOR_RED;
+    border-color: @PRIMARY_COLOR_RED;
+
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 100px);
+    }
+  }
+}
+
+.logoWrapper {
+  width: 72px;
+  height: 72px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.logoBackground {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
+}
+
+.logoImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.logoPlaceholder {
+  width: 57.35px;
+  height: 19.86px;
+  background: white;
+}
+
+.channelName {
+  color: #fcfcfc;
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 700;
+  line-height: 35px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100px; // 최대 너비 제한
+  text-overflow: ellipsis;
+}
+
+.programName {
+  color: rgba(234, 234, 234, 0.7);
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 600;
+  line-height: 35px;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 150px; // 최대 너비 제한
+  text-overflow: ellipsis;
+}
+
+
+.arrowIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26.25px;
+  height: 15.63px;
+  margin-right: 10px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}