diff --git a/src/components/carousels/customPaginationSilder/index.jsx b/src/components/carousels/customPaginationSilder/index.jsx index ddd257f..6f19c60 100644 --- a/src/components/carousels/customPaginationSilder/index.jsx +++ b/src/components/carousels/customPaginationSilder/index.jsx @@ -105,7 +105,9 @@ function ProductDetailsCarousel({ ...props }) { }} onClick={() => setModal(true)} > - {annotation.price} + + {annotation.id}: {annotation.price} + )) : ''} @@ -148,36 +150,36 @@ export default function CarouselAnimation({ ...props }) { return ( -
- - { - const swipe = swipePower(offset.x, velocity.x); - if (swipe < -swipeConfidenceThreshold) { - paginate(1); - } else if (swipe > swipeConfidenceThreshold) { - paginate(-1); - } - }} - > - - - - {/* + + { + const swipe = swipePower(offset.x, velocity.x); + if (swipe < -swipeConfidenceThreshold) { + paginate(1); + } else if (swipe > swipeConfidenceThreshold) { + paginate(-1); + } + }} + > + + + + {/* ))} */} -
+
); } diff --git a/src/components/upload/UploadMultiFile.jsx b/src/components/upload/UploadMultiFile.jsx index 25f0d04..ec5c38d 100644 --- a/src/components/upload/UploadMultiFile.jsx +++ b/src/components/upload/UploadMultiFile.jsx @@ -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 상품 검출 - {/* 금액 입력 모달 */} + {/* 금액 입력 모달 */} setPriceModalOpen(false)}> Enter Price @@ -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} ))}