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

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); // 캔버스 참조
@@ -138,8 +134,23 @@ export default function UploadMultiFile({ onAnnotationsChange, ...props }) {
   };
 
   // 금액 입력 후 저장
+  // 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(() => {
@@ -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>