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

id 가격 표시 옆

Browse Source
This commit is contained in:
익희 김 2025-01-20 23:54:54 +09:00
parent 57e9537c94
commit 1b06030bd2
2 changed files with 57 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,7 +105,9 @@ function ProductDetailsCarousel({ ...props }) {
}}
onClick={() => setModal(true)}
>
<Typography>{annotation.price}</Typography>
<Typography>
{annotation.id}: {annotation.price}
</Typography>
</Button>
))
: ''}
@ -148,36 +150,36 @@ export default function CarouselAnimation({ ...props }) {
return (
<RootStyled>
<div className="carousel-wrap">
<AnimatePresence initial={false} custom={direction}>
<motion.div
className="motion-dev"
key={page}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
transition={{
x: { type: 'spring', stiffness: 300, damping: 30 },
opacity: { duration: 0.2 }
}}
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={1}
onDragEnd={(e, { offset, velocity }) => {
const swipe = swipePower(offset.x, velocity.x);
if (swipe < -swipeConfidenceThreshold) {
paginate(1);
} else if (swipe > swipeConfidenceThreshold) {
paginate(-1);
}
}}
>
<ProductDetailsCarousel slug={slug} item={images[imageIndex]} meta={data.metaDescription} />
</motion.div>
</AnimatePresence>
{/* <Stack
<div className="carousel-wrap">
<AnimatePresence initial={false} custom={direction}>
<motion.div
className="motion-dev"
key={page}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
transition={{
x: { type: 'spring', stiffness: 300, damping: 30 },
opacity: { duration: 0.2 }
}}
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={1}
onDragEnd={(e, { offset, velocity }) => {
const swipe = swipePower(offset.x, velocity.x);
if (swipe < -swipeConfidenceThreshold) {
paginate(1);
} else if (swipe > swipeConfidenceThreshold) {
paginate(-1);
}
}}
>
<ProductDetailsCarousel slug={slug} item={images[imageIndex]} meta={data.metaDescription} />
</motion.div>
</AnimatePresence>
{/* <Stack
direction="row"
justifyContent={images.length < 6 ? 'center' : 'left'}
spacing={1}
@ -203,7 +205,7 @@ export default function CarouselAnimation({ ...props }) {
</Box>
))}
</Stack> */}
</div>
</div>
</RootStyled>
);
}

36
src/components/upload/UploadMultiFile.jsx
View File

@ -12,8 +12,6 @@ import { varFadeInRight } from '../animate';
// react dropzone
import { useDropzone } from 'react-dropzone';
const DropZoneStyle = styled('div')(({ theme }) => ({
outline: 'none',
display: 'flex',
@ -48,13 +46,11 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
const { error, files, onRemove, blob, isEdit, onRemoveAll, loading, sx, ...other } = props;
const [modalOpen, setModalOpen] = useState(false);
const [priceModalOpen, setPriceModalOpen] = useState(false); // 금액 입력 모달 열기 상태
const [clientPosition, setClientPosition] = useState({ x: 0, y: 0 }); // 클릭 위치
const [price, setPrice] = useState(''); // 금액 입력 상태
const [annotations, setAnnotations] = useState([]); // 입력된 금액 및 위치 저장
const [image, setImage] = useState('');
const [predictions, setPredictions] = useState([]); // Roboflow 결과 저장
const canvasRef = useRef(null); // 캔버스 참조
@ -127,19 +123,34 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
detectWithRoboflow();
};
// 캔버스 클릭 시 실행되는 핸들러
const priceTagHandler = (event) => {
// 캔버스 클릭 시 실행되는 핸들러
const priceTagHandler = (event) => {
const rect = event.target.getBoundingClientRect();
const relativeX = (event.clientX - rect.left) / rect.width; // X 좌표를 캔버스 너비로 나눈 비율
const relativeY = (event.clientY - rect.top) / rect.height; // Y 좌표를 캔버스 높이로 나눈 비율
setClientPosition({ x: relativeX, y: relativeY });
setPriceModalOpen(true); // 금액 입력 모달 열기
};
// 금액 입력 후 저장
// const handleSavePrice = () => {
// const updatedAnnotations = [...annotations, { x: clientPosition.x, y: clientPosition.y, price }];
// setAnnotations(updatedAnnotations);
// setPriceModalOpen(false); // 모달 닫기
// setPrice(''); // 입력 초기화
// if (onAnnotationsChange) {
// onAnnotationsChange(updatedAnnotations); // 부모 컴포넌트에 알림
// }
// };
const handleSavePrice = () => {
const updatedAnnotations = [...annotations, { x: clientPosition.x, y: clientPosition.y, price }];
const newId = annotations.length > 0 ? annotations[annotations.length - 1].id + 1 : 1;
const updatedAnnotations = [...annotations, { id: newId, x: clientPosition.x, y: clientPosition.y, price }];
setAnnotations(updatedAnnotations);
setPriceModalOpen(false); // 모달 닫기
setPrice(''); // 입력 초기화
@ -147,7 +158,6 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
if (onAnnotationsChange) {
onAnnotationsChange(updatedAnnotations); // 부모 컴포넌트에 알림
}
};
useEffect(() => {
@ -272,7 +282,7 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
>
AI 상품 검출
</Button>
{/* 금액 입력 모달 */}
{/* 금액 입력 모달 */}
<Modal open={priceModalOpen} onClose={() => setPriceModalOpen(false)}>
<Stack
spacing={2}
@ -284,7 +294,7 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
background: '#fff',
padding: 3,
borderRadius: 1,
boxShadow: 24,
boxShadow: 24
}}
>
<Typography variant="h6">Enter Price</Typography>
@ -313,10 +323,10 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
padding: '2px 5px',
borderRadius: '4px',
borderRadius: '4px'
}}
>
{annotation.price}
{ annotation.id}: {annotation.price}
</Typography>
))}
</Stack>