[251123] fix: DetailPanel ThemeButton-4
🕐 커밋 시간: 2025. 11. 23. 07:00:05 📊 변경 통계: • 총 파일: 6개 • 삭제: -189줄 📁 추가된 파일: + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.figma.jsx + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less 🗑️ 삭제된 파일: - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.figma.jsx - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx (javascript): ✅ Added: handleItemClick(), productNameDangerouslySetInnerHTML() 📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less (unknown): ✅ Added: child() 📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx (javascript): ❌ Deleted: handleItemClick(), productNameDangerouslySetInnerHTML() 📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less (unknown): ❌ Deleted: child() Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
@@ -0,0 +1,958 @@
|
|||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
padding: 60,
|
||||||
|
background:
|
||||||
|
'linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgba(20.56, 4.68, 32.71, 0.53) 60%, rgba(199, 32, 84, 0) 98%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 45%, rgba(0, 0, 0, 0.40) 100%), rgba(30, 30, 30, 0.80)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 30,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 635,
|
||||||
|
height: 60,
|
||||||
|
paddingLeft: 30,
|
||||||
|
paddingRight: 30,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: 20,
|
||||||
|
background: '#C72054',
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderRadius: 6,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 15,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 25,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '600',
|
||||||
|
lineHeight: 35,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
THEME ITEM
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 26.25, height: 15.63, background: 'white' }} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{ justifyContent: 'flex-start', alignItems: 'center', gap: 18, display: 'inline-flex' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 470,
|
||||||
|
padding: 30,
|
||||||
|
background: 'linear-gradient(0deg, 0%, 100%), #2C2C2C',
|
||||||
|
borderRadius: 12,
|
||||||
|
outline: '4px #C70850 solid',
|
||||||
|
outlineOffset: '-4px',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 15,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
paddingLeft: 0.41,
|
||||||
|
paddingRight: 0.41,
|
||||||
|
paddingTop: 0.51,
|
||||||
|
paddingBottom: 0.51,
|
||||||
|
}}
|
||||||
|
src="https://placehold.co/120x120"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: '1 1 0',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 10,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
color: '#EAEAEA',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
lineHeight: 25,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orlgami Removable Connecting Rack 2 -pack
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C70850',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '700',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$32.98
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C2C2C2',
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
textDecoration: 'line-through',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$150.00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 470,
|
||||||
|
padding: 30,
|
||||||
|
background: 'linear-gradient(0deg, 0%, 100%), #2C2C2C',
|
||||||
|
borderRadius: 12,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 15,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img style={{ width: 120, height: 120 }} src="https://placehold.co/120x120" />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: '1 1 0',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 10,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
color: '#EAEAEA',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
lineHeight: 25,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orlgami Removable Connecting Rack 2 -pack
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C70850',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '700',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$32.98
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C2C2C2',
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
textDecoration: 'line-through',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$150.00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 470,
|
||||||
|
padding: 30,
|
||||||
|
background: 'linear-gradient(0deg, 0%, 100%), #2C2C2C',
|
||||||
|
borderRadius: 12,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 15,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
paddingLeft: 0.41,
|
||||||
|
paddingRight: 0.41,
|
||||||
|
paddingTop: 0.51,
|
||||||
|
paddingBottom: 0.51,
|
||||||
|
}}
|
||||||
|
src="https://placehold.co/120x120"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: '1 1 0',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 10,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
color: '#EAEAEA',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
lineHeight: 25,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orlgami Removable Connecting Rack 2 -pack
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C70850',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '700',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$32.98
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C2C2C2',
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
textDecoration: 'line-through',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$150.00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.11,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#BFD730',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.18,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.28,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 45.94,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 44.77,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 8.95,
|
||||||
|
height: 13.52,
|
||||||
|
left: 1.37,
|
||||||
|
top: 0.18,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.45,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#F37021',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.52,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.62,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 46.28,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 45.11,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 7.13,
|
||||||
|
height: 13.81,
|
||||||
|
left: 2.29,
|
||||||
|
top: 0.04,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.45,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#00A651',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.52,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.62,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 46.28,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 45.11,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 11.7,
|
||||||
|
height: 13.88,
|
||||||
|
left: 21.49,
|
||||||
|
top: 8.01,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 470,
|
||||||
|
padding: 30,
|
||||||
|
background: 'linear-gradient(0deg, 0%, 100%), #2C2C2C',
|
||||||
|
borderRadius: 12,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 15,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
paddingLeft: 0.41,
|
||||||
|
paddingRight: 0.41,
|
||||||
|
paddingTop: 0.51,
|
||||||
|
paddingBottom: 0.51,
|
||||||
|
}}
|
||||||
|
src="https://placehold.co/120x120"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: '1 1 0',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 10,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
color: '#EAEAEA',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
lineHeight: 25,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orlgami Removable Connecting Rack 2 -pack
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C70850',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '700',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$32.98
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C2C2C2',
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
textDecoration: 'line-through',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$150.00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.11,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#BFD730',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.17,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.28,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 45.93,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 44.77,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 8.95,
|
||||||
|
height: 13.52,
|
||||||
|
left: 1.37,
|
||||||
|
top: 0.18,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.45,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#F37021',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.52,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.62,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 46.28,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 45.11,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 7.13,
|
||||||
|
height: 13.81,
|
||||||
|
left: 2.29,
|
||||||
|
top: 0.04,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 12.21,
|
||||||
|
height: 28.05,
|
||||||
|
left: 41.07,
|
||||||
|
top: 1.03,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 40.83,
|
||||||
|
height: 27.81,
|
||||||
|
left: 1.45,
|
||||||
|
top: 1.05,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#00A651',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 51.71,
|
||||||
|
height: 28.23,
|
||||||
|
left: 1.52,
|
||||||
|
top: 0.84,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.37px #231F20 solid',
|
||||||
|
outlineOffset: '-0.68px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 6.42,
|
||||||
|
height: 7.05,
|
||||||
|
left: 44.62,
|
||||||
|
top: 2.81,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 3.14,
|
||||||
|
height: 1.57,
|
||||||
|
left: 46.28,
|
||||||
|
top: 12.04,
|
||||||
|
position: 'absolute',
|
||||||
|
outline: '1.46px #231F20 solid',
|
||||||
|
outlineOffset: '-0.73px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 5.44,
|
||||||
|
height: 7.12,
|
||||||
|
left: 45.11,
|
||||||
|
top: 19.99,
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#231F20',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 11.7,
|
||||||
|
height: 13.88,
|
||||||
|
left: 21.49,
|
||||||
|
top: 8.01,
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'white',
|
||||||
|
outline: '0.68px #231F20 solid',
|
||||||
|
outlineOffset: '-0.34px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 470,
|
||||||
|
padding: 18,
|
||||||
|
background: 'linear-gradient(0deg, 0%, 100%), #2C2C2C',
|
||||||
|
borderRadius: 12,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 10,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
width: 110,
|
||||||
|
height: 110,
|
||||||
|
paddingLeft: 0.41,
|
||||||
|
paddingRight: 0.41,
|
||||||
|
paddingTop: 0.51,
|
||||||
|
paddingBottom: 0.51,
|
||||||
|
}}
|
||||||
|
src="https://placehold.co/110x110"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: '1 1 0',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
paddingBottom: 15,
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
color: '#EAEAEA',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
lineHeight: 25,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Orlgami Removable Connecting Rack 2 -pack
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 5,
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C70850',
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '700',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$32.98
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#C2C2C2',
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: 'LG Smart UI',
|
||||||
|
fontWeight: '400',
|
||||||
|
textDecoration: 'line-through',
|
||||||
|
lineHeight: 16.67,
|
||||||
|
wordWrap: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
$150.00
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
@@ -4,13 +4,16 @@ import { useDispatch } from 'react-redux';
|
|||||||
|
|
||||||
import Spotlight from '@enact/spotlight';
|
import Spotlight from '@enact/spotlight';
|
||||||
|
|
||||||
import { updatePanel } from '../../../../actions/panelActions';
|
import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg';
|
||||||
import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
|
import { updatePanel } from '../../../actions/panelActions';
|
||||||
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
|
import TButton from '../../../components/TButton/TButton';
|
||||||
import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
|
import TVirtualGridList from '../../../components/TVirtualGridList/TVirtualGridList';
|
||||||
import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
|
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config';
|
||||||
|
import { $L } from '../../../utils/helperMethods';
|
||||||
|
import PlayerItemCard, { TYPES } from '../../PlayerPanel/PlayerItemCard/PlayerItemCard';
|
||||||
|
import ListEmptyContents from '../../PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents';
|
||||||
import css from './ThemeContents.module.less';
|
import css from './ThemeContents.module.less';
|
||||||
import { sendLogTotalRecommend } from '../../../../actions/logActions';
|
import { sendLogTotalRecommend } from '../../../actions/logActions';
|
||||||
|
|
||||||
export default function ThemeContents({
|
export default function ThemeContents({
|
||||||
themeItems,
|
themeItems,
|
||||||
@@ -23,11 +26,18 @@ export default function ThemeContents({
|
|||||||
panelInfo,
|
panelInfo,
|
||||||
direction = 'horizontal',
|
direction = 'horizontal',
|
||||||
version = 2,
|
version = 2,
|
||||||
|
onThemeItemClose,
|
||||||
}) {
|
}) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const isClickBlocked = useRef(false);
|
const isClickBlocked = useRef(false);
|
||||||
const blockTimeoutRef = useRef(null);
|
const blockTimeoutRef = useRef(null);
|
||||||
|
|
||||||
|
const handleThemeItemButtonClick = useCallback(() => {
|
||||||
|
if (onThemeItemClose) {
|
||||||
|
onThemeItemClose();
|
||||||
|
}
|
||||||
|
}, [onThemeItemClose]);
|
||||||
|
|
||||||
const handleFocus = useCallback(
|
const handleFocus = useCallback(
|
||||||
() => () => {
|
() => () => {
|
||||||
if (handleItemFocus) {
|
if (handleItemFocus) {
|
||||||
@@ -133,7 +143,18 @@ export default function ThemeContents({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[themeItems, currentVideoShowId, isClickBlocked, dispatch, handleFocus, version, tabIndex, tabTitle, panelInfo, setSelectedIndex]
|
[
|
||||||
|
themeItems,
|
||||||
|
currentVideoShowId,
|
||||||
|
isClickBlocked,
|
||||||
|
dispatch,
|
||||||
|
handleFocus,
|
||||||
|
version,
|
||||||
|
tabIndex,
|
||||||
|
tabTitle,
|
||||||
|
panelInfo,
|
||||||
|
setSelectedIndex,
|
||||||
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
// cleanup useEffect
|
// cleanup useEffect
|
||||||
@@ -162,6 +183,16 @@ export default function ThemeContents({
|
|||||||
<ListEmptyContents tabIndex={tabIndex} />
|
<ListEmptyContents tabIndex={tabIndex} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className={css.bottomButtonWrapper}>
|
||||||
|
<TButton
|
||||||
|
className={css.themeButton}
|
||||||
|
onClick={handleThemeItemButtonClick}
|
||||||
|
spotlightId="below-tab-theme-button"
|
||||||
|
>
|
||||||
|
<div>{$L('THEME ITEM')}</div>
|
||||||
|
<img src={arrowDownIcon} className={css.themeButtonIcon} />
|
||||||
|
</TButton>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
@import "../../../../style/CommonStyle.module.less";
|
||||||
|
@import "../../../../style/utils.module.less";
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
|
||||||
|
> div:nth-child(1) {
|
||||||
|
.size(@w: 100%, @h: 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeList {
|
||||||
|
width: 100%;
|
||||||
|
.flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
> * + * {
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme Item Button 스타일
|
||||||
|
.bottomButtonWrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeButton {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 60px !important;
|
||||||
|
padding: 20px 30px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
border: none !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
caret-color: transparent !important;
|
||||||
|
user-select: none !important;
|
||||||
|
-webkit-user-select: none !important;
|
||||||
|
|
||||||
|
color: white !important;
|
||||||
|
font-size: 25px !important;
|
||||||
|
font-family: @baseFont !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
line-height: 35px !important;
|
||||||
|
word-wrap: break-word !important;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
display: flex !important;
|
||||||
|
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;
|
||||||
|
user-select: none !important;
|
||||||
|
-webkit-user-select: none !important;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
display: inline !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
caret-color: transparent !important;
|
||||||
|
user-select: none !important;
|
||||||
|
-webkit-user-select: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: @PRIMARY_COLOR_RED !important;
|
||||||
|
outline: none !important;
|
||||||
|
caret-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: @PRIMARY_COLOR_RED !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeButtonIcon {
|
||||||
|
width: 52.5px;
|
||||||
|
height: 31.25px;
|
||||||
|
object-fit: contain;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
@import "../../../../style/CommonStyle.module.less";
|
|
||||||
@import "../../../../style/utils.module.less";
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
|
|
||||||
> div:nth-child(1) {
|
|
||||||
.size(@w: 100%, @h: 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.themeList {
|
|
||||||
width: 100%;
|
|
||||||
.flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
> * + * {
|
|
||||||
margin-left: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user