임시커밋

features/trade/components/search/StockSearchForm.tsx

@@ -0,0 +1,48 @@
+import type { FormEvent } from "react";
+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: (event: FormEvent) => void;
+  onInputFocus?: () => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+/**
+ * @description 종목 검색 입력/제출 폼을 렌더링합니다.
+ * @see features/trade/components/TradeContainer.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 dark:text-brand-100/65" />
+        <Input
+          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>
+    </form>
+  );
+}