�front: 초 단위 가격 갱신 적용 및 재고 부족 시 응답이 200으로 오는 부분에 맞게 수정 (#325)

* feat: 경매 상품의 초단위 가격 하락 지원

* refactor: 경매 재고 부족시 200응답 + A012 조합을 가져와 Fail 상황으로 처리한다.

* feat: ver2를 위한 로직 추가

front/src/api/auction/api.ts

@@ -1,4 +1,4 @@
-import {AuctionDetailItem, AuctionItem, AuctionPurchaseRequest, AuctionsRequest} from "./type";
+import {AuctionBidResponse, AuctionDetailItem, AuctionItem, AuctionPurchaseRequest, AuctionsRequest} from "./type";
 
 async function requestAuctionList(
     baseUrl: string,
@@ -58,7 +58,7 @@ async function requestAuctionBid(
     baseUrl: string,
     auctionId: number,
     request: AuctionPurchaseRequest,
-    onSuccess: () => void,
+    onSuccess: (uuid: string) => void,
     onFailure: (message: string) => void
 ) {
     try {
@@ -77,7 +77,17 @@ async function requestAuctionBid(
         });
 
         if (response.ok) {
-            onSuccess();
+            const bidResponse: AuctionBidResponse = await response.json();
+            console.log(bidResponse);
+
+            // Check for the specific errorCode
+            if (bidResponse.errorCode === 'A012') {
+                // Treat this as a failure
+                onFailure(`Error: ${bidResponse.message}`);
+            } else {
+                // Success handling
+                onSuccess(bidResponse.uuid);
+            }
         } else {
             const errorMessage = await response.text();
             onFailure(errorMessage);

front/src/api/auction/type.ts

@@ -5,6 +5,12 @@ interface AuctionsRequest {
     size: number;
 }
 
+interface AuctionBidResponse {
+    uuid: string;
+    message: string;
+    errorCode: string;
+}
+
 interface AuctionItem {
     id: number;
     title: string;
@@ -36,6 +42,7 @@ interface AuctionPurchaseRequest {
 
 export type {
     AuctionsRequest,
+    AuctionBidResponse,
     AuctionItem,
     AuctionDetailItem,
     AuctionPurchaseRequest,

front/src/pages/auction/detail/AuctionDetail.tsx

@@ -195,7 +195,12 @@ function AuctionDetail({auctionId}: { auctionId?: number }) {
             baseUrl,
             auction?.auctionId!,
             {quantity: quantity, price: currentPrice},
-            () => {
+            (uuid) => {
+                // [TODO] ver2
+                // UUID를 다른 페이지로 넘긴다.
+                // UUID를 전달받은 페이지는 주기적으로 요청하면서 거래이력이 정상 생성됬는지 확인한다.
+                // 거래 자체가 실패해서 정상 생성 안되는 경우는? ???? (거래이력에 실패 상태를 둬야하나...?)
+
                 setShowConfetti(true);  // 성공 시 confetti 효과 시작
                 setIsButtonDisabled(true);  // 버튼 비활성화
                 setCountdown(5);  // 5초 카운트다운 시작

front/src/pages/auction/detail/PricePolicyElement.tsx

@@ -74,7 +74,7 @@ function PricePolicyElement(
             if (now >= auction.startedAt) {
                 setIsStarted(true);
             }
-        }, 1000);
+        }, 500);
 
         return () => clearInterval(intervalId);
     }, []);

front/src/util/DateUtil.ts

@@ -117,27 +117,36 @@ const getAuctionStatus = (startedAt: Date, endedAt: Date): { status: string; tim
     }
 };
 
-// iso 8601 형식의 문자열을 n분으로 변환하는 함수
+// iso 8601 형식의 문자열을 분과 초로 변환하는 함수
 function formatVariationDuration(duration: string): string {
-    // 정규식을 사용해 "PTnM" 형식에서 n을 추출합니다.
-    const match = duration.match(/^PT(\d+)M$/);
+    // 정규식을 사용해 "PTnM" 또는 "PTnS" 형식에서 n을 추출합니다.
+    const match = duration.match(/^PT(?:(\d+)M)?(?:(\d+)S)?$/);
 
-    if (match && match[1]) {
-        const minutes = parseInt(match[1], 10);
-        return `${minutes}분`;
+    if (match) {
+        const minutes = match[1] ? parseInt(match[1], 10) : 0;
+        const seconds = match[2] ? parseInt(match[2], 10) : 0;
+
+        if (minutes === 0) {
+            return `${seconds}초`;
+        }
+        return `${minutes}분 ${seconds}초`;
     } else {
-        throw new Error("Invalid duration format. Expected format: PTnM");
+        throw new Error("Invalid duration format. Expected format: PTnM or PTnS or PTnMnS");
     }
 }
 
 function getMsFromIso8601Duration(duration: string): number {
-    const match = duration.match(/^PT(\d+)M$/);
+    // "PTnM" 또는 "PTnS" 또는 "PTnMnS" 형식에서 분과 초를 추출합니다.
+    const match = duration.match(/^PT(?:(\d+)M)?(?:(\d+)S)?$/);
+
+    if (match) {
+        const minutes = match[1] ? parseInt(match[1], 10) : 0;
+        const seconds = match[2] ? parseInt(match[2], 10) : 0;
 
-    if (match && match[1]) {
-        const minutes = parseInt(match[1], 10);
-        return minutes * 60 * 1000;
+        // 분과 초를 합쳐 밀리초로 변환합니다.
+        return (minutes * 60 + seconds) * 1000;
     } else {
-        throw new Error("Invalid duration format. Expected format: PTnM");
+        throw new Error("Invalid duration format. Expected format: PTnM or PTnS or PTnMnS");
     }
 }