[영상 노출에 따른 부분 수정]

- 영상 상하 블랙라인 관련 하여 스타일 수정
 - discimir부분 노출관련하여 처리.
This commit is contained in:
junghoon86.park
2025-12-16 16:27:49 +09:00
parent 61f67708a9
commit 8a882c28ca
2 changed files with 35 additions and 36 deletions

View File

@@ -5,11 +5,10 @@
position: relative; position: relative;
width: 1114px; // ProductDetail과 동일한 고정 크기 width: 1114px; // ProductDetail과 동일한 고정 크기
max-width: 1114px; max-width: 1114px;
height: 740px; // ProductDetail과 동일한 고정 높이 height: 632px !important; // ProductDetail과 동일한 고정 높이
margin-bottom: 30px; // ProductDetail과 동일한 간격
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1);
border-radius: 12px; border-radius: 12px 12px 0 0;
box-sizing: border-box; box-sizing: border-box;
padding: 6px; // 포커스 테두리를 위한 공간 padding: 6px; // 포커스 테두리를 위한 공간
overflow: hidden; overflow: hidden;
@@ -80,7 +79,7 @@
z-index: 23; // MediaPanel(z-index: 22)보다 위에 표시되어야 비디오 재생 중에도 포커스 테두리가 보임 z-index: 23; // MediaPanel(z-index: 22)보다 위에 표시되어야 비디오 재생 중에도 포커스 테두리가 보임
border: 6px solid @PRIMARY_COLOR_RED; border: 6px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
border-radius: 12px; border-radius: 12px 12px 0px 0px;
content: ""; content: "";
} }
@@ -217,30 +216,28 @@
} }
.notice { .notice {
width: calc(100% - 10px);
height: 54px;
background: #000000;
.flex(@justifyCenter:flex-start);
padding: 6px 18px 18px 18px;
border-radius: 0 0 12px 12px;
margin-bottom: 30px; // ProductDetail과 동일한 간격
.marquee {
width: 100%; width: 100%;
height: 54px; height: 100%;
background: #000000; }
.flex(@justifyCenter:flex-start); img {
padding: 6px 18px 18px 18px; width: 18px;
position: absolute; height: 18px;
bottom: 0; margin: 10px 12px 0 0;
border-radius: 0 0 12px 12px; object-fit: contain;
}
.marquee { span {
width: 100%; line-height: normal;
height: 100%; letter-spacing: normal;
} text-align: left;
img { .font(@fontFamily:@baseFont, @fontSize:20px);
width: 18px; color: @COLOR_GRAY04;
height: 18px; }
margin: 10px 12px 0 0; }
object-fit: contain;
}
span {
line-height: normal;
letter-spacing: normal;
text-align: left;
.font(@fontFamily:@baseFont, @fontSize:20px);
color: @COLOR_GRAY04;
}
}

View File

@@ -311,6 +311,7 @@ export default function ProductVideo({
if (!canPlayVideo) return null; if (!canPlayVideo) return null;
return ( return (
<>
<SpottableComponent <SpottableComponent
className={css.videoContainer} className={css.videoContainer}
onClick={handleVideoClick} onClick={handleVideoClick}
@@ -330,12 +331,13 @@ export default function ProductVideo({
<img src={playImg} alt="재생" /> <img src={playImg} alt="재생" />
</div> </div>
</div> </div>
<div className={css.notice}>
<Marquee className={css.marquee} marqueeOn="render">
<img src={ic_warning} alt={disclaimer} />
<span>{disclaimer}</span>
</Marquee>
</div>
</SpottableComponent> </SpottableComponent>
<div className={css.notice}>
<Marquee className={css.marquee} marqueeOn="render">
<img src={ic_warning} alt={disclaimer} />
<span>{disclaimer}</span>
</Marquee>
</div>
</>
); );
} }