89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import { Clock3, Trash2, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import type { DashboardStockSearchHistoryItem } from "@/features/dashboard/types/dashboard.types";
|
|
|
|
interface StockSearchHistoryProps {
|
|
items: DashboardStockSearchHistoryItem[];
|
|
selectedSymbol?: string;
|
|
onSelect: (item: DashboardStockSearchHistoryItem) => void;
|
|
onRemove: (symbol: string) => void;
|
|
onClear: () => void;
|
|
}
|
|
|
|
/**
|
|
* @description 최근 검색 종목 목록을 보여주고, 재검색/개별삭제/전체삭제를 제공합니다.
|
|
* @see features/dashboard/components/DashboardContainer.tsx 검색 패널에서 종목 재선택 UI로 사용합니다.
|
|
* @see features/dashboard/hooks/useStockSearch.ts searchHistory 상태를 화면에 렌더링합니다.
|
|
*/
|
|
export function StockSearchHistory({
|
|
items,
|
|
selectedSymbol,
|
|
onSelect,
|
|
onRemove,
|
|
onClear,
|
|
}: StockSearchHistoryProps) {
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<section className="rounded-md border border-brand-200/80 bg-brand-50/45 p-2 dark:border-brand-700/50 dark:bg-brand-900/26">
|
|
{/* ========== HISTORY HEADER ========== */}
|
|
<div className="mb-1.5 flex items-center justify-between gap-2 px-1">
|
|
<div className="flex items-center gap-1.5 text-xs font-semibold text-brand-700 dark:text-brand-200">
|
|
<Clock3 className="h-3.5 w-3.5" />
|
|
최근 검색 종목
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onClear}
|
|
className="h-7 px-2 text-[11px] text-muted-foreground hover:text-foreground dark:text-brand-100/75 dark:hover:text-brand-50"
|
|
>
|
|
<Trash2 className="mr-1 h-3.5 w-3.5" />
|
|
전체 삭제
|
|
</Button>
|
|
</div>
|
|
|
|
{/* ========== HISTORY LIST ========== */}
|
|
<div className="max-h-36 space-y-1 overflow-y-auto pr-1">
|
|
{items.map((item) => {
|
|
const isSelected = item.symbol === selectedSymbol;
|
|
|
|
return (
|
|
<div key={item.symbol} className="flex items-center gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => onSelect(item)}
|
|
className={cn(
|
|
"h-8 flex-1 justify-between rounded-md border border-transparent px-2.5",
|
|
"text-left hover:bg-white/80 dark:hover:bg-brand-800/35",
|
|
isSelected &&
|
|
"border-brand-300 bg-white text-brand-700 dark:border-brand-500/55 dark:bg-brand-800/40 dark:text-brand-100",
|
|
)}
|
|
>
|
|
<span className="truncate text-sm font-medium">{item.name}</span>
|
|
<span className="ml-2 shrink-0 text-[11px] text-muted-foreground dark:text-brand-100/70">
|
|
{item.symbol}
|
|
</span>
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onRemove(item.symbol)}
|
|
aria-label={`${item.name} 히스토리 삭제`}
|
|
className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-white/80 hover:text-foreground dark:text-brand-100/70 dark:hover:bg-brand-800/35 dark:hover:text-brand-50"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|