76ea1c439c
- UserReviews 컴포넌트 리팩토링 및 페이지네이션 구현 - 새로운 hooks/useReviews 훅 추가 - DetailPanel UI/UX 개선 및 스타일 업데이트 - 이미지 스켈레톤 로딩 컴포넌트 추가 - THeaderDetail 컴포넌트 신규 추가 - 유틸리티 함수 확장 (fpHelpers.js)
42 lines
3.0 KiB
JavaScript
42 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
|
|
const UserReviewPanelInfo = () => {
|
|
return (
|
|
<div style={{width: '100%', height: '100%', padding: 18, background: 'white', borderRadius: 12, outline: '1px #DADADA solid', outlineOffset: '-1px', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 15, display: 'inline-flex'}}>
|
|
<img style={{width: 150, height: 150, borderRadius: 13.85}} src="https://placehold.co/150x150" alt="Product" />
|
|
<div style={{flex: '1 1 0', alignSelf: 'stretch', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', display: 'inline-flex'}}>
|
|
<div style={{justifyContent: 'flex-start', alignItems: 'center', gap: 15, display: 'inline-flex'}}>
|
|
<img style={{width: 50, height: 50}} src="https://placehold.co/50x50" alt="Brand" />
|
|
<div style={{color: '#808080', fontSize: 24, fontFamily: 'LG Smart UI', fontWeight: '600', lineHeight: 18, wordWrap: 'break-word'}}>ID: M90221</div>
|
|
</div>
|
|
<div style={{alignSelf: 'stretch', paddingTop: 5, justifyContent: 'flex-start', alignItems: 'flex-start', gap: 10, display: 'inline-flex'}}>
|
|
<div style={{flex: '1 1 0', color: 'black', fontSize: 30, fontFamily: 'LG Smart UI', fontWeight: '700', lineHeight: 32, wordWrap: 'break-word'}}>
|
|
Farmer Jon`s 25ct Mini Bags of Microwave Popcorn in Flavor Choice
|
|
</div>
|
|
</div>
|
|
<div style={{flex: '1 1 0', paddingBottom: 5, justifyContent: 'center', alignItems: 'flex-end', gap: 15, display: 'inline-flex'}}>
|
|
<div style={{justifyContent: 'flex-start', alignItems: 'flex-start', gap: 4, display: 'flex'}}>
|
|
<div style={{width: 31, height: 29, position: 'relative', overflow: 'hidden'}}>
|
|
<div style={{width: 30.03, height: 29, left: 0.42, top: 0, position: 'absolute', background: '#CE1C5E'}} />
|
|
</div>
|
|
<div style={{width: 31, height: 30, position: 'relative', overflow: 'hidden'}}>
|
|
<div style={{width: 30.03, height: 29, left: 0.42, top: 0.50, position: 'absolute', background: '#CE1C5E'}} />
|
|
</div>
|
|
<div style={{width: 31, height: 29, position: 'relative', overflow: 'hidden'}}>
|
|
<div style={{width: 30.03, height: 29, left: 0.42, top: 0, position: 'absolute', background: '#CE1C5E'}} />
|
|
</div>
|
|
<div style={{width: 31, height: 29, position: 'relative', overflow: 'hidden'}}>
|
|
<div style={{width: 30.03, height: 29, left: 0.42, top: 0, position: 'absolute', background: '#CE1C5E'}} />
|
|
</div>
|
|
<div style={{width: 31, height: 29, position: 'relative', overflow: 'hidden'}}>
|
|
<div style={{width: 30.03, height: 29, left: 0.42, top: 0, position: 'absolute', background: '#CE1C5E'}} />
|
|
</div>
|
|
</div>
|
|
<div style={{color: '#333333', fontSize: 24, fontFamily: 'LG Smart UI', fontWeight: '400', lineHeight: 31, wordWrap: 'break-word'}}>(99 Reviews)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserReviewPanelInfo;
|