id 가격 표시 옆

src/components/carousels/customPaginationSilder/index.jsx

@@ -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">
+      <div className="carousel-wrap">
-          <AnimatePresence initial={false} custom={direction}>
+        <AnimatePresence initial={false} custom={direction}>
-            <motion.div
+          <motion.div
-              className="motion-dev"
+            className="motion-dev"
-              key={page}
+            key={page}
-              custom={direction}
+            custom={direction}
-              variants={variants}
+            variants={variants}
-              initial="enter"
+            initial="enter"
-              animate="center"
+            animate="center"
-              exit="exit"
+            exit="exit"
-              transition={{
+            transition={{
-                x: { type: 'spring', stiffness: 300, damping: 30 },
+              x: { type: 'spring', stiffness: 300, damping: 30 },
-                opacity: { duration: 0.2 }
+              opacity: { duration: 0.2 }
-              }}
+            }}
-              drag="x"
+            drag="x"
-              dragConstraints={{ left: 0, right: 0 }}
+            dragConstraints={{ left: 0, right: 0 }}
-              dragElastic={1}
+            dragElastic={1}
-              onDragEnd={(e, { offset, velocity }) => {
+            onDragEnd={(e, { offset, velocity }) => {
-                const swipe = swipePower(offset.x, velocity.x);
+              const swipe = swipePower(offset.x, velocity.x);
-                if (swipe < -swipeConfidenceThreshold) {
+              if (swipe < -swipeConfidenceThreshold) {
-                  paginate(1);
+                paginate(1);
-                } else if (swipe > swipeConfidenceThreshold) {
+              } else if (swipe > swipeConfidenceThreshold) {
-                  paginate(-1);
+                paginate(-1);
-                }
+              }
-              }}
+            }}
-            >
+          >
-              <ProductDetailsCarousel slug={slug} item={images[imageIndex]} meta={data.metaDescription} />
+            <ProductDetailsCarousel slug={slug} item={images[imageIndex]} meta={data.metaDescription} />
-            </motion.div>
+          </motion.div>
-          </AnimatePresence>
+        </AnimatePresence>
-          {/* <Stack
+        {/* <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>
   );
 }

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 상품 검출
           </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>