From 49742d8b1252f195d229bb9127df11b43ae44349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EC=A7=84=EB=A6=AC/=EC=8A=A4=ED=86=A0=EC=96=B4?=
 =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=ED=8C=80?= <yeti.jeong@musinsa.com>
Date: Fri, 1 Mar 2024 10:42:22 +0900
Subject: [PATCH] fea: implement skeleton ui

---
 .../ticker/_components/ticker-drawer.tsx      | 21 +++++++++++++++----
 src/app/globals.css                           |  3 +++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
index 28f0f51..56b187e 100644
--- a/src/app/(main)/ticker/_components/ticker-drawer.tsx
+++ b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -38,8 +38,8 @@ export const TickerDrawer = React.memo(
     handleDeleteClick,
     handleConfirmClick,
   }: TickerDrawerProps) => {
-    const debouncedTickerName = useDebounce(tickerName, 1000); // 디바운스 적용
-    const { data } = useFilteredStocksQuery(debouncedTickerName);
+    const debouncedTickerName = useDebounce(tickerName, 400); // 디바운스 적용
+    const { data, isLoading } = useFilteredStocksQuery(debouncedTickerName);
     const isSubmittable = React.useMemo(() => {
       return drawerType === "count" && tickerCount > 0;
     }, [drawerType, tickerCount]);
@@ -88,8 +88,21 @@ export const TickerDrawer = React.memo(
           )}
         </DrawerHeader>
 
-        {drawerType === "name" && !!data && (
-          <TickerList data={data} tickerName={tickerName} onClick={handleTickerClick} />
+        {isLoading ? (
+          <div className="flex flex-col gap-5 overflow-scroll px-5 pt-8">
+            {Array.from({ length: 10 }, (_, idx) => (
+              <div className="flex " key={idx}>
+                <div className="mr-4 h-10 w-10 rounded-full bg-grey-50" />
+                <div className="flex flex-col">
+                  <div className="mb-1 rounded-sm bg-grey-50" style={{ width: 54, height: 19 }} />
+                  <div className=" rounded-sm bg-grey-50" style={{ width: 220, height: 17 }} />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          drawerType === "name" &&
+          !!data && <TickerList data={data} tickerName={tickerName} onClick={handleTickerClick} />
         )}
 
         {drawerType === "count" && (
diff --git a/src/app/globals.css b/src/app/globals.css
index 1593f13..6627737 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -115,4 +115,7 @@ body,
   input:disabled {
     background-color: white;
   }
+  input::placeholder {
+    color: #b0b8c1;
+  }
 }