테마 적용

features/dashboard/components/search/StockSearchForm.tsx

@@ -1,34 +1,45 @@
 import type { FormEvent } from "react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface StockSearchFormProps {
   keyword: string;
   onKeywordChange: (value: string) => void;
-  onSubmit: (e: FormEvent) => void;
+  onSubmit: (event: FormEvent) => void;
+  onInputFocus?: () => void;
   disabled?: boolean;
   isLoading?: boolean;
 }
 
+/**
+ * @description 종목 검색 입력/제출 폼을 렌더링합니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
+ */
 export function StockSearchForm({
   keyword,
   onKeywordChange,
   onSubmit,
+  onInputFocus,
   disabled,
   isLoading,
 }: StockSearchFormProps) {
   return (
     <form onSubmit={onSubmit} className="flex gap-2">
+      {/* ========== SEARCH INPUT ========== */}
       <div className="relative flex-1">
-        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground dark:text-brand-100/65" />
         <Input
-          placeholder="종목명 또는 코드(6자리) 입력..."
-          className="pl-9"
           value={keyword}
           onChange={(e) => onKeywordChange(e.target.value)}
+          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"
         />
       </div>
+
+      {/* ========== SUBMIT BUTTON ========== */}
       <Button type="submit" disabled={disabled || isLoading}>
         {isLoading ? "검색 중..." : "검색"}
       </Button>