대시보드 구현

features/trade/components/search/StockSearchForm.tsx

@@ -1,5 +1,5 @@
 import type { FormEvent } from "react";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
@@ -24,6 +24,12 @@ export function StockSearchForm({
   disabled,
   isLoading,
 }: StockSearchFormProps) {
+  const handleClear = () => {
+    onKeywordChange("");
+    // 포커스 로직이 필요하다면 상위에서 ref를 전달받거나 여기서 ref를 사용해야 함.
+    // 현재는 단순 값 초기화만 수행.
+  };
+
   return (
     <form onSubmit={onSubmit} className="flex gap-2">
       {/* ========== SEARCH INPUT ========== */}
@@ -35,8 +41,19 @@ export function StockSearchForm({
           onFocus={onInputFocus}
           placeholder="종목명 또는 종목코드(6자리)를 입력하세요."
           autoComplete="off"
-          className="pl-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
+          className="pl-9 pr-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
         />
+        {keyword && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground dark:text-brand-100/65 dark:hover:text-brand-100"
+            tabIndex={-1}
+            aria-label="검색어 지우기"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
       </div>
 
       {/* ========== SUBMIT BUTTON ========== */}