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}
))}