Merge pull request #80 from SK-Rookies5-Auction/feat/check1second

feat: 1초 간격 확인 에러 수정

Author: Hyeonseok93

src/pages/ProductDetailPage.tsx

@@ -39,43 +39,51 @@ export function ProductDetailPage() {
   const isEnded = item ? parseDate(item.endTime).getTime() <= getServerNow().getTime() : false;
   const isFinished = item?.status === 'FINISHED';
 
-  useEffect(() => {
+  // 1. Data Fetching Function (wrapped in useCallback for reuse)
+  const fetchData = async (showLoading = true) => {
     if (!id) return;
-
-    const fetchData = async (showLoading = true) => {
-      if (showLoading) setIsLoading(true);
-      try {
-        const [detailRes, commentsRes] = await Promise.all([
-          auctionApi.getAuctionDetail(id),
-          auctionApi.getComments(id)
-        ]);
-
-        if (detailRes.success) setItem(detailRes.data);
-        if (commentsRes.success) setComments(commentsRes.data);
-      } catch (err) {
-        if (showLoading) {
-          setError('Failed to load auction details');
-          showToast('Failed to load auction details', 'error');
-        }
-        console.error('Background refresh failed:', err);
-      } finally {
-        if (showLoading) setIsLoading(false);
+    if (showLoading) {
+      setIsLoading(true);
+      setError(null); // Clear previous errors
+    }
+    
+    try {
+      const [detailRes, commentsRes] = await Promise.all([
+        auctionApi.getAuctionDetail(id),
+        auctionApi.getComments(id)
+      ]);
+
+      if (detailRes.success) {
+        setItem(detailRes.data);
+        setError(null); // Clear error on success
+      }
+      if (commentsRes.success) setComments(commentsRes.data);
+    } catch (err) {
+      if (showLoading) {
+        setError('Failed to load auction details');
+        showToast('Failed to load auction details', 'error');
       }
-    };
+      console.error('Background refresh failed:', err);
+    } finally {
+      if (showLoading) setIsLoading(false);
+    }
+  };
 
-    // 1. Initial full fetch with loading spinner
+  // 2. Initial mount fetch - only runs once or when ID changes
+  useEffect(() => {
     fetchData(true);
+  }, [id]);
+
+  // 3. 1-second polling (background refresh)
+  useEffect(() => {
+    if (!id || isFinished || isBidding) return;
 
-    // 2. Set up 1-second polling (background refresh)
     const pollInterval = setInterval(() => {
-      // Don't poll if the auction is already finished or if we're currently in the middle of a manual bid
-      if (!isFinished && !isBidding) {
-        fetchData(false);
-      }
+      fetchData(false);
     }, 1000);
 
     return () => clearInterval(pollInterval);
-  }, [id, showToast, isFinished, isBidding]);
+  }, [id, isFinished, isBidding]);
 
   const handlePlaceBid = async () => {
     if (!isLoggedIn) {