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( )} - {drawerType === "name" && !!data && ( - + {isLoading ? ( +
+ {Array.from({ length: 10 }, (_, idx) => ( +
+
+
+
+
+
+
+ ))} +
+ ) : ( + drawerType === "name" && + !!data && )} {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; + } }