ikikim/picshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

배포

Browse Source
This commit is contained in:
익희 김 2025-01-21 00:35:19 +09:00
parent 1b06030bd2
commit 05e565a02c
1 changed files with 109 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/components/carousels/customPaginationSilder/index.jsx
View File

@ -15,6 +15,8 @@ import ChatApp from 'src/components/chat';
import PanZoom from 'react-easy-panzoom'; import PanZoom from 'react-easy-panzoom';
import Image from 'next/image'; import Image from 'next/image';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import SellIcon from '@mui/icons-material/Sell';
const variants = { const variants = {
enter: (direction) => { enter: (direction) => {
@ -59,80 +61,127 @@ function ProductDetailsCarousel({ ...props }) {
const { slug, item, meta } = props; const { slug, item, meta } = props;
const [modal, setModal] = useState(); const [modal, setModal] = useState();
const [priceTag, setPriceTag] = useState(true); const [priceTag, setPriceTag] = useState(true);
const [bigImg, setBigImg] = useState(false);
// JSON 문자열인 meta를 객체 배열로 파싱 // JSON 문자열인 meta를 객체 배열로 파싱
const annotations = meta && typeof meta === 'string' ? JSON.parse(meta) : meta; const annotations = meta && typeof meta === 'string' ? JSON.parse(meta) : meta;
return ( return (
<div> <div>
<div className="slide-wrapper"> <IconButton
<Button onClick={() => setPriceTag(!priceTag)}
variant="contained" sx={{ position: 'absolute', right: 45, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
onClick={() => setPriceTag(!priceTag)} >
sx={{ position: 'absolute', right: 0, top: 0, zIndex: 3 }} <SellIcon />
> </IconButton>
가격표시 <IconButton
</Button> onClick={() => setBigImg(!bigImg)}
sx={{ position: 'absolute', right: 0, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
>
<ZoomInIcon />
</IconButton>
{item && ( {item && <img style={{ width: '100%' }} src={item?.url || item?.src} alt="hero-carousel" />}
<Image
priority
fill
objectFit="cover"
sizes="50%"
src={item?.url || item?.src}
alt="hero-carousel"
blurDataURL={item.blurDataURL}
/>
)}
{/* 저장된 금액 표시 */} {/* 저장된 금액 표시 */}
{annotations {annotations
? annotations.map((annotation, idx) => ( ? annotations.map((annotation, idx) => (
<Button <Button
key={idx} key={idx}
sx={{
position: 'absolute',
top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환
left: `${annotation.x * 100}%`,
transform: 'translate(-50%, -50%)', // 중앙 정렬
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
padding: '2px 5px',
borderRadius: '4px',
display: priceTag ? 'block' : 'none'
}}
onClick={() => setModal(true)}
>
<Typography>
{annotation.id}: {annotation.price}
</Typography>
</Button>
))
: ''}
{modal && (
<Modal open={modal}>
<Stack direction={'column'} sx={{ backgroundColor: '#fff' }}>
<Stack direction="row">
<IconButton
aria-label="close"
onClick={() => setModal(false)}
sx={{ sx={{
position: 'absolute', position: 'absolute',
top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환 right: 5,
left: `${annotation.x * 100}%`, top: 5,
transform: 'translate(-50%, -50%)', // 중앙 정렬 zIndex: 111
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
padding: '2px 5px',
borderRadius: '4px',
display: priceTag ? 'block' : 'none'
}} }}
onClick={() => setModal(true)}
> >
<Typography> <MdClear />
{annotation.id}: {annotation.price} </IconButton>
</Typography>
</Button>
))
: ''}
{modal && (
<Modal open={modal}>
<Stack direction={'column'} sx={{ backgroundColor: '#fff' }}>
<Stack direction="row">
<IconButton
aria-label="close"
onClick={() => setModal(false)}
sx={{
position: 'absolute',
right: 5,
top: 5,
zIndex: 111
}}
>
<MdClear />
</IconButton>
</Stack>
<ChatApp slug={slug} />
</Stack> </Stack>
</Modal> <ChatApp slug={slug} />
)} </Stack>
</div> </Modal>
)}
{bigImg && (
<Modal open={bigImg}>
<Stack
direction={'column'}
sx={{ height: '100%', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }}
>
<Stack direction="row" sx={{ justifyContent: 'center', alignItems: 'center' }}>
<IconButton
aria-label="close"
onClick={() => setBigImg(false)}
sx={{
position: 'absolute',
right: 5,
top: 5,
zIndex: 111
}}
>
<MdClear />
</IconButton>
</Stack>
{item && (
<PanZoom>
<Box sx={{}}>
<img style={{ width: '100%' }} src={item?.url || item?.src} alt="hero-carousel" />
{annotations
? annotations.map((annotation, idx) => (
<Button
key={idx}
sx={{
position: 'absolute',
top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환
left: `${annotation.x * 100}%`,
transform: 'translate(-50%, -50%)', // 중앙 정렬
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
padding: '2px 5px',
borderRadius: '4px',
display: priceTag ? 'block' : 'none'
}}
onClick={() => setModal(true)}
>
<Typography>
{annotation.id}: {annotation.price}
</Typography>
</Button>
))
: ''}
</Box>
</PanZoom>
)}
</Stack>
</Modal>
)}
</div> </div>
); );
} }