From a729be4cd5c719fabe36eedcf7508f4214a02bf7 Mon Sep 17 00:00:00 2001
From: baegyeong <beth0929@naver.com>
Date: Fri, 6 Dec 2024 03:56:26 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20lottie=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/stock-detail/StockMetricsPanel.tsx    | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
index c2c238d..dbc5cde 100644
--- a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
+++ b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
@@ -14,7 +14,7 @@ interface RealTimeStockData {
   volume: number;
 }
 
-const StockMetricsPanel = ({
+export const StockMetricsPanel = ({
   eps,
   high52w,
   low52w,
@@ -60,11 +60,10 @@ const StockMetricsPanel = ({
   return (
     <article className="flex flex-1 flex-col gap-10 rounded-md bg-white p-6 shadow">
       {!price || !change || !volume ? (
-        <section className="grid w-9/12 grid-cols-2 grid-rows-2">
-          <Lottie animationData={skeleton} play className="w-64" />
-          <Lottie animationData={skeleton} play className="w-64" />
-          <Lottie animationData={skeleton} play className="w-64" />
-          <Lottie animationData={skeleton} play className="w-64" />
+        <section className="grid w-9/12 lg:grid-cols-2 lg:grid-rows-2">
+          {Array.from({ length: 4 }, () => (
+            <Lottie animationData={skeleton} play className="w-64" />
+          ))}
         </section>
       ) : (
         Object.values(metricsData).map((section) => (
@@ -86,5 +85,3 @@ const StockMetricsPanel = ({
     </article>
   );
 };
-
-export default StockMetricsPanel;