🐛 fix: placeholderData 지정으로 인한 useQuery로의 변경

boostcampwm-2024 · Dec 5, 2024 · 2910933 · 2910933
1 parent 07f89e1
commit 2910933
Showing 1 changed file with 38 additions and 44 deletions.
diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx
@@ -1,10 +1,8 @@
-import { Suspense, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { usePostStockView } from '@/apis/queries/stock-detail';
 import { useGetStocksByPrice } from '@/apis/queries/stocks';
 import DownArrow from '@/assets/down-arrow.svg?react';
-import { Loader } from '@/components/ui/loader';
 import { cn } from '@/utils/cn';
 
 const LIMIT = 10;
@@ -51,48 +49,44 @@ const StockRankingTable = () => {
           </tr>
         </thead>
         <tbody>
-          <ErrorBoundary
-            fallback={
-              <p className="py-3">종목 정보를 불러오는데 실패했어요.</p>
-            }
-          >
-            <Suspense fallback={<Loader />}>
-              {data.result.map((stock, index) => (
-                <tr
-                  key={stock.id}
-                  className="display-medium14 text-dark-gray text-right [&>*]:p-4"
-                >
-                  <td className="flex gap-6 text-left">
-                    <span className="text-gray w-3 flex-shrink-0">
-                      {index + 1}
-                    </span>
-                    <Link
-                      to={`/stocks/${stock.id}`}
-                      onClick={() => mutate({ stockId: stock.id })}
-                      className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline"
-                      aria-label={stock.name}
-                    >
-                      {stock.name}
-                    </Link>
-                  </td>
-                  <td>{stock.currentPrice?.toLocaleString()}원</td>
-                  <td
-                    className={cn(
-                      +stock.changeRate >= 0 ? 'text-red' : 'text-blue',
-                    )}
+          {data ? (
+            data.result.map((stock, index) => (
+              <tr
+                key={stock.id}
+                className="display-medium14 text-dark-gray text-right [&>*]:p-4"
+              >
+                <td className="flex gap-6 text-left">
+                  <span className="text-gray w-3 flex-shrink-0">
+                    {index + 1}
+                  </span>
+                  <Link
+                    to={`/stocks/${stock.id}`}
+                    onClick={() => mutate({ stockId: stock.id })}
+                    className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline"
+                    aria-label={stock.name}
                   >
-                    {stock.changeRate}%
-                  </td>
-                  <td className="hidden lg:table-cell">
-                    {stock.volume?.toLocaleString()}원
-                  </td>
-                  <td className="hidden lg:table-cell">
-                    {stock.marketCap?.toLocaleString()}주
-                  </td>
-                </tr>
-              ))}
-            </Suspense>
-          </ErrorBoundary>
+                    {stock.name}
+                  </Link>
+                </td>
+                <td>{stock.currentPrice?.toLocaleString()}원</td>
+                <td
+                  className={cn(
+                    +stock.changeRate >= 0 ? 'text-red' : 'text-blue',
+                  )}
+                >
+                  {stock.changeRate}%
+                </td>
+                <td className="hidden lg:table-cell">
+                  {stock.volume?.toLocaleString()}원
+                </td>
+                <td className="hidden lg:table-cell">
+                  {stock.marketCap?.toLocaleString()}주
+                </td>
+              </tr>
+            ))
+          ) : (
+            <p className="py-3">종목 정보를 불러오는데 실패했어요.</p>
+          )}
         </tbody>
       </table>
     </div>