대시보드 중간 커밋

features/dashboard/components/search/StockSearchForm.tsx

@@ -0,0 +1,37 @@
+import type { FormEvent } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
+
+interface StockSearchFormProps {
+  keyword: string;
+  onKeywordChange: (value: string) => void;
+  onSubmit: (e: FormEvent) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+export function StockSearchForm({
+  keyword,
+  onKeywordChange,
+  onSubmit,
+  disabled,
+  isLoading,
+}: StockSearchFormProps) {
+  return (
+    <form onSubmit={onSubmit} className="flex gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="종목명 또는 코드(6자리) 입력..."
+          className="pl-9"
+          value={keyword}
+          onChange={(e) => onKeywordChange(e.target.value)}
+        />
+      </div>
+      <Button type="submit" disabled={disabled || isLoading}>
+        {isLoading ? "검색 중..." : "검색"}
+      </Button>
+    </form>
+  );
+}

features/dashboard/components/search/StockSearchResults.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+// import { Activity, TrendingDown, TrendingUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { DashboardStockSearchItem } from "@/features/dashboard/types/dashboard.types";
+
+interface StockSearchResultsProps {
+  items: DashboardStockSearchItem[];
+  onSelect: (item: DashboardStockSearchItem) => void;
+  selectedSymbol?: string;
+}
+
+export function StockSearchResults({
+  items,
+  onSelect,
+  selectedSymbol,
+}: StockSearchResultsProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="flex flex-col p-2">
+      {items.map((item) => {
+        const isSelected = item.symbol === selectedSymbol;
+        return (
+          <Button
+            key={item.symbol}
+            variant="outline"
+            className={cn(
+              "h-auto w-full flex-col items-start gap-1 p-3 text-left",
+              isSelected && "border-brand-500 bg-brand-50 hover:bg-brand-100",
+            )}
+            onClick={() => onSelect(item)}
+          >
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="font-semibold truncate">{item.name}</span>
+              <span className="text-xs text-muted-foreground shrink-0">
+                {item.symbol}
+              </span>
+            </div>
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              {item.market}
+            </div>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}