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 Image from 'next/image';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import SellIcon from '@mui/icons-material/Sell';
const variants = {
enter: (direction) => {
@ -59,80 +61,127 @@ function ProductDetailsCarousel({ ...props }) {
const { slug, item, meta } = props;
const [modal, setModal] = useState();
const [priceTag, setPriceTag] = useState(true);
const [bigImg, setBigImg] = useState(false);
// JSON 문자열인 meta를 객체 배열로 파싱
const annotations = meta && typeof meta === 'string' ? JSON.parse(meta) : meta;
return (
<div>
<div className="slide-wrapper">
<Button
variant="contained"
onClick={() => setPriceTag(!priceTag)}
sx={{ position: 'absolute', right: 0, top: 0, zIndex: 3 }}
>
가격표시
</Button>
<IconButton
onClick={() => setPriceTag(!priceTag)}
sx={{ position: 'absolute', right: 45, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
>
<SellIcon />
</IconButton>
<IconButton
onClick={() => setBigImg(!bigImg)}
sx={{ position: 'absolute', right: 0, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
>
<ZoomInIcon />
</IconButton>
{item && (
<Image
priority
fill
objectFit="cover"
sizes="50%"
src={item?.url || item?.src}
alt="hero-carousel"
blurDataURL={item.blurDataURL}
/>
)}
{item && <img style={{ width: '100%' }} src={item?.url || item?.src} alt="hero-carousel" />}
{/* 저장된 금액 표시 */}
{/* 저장된 금액 표시 */}
{annotations
? annotations.map((annotation, idx) => (
<Button
key={idx}
{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>
))
: ''}
{modal && (
<Modal open={modal}>
<Stack direction={'column'} sx={{ backgroundColor: '#fff' }}>
<Stack direction="row">
<IconButton
aria-label="close"
onClick={() => setModal(false)}
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'
right: 5,
top: 5,
zIndex: 111
}}
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={{
position: 'absolute',
right: 5,
top: 5,
zIndex: 111
}}
>
<MdClear />
</IconButton>
</Stack>
<ChatApp slug={slug} />
<MdClear />
</IconButton>
</Stack>
</Modal>
)}
</div>
<ChatApp slug={slug} />
</Stack>
</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>
);
}