import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Badge } from "./ui/badge";
import { Switch } from "./ui/switch";
import { Checkbox } from "./ui/checkbox";
import { Separator } from "./ui/separator";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Textarea } from "./ui/textarea";
import { Slider } from "./ui/slider";
import { Progress } from "./ui/progress";
import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
import { 
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./ui/accordion";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "./ui/alert-dialog";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { Skeleton } from "./ui/skeleton";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
import { Calendar as CalendarUI } from "./ui/calendar";
import { AspectRatio } from "./ui/aspect-ratio";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet";
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination";
import { Toggle } from "./ui/toggle";
import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
import { 
  Palette, 
  Copy, 
  Check,
  Sparkles,
  CircleDot,
  SquareDashedBottom,
  Container,
  Boxes,
  Eye,
  Code,
  Database,
  Package,
  ShoppingCart,
  Bell,
  Box,
  Settings,
  FileText,
  AlertCircle,
  Info,
  BarChart3,
  TrendingUp,
  Users,
  DollarSign,
  Activity,
  Truck,
  Calendar,
  LayoutDashboard,
  Target,
  ChevronDown,
  Zap,
  Building2,
  Warehouse,
  Plus,
  Edit,
  Trash2,
  Download,
  Upload,
  Search,
  Filter,
  RefreshCw,
  CheckCircle2,
  XCircle,
  Clock,
  CheckSquare,
  AlertTriangle,
  Loader2,
  Home,
  Menu,
  ChevronLeft,
  ChevronRight,
  ChevronUp,
  ArrowLeft,
  MoreVertical,
  Layers,
  Home,
  Menu,
  ChevronRight,
  Bold,
  Italic,
  Underline,
  MoreVertical
} from "lucide-react";
import { toast } from "sonner@2.0.3";
import { PageHeader } from "./organisms/PageHeader";
import { StatCards } from "./organisms/StatCards";
import { SearchFilter } from "./organisms/SearchFilter";
import { EmptyState } from "./organisms/EmptyState";
import { FormField } from "./molecules/FormField";
import { SearchBar } from "./molecules/SearchBar";
import { StatCard } from "./molecules/StatCard";
import { StatusBadge } from "./molecules/StatusBadge";
import { TableActions } from "./molecules/TableActions";
import { IconWithBadge } from "./molecules/IconWithBadge";
import { useDesignTokens } from "./contexts/DesignTokenContext";
import { TemplateDetailView } from "./TemplateDetailView";
import { useDesignSystem } from "./contexts/DesignSystemContext";
import { ComponentManageDialog } from "./ComponentManageDialog";
import { toast } from "sonner@2.0.3";
import { TabChip } from "./atoms/TabChip";

interface ComponentCardProps {
  name: string;
  description: string;
  category: string;
  path: string;
  preview: React.ReactNode;
  code: string;
  variants?: string[];
}

function ComponentCard({ name, description, category, path, preview, code, variants }: ComponentCardProps) {
  const [copiedCode, setCopiedCode] = useState(false);
  const [activeView, setActiveView] = useState<"preview" | "code">("preview");

  const copyToClipboard = () => {
    navigator.clipboard.writeText(code);
    setCopiedCode(true);
    toast.success(`${name} 코드가 복사되었습니다`);
    setTimeout(() => setCopiedCode(false), 2000);
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">{name}</CardTitle>
          <Badge variant="outline">{category}</Badge>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label className="text-xs text-muted-foreground">파일 경로</Label>
          <p className="text-sm font-mono bg-muted px-2 py-1 rounded mt-1">
            {path}
          </p>
        </div>

        {variants && variants.length > 0 && (
          <div>
            <Label className="text-xs text-muted-foreground">Variants</Label>
            <div className="flex flex-wrap gap-2 mt-1">
              {variants.map((variant) => (
                <Badge key={variant} variant="secondary">
                  {variant}
                </Badge>
              ))}
            </div>
          </div>
        )}

        {/* 탭 스위치 */}
        <div className="border-b">
          <div className="flex gap-1">
            <button
              onClick={() => setActiveView("preview")}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeView === "preview"
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              <Eye className="w-4 h-4 inline mr-2" />
              미리보기
            </button>
            <button
              onClick={() => setActiveView("code")}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeView === "code"
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              <Code className="w-4 h-4 inline mr-2" />
              코드
            </button>
          </div>
        </div>

        {/* 미리보기 */}
        {activeView === "preview" && (
          <div className="border rounded-lg p-6 bg-background">
            <div className="flex items-center justify-center min-h-[100px]">
              {preview}
            </div>
          </div>
        )}

        {/* 코드 */}
        {activeView === "code" && (
          <div className="relative">
            <pre className="bg-muted p-4 rounded text-xs overflow-x-auto max-h-[300px] overflow-y-auto">
              {code}
            </pre>
            <Button
              size="sm"
              variant="ghost"
              className="absolute top-2 right-2"
              onClick={copyToClipboard}
            >
              {copiedCode ? (
                <Check className="w-3 h-3 text-green-600" />
              ) : (
                <Copy className="w-3 h-3" />
              )}
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

export function DesignSystemManagement() {
  const [activeTab, setActiveTab] = useState("overview");
  const [atomicTab, setAtomicTab] = useState("foundation");
  const [searchTerm, setSearchTerm] = useState("");
  const [date, setDate] = useState<Date | undefined>(new Date());
  const [sliderValue, setSliderValue] = useState([50]);
  const [switchChecked, setSwitchChecked] = useState(false);
  const { tokens, updateToken, resetTokens, applyTheme, currentTheme } = useDesignTokens();
  const { atoms: customAtoms, molecules: customMolecules, organisms: customOrganisms, templates: customTemplates, widgets: customWidgets, addComponent, updateComponent, deleteComponent } = useDesignSystem();
  
  // 템플릿 상세 보기 상태
  const [selectedTemplate, setSelectedTemplate] = useState<any | null>(null);
  
  // 컴포넌트 관리 다이얼로그 상태
  const [isManageDialogOpen, setIsManageDialogOpen] = useState(false);
  const [manageDialogType, setManageDialogType] = useState<"atoms" | "molecules" | "organisms" | "templates" | "widgets">("atoms");
  const [manageDialogMode, setManageDialogMode] = useState<"add" | "edit">("add");
  const [editingComponent, setEditingComponent] = useState<any | null>(null);

  // ==================== ATOMS (UI) - 전체 47개 ====================
  const atoms = [
    {
      name: "Button",
      path: "/components/ui/button.tsx",
      category: "Interactive",
      description: "클릭 가능한 버튼 컴포넌트",
      variants: ["default", "destructive", "outline", "secondary", "ghost", "link"],
      preview: (
        <div className="flex flex-wrap gap-2">
          <Button>Default</Button>
          <Button variant="destructive">Destructive</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="link">Link</Button>
        </div>
      ),
      code: `import { Button } from "./components/ui/button";

<Button>클릭</Button>
<Button variant="destructive">삭제</Button>
<Button variant="outline">아웃라인</Button>`,
    },
    {
      name: "Input",
      path: "/components/ui/input.tsx",
      category: "Form",
      description: "텍스트 입력 필드",
      variants: ["text", "email", "password", "number"],
      preview: (
        <div className="w-full max-w-sm space-y-2">
          <Input type="text" placeholder="기본 입력" />
          <Input type="email" placeholder="이메일" />
          <Input type="password" placeholder="비밀번호" />
          <Input type="number" placeholder="숫자" />
        </div>
      ),
      code: `import { Input } from "./components/ui/input";

<Input type="text" placeholder="입력하세요" />
<Input type="email" placeholder="email@example.com" />`,
    },
    {
      name: "Textarea",
      path: "/components/ui/textarea.tsx",
      category: "Form",
      description: "여러 줄 텍스트 입력",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm">
          <Textarea placeholder="여러 줄 텍스트를 입력하세요..." rows={4} />
        </div>
      ),
      code: `import { Textarea } from "./components/ui/textarea";

<Textarea placeholder="내용 입력..." rows={4} />`,
    },
    {
      name: "Select",
      path: "/components/ui/select.tsx",
      category: "Form",
      description: "드롭다운 선택 메뉴",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm">
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="옵션을 선택하세요" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1">옵션 1</SelectItem>
              <SelectItem value="2">옵션 2</SelectItem>
              <SelectItem value="3">옵션 3</SelectItem>
            </SelectContent>
          </Select>
        </div>
      ),
      code: `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/ui/select";

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">옵션 1</SelectItem>
  </SelectContent>
</Select>`,
    },
    {
      name: "Checkbox",
      path: "/components/ui/checkbox.tsx",
      category: "Form",
      description: "체크박스 선택",
      variants: ["default"],
      preview: (
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Checkbox id="check1" />
            <Label htmlFor="check1">동의합니다</Label>
          </div>
          <div className="flex items-center gap-2">
            <Checkbox id="check2" defaultChecked />
            <Label htmlFor="check2">선택됨</Label>
          </div>
        </div>
      ),
      code: `import { Checkbox } from "./components/ui/checkbox";

<Checkbox checked={checked} onCheckedChange={setChecked} />`,
    },
    {
      name: "Switch",
      path: "/components/ui/switch.tsx",
      category: "Form",
      description: "토글 스위치",
      variants: ["default"],
      preview: (
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Switch checked={switchChecked} onCheckedChange={setSwitchChecked} />
            <Label>{switchChecked ? "켜짐" : "꺼짐"}</Label>
          </div>
        </div>
      ),
      code: `import { Switch } from "./components/ui/switch";

<Switch checked={enabled} onCheckedChange={setEnabled} />`,
    },
    {
      name: "RadioGroup",
      path: "/components/ui/radio-group.tsx",
      category: "Form",
      description: "라디오 버튼 그룹",
      variants: ["default"],
      preview: (
        <RadioGroup defaultValue="option1">
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="option1" id="r1" />
            <Label htmlFor="r1">옵션 1</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="option2" id="r2" />
            <Label htmlFor="r2">옵션 2</Label>
          </div>
        </RadioGroup>
      ),
      code: `import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group";

<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="r1" />
    <Label htmlFor="r1">옵션 1</Label>
  </div>
</RadioGroup>`,
    },
    {
      name: "Label",
      path: "/components/ui/label.tsx",
      category: "Form",
      description: "폼 레이블",
      variants: ["default"],
      preview: (
        <div className="space-y-2">
          <Label>기본 레이블</Label>
          <Label className="text-destructive">필수 입력*</Label>
        </div>
      ),
      code: `import { Label } from "./components/ui/label";

<Label htmlFor="email">이메일</Label>
<Input id="email" type="email" />`,
    },
    {
      name: "Slider",
      path: "/components/ui/slider.tsx",
      category: "Form",
      description: "범위 슬라이더",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm space-y-2">
          <Label>값: {sliderValue[0]}</Label>
          <Slider value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
        </div>
      ),
      code: `import { Slider } from "./components/ui/slider";

<Slider value={value} onValueChange={setValue} max={100} />`,
    },
    {
      name: "Badge",
      path: "/components/ui/badge.tsx",
      category: "Display",
      description: "작은 라벨 배지",
      variants: ["default", "secondary", "destructive", "outline"],
      preview: (
        <div className="flex flex-wrap gap-2">
          <Badge>Default</Badge>
          <Badge variant="secondary">Secondary</Badge>
          <Badge variant="destructive">Destructive</Badge>
          <Badge variant="outline">Outline</Badge>
        </div>
      ),
      code: `import { Badge } from "./components/ui/badge";

<Badge>기본</Badge>
<Badge variant="destructive">중요</Badge>`,
    },
    {
      name: "Progress",
      path: "/components/ui/progress.tsx",
      category: "Feedback",
      description: "진행률 표시 바",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm space-y-3">
          <div className="space-y-1">
            <Label>33%</Label>
            <Progress value={33} />
          </div>
          <div className="space-y-1">
            <Label>66%</Label>
            <Progress value={66} />
          </div>
          <div className="space-y-1">
            <Label>100%</Label>
            <Progress value={100} />
          </div>
        </div>
      ),
      code: `import { Progress } from "./components/ui/progress";

<Progress value={progress} max={100} />`,
    },
    {
      name: "Card",
      path: "/components/ui/card.tsx",
      category: "Layout",
      description: "카드 컨테이너",
      variants: ["default"],
      preview: (
        <Card className="w-full max-w-sm">
          <CardHeader>
            <CardTitle>카드 제목</CardTitle>
            <CardDescription>카드 설명이 표시됩니다</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm">카드 본문 내용</p>
          </CardContent>
        </Card>
      ),
      code: `import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "./components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>제목</CardTitle>
    <CardDescription>설명</CardDescription>
  </CardHeader>
  <CardContent>내용</CardContent>
</Card>`,
    },
    {
      name: "Alert",
      path: "/components/ui/alert.tsx",
      category: "Feedback",
      description: "알림 메시지 박스",
      variants: ["default", "destructive"],
      preview: (
        <div className="w-full max-w-sm space-y-2">
          <Alert>
            <Info className="h-4 w-4" />
            <AlertTitle>정보</AlertTitle>
            <AlertDescription>일반 알림 메시지입니다.</AlertDescription>
          </Alert>
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>오류</AlertTitle>
            <AlertDescription>오류가 발생했습니다.</AlertDescription>
          </Alert>
        </div>
      ),
      code: `import { Alert, AlertDescription, AlertTitle } from "./components/ui/alert";

<Alert>
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>알림</AlertTitle>
  <AlertDescription>메시지 내용</AlertDescription>
</Alert>`,
    },
    {
      name: "Separator",
      path: "/components/ui/separator.tsx",
      category: "Layout",
      description: "구분선",
      variants: ["horizontal", "vertical"],
      preview: (
        <div className="w-full max-w-sm space-y-2">
          <div>상단 내용</div>
          <Separator />
          <div>하단 내용</div>
        </div>
      ),
      code: `import { Separator } from "./components/ui/separator";

<div>내용 1</div>
<Separator />
<div>내용 2</div>`,
    },
    {
      name: "Tabs",
      path: "/components/ui/tabs.tsx",
      category: "Navigation",
      description: "탭 네비게이션",
      variants: ["default"],
      preview: (
        <Tabs defaultValue="tab1" className="w-full max-w-sm">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="tab1">탭 1</TabsTrigger>
            <TabsTrigger value="tab2">탭 2</TabsTrigger>
          </TabsList>
          <TabsContent value="tab1" className="p-4 border rounded">
            탭 1의 내용입니다
          </TabsContent>
          <TabsContent value="tab2" className="p-4 border rounded">
            탭 2의 내용입니다
          </TabsContent>
        </Tabs>
      ),
      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";

<Tabs value={tab} onValueChange={setTab}>
  <TabsList>
    <TabsTrigger value="tab1">탭 1</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">내용</TabsContent>
</Tabs>`,
    },
    {
      name: "Accordion",
      path: "/components/ui/accordion.tsx",
      category: "Layout",
      description: "접었다 펼치는 아코디언",
      variants: ["single", "multiple"],
      preview: (
        <Accordion type="single" collapsible className="w-full max-w-sm">
          <AccordionItem value="item-1">
            <AccordionTrigger>아코디언 1</AccordionTrigger>
            <AccordionContent>첫 번째 아코디언 내용</AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>아코디언 2</AccordionTrigger>
            <AccordionContent>두 번째 아코디언 내용</AccordionContent>
          </AccordionItem>
        </Accordion>
      ),
      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>제목</AccordionTrigger>
    <AccordionContent>내용</AccordionContent>
  </AccordionItem>
</Accordion>`,
    },
    {
      name: "Table",
      path: "/components/ui/table.tsx",
      category: "Display",
      description: "테이블 컴포넌트",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm border rounded">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>이름</TableHead>
                <TableHead>상태</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>항목 1</TableCell>
                <TableCell>활성</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>항목 2</TableCell>
                <TableCell>대기</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      ),
      code: `import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./components/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>제목</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>데이터</TableCell>
    </TableRow>
  </TableBody>
</Table>`,
    },
    {
      name: "Dialog",
      path: "/components/ui/dialog.tsx",
      category: "Overlay",
      description: "모달 다이얼로그",
      variants: ["default"],
      preview: (
        <Dialog>
          <DialogTrigger asChild>
            <Button>다이얼로그 열기</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>다이얼로그 제목</DialogTitle>
              <DialogDescription>
                다이얼로그 설명 내용입니다.
              </DialogDescription>
            </DialogHeader>
            <p className="text-sm">본문 내용</p>
          </DialogContent>
        </Dialog>
      ),
      code: `import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./components/ui/dialog";

<Dialog>
  <DialogTrigger asChild>
    <Button>열기</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>제목</DialogTitle>
      <DialogDescription>설명</DialogDescription>
    </DialogHeader>
    내용
  </DialogContent>
</Dialog>`,
    },
    {
      name: "AlertDialog",
      path: "/components/ui/alert-dialog.tsx",
      category: "Overlay",
      description: "확인/취소 알림 다이얼로그",
      variants: ["default"],
      preview: (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="destructive">삭제</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>정말 삭제하시겠습니까?</AlertDialogTitle>
              <AlertDialogDescription>
                이 작업은 되돌릴 수 없습니다.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>취소</AlertDialogCancel>
              <AlertDialogAction>삭제</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ),
      code: `import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog";

<AlertDialog>
  <AlertDialogTrigger>삭제</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>확인</AlertDialogTitle>
      <AlertDialogDescription>설명</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>취소</AlertDialogCancel>
      <AlertDialogAction>확인</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>`,
    },
    {
      name: "DropdownMenu",
      path: "/components/ui/dropdown-menu.tsx",
      category: "Overlay",
      description: "드롭다운 메뉴",
      variants: ["default"],
      preview: (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">
              메뉴 <ChevronDown className="ml-2 h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>프로필</DropdownMenuItem>
            <DropdownMenuItem>설정</DropdownMenuItem>
            <DropdownMenuItem>로그아웃</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      code: `import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>항목 1</DropdownMenuItem>
    <DropdownMenuItem>항목 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>`,
    },
    {
      name: "Popover",
      path: "/components/ui/popover.tsx",
      category: "Overlay",
      description: "팝오버 메뉴",
      variants: ["default"],
      preview: (
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">팝오버 열기</Button>
          </PopoverTrigger>
          <PopoverContent className="w-80">
            <div className="space-y-2">
              <h4 className="font-medium">팝오버 제목</h4>
              <p className="text-sm text-muted-foreground">
                팝오버 내용입니다.
              </p>
            </div>
          </PopoverContent>
        </Popover>
      ),
      code: `import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";

<Popover>
  <PopoverTrigger>열기</PopoverTrigger>
  <PopoverContent>내용</PopoverContent>
</Popover>`,
    },
    {
      name: "Tooltip",
      path: "/components/ui/tooltip.tsx",
      category: "Overlay",
      description: "툴팁",
      variants: ["default"],
      preview: (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline">마우스 올리기</Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>툴팁 메시지</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ),
      code: `import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>버튼</TooltipTrigger>
    <TooltipContent>툴팁</TooltipContent>
  </Tooltip>
</TooltipProvider>`,
    },
    {
      name: "Sheet",
      path: "/components/ui/sheet.tsx",
      category: "Overlay",
      description: "슬라이드 패널",
      variants: ["top", "right", "bottom", "left"],
      preview: (
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="outline">Sheet 열기</Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Sheet 제목</SheetTitle>
              <SheetDescription>
                Sheet 설명 내용입니다.
              </SheetDescription>
            </SheetHeader>
            <div className="py-4">Sheet 본문</div>
          </SheetContent>
        </Sheet>
      ),
      code: `import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "./components/ui/sheet";

<Sheet>
  <SheetTrigger>열기</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>제목</SheetTitle>
    </SheetHeader>
    내용
  </SheetContent>
</Sheet>`,
    },
    {
      name: "Skeleton",
      path: "/components/ui/skeleton.tsx",
      category: "Feedback",
      description: "로딩 스켈레톤",
      variants: ["default"],
      preview: (
        <div className="w-full max-w-sm space-y-3">
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-20 w-20 rounded-full" />
        </div>
      ),
      code: `import { Skeleton } from "./components/ui/skeleton";

<Skeleton className="h-4 w-full" />
<Skeleton className="h-20 w-20 rounded-full" />`,
    },
    {
      name: "Avatar",
      path: "/components/ui/avatar.tsx",
      category: "Display",
      description: "아바타 이미지",
      variants: ["default"],
      preview: (
        <div className="flex gap-2">
          <Avatar>
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>AB</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>CD</AvatarFallback>
          </Avatar>
        </div>
      ),
      code: `import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar";

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>`,
    },
    {
      name: "TabChip",
      path: "/components/atoms/TabChip.tsx",
      category: "Navigation",
      description: "모바일용 탭 칩 컴포넌트",
      variants: ["default", "active"],
      preview: (
        <div className="flex flex-wrap gap-2">
          <TabChip label="전체" count={125} active={true} />
          <TabChip label="제품" count={45} />
          <TabChip label="부품" count={30} />
          <TabChip label="원자재" count={50} />
        </div>
      ),
      code: `import { TabChip } from "./components/atoms/TabChip";

<TabChip 
  label="전체" 
  count={125} 
  active={true}
  onClick={() => handleTabChange("all")}
/>`,
    },
    {
      name: "Calendar",
      path: "/components/ui/calendar.tsx",
      category: "Form",
      description: "날짜 선택 달력",
      variants: ["single", "multiple", "range"],
      preview: (
        <div className="flex justify-center">
          <CalendarUI
            mode="single"
            selected={date}
            onSelect={setDate}
            className="rounded-md border"
          />
        </div>
      ),
      code: `import { Calendar } from "./components/ui/calendar";

const [date, setDate] = useState<Date>();
<Calendar mode="single" selected={date} onSelect={setDate} />`,
    },
    {
      name: "Collapsible",
      path: "/components/ui/collapsible.tsx",
      category: "Layout",
      description: "접을 수 있는 컨테이너",
      variants: ["default"],
      preview: (
        <Collapsible className="w-full max-w-sm">
          <CollapsibleTrigger asChild>
            <Button variant="outline" className="w-full justify-between">
              더 보기 <ChevronDown className="h-4 w-4" />
            </Button>
          </CollapsibleTrigger>
          <CollapsibleContent className="pt-2">
            <div className="rounded-md border px-4 py-3 text-sm">
              접혀있던 내용이 표시됩니다.
            </div>
          </CollapsibleContent>
        </Collapsible>
      ),
      code: `import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>열기</CollapsibleTrigger>
  <CollapsibleContent>내용</CollapsibleContent>
</Collapsible>`,
    },
    {
      name: "AspectRatio",
      path: "/components/ui/aspect-ratio.tsx",
      category: "Layout",
      description: "종횡비 유지 컨테이너",
      variants: ["16/9", "4/3", "1/1"],
      preview: (
        <div className="w-full max-w-sm">
          <AspectRatio ratio={16 / 9} className="bg-muted rounded flex items-center justify-center">
            <span className="text-sm text-muted-foreground">16:9 비율</span>
          </AspectRatio>
        </div>
      ),
      code: `import { AspectRatio } from "./components/ui/aspect-ratio";

<AspectRatio ratio={16 / 9}>
  <img src="image.jpg" />
</AspectRatio>`,
    },
    {
      name: "Breadcrumb",
      path: "/components/ui/breadcrumb.tsx",
      category: "Navigation",
      description: "경로 탐색 breadcrumb",
      variants: ["default"],
      preview: (
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">
                <Home className="h-4 w-4" />
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">카테고리</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>현재 페이지</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      ),
      code: `import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">홈</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>현재</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>`,
    },
    {
      name: "Pagination",
      path: "/components/ui/pagination.tsx",
      category: "Navigation",
      description: "페이지네이션",
      variants: ["default"],
      preview: (
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#" isActive>1</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#">2</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#">3</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      ),
      code: `import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/ui/pagination";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>`,
    },
    {
      name: "Toggle",
      path: "/components/ui/toggle.tsx",
      category: "Interactive",
      description: "토글 버튼",
      variants: ["default", "outline"],
      preview: (
        <div className="flex gap-2">
          <Toggle aria-label="Bold">
            <Bold className="h-4 w-4" />
          </Toggle>
          <Toggle aria-label="Italic">
            <Italic className="h-4 w-4" />
          </Toggle>
          <Toggle aria-label="Underline">
            <Underline className="h-4 w-4" />
          </Toggle>
        </div>
      ),
      code: `import { Toggle } from "./components/ui/toggle";

<Toggle pressed={bold} onPressedChange={setBold}>
  <Bold className="h-4 w-4" />
</Toggle>`,
    },
    {
      name: "ToggleGroup",
      path: "/components/ui/toggle-group.tsx",
      category: "Interactive",
      description: "토글 그룹",
      variants: ["single", "multiple"],
      preview: (
        <ToggleGroup type="single">
          <ToggleGroupItem value="bold" aria-label="Bold">
            <Bold className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="italic" aria-label="Italic">
            <Italic className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="underline" aria-label="Underline">
            <Underline className="h-4 w-4" />
          </ToggleGroupItem>
        </ToggleGroup>
      ),
      code: `import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group";

<ToggleGroup type="single" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
</ToggleGroup>`,
    },
  ];

  // ==================== MOLECULES ====================
  const molecules = [
    {
      name: "FormField",
      path: "/components/molecules/FormField.tsx",
      category: "Form",
      description: "레이블 + 입력필드 조합 (필수 표시 지원)",
      preview: (
        <div className="w-full max-w-sm space-y-3">
          <FormField 
            label="이름" 
            value="" 
            onChange={() => {}}
            placeholder="이름을 입력하세요"
            required
          />
          <FormField 
            label="이메일" 
            value="" 
            onChange={() => {}}
            type="email"
            placeholder="email@example.com"
          />
        </div>
      ),
      code: `import { FormField } from "./components/molecules/FormField";

<FormField 
  label="이름" 
  value={name} 
  onChange={(e) => setName(e.target.value)}
  required
  error="필수 입력 항목입니다"
/>`,
    },
    {
      name: "SearchBar",
      path: "/components/molecules/SearchBar.tsx",
      category: "Search",
      description: "검색 아이콘 + 입력필드",
      preview: (
        <div className="w-full max-w-md">
          <SearchBar onSearch={(term) => console.log(term)} placeholder="검색..." />
        </div>
      ),
      code: `import { SearchBar } from "./components/molecules/SearchBar";

<SearchBar 
  onSearch={(term) => handleSearch(term)} 
  placeholder="검색어 입력"
/>`,
    },
    {
      name: "StatCard",
      path: "/components/molecules/StatCard.tsx",
      category: "Display",
      description: "아이콘 + 통계 + 트렌드 카드",
      preview: (
        <div className="w-full max-w-xs">
          <StatCard 
            title="총 매출" 
            value="₩1,234,000" 
            icon={DollarSign}
            trend={{ value: 12.5, isPositive: true }}
          />
        </div>
      ),
      code: `import { StatCard } from "./components/molecules/StatCard";
import { DollarSign } from "lucide-react";

<StatCard 
  title="총 매출" 
  value="₩1,234,000" 
  icon={DollarSign}
  trend={{ value: 12.5, isPositive: true }}
/>`,
    },
    {
      name: "StatusBadge",
      path: "/components/molecules/StatusBadge.tsx",
      category: "Display",
      description: "상태별 컬러 배지",
      preview: (
        <div className="flex flex-wrap gap-2">
          <StatusBadge status="pending" />
          <StatusBadge status="approved" />
          <StatusBadge status="rejected" />
          <StatusBadge status="completed" />
        </div>
      ),
      code: `import { StatusBadge } from "./components/molecules/StatusBadge";

<StatusBadge status="pending" />
<StatusBadge status="approved" />
<StatusBadge status="completed" />`,
    },
    {
      name: "TableActions",
      path: "/components/molecules/TableActions.tsx",
      category: "Interactive",
      description: "테이블 행 액션 버튼 그룹",
      preview: (
        <TableActions
          actions={[
            { type: "view", onClick: () => toast.success("보기") },
            { type: "edit", onClick: () => toast.success("수정") },
            { type: "delete", onClick: () => toast.success("삭제"), variant: "destructive" },
          ]}
        />
      ),
      code: `import { TableActions } from "./components/molecules/TableActions";

<TableActions
  actions={[
    { type: "view", onClick: () => handleView(id) },
    { type: "edit", onClick: () => handleEdit(id) },
    { type: "delete", onClick: () => handleDelete(id), variant: "destructive" },
  ]}
/>`,
    },
    {
      name: "IconWithBadge",
      path: "/components/molecules/IconWithBadge.tsx",
      category: "Display",
      description: "아이콘 + 카운트 배지",
      preview: (
        <div className="flex gap-4">
          <IconWithBadge icon={Bell} count={5} />
          <IconWithBadge icon={ShoppingCart} count={23} />
          <IconWithBadge icon={FileText} count={99} />
        </div>
      ),
      code: `import { IconWithBadge } from "./components/molecules/IconWithBadge";
import { Bell } from "lucide-react";

<IconWithBadge icon={Bell} count={5} />`,
    },
  ];

  // ==================== ORGANISMS ====================
  const organisms = [
    {
      name: "PageHeader",
      path: "/components/organisms/PageHeader.tsx",
      category: "Layout",
      description: "표준 페이지 헤더 (아이콘 + 제목 + 부제목 + 액션)",
      preview: (
        <div className="w-full">
          <PageHeader
            icon={Database}
            title="품목 관리"
            description="제품 및 자재 품목을 관리합니다"
            actions={<Button size="sm">추가</Button>}
          />
        </div>
      ),
      code: `import { PageHeader } from "./components/organisms/PageHeader";
import { Database } from "lucide-react";

<PageHeader
  icon={Database}
  title="품목 관리"
  description="제품 및 자재 품목을 관리합니다"
  actions={<Button>추가</Button>}
/>`,
    },
    {
      name: "StatCards",
      path: "/components/organisms/StatCards.tsx",
      category: "Display",
      description: "4개 통계 카드 그리드 레이아웃",
      preview: (
        <div className="w-full">
          <StatCards 
            stats={[
              { title: "총 품목", value: "1,234", icon: Box },
              { title: "재고", value: "567", icon: Package },
              { title: "주문", value: "89", icon: ShoppingCart },
              { title: "알림", value: "12", icon: Bell },
            ]}
          />
        </div>
      ),
      code: `import { StatCards } from "./components/organisms/StatCards";
import { Box, Package, ShoppingCart, Bell } from "lucide-react";

<StatCards 
  stats={[
    { title: "총 품목", value: "1,234", icon: Box },
    { title: "재고", value: "567", icon: Package },
  ]}
/>`,
    },
    {
      name: "SearchFilter",
      path: "/components/organisms/SearchFilter.tsx",
      category: "Search",
      description: "검색바 + 다중 필터 조합",
      preview: (
        <div className="w-full">
          <SearchFilter
            searchValue=""
            onSearchChange={() => {}}
            filters={[
              { key: "status", label: "상태", value: "all" },
              { key: "category", label: "카테고리", value: "all" },
            ]}
          />
        </div>
      ),
      code: `import { SearchFilter } from "./components/organisms/SearchFilter";

<SearchFilter
  searchValue={search}
  onSearchChange={setSearch}
  filters={[
    { key: "status", label: "상태", value: statusFilter },
  ]}
  onFilterChange={handleFilterChange}
/>`,
    },
    {
      name: "EmptyState",
      path: "/components/organisms/EmptyState.tsx",
      category: "Display",
      description: "빈 상태 표시 (아이콘 + 메시지 + 액션)",
      preview: (
        <div className="w-full">
          <EmptyState
            icon={Database}
            message="데이터가 없습니다"
            description="새로운 항목을 추가해보세요"
            action={<Button>추가하기</Button>}
          />
        </div>
      ),
      code: `import { EmptyState } from "./components/organisms/EmptyState";
import { Database } from "lucide-react";

<EmptyState
  icon={Database}
  message="데이터가 없습니다"
  description="새로운 항목을 추가해보세요"
  action={<Button onClick={handleAdd}>추가하기</Button>}
/>`,
    },
    {
      name: "DataTable",
      path: "/components/organisms/DataTable.tsx",
      category: "Display",
      description: "고급 데이터 테이블 (정렬, 페이징, 타입별 렌더링, 모바일 카드뷰)",
      preview: (
        <div className="w-full p-4 bg-muted rounded-lg">
          <div className="space-y-2 text-sm">
            <div className="flex items-center gap-2 text-muted-foreground">
              <Database className="w-4 h-4" />
              <span className="font-medium">DataTable 컴포넌트</span>
            </div>
            <ul className="text-xs space-y-1 text-muted-foreground">
              <li>• 자동 정렬, 페이징, 필터링</li>
              <li>• 다양한 셀 타입 (text, number, currency, date, status, badge, actions)</li>
              <li>• 반응형 모바일 카드 뷰</li>
              <li>• TypeScript 타입 안전성</li>
            </ul>
          </div>
        </div>
      ),
      code: `import { DataTable, Column } from "./components/organisms/DataTable";

const columns: Column<Item>[] = [
  { key: "code", label: "코드", type: "text" },
  { key: "name", label: "이름", type: "text" },
  { key: "quantity", label: "수량", type: "number" },
  { key: "price", label: "가격", type: "currency" },
  { key: "status", label: "상태", type: "status" },
];

<DataTable columns={columns} data={items} />`,
    },
    {
      name: "FormSection",
      path: "/components/organisms/FormSection.tsx",
      category: "Form",
      description: "접을 수 있는 폼 섹션 (에러 표시, 카운트 지원)",
      preview: (
        <div className="w-full p-4 bg-muted rounded-lg">
          <div className="space-y-2 text-sm">
            <div className="flex items-center gap-2 text-muted-foreground">
              <FileText className="w-4 h-4" />
              <span className="font-medium">FormSection 컴포넌트</span>
            </div>
            <ul className="text-xs space-y-1 text-muted-foreground">
              <li>• 접었다 펼칠 수 있는 폼 섹션</li>
              <li>• 필수 필드 유효성 검사 에러 표시</li>
              <li>• 에러 카운트 배지 자동 표시</li>
              <li>• 빨간색 테두리로 에러 강조</li>
            </ul>
          </div>
        </div>
      ),
      code: `import { FormSection } from "./components/organisms/FormSection";

<FormSection 
  title="기본 정보"
  collapsible
  defaultOpen={true}
  hasError={errors.basic}
  errorCount={2}
>
  <FormField label="이름" value={name} onChange={setName} required />
</FormSection>`,
    },
    {
      name: "MobileCard",
      path: "/components/organisms/MobileCard.tsx",
      category: "Display",
      description: "모바일용 카드 뷰 (반응형 테이블 대체)",
      preview: (
        <div className="w-full p-4 bg-muted rounded-lg">
          <div className="space-y-2 text-sm">
            <div className="flex items-center gap-2 text-muted-foreground">
              <Box className="w-4 h-4" />
              <span className="font-medium">MobileCard 컴포넌트</span>
            </div>
            <ul className="text-xs space-y-1 text-muted-foreground">
              <li>• 모바일 화면에서 테이블 대신 사용</li>
              <li>• 제목, 부제목, 배지, 필드 목록</li>
              <li>• 액션 버튼 그룹 지원</li>
              <li>• 터치 친화적 인터페이스</li>
            </ul>
          </div>
        </div>
      ),
      code: `import { MobileCard } from "./components/organisms/MobileCard";

<MobileCard
  title="품목-001"
  subtitle="제품명"
  badge={{ label: "활성", variant: "default" }}
  fields={[
    { label: "수량", value: "100" },
    { label: "가격", value: "₩50,000" },
  ]}
  actions={[
    { label: "보기", onClick: handleView },
  ]}
/>`,
    },
    {
      name: "PageLayout",
      path: "/components/organisms/PageLayout.tsx",
      category: "Layout",
      description: "페이지 레이아웃 래퍼 (최대 너비, 여백 관리)",
      preview: (
        <div className="w-full p-4 bg-muted rounded-lg">
          <div className="space-y-2 text-sm">
            <div className="flex items-center gap-2 text-muted-foreground">
              <LayoutDashboard className="w-4 h-4" />
              <span className="font-medium">PageLayout 컴포넌트</span>
            </div>
            <ul className="text-xs space-y-1 text-muted-foreground">
              <li>• 페이지 최대 너비 및 여백 관리</li>
              <li>• 반응형 패딩 (모바일 4, 데스크탑 6)</li>
              <li>• maxWidth: sm, md, lg, xl, 2xl, full</li>
            </ul>
          </div>
        </div>
      ),
      code: `import { PageLayout } from "./components/organisms/PageLayout";

<PageLayout maxWidth="2xl">
  <PageHeader title="페이지 제목" />
  {/* 페이지 내용 */}
</PageLayout>`,
    },
  ];

  // ==================== TEMPLATES ====================
  const templates = [
    {
      name: "ResponsiveListTemplate",
      path: "/components/templates/ResponsiveListTemplate.tsx",
      category: "List",
      description: "기본 목록 템플릿 - 데스크톱/태블릿/모바일 반응형 (품목관리 스타일)",
      structure: "PageHeader → StatCards → SearchFilter → Tabs(Desktop/Mobile) → DataTable/CardList",
      preview: (
        <div className="w-full space-y-3 text-xs">
          <div className="p-3 bg-purple-50 rounded border border-purple-200">
            <div className="flex items-center gap-2">
              <Package className="w-4 h-4" />
              <span className="font-medium">PageHeader + 등록버튼</span>
            </div>
          </div>
          <div className="grid grid-cols-4 gap-2">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="p-2 bg-blue-50 rounded border border-blue-200 text-center">
                Stat {i}
              </div>
            ))}
          </div>
          <div className="p-2 bg-green-50 rounded border border-green-200 text-center">
            SearchFilter + 필터 드롭다운
          </div>
          <div className="p-3 bg-amber-50 rounded border border-amber-200">
            <div className="font-medium mb-2">데스크톱: TabsList</div>
            <div className="flex gap-2">
              <div className="px-2 py-1 bg-white rounded border text-xs">전체</div>
              <div className="px-2 py-1 bg-white rounded border text-xs">제품</div>
              <div className="px-2 py-1 bg-white rounded border text-xs">부품</div>
            </div>
          </div>
          <div className="p-3 bg-cyan-50 rounded border border-cyan-200">
            <div className="font-medium mb-2">모바일: 버튼 탭 (색상별)</div>
            <div className="flex gap-2 flex-wrap">
              <div className="px-2 py-1 bg-blue-100 rounded border-2 border-blue-500 text-xs">전체 5</div>
              <div className="px-2 py-1 bg-white rounded border text-xs">제품 2</div>
            </div>
          </div>
          <div className="p-3 bg-gray-50 rounded border border-gray-200">
            <div className="font-medium mb-2">데스크톱: DataTable</div>
            <div className="text-xs text-muted-foreground">스크롤 가능한 테이블</div>
          </div>
          <div className="p-3 bg-gray-50 rounded border border-gray-200">
            <div className="font-medium mb-2">모바일: 카드 리스트</div>
            <div className="text-xs text-muted-foreground">체크박스 + 번호 + 필드 + 액션</div>
          </div>
        </div>
      ),
      code: `import { ResponsiveListTemplate } from "./components/templates/ResponsiveListTemplate";

const tabs = [
  { value: "all", label: "전체", count: 100, color: "blue" },
  { value: "FG", label: "제품", count: 50, color: "purple" },
  { value: "PT", label: "부품", count: 30, color: "orange" },
];

<ResponsiveListTemplate
  title="품목 관리"
  description="제품, 부품, 부자재 등록 및 관리"
  icon={Package}
  headerActions={<Button>품목 등록</Button>}
  stats={stats}
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  searchPlaceholder="품목코드, 품목명 검색..."
  tabs={tabs}
  currentTab={currentTab}
  onTabChange={setCurrentTab}
  data={filteredItems}
  keyField="id"
  columns={columns}
  onRowClick={handleRowClick}
  renderMobileCard={renderMobileCard}
  selectable={true}
  selectedIds={selectedIds}
  onToggleSelection={handleToggle}
/>`,
    },
    {
      name: "DashboardTemplate",
      path: "/components/templates/DashboardTemplate.tsx",
      category: "Page",
      description: "대시보드 페이지 표준 템플릿",
      structure: "PageHeader → StatCards → 컨텐츠 그리드",
      preview: (
        <div className="w-full space-y-3 text-xs">
          <div className="p-3 bg-purple-50 rounded border border-purple-200">
            <div className="flex items-center gap-2">
              <LayoutDashboard className="w-4 h-4" />
              <span className="font-medium">PageHeader</span>
            </div>
          </div>
          <div className="grid grid-cols-4 gap-2">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="p-2 bg-blue-50 rounded border border-blue-200 text-center">
                StatCard {i}
              </div>
            ))}
          </div>
          <div className="p-3 bg-gray-50 rounded border border-gray-200 text-center">
            Dashboard Content
          </div>
        </div>
      ),
      code: `import { DashboardTemplate } from "./components/templates/DashboardTemplate";

<DashboardTemplate
  header={<PageHeader icon={LayoutDashboard} title="대시보드" />}
  stats={<StatCards stats={stats} />}
>
  {/* 대시보드 위젯 */}
</DashboardTemplate>`,
    },
    {
      name: "ListPageTemplate",
      path: "/components/templates/ListPageTemplate.tsx",
      category: "Page",
      description: "목록 페이지 표준 템플릿",
      structure: "PageHeader → StatCards → SearchFilter → DataTable",
      preview: (
        <div className="w-full space-y-3 text-xs">
          <div className="p-3 bg-purple-50 rounded border border-purple-200">
            <div className="flex items-center gap-2">
              <Package className="w-4 h-4" />
              <span className="font-medium">PageHeader</span>
            </div>
          </div>
          <div className="grid grid-cols-4 gap-2">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="p-2 bg-blue-50 rounded border border-blue-200 text-center">
                Stat {i}
              </div>
            ))}
          </div>
          <div className="p-2 bg-green-50 rounded border border-green-200 text-center">
            SearchFilter
          </div>
          <div className="p-3 bg-gray-50 rounded border border-gray-200 text-center">
            DataTable
          </div>
        </div>
      ),
      code: `import { ListPageTemplate } from "./components/templates/ListPageTemplate";

<ListPageTemplate
  header={<PageHeader icon={Package} title="목록" />}
  stats={<StatCards stats={stats} />}
  search={<SearchFilter />}
  table={<DataTable columns={columns} data={data} />}
/>`,
    },
    {
      name: "FormPageTemplate",
      path: "/components/templates/FormPageTemplate.tsx",
      category: "Page",
      description: "폼 페이지 표준 템플릿",
      structure: "PageHeader → FormSection[] → 액션 버튼",
      preview: (
        <div className="w-full space-y-3 text-xs">
          <div className="p-3 bg-purple-50 rounded border border-purple-200">
            <div className="flex items-center gap-2">
              <FileText className="w-4 h-4" />
              <span className="font-medium">PageHeader</span>
            </div>
          </div>
          <div className="p-3 bg-orange-50 rounded border border-orange-200">FormSection 1</div>
          <div className="p-3 bg-orange-50 rounded border border-orange-200">FormSection 2</div>
          <div className="flex gap-2 justify-end">
            <div className="px-3 py-1 bg-gray-300 rounded text-xs">취소</div>
            <div className="px-3 py-1 bg-blue-500 text-white rounded text-xs">저장</div>
          </div>
        </div>
      ),
      code: `import { FormPageTemplate } from "./components/templates/FormPageTemplate";

<FormPageTemplate
  header={<PageHeader icon={FileText} title="등록" />}
  sections={[
    <FormSection title="기본 정보">
      <FormField label="이름" />
    </FormSection>
  ]}
  onSubmit={handleSubmit}
  onCancel={handleCancel}
/>`,
    },
    {
      name: "TabbedPageTemplate",
      path: "/components/templates/TabbedPageTemplate.tsx",
      category: "Page",
      description: "탭 페이지 표준 템플릿",
      structure: "PageHeader → Tabs → 탭별 컨텐츠",
      preview: (
        <div className="w-full space-y-3 text-xs">
          <div className="p-3 bg-purple-50 rounded border border-purple-200">
            <div className="flex items-center gap-2">
              <Settings className="w-4 h-4" />
              <span className="font-medium">PageHeader</span>
            </div>
          </div>
          <div className="flex gap-2 border-b pb-2">
            <div className="px-3 py-1 border-b-2 border-blue-500 font-medium">탭 1</div>
            <div className="px-3 py-1 text-muted-foreground">탭 2</div>
          </div>
          <div className="p-3 bg-gray-50 rounded border border-gray-200 text-center">
            Tab Content
          </div>
        </div>
      ),
      code: `import { TabbedPageTemplate } from "./components/templates/TabbedPageTemplate";

<TabbedPageTemplate
  header={<PageHeader icon={Settings} title="설정" />}
  tabs={[
    { value: "general", label: "일반", content: <GeneralSettings /> },
  ]}
/>`,
    },
  ];

  // ==================== WIDGETS - 전체 21개 ====================
  const widgets = [
    {
      name: "SalesOverviewWidget",
      path: "/components/widgets/SalesOverviewWidget.tsx",
      category: "Sales",
      description: "영업 현황 요약 (매출, 주문, 견적)",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <BarChart3 className="w-4 h-4" />
              영업 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              일별/월별/연간 매출 통계 및 목표 달성률 표시
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { SalesOverviewWidget } from "./components/widgets/SalesOverviewWidget";

<SalesOverviewWidget />`,
    },
    {
      name: "SalesTrendWidget",
      path: "/components/widgets/SalesTrendWidget.tsx",
      category: "Sales",
      description: "매출 추이 차트",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <TrendingUp className="w-4 h-4" />
              매출 추이
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              월별/분기별 매출 라인 차트
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { SalesTrendWidget } from "./components/widgets/SalesTrendWidget";

<SalesTrendWidget period="monthly" />`,
    },
    {
      name: "SalesTrendChartWidget",
      path: "/components/widgets/SalesTrendChartWidget.tsx",
      category: "Sales",
      description: "매출 추이 차트 (상세)",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <BarChart3 className="w-4 h-4" />
              매출 추이 차트
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              상세 매출 추이 바 차트
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { SalesTrendChartWidget } from "./components/widgets/SalesTrendChartWidget";

<SalesTrendChartWidget />`,
    },
    {
      name: "SalesAchievementWidget",
      path: "/components/widgets/SalesAchievementWidget.tsx",
      category: "Sales",
      description: "매출 목표 달성률",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Target className="w-4 h-4" />
              목표 달성률
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              매출 목표 대비 달성률 표시
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { SalesAchievementWidget } from "./components/widgets/SalesAchievementWidget";

<SalesAchievementWidget />`,
    },
    {
      name: "TopCustomersWidget",
      path: "/components/widgets/TopCustomersWidget.tsx",
      category: "Sales",
      description: "주요 고객사 순위",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Users className="w-4 h-4" />
              주요 고객사
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              매출 기준 상위 고객 목록
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { TopCustomersWidget } from "./components/widgets/TopCustomersWidget";

<TopCustomersWidget limit={10} />`,
    },
    {
      name: "ProductionStatusWidget",
      path: "/components/widgets/ProductionStatusWidget.tsx",
      category: "Production",
      description: "생산 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Activity className="w-4 h-4" />
              생산 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              작업지시, 진행률, 완료 현황
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ProductionStatusWidget } from "./components/widgets/ProductionStatusWidget";

<ProductionStatusWidget />`,
    },
    {
      name: "QualityStatusWidget",
      path: "/components/widgets/QualityStatusWidget.tsx",
      category: "Quality",
      description: "품질 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Target className="w-4 h-4" />
              품질 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              검사, 불량률, 적합률 통계
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { QualityStatusWidget } from "./components/widgets/QualityStatusWidget";

<QualityStatusWidget />`,
    },
    {
      name: "InventoryStatusWidget",
      path: "/components/widgets/InventoryStatusWidget.tsx",
      category: "Inventory",
      description: "재고 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Package className="w-4 h-4" />
              재고 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              입고, 출고, 재고 수량 통계
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { InventoryStatusWidget } from "./components/widgets/InventoryStatusWidget";

<InventoryStatusWidget />`,
    },
    {
      name: "PurchaseStatusWidget",
      path: "/components/widgets/PurchaseStatusWidget.tsx",
      category: "Purchase",
      description: "구매 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <ShoppingCart className="w-4 h-4" />
              구매 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              발주, 입고, 미결 현황
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { PurchaseStatusWidget } from "./components/widgets/PurchaseStatusWidget";

<PurchaseStatusWidget />`,
    },
    {
      name: "ShippingStatusWidget",
      path: "/components/widgets/ShippingStatusWidget.tsx",
      category: "Shipping",
      description: "출하 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Truck className="w-4 h-4" />
              출하 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              출하 예정, 완료, 배송 중
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ShippingStatusWidget } from "./components/widgets/ShippingStatusWidget";

<ShippingStatusWidget />`,
    },
    {
      name: "VehicleStatusWidget",
      path: "/components/widgets/VehicleStatusWidget.tsx",
      category: "Shipping",
      description: "차량 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Truck className="w-4 h-4" />
              차량 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              차량 가동, 유휴, 정비 현황
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { VehicleStatusWidget } from "./components/widgets/VehicleStatusWidget";

<VehicleStatusWidget />`,
    },
    {
      name: "ScheduleCalendarWidget",
      path: "/components/widgets/ScheduleCalendarWidget.tsx",
      category: "Schedule",
      description: "일정 캘린더",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              일정 캘린더
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              작업 일정, 납기일 캘린더
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ScheduleCalendarWidget } from "./components/widgets/ScheduleCalendarWidget";

<ScheduleCalendarWidget />`,
    },
    {
      name: "NotificationsWidget",
      path: "/components/widgets/NotificationsWidget.tsx",
      category: "Notification",
      description: "알림 목록",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Bell className="w-4 h-4" />
              알림
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              시스템 알림, 미결 작업
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { NotificationsWidget } from "./components/widgets/NotificationsWidget";

<NotificationsWidget maxItems={5} />`,
    },
    {
      name: "QuickActionsWidget",
      path: "/components/widgets/QuickActionsWidget.tsx",
      category: "Action",
      description: "빠른 작업",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Settings className="w-4 h-4" />
              빠른 작업
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              자주 사용하는 기능 바로가기
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { QuickActionsWidget } from "./components/widgets/QuickActionsWidget";

<QuickActionsWidget />`,
    },
    {
      name: "ApprovalStatusWidget",
      path: "/components/widgets/ApprovalStatusWidget.tsx",
      category: "Approval",
      description: "결재 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <FileText className="w-4 h-4" />
              결재 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              대기, 승인, 반려 문서 수
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ApprovalStatusWidget } from "./components/widgets/ApprovalStatusWidget";

<ApprovalStatusWidget />`,
    },
    {
      name: "CashFlowWidget",
      path: "/components/widgets/CashFlowWidget.tsx",
      category: "Finance",
      description: "현금 흐름",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <DollarSign className="w-4 h-4" />
              현금 흐름
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              수입, 지출, 잔액 현황
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { CashFlowWidget } from "./components/widgets/CashFlowWidget";

<CashFlowWidget />`,
    },
    {
      name: "ReceivablesWidget",
      path: "/components/widgets/ReceivablesWidget.tsx",
      category: "Finance",
      description: "미수금 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <DollarSign className="w-4 h-4" />
              미수금 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              미수금 총액 및 상세 내역
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ReceivablesWidget } from "./components/widgets/ReceivablesWidget";

<ReceivablesWidget />`,
    },
    {
      name: "ReceivablesTrendWidget",
      path: "/components/widgets/ReceivablesTrendWidget.tsx",
      category: "Finance",
      description: "미수금 추이",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <TrendingUp className="w-4 h-4" />
              미수금 추이
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              미수금 변동 추이 차트
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ReceivablesTrendWidget } from "./components/widgets/ReceivablesTrendWidget";

<ReceivablesTrendWidget />`,
    },
    {
      name: "HRStatusWidget",
      path: "/components/widgets/HRStatusWidget.tsx",
      category: "HR",
      description: "인사 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Users className="w-4 h-4" />
              인사 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              재직, 휴가, 출장 인원 통계
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { HRStatusWidget } from "./components/widgets/HRStatusWidget";

<HRStatusWidget />`,
    },
    {
      name: "DailySummaryWidget",
      path: "/components/widgets/DailySummaryWidget.tsx",
      category: "Dashboard",
      description: "일일 요약",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <LayoutDashboard className="w-4 h-4" />
              일일 요약
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              금일 주요 지표 요약
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { DailySummaryWidget } from "./components/widgets/DailySummaryWidget";

<DailySummaryWidget />`,
    },
    {
      name: "ProcessOverviewWidget",
      path: "/components/widgets/ProcessOverviewWidget.tsx",
      category: "Production",
      description: "공정 현황",
      preview: (
        <Card className="w-full">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Activity className="w-4 h-4" />
              공정 현황
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-xs text-muted-foreground">
              공정별 작업 진행 현황
            </div>
          </CardContent>
        </Card>
      ),
      code: `import { ProcessOverviewWidget } from "./components/widgets/ProcessOverviewWidget";

<ProcessOverviewWidget />`,
    },
  ];

  // 기본 컴포넌트와 사용자 정의 컴포넌트 합치기
  const allTemplates = [...templates, ...customTemplates];
  const allAtoms = [...atoms, ...customAtoms];
  const allMolecules = [...molecules, ...customMolecules];
  const allOrganisms = [...organisms, ...customOrganisms];
  const allWidgets = [...widgets, ...customWidgets];

  // 필터링
  const filterComponents = (components: any[]) => {
    if (searchTerm === "") return components;
    return components.filter(comp => 
      comp.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      comp.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
      comp.category.toLowerCase().includes(searchTerm.toLowerCase())
    );
  };

  const filteredAtoms = filterComponents(allAtoms);
  const filteredMolecules = filterComponents(allMolecules);
  const filteredOrganisms = filterComponents(allOrganisms);
  const filteredTemplates = filterComponents(allTemplates);
  const filteredWidgets = filterComponents(allWidgets);

  const totalComponents = allAtoms.length + allMolecules.length + allOrganisms.length + allTemplates.length + allWidgets.length;

  // 템플릿 상세 보기인 경우
  if (selectedTemplate) {
    return (
      <TemplateDetailView
        template={selectedTemplate}
        onBack={() => setSelectedTemplate(null)}
        onEdit={() => {
          // 사용자 정의 템플릿인 경우에만 수정 가능
          const customTemplate = customTemplates.find(t => t.id === selectedTemplate.id);
          if (customTemplate) {
            setEditingComponent(customTemplate);
            setManageDialogType("templates");
            setManageDialogMode("edit");
            setIsManageDialogOpen(true);
          } else {
            toast.info("기본 제공 템플릿은 수정할 수 없습니다");
          }
        }}
        onDelete={() => {
          const customTemplate = customTemplates.find(t => t.id === selectedTemplate.id);
          if (customTemplate) {
            if (confirm(`"${selectedTemplate.name}" 템플릿을 삭제하시겠습니까?`)) {
              deleteComponent("templates", customTemplate.id);
              setSelectedTemplate(null);
              toast.success("템플릿이 삭제되었습니다");
            }
          } else {
            toast.info("기본 제공 템플릿은 삭제할 수 없습니다");
          }
        }}
      />
    );
  }

  return (
    <>
    <div className="flex-1 overflow-auto">
      {/* 페이지 헤더 */}
      <div className="bg-gradient-to-r from-purple-50 to-blue-50 border-b border-border p-6 sticky top-0 z-10 backdrop-blur-sm">
        <div className="flex items-center gap-4">
          <div className="bg-gradient-to-br from-purple-500 to-blue-600 p-3 rounded-xl shadow-lg">
            <Palette className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-2xl font-semibold text-foreground">디자인 시스템 관리</h1>
            <p className="text-sm text-muted-foreground mt-1">
              아토믹 디자인 시스템 - 전체 {totalComponents}개 컴포넌트 통합 관리
            </p>
          </div>
        </div>
      </div>

      <div className="p-6">
        {/* 통계 카드 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Atoms (UI)</p>
                  <p className="text-2xl font-semibold mt-1">{atoms.length}</p>
                  <p className="text-xs text-muted-foreground mt-1">Shadcn/ui 기반</p>
                </div>
                <div className="bg-purple-100 p-3 rounded-lg">
                  <CircleDot className="w-5 h-5 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Molecules</p>
                  <p className="text-2xl font-semibold mt-1">{molecules.length}</p>
                  <p className="text-xs text-muted-foreground mt-1">조합 컴포넌트</p>
                </div>
                <div className="bg-blue-100 p-3 rounded-lg">
                  <SquareDashedBottom className="w-5 h-5 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Organisms</p>
                  <p className="text-2xl font-semibold mt-1">{organisms.length}</p>
                  <p className="text-xs text-muted-foreground mt-1">복합 컴포넌트</p>
                </div>
                <div className="bg-green-100 p-3 rounded-lg">
                  <Container className="w-5 h-5 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Templates</p>
                  <p className="text-2xl font-semibold mt-1">{templates.length}</p>
                  <p className="text-xs text-muted-foreground mt-1">페이지 템플릿</p>
                </div>
                <div className="bg-orange-100 p-3 rounded-lg">
                  <Boxes className="w-5 h-5 text-orange-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Widgets</p>
                  <p className="text-2xl font-semibold mt-1">{widgets.length}</p>
                  <p className="text-xs text-muted-foreground mt-1">대시보드 위젯</p>
                </div>
                <div className="bg-pink-100 p-3 rounded-lg">
                  <LayoutDashboard className="w-5 h-5 text-pink-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 검색 */}
        <div className="mb-6">
          <Input
            type="search"
            placeholder="컴포넌트 이름, 설명, 카테고리로 검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="max-w-md"
          />
        </div>

        {/* 탭 */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="overview">📊 개요</TabsTrigger>
            <TabsTrigger value="atomic">🎨 아토믹 디자인 시스템</TabsTrigger>
            <TabsTrigger value="widgets">📦 Widgets ({widgets.length})</TabsTrigger>
          </TabsList>

          {/* 개요 탭 */}
          <TabsContent value="overview" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Sparkles className="w-5 h-5 text-purple-600" />
                  아토믹 디자인 시스템 개요
                </CardTitle>
                <CardDescription>
                  SAM MES의 모든 UI는 아토믹 디자인 원칙으로 구성되어 일관성과 재사용성을 보장합니다
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* 테마 전환 */}
                <div className="space-y-3">
                  <Label>테마 전환</Label>
                  <div className="flex gap-2">
                    <Button 
                      variant={currentTheme === "light" ? "default" : "outline"}
                      onClick={() => applyTheme("light")}
                    >
                      라이트 모드
                    </Button>
                    <Button 
                      variant={currentTheme === "dark" ? "default" : "outline"}
                      onClick={() => applyTheme("dark")}
                    >
                      다크 모드
                    </Button>
                    <Button 
                      variant="destructive"
                      onClick={resetTokens}
                      className="ml-auto"
                    >
                      초기화
                    </Button>
                  </div>
                </div>

                <Separator />

                {/* 색상 토큰 */}
                <div className="space-y-4">
                  <h3 className="font-semibold flex items-center gap-2">
                    <div className="w-3 h-3 bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 rounded-full"></div>
                    색상 토큰
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {/* Primary Colors */}
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Primary</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.primary}
                          onChange={(e) => updateToken("primary", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.primary}
                          onChange={(e) => updateToken("primary", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Primary Foreground</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.primaryForeground}
                          onChange={(e) => updateToken("primaryForeground", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.primaryForeground}
                          onChange={(e) => updateToken("primaryForeground", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    {/* Background Colors */}
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Background</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.background}
                          onChange={(e) => updateToken("background", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.background}
                          onChange={(e) => updateToken("background", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Foreground</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.foreground}
                          onChange={(e) => updateToken("foreground", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.foreground}
                          onChange={(e) => updateToken("foreground", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Card</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.card}
                          onChange={(e) => updateToken("card", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.card}
                          onChange={(e) => updateToken("card", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Border</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.border}
                          onChange={(e) => updateToken("border", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.border}
                          onChange={(e) => updateToken("border", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    {/* Secondary Colors */}
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Secondary</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.secondary}
                          onChange={(e) => updateToken("secondary", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.secondary}
                          onChange={(e) => updateToken("secondary", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Muted</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.muted}
                          onChange={(e) => updateToken("muted", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.muted}
                          onChange={(e) => updateToken("muted", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Accent</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.accent}
                          onChange={(e) => updateToken("accent", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.accent}
                          onChange={(e) => updateToken("accent", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Destructive</Label>
                      <div className="flex gap-2">
                        <Input
                          type="color"
                          value={tokens.destructive}
                          onChange={(e) => updateToken("destructive", e.target.value)}
                          className="w-16 h-10 p-1"
                        />
                        <Input
                          type="text"
                          value={tokens.destructive}
                          onChange={(e) => updateToken("destructive", e.target.value)}
                          className="flex-1 font-mono text-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <Separator />

                {/* 차트 색상 */}
                <div className="space-y-4">
                  <h3 className="font-semibold flex items-center gap-2">
                    <BarChart3 className="w-4 h-4" />
                    차트 색상
                  </h3>
                  <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                    {[1, 2, 3, 4, 5].map((num) => (
                      <div key={num} className="space-y-2">
                        <Label className="text-xs text-muted-foreground">Chart {num}</Label>
                        <div className="flex gap-2">
                          <Input
                            type="color"
                            value={tokens[`chart${num}` as keyof typeof tokens]}
                            onChange={(e) => updateToken(`chart${num}` as keyof typeof tokens, e.target.value)}
                            className="w-16 h-10 p-1"
                          />
                          <Input
                            type="text"
                            value={tokens[`chart${num}` as keyof typeof tokens]}
                            onChange={(e) => updateToken(`chart${num}` as keyof typeof tokens, e.target.value)}
                            className="flex-1 font-mono text-xs"
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <Separator />

                {/* 간격 및 기타 */}
                <div className="space-y-4">
                  <h3 className="font-semibold flex items-center gap-2">
                    <Settings className="w-4 h-4" />
                    간격 및 기타
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Border Radius</Label>
                      <Input
                        type="text"
                        value={tokens.radius}
                        onChange={(e) => updateToken("radius", e.target.value)}
                        className="font-mono text-xs"
                        placeholder="0.75rem"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">Font Size</Label>
                      <Input
                        type="text"
                        value={tokens.fontSize}
                        onChange={(e) => updateToken("fontSize", e.target.value)}
                        className="font-mono text-xs"
                        placeholder="16px"
                      />
                    </div>
                  </div>
                </div>

                <Separator />

                {/* 미리보기 */}
                <div className="space-y-4">
                  <h3 className="font-semibold flex items-center gap-2">
                    <Eye className="w-4 h-4" />
                    실시간 미리보기
                  </h3>
                  <div className="p-6 border rounded-lg space-y-4 bg-background">
                    <div className="flex gap-2">
                      <Button>Primary Button</Button>
                      <Button variant="secondary">Secondary</Button>
                      <Button variant="destructive">Destructive</Button>
                      <Button variant="outline">Outline</Button>
                    </div>

                    <Card>
                      <CardHeader>
                        <CardTitle>카드 컴포넌트</CardTitle>
                        <CardDescription>현재 적용된 토큰으로 렌더링됩니다</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex gap-2">
                          <Badge>Badge</Badge>
                          <Badge variant="secondary">Secondary</Badge>
                          <Badge variant="destructive">Destructive</Badge>
                        </div>
                        <Input placeholder="Input 필드" />
                        <div className="flex items-center gap-2">
                          <Checkbox id="preview-check" />
                          <Label htmlFor="preview-check">Checkbox 레이블</Label>
                        </div>
                        <div className="flex items-center gap-2">
                          <Switch id="preview-switch" />
                          <Label htmlFor="preview-switch">Switch 토글</Label>
                        </div>
                      </CardContent>
                    </Card>

                    <Alert>
                      <AlertCircle className="h-4 w-4" />
                      <AlertTitle>알림</AlertTitle>
                      <AlertDescription>
                        모든 변경사항은 실시간으로 전체 시스템에 적용됩니다.
                      </AlertDescription>
                    </Alert>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 개요 탭 */}
          <TabsContent value="overview" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Sparkles className="w-5 h-5 text-purple-600" />
                  아토믹 디자인 시스템 개요
                </CardTitle>
                <CardDescription>
                  SAM MES의 모든 UI는 아토믹 디자인 원칙으로 구성되어 일관성과 재사용성을 보장합니다
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <h3 className="font-semibold mb-3">컴포넌트 계층 구조</h3>
                  <div className="space-y-3">
                    <div className="flex items-start gap-3 p-4 bg-purple-50 rounded-lg border border-purple-200">
                      <CircleDot className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="font-medium text-purple-900">Atoms (원자) - {atoms.length}개</p>
                        <p className="text-sm text-purple-700 mt-1">
                          더 이상 쪼갤 수 없는 기본 UI 컴포넌트 (Shadcn/ui 기반)
                        </p>
                        <p className="text-xs text-purple-600 mt-2 font-mono">
                          Button, Input, Select, Badge, Switch, Checkbox, Dialog, Tabs, Alert, Table, Calendar 등 30개
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
                      <SquareDashedBottom className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="font-medium text-blue-900">Molecules (분자) - {molecules.length}개</p>
                        <p className="text-sm text-blue-700 mt-1">
                          2개 이상의 Atoms가 결합된 단순한 조합 컴포넌트
                        </p>
                        <p className="text-xs text-blue-600 mt-2 font-mono">
                          FormField, SearchBar, StatCard, StatusBadge, TableActions, IconWithBadge
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 p-4 bg-green-50 rounded-lg border border-green-200">
                      <Container className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="font-medium text-green-900">Organisms (유기체) - {organisms.length}개</p>
                        <p className="text-sm text-green-700 mt-1">
                          복잡한 기능을 가진 독립적인 컴포넌트
                        </p>
                        <p className="text-xs text-green-600 mt-2 font-mono">
                          PageHeader, StatCards, SearchFilter, EmptyState, DataTable, FormSection, MobileCard, PageLayout
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 p-4 bg-orange-50 rounded-lg border border-orange-200">
                      <Boxes className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="font-medium text-orange-900">Templates (템플릿) - {templates.length}개</p>
                        <p className="text-sm text-orange-700 mt-1">
                          페이지 레이아웃을 정의하는 템플릿
                        </p>
                        <p className="text-xs text-orange-600 mt-2 font-mono">
                          DashboardTemplate, ListPageTemplate, FormPageTemplate, TabbedPageTemplate
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 p-4 bg-pink-50 rounded-lg border border-pink-200">
                      <LayoutDashboard className="w-5 h-5 text-pink-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="font-medium text-pink-900">Widgets (위젯) - {widgets.length}개</p>
                        <p className="text-sm text-pink-700 mt-1">
                          대시보드 전용 특수 목적 컴포넌트
                        </p>
                        <p className="text-xs text-pink-600 mt-2 font-mono">
                          영업, 생산, 품질, 재고, 구매, 출하, 인사, 재무 등 모든 모듈별 위젯
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                <Separator />

                <div>
                  <h3 className="font-semibold mb-3">표준 페이지 구조</h3>
                  <div className="bg-muted p-4 rounded-lg space-y-2 text-sm">
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 bg-purple-200 rounded flex items-center justify-center text-xs">1</div>
                      <span className="font-mono">PageHeader (아이콘 + 제목 + 부제목 + 액션)</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 bg-blue-200 rounded flex items-center justify-center text-xs">2</div>
                      <span className="font-mono">StatCards (대시보드 통계 4개 그리드)</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 bg-green-200 rounded flex items-center justify-center text-xs">3</div>
                      <span className="font-mono">SearchFilter (검색 + 다중 필터)</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 bg-orange-200 rounded flex items-center justify-center text-xs">4</div>
                      <span className="font-mono">Content (DataTable, Form, Widgets 등)</span>
                    </div>
                  </div>
                </div>

                <Separator />

                <div>
                  <h3 className="font-semibold mb-3">시스템 통계</h3>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="p-4 bg-muted rounded-lg text-center">
                      <p className="text-3xl font-bold">{totalComponents}</p>
                      <p className="text-sm text-muted-foreground mt-1">전체 컴포넌트</p>
                    </div>
                    <div className="p-4 bg-muted rounded-lg text-center">
                      <p className="text-3xl font-bold">130+</p>
                      <p className="text-sm text-muted-foreground mt-1">페이지 수</p>
                    </div>
                    <div className="p-4 bg-muted rounded-lg text-center">
                      <p className="text-3xl font-bold">13</p>
                      <p className="text-sm text-muted-foreground mt-1">모듈 수</p>
                    </div>
                    <div className="p-4 bg-muted rounded-lg text-center">
                      <p className="text-3xl font-bold">100%</p>
                      <p className="text-sm text-muted-foreground mt-1">TypeScript</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 아토믹 디자인 시스템 탭 */}
          <TabsContent value="atomic" className="space-y-6">
            {/* 검색 필터 */}
            <div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm pb-4 border-b">
              <div className="flex items-center gap-3">
                <div className="relative flex-1 max-w-md">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="컴포넌트 이름으로 빠른 검색..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
                {searchTerm && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setSearchTerm("")}
                  >
                    <X className="w-4 h-4 mr-2" />
                    초기화
                  </Button>
                )}
              </div>
            </div>

            {/* Foundation 섹션 */}
            <Card>
              <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30">
                <CardTitle className="flex items-center gap-2">
                  <Palette className="w-5 h-5 text-purple-600" />
                  🎨 Foundation - 디자인 토큰
                </CardTitle>
                <CardDescription>
                  모든 컴포넌트에 적용되는 기본 색상, 타이포그래피, 간격 시스템
                </CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-sm">
                  <div className="p-4 bg-muted rounded-lg">
                    <div className="w-full h-8 bg-primary rounded mb-2"></div>
                    <p className="font-mono text-xs">Primary</p>
                  </div>
                  <div className="p-4 bg-muted rounded-lg">
                    <div className="w-full h-8 bg-secondary rounded mb-2"></div>
                    <p className="font-mono text-xs">Secondary</p>
                  </div>
                  <div className="p-4 bg-muted rounded-lg">
                    <div className="w-full h-8 bg-destructive rounded mb-2"></div>
                    <p className="font-mono text-xs">Destructive</p>
                  </div>
                  <div className="p-4 bg-muted rounded-lg">
                    <div className="w-full h-8 bg-muted rounded border mb-2"></div>
                    <p className="font-mono text-xs">Muted</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Atoms 섹션 */}
            <Card id="atoms-section">
              <CardHeader className="bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-950/30 dark:to-blue-950/30">
                <CardTitle className="flex items-center gap-2">
                  <CircleDot className="w-5 h-5 text-purple-600" />
                  ⚛️ Atoms - 원자 컴포넌트 ({filteredAtoms.length}/{allAtoms.length})
                </CardTitle>
                <CardDescription>
                  더 이상 쪼갤 수 없는 기본 UI 컴포넌트 (Shadcn/ui 기반)
                </CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredAtoms.map((atom) => (
                    <ComponentCard key={atom.name} {...atom} />
                  ))}
                </div>
                {filteredAtoms.length === 0 && (
                  <EmptyState
                    icon={CircleDot}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </CardContent>
            </Card>

            {/* Molecules 섹션 */}
            <Card id="molecules-section">
              <CardHeader className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30">
                <CardTitle className="flex items-center gap-2">
                  <SquareDashedBottom className="w-5 h-5 text-blue-600" />
                  🧩 Molecules - 분자 컴포넌트 ({filteredMolecules.length}/{allMolecules.length})
                </CardTitle>
                <CardDescription>
                  2개 이상의 Atoms가 결합된 단순한 조합 컴포넌트
                </CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredMolecules.map((molecule) => (
                    <ComponentCard key={molecule.name} {...molecule} />
                  ))}
                </div>
                {filteredMolecules.length === 0 && (
                  <EmptyState
                    icon={SquareDashedBottom}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </CardContent>
            </Card>

            {/* Organisms 섹션 */}
            <Card id="organisms-section">
              <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30">
                <CardTitle className="flex items-center gap-2">
                  <Container className="w-5 h-5 text-green-600" />
                  🏗️ Organisms - 유기체 컴포넌트 ({filteredOrganisms.length}/{allOrganisms.length})
                </CardTitle>
                <CardDescription>
                  복잡한 기능 단위 - Molecules + Atoms의 결합체
                </CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredOrganisms.map((organism) => (
                    <ComponentCard key={organism.name} {...organism} />
                  ))}
                </div>
                {filteredOrganisms.length === 0 && (
                  <EmptyState
                    icon={Container}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </CardContent>
            </Card>

            {/* Templates 섹션 */}
            <Card id="templates-section">
              <CardHeader className="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-950/30 dark:to-amber-950/30">
                <CardTitle className="flex items-center gap-2">
                  <Boxes className="w-5 h-5 text-orange-600" />
                  📄 Templates - 템플릿 ({filteredTemplates.length}/{allTemplates.length})
                </CardTitle>
                <CardDescription>
                  완전한 페이지 레이아웃 템플릿
                </CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredTemplates.map((template) => (
                    <div key={template.name} onClick={() => setSelectedTemplate(template)} className="cursor-pointer">
                      <ComponentCard {...template} />
                    </div>
                  ))}
                </div>
                {filteredTemplates.length === 0 && (
                  <EmptyState
                    icon={Boxes}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </CardContent>
            </Card>

            <Tabs value={atomicTab} onValueChange={setAtomicTab} className="hidden">
              <TabsList className="grid w-full grid-cols-6">
                <TabsTrigger value="foundation">🎨 Foundation</TabsTrigger>
                <TabsTrigger value="patterns">📐 Patterns</TabsTrigger>
                <TabsTrigger value="atoms">Atoms ({atoms.length})</TabsTrigger>
                <TabsTrigger value="molecules">Molecules ({molecules.length})</TabsTrigger>
                <TabsTrigger value="organisms">Organisms ({organisms.length})</TabsTrigger>
                <TabsTrigger value="templates">Templates ({templates.length})</TabsTrigger>
              </TabsList>

              {/* Foundation (디자인 토큰) */}
              <TabsContent value="foundation" className="hidden space-y-6 mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Palette className="w-5 h-5 text-purple-600" />
                      Foundation - 디자인 토큰
                    </CardTitle>
                    <CardDescription>
                      모든 컴포넌트와 페이지에 자동으로 적용되는 중앙 집중식 디자인 시스템입니다. 
                      토큰을 변경하면 전체 UI가 즉시 업데이트됩니다.
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {/* 테마 전환 */}
                    <div className="space-y-3">
                      <Label>테마 전환</Label>
                      <div className="flex gap-2">
                        <Button 
                          variant={currentTheme === "light" ? "default" : "outline"}
                          onClick={() => applyTheme("light")}
                        >
                          라이트 모드
                        </Button>
                        <Button 
                          variant={currentTheme === "dark" ? "default" : "outline"}
                          onClick={() => applyTheme("dark")}
                        >
                          다크 모드
                        </Button>
                        <Button 
                          variant="destructive"
                          onClick={resetTokens}
                          className="ml-auto"
                        >
                          초기화
                        </Button>
                      </div>
                    </div>

                    <Separator />

                    {/* 색상 토큰 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <div className="w-3 h-3 bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 rounded-full"></div>
                        색상 토큰 (Color Tokens)
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {/* Primary Colors */}
                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Primary</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.primary}
                              onChange={(e) => updateToken("primary", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.primary}
                              onChange={(e) => updateToken("primary", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Primary Foreground</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.primaryForeground}
                              onChange={(e) => updateToken("primaryForeground", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.primaryForeground}
                              onChange={(e) => updateToken("primaryForeground", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        {/* Background Colors */}
                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Background</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.background}
                              onChange={(e) => updateToken("background", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.background}
                              onChange={(e) => updateToken("background", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Foreground</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.foreground}
                              onChange={(e) => updateToken("foreground", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.foreground}
                              onChange={(e) => updateToken("foreground", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Card</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.card}
                              onChange={(e) => updateToken("card", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.card}
                              onChange={(e) => updateToken("card", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Border</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.border}
                              onChange={(e) => updateToken("border", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.border}
                              onChange={(e) => updateToken("border", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        {/* Secondary Colors */}
                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Secondary</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.secondary}
                              onChange={(e) => updateToken("secondary", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.secondary}
                              onChange={(e) => updateToken("secondary", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Muted</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.muted}
                              onChange={(e) => updateToken("muted", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.muted}
                              onChange={(e) => updateToken("muted", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Accent</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.accent}
                              onChange={(e) => updateToken("accent", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.accent}
                              onChange={(e) => updateToken("accent", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Destructive</Label>
                          <div className="flex gap-2">
                            <Input
                              type="color"
                              value={tokens.destructive}
                              onChange={(e) => updateToken("destructive", e.target.value)}
                              className="w-16 h-10 p-1"
                            />
                            <Input
                              type="text"
                              value={tokens.destructive}
                              onChange={(e) => updateToken("destructive", e.target.value)}
                              className="flex-1 font-mono text-xs"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 차트 색상 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <BarChart3 className="w-4 h-4" />
                        차트 색상 (Chart Colors)
                      </h3>
                      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                        {[1, 2, 3, 4, 5].map((num) => (
                          <div key={num} className="space-y-2">
                            <Label className="text-xs text-muted-foreground">Chart {num}</Label>
                            <div className="flex gap-2">
                              <Input
                                type="color"
                                value={tokens[`chart${num}` as keyof typeof tokens]}
                                onChange={(e) => updateToken(`chart${num}` as keyof typeof tokens, e.target.value)}
                                className="w-16 h-10 p-1"
                              />
                              <Input
                                type="text"
                                value={tokens[`chart${num}` as keyof typeof tokens]}
                                onChange={(e) => updateToken(`chart${num}` as keyof typeof tokens, e.target.value)}
                                className="flex-1 font-mono text-xs"
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <Separator />

                    {/* 타이포그래피 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <FileText className="w-4 h-4" />
                        타이포그래피 (Typography)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          폰트 시스템: Pretendard (한글/영문 통합) + Apple System 폴백
                        </p>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">h1</p>
                            <p className="font-mono">2xl / 500 / -0.02em</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">h2</p>
                            <p className="font-mono">xl / 500 / -0.01em</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">h3</p>
                            <p className="font-mono">lg / 500 / -0.01em</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">h4</p>
                            <p className="font-mono">base / 500</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">body</p>
                            <p className="font-mono">base / 400 / 1.6</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">label</p>
                            <p className="font-mono">sm / 500 / 0.01em</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">button</p>
                            <p className="font-mono">base / 500 / 0.01em</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">input</p>
                            <p className="font-mono">base / 400</p>
                          </div>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Base Font Size</Label>
                          <Input
                            type="text"
                            value={tokens.fontSize}
                            onChange={(e) => updateToken("fontSize", e.target.value)}
                            className="font-mono text-xs"
                            placeholder="16px"
                          />
                          <p className="text-xs text-muted-foreground">전체 시스템 기본 폰트 크기</p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 간격 시스템 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Box className="w-4 h-4" />
                        간격 시스템 (Spacing Scale)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-3">
                          Tailwind CSS 기본 간격 스케일 사용 (0.25rem = 4px 기준)
                        </p>
                        <div className="grid grid-cols-4 md:grid-cols-8 gap-2 text-xs">
                          {[
                            { name: '0.5', value: '2px' },
                            { name: '1', value: '4px' },
                            { name: '2', value: '8px' },
                            { name: '3', value: '12px' },
                            { name: '4', value: '16px' },
                            { name: '6', value: '24px' },
                            { name: '8', value: '32px' },
                            { name: '12', value: '48px' },
                          ].map((space) => (
                            <div key={space.name} className="p-2 bg-background rounded border text-center">
                              <p className="font-mono mb-1">{space.name}</p>
                              <p className="text-muted-foreground">{space.value}</p>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 둥글기 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <CircleDot className="w-4 h-4" />
                        둥글기 (Border Radius)
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label className="text-xs text-muted-foreground">Base Radius</Label>
                          <Input
                            type="text"
                            value={tokens.radius}
                            onChange={(e) => updateToken("radius", e.target.value)}
                            className="font-mono text-xs"
                            placeholder="0.75rem"
                          />
                        </div>
                      </div>
                      <div className="bg-muted/30 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-3">자동 계산되는 둥글기 변형</p>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">radius-sm</p>
                            <p className="font-mono">base - 4px</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">radius-md</p>
                            <p className="font-mono">base - 2px</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">radius-lg</p>
                            <p className="font-mono">base</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">radius-xl</p>
                            <p className="font-mono">base + 4px</p>
                          </div>
                        </div>
                        <div className="mt-4 flex gap-3 items-center">
                          <div className="w-16 h-16 bg-primary rounded-sm"></div>
                          <div className="w-16 h-16 bg-primary rounded-md"></div>
                          <div className="w-16 h-16 bg-primary rounded-lg"></div>
                          <div className="w-16 h-16 bg-primary rounded-xl"></div>
                          <div className="w-16 h-16 bg-primary rounded-2xl"></div>
                          <div className="w-16 h-16 bg-primary rounded-full"></div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 그림자 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Sparkles className="w-4 h-4" />
                        그림자 (Shadows)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-4">
                        <p className="text-sm text-muted-foreground">
                          4단계 그림자 시스템 (Light/Dark 모드 자동 대응)
                        </p>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                          <div className="space-y-2">
                            <p className="text-xs font-mono text-muted-foreground">shadow-sm</p>
                            <div className="h-20 bg-card rounded-lg p-3 clean-shadow-sm border">
                              <p className="text-xs">Small</p>
                            </div>
                            <p className="text-xs font-mono text-muted-foreground">
                              0 1px 2px rgba(0,0,0,0.05)
                            </p>
                          </div>
                          <div className="space-y-2">
                            <p className="text-xs font-mono text-muted-foreground">shadow (default)</p>
                            <div className="h-20 bg-card rounded-lg p-3 clean-shadow border">
                              <p className="text-xs">Default</p>
                            </div>
                            <p className="text-xs font-mono text-muted-foreground">
                              0 1px 3px + 0 1px 2px
                            </p>
                          </div>
                          <div className="space-y-2">
                            <p className="text-xs font-mono text-muted-foreground">shadow-lg</p>
                            <div className="h-20 bg-card rounded-lg p-3 clean-shadow-lg border">
                              <p className="text-xs">Large</p>
                            </div>
                            <p className="text-xs font-mono text-muted-foreground">
                              0 4px 6px + 0 2px 4px
                            </p>
                          </div>
                          <div className="space-y-2">
                            <p className="text-xs font-mono text-muted-foreground">shadow-xl</p>
                            <div className="h-20 bg-card rounded-lg p-3 clean-shadow-xl border">
                              <p className="text-xs">Extra Large</p>
                            </div>
                            <p className="text-xs font-mono text-muted-foreground">
                              0 10px 15px + 0 4px 6px
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 선 굵기 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Activity className="w-4 h-4" />
                        선 굵기 (Border Width)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-4">
                          Tailwind CSS 기본 선 굵기 스케일
                        </p>
                        <div className="space-y-3">
                          {[
                            { name: 'border (default)', width: '1px', class: 'border' },
                            { name: 'border-2', width: '2px', class: 'border-2' },
                            { name: 'border-4', width: '4px', class: 'border-4' },
                            { name: 'border-8', width: '8px', class: 'border-8' },
                          ].map((border) => (
                            <div key={border.name} className="flex items-center gap-4">
                              <div className="w-32 text-xs font-mono text-muted-foreground">
                                {border.name}
                              </div>
                              <div className={`flex-1 h-12 bg-background rounded ${border.class} border-primary`}></div>
                              <div className="w-16 text-xs text-muted-foreground">
                                {border.width}
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 애니메이션 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Target className="w-4 h-4" />
                        애니메이션 (Transitions)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-3">
                          전역 트랜지션: cubic-bezier(0.25, 0.46, 0.45, 0.94) / 200ms
                        </p>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-2">duration-200</p>
                            <p className="font-mono">200ms (기본)</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-2">ease-out</p>
                            <p className="font-mono">cubic-bezier</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-2">적용 대상</p>
                            <p className="font-mono">모든 인터랙티브 요소</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* Z-Index */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Boxes className="w-4 h-4" />
                        레이어 (Z-Index)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-3">
                          Tailwind CSS 기본 Z-Index 스케일
                        </p>
                        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 text-xs">
                          {[
                            { name: 'z-0', value: '0' },
                            { name: 'z-10', value: '10' },
                            { name: 'z-20', value: '20' },
                            { name: 'z-30', value: '30' },
                            { name: 'z-40', value: '40' },
                            { name: 'z-50', value: '50 (Dialog)' },
                          ].map((z) => (
                            <div key={z.name} className="p-3 bg-background rounded border text-center">
                              <p className="font-mono mb-1">{z.name}</p>
                              <p className="text-muted-foreground">{z.value}</p>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 아이콘그라피 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Palette className="w-4 h-4" />
                        아이콘그라피 (Iconography)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-4">
                        <div className="flex items-center gap-2 p-3 bg-primary/10 rounded-lg border border-primary/20">
                          <Zap className="w-5 h-5 text-primary" />
                          <div className="flex-1">
                            <p className="text-sm font-medium">아이콘 라이브러리: lucide-react</p>
                            <p className="text-xs text-muted-foreground mt-1">
                              2,000+ 고품질 오픈소스 아이콘 / MIT 라이센스
                            </p>
                          </div>
                        </div>

                        {/* 아이콘 크기 가이드 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">아이콘 크기 가이드</p>
                          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                            {[
                              { size: 'w-3 h-3', label: '12px', use: 'Badges' },
                              { size: 'w-4 h-4', label: '16px', use: 'Buttons, Labels' },
                              { size: 'w-5 h-5', label: '20px', use: 'Headers' },
                              { size: 'w-6 h-6', label: '24px', use: 'Titles' },
                              { size: 'w-8 h-8', label: '32px', use: 'Hero Icons' },
                            ].map((item) => (
                              <div key={item.size} className="p-3 bg-background rounded border text-center">
                                <div className="flex items-center justify-center mb-2">
                                  <Package className={item.size + " text-primary"} />
                                </div>
                                <p className="text-xs font-mono mb-1">{item.size}</p>
                                <p className="text-xs text-muted-foreground">{item.label}</p>
                                <p className="text-xs text-muted-foreground mt-1">{item.use}</p>
                              </div>
                            ))}
                          </div>
                        </div>

                        {/* 카테고리별 주요 아이콘 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">카테고리별 주요 아이콘</p>
                          
                          {/* 관리 */}
                          <div className="p-3 bg-background rounded border">
                            <p className="text-xs font-medium text-muted-foreground mb-3">관리 (Management)</p>
                            <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
                              {[
                                { Icon: Package, name: 'Package', color: 'text-blue-600' },
                                { Icon: Users, name: 'Users', color: 'text-blue-600' },
                                { Icon: Building2, name: 'Building2', color: 'text-blue-600' },
                                { Icon: Warehouse, name: 'Warehouse', color: 'text-blue-600' },
                                { Icon: Box, name: 'Box', color: 'text-green-600' },
                                { Icon: ShoppingCart, name: 'Cart', color: 'text-teal-600' },
                                { Icon: TrendingUp, name: 'Trending', color: 'text-green-600' },
                                { Icon: DollarSign, name: 'Dollar', color: 'text-yellow-600' },
                              ].map(({ Icon, name, color }) => (
                                <div key={name} className="text-center">
                                  <div className="flex items-center justify-center mb-1">
                                    <Icon className={`w-5 h-5 ${color}`} />
                                  </div>
                                  <p className="text-xs text-muted-foreground">{name}</p>
                                </div>
                              ))}
                            </div>
                          </div>

                          {/* 액션 */}
                          <div className="p-3 bg-background rounded border">
                            <p className="text-xs font-medium text-muted-foreground mb-3">액션 (Actions)</p>
                            <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
                              {[
                                { Icon: Plus, name: 'Plus', color: 'text-green-600' },
                                { Icon: Edit, name: 'Edit', color: 'text-blue-600' },
                                { Icon: Trash2, name: 'Delete', color: 'text-red-600' },
                                { Icon: Download, name: 'Download', color: 'text-blue-600' },
                                { Icon: Upload, name: 'Upload', color: 'text-green-600' },
                                { Icon: Search, name: 'Search', color: 'text-gray-600' },
                                { Icon: Filter, name: 'Filter', color: 'text-gray-600' },
                                { Icon: RefreshCw, name: 'Refresh', color: 'text-blue-600' },
                              ].map(({ Icon, name, color }) => (
                                <div key={name} className="text-center">
                                  <div className="flex items-center justify-center mb-1">
                                    <Icon className={`w-5 h-5 ${color}`} />
                                  </div>
                                  <p className="text-xs text-muted-foreground">{name}</p>
                                </div>
                              ))}
                            </div>
                          </div>

                          {/* 상태 */}
                          <div className="p-3 bg-background rounded border">
                            <p className="text-xs font-medium text-muted-foreground mb-3">상태 (Status)</p>
                            <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
                              {[
                                { Icon: CheckCircle2, name: 'Success', color: 'text-green-600' },
                                { Icon: AlertCircle, name: 'Alert', color: 'text-orange-600' },
                                { Icon: XCircle, name: 'Error', color: 'text-red-600' },
                                { Icon: Info, name: 'Info', color: 'text-blue-600' },
                                { Icon: Clock, name: 'Pending', color: 'text-yellow-600' },
                                { Icon: CheckSquare, name: 'Complete', color: 'text-green-600' },
                                { Icon: AlertTriangle, name: 'Warning', color: 'text-orange-600' },
                                { Icon: Loader2, name: 'Loading', color: 'text-blue-600' },
                              ].map(({ Icon, name, color }) => (
                                <div key={name} className="text-center">
                                  <div className="flex items-center justify-center mb-1">
                                    <Icon className={`w-5 h-5 ${color}`} />
                                  </div>
                                  <p className="text-xs text-muted-foreground">{name}</p>
                                </div>
                              ))}
                            </div>
                          </div>

                          {/* 네비게이션 */}
                          <div className="p-3 bg-background rounded border">
                            <p className="text-xs font-medium text-muted-foreground mb-3">네비게이션 (Navigation)</p>
                            <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
                              {[
                                { Icon: Home, name: 'Home', color: 'text-blue-600' },
                                { Icon: Menu, name: 'Menu', color: 'text-gray-600' },
                                { Icon: ChevronLeft, name: 'Left', color: 'text-gray-600' },
                                { Icon: ChevronRight, name: 'Right', color: 'text-gray-600' },
                                { Icon: ChevronDown, name: 'Down', color: 'text-gray-600' },
                                { Icon: ChevronUp, name: 'Up', color: 'text-gray-600' },
                                { Icon: ArrowLeft, name: 'Back', color: 'text-gray-600' },
                                { Icon: MoreVertical, name: 'More', color: 'text-gray-600' },
                              ].map(({ Icon, name, color }) => (
                                <div key={name} className="text-center">
                                  <div className="flex items-center justify-center mb-1">
                                    <Icon className={`w-5 h-5 ${color}`} />
                                  </div>
                                  <p className="text-xs text-muted-foreground">{name}</p>
                                </div>
                              ))}
                            </div>
                          </div>

                          {/* 시스템 */}
                          <div className="p-3 bg-background rounded border">
                            <p className="text-xs font-medium text-muted-foreground mb-3">시스템 (System)</p>
                            <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
                              {[
                                { Icon: Settings, name: 'Settings', color: 'text-gray-600' },
                                { Icon: Bell, name: 'Bell', color: 'text-orange-600' },
                                { Icon: Calendar, name: 'Calendar', color: 'text-blue-600' },
                                { Icon: FileText, name: 'File', color: 'text-blue-600' },
                                { Icon: BarChart3, name: 'Chart', color: 'text-blue-600' },
                                { Icon: Database, name: 'Database', color: 'text-purple-600' },
                                { Icon: Layers, name: 'Layers', color: 'text-indigo-600' },
                                { Icon: Zap, name: 'Zap', color: 'text-yellow-600' },
                              ].map(({ Icon, name, color }) => (
                                <div key={name} className="text-center">
                                  <div className="flex items-center justify-center mb-1">
                                    <Icon className={`w-5 h-5 ${color}`} />
                                  </div>
                                  <p className="text-xs text-muted-foreground">{name}</p>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>

                        {/* 색상 적용 가이드 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">색상 적용 가이드</p>
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border">
                              <div className="flex items-center justify-center mb-2">
                                <CheckCircle2 className="w-6 h-6 text-green-600" />
                              </div>
                              <p className="font-mono mb-1">text-green-600</p>
                              <p className="text-muted-foreground">성공, 완료, 입고</p>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <div className="flex items-center justify-center mb-2">
                                <AlertCircle className="w-6 h-6 text-orange-600" />
                              </div>
                              <p className="font-mono mb-1">text-orange-600</p>
                              <p className="text-muted-foreground">경고, 대기</p>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <div className="flex items-center justify-center mb-2">
                                <XCircle className="w-6 h-6 text-red-600" />
                              </div>
                              <p className="font-mono mb-1">text-red-600</p>
                              <p className="text-muted-foreground">오류, 불합격</p>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <div className="flex items-center justify-center mb-2">
                                <Info className="w-6 h-6 text-blue-600" />
                              </div>
                              <p className="font-mono mb-1">text-blue-600</p>
                              <p className="text-muted-foreground">정보, 기본</p>
                            </div>
                          </div>
                        </div>

                        {/* 사용 예시 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">실제 사용 예시</p>
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <div className="flex items-center gap-2">
                              <Package className="w-5 h-5 text-blue-600" />
                              <span className="text-sm">재고 관리 페이지 헤더</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Button size="sm" className="gap-2">
                                <Plus className="w-4 h-4" />
                                신규 등록
                              </Button>
                              <Button size="sm" variant="outline" className="gap-2">
                                <Download className="w-4 h-4" />
                                다운로드
                              </Button>
                              <Button size="sm" variant="ghost" className="gap-2">
                                <Settings className="w-4 h-4" />
                                설정
                              </Button>
                            </div>
                            <div className="flex gap-2">
                              <Badge variant="default" className="gap-1">
                                <CheckCircle2 className="w-3 h-3" />
                                완료
                              </Badge>
                              <Badge variant="secondary" className="gap-1">
                                <Clock className="w-3 h-3" />
                                대기중
                              </Badge>
                              <Badge variant="destructive" className="gap-1">
                                <XCircle className="w-3 h-3" />
                                오류
                              </Badge>
                            </div>
                          </div>
                        </div>

                        {/* 참고 링크 */}
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <div className="flex items-start gap-2">
                            <Info className="w-4 h-4 text-blue-600 mt-0.5" />
                            <div className="flex-1 text-xs">
                              <p className="font-medium text-blue-900 dark:text-blue-100 mb-1">
                                아이콘 라이브러리 참고
                              </p>
                              <p className="text-blue-700 dark:text-blue-300">
                                전체 아이콘 목록: https://lucide.dev/icons
                              </p>
                              <p className="text-blue-700 dark:text-blue-300 mt-1">
                                Import: <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">import &#123; IconName &#125; from 'lucide-react'</code>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 미리보기 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Eye className="w-4 h-4" />
                        실시간 미리보기
                      </h3>
                      <div className="p-6 border rounded-lg space-y-4 bg-background">
                        <div className="flex gap-2 flex-wrap">
                          <Button>Primary Button</Button>
                          <Button variant="secondary">Secondary</Button>
                          <Button variant="destructive">Destructive</Button>
                          <Button variant="outline">Outline</Button>
                        </div>

                        <Card>
                          <CardHeader>
                            <CardTitle>카드 컴포넌트</CardTitle>
                            <CardDescription>현재 적용된 토큰으로 렌더링됩니다</CardDescription>
                          </CardHeader>
                          <CardContent className="space-y-3">
                            <div className="flex gap-2">
                              <Badge>Badge</Badge>
                              <Badge variant="secondary">Secondary</Badge>
                              <Badge variant="destructive">Destructive</Badge>
                            </div>
                            <Input placeholder="Input 필드" />
                            <div className="flex items-center gap-2">
                              <Checkbox id="preview-check" />
                              <Label htmlFor="preview-check">Checkbox 레이블</Label>
                            </div>
                            <div className="flex items-center gap-2">
                              <Switch id="preview-switch" />
                              <Label htmlFor="preview-switch">Switch 토글</Label>
                            </div>
                          </CardContent>
                        </Card>

                        <Alert>
                          <AlertCircle className="h-4 w-4" />
                          <AlertTitle>알림</AlertTitle>
                          <AlertDescription>
                            모든 변경사항은 실시간으로 전체 시스템에 적용됩니다.
                          </AlertDescription>
                        </Alert>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* Patterns 탭 */}
              <TabsContent value="patterns" className="hidden space-y-6 mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <LayoutDashboard className="w-5 h-5 text-blue-600" />
                      UI Patterns - 페이지 표준 패턴
                    </CardTitle>
                    <CardDescription>
                      SAM MES 시스템의 모든 페이지가 따라야 하는 표준 UI 패턴과 레이아웃 가이드입니다.
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    
                    {/* 1. 페이지 레이아웃 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <LayoutDashboard className="w-4 h-4" />
                        1. 페이지 레이아웃 패턴 (Page Layout)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          모든 페이지는 표준 포맷을 따릅니다: <strong>제목 + 서브제목 + 아이콘 → 대시보드 통계 4개 → 검색/필터 → 컨텐츠</strong>
                        </p>
                        <div className="p-4 bg-background rounded-lg border space-y-3">
                          {/* 헤더 예시 */}
                          <div className="p-4 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                            <div className="flex items-start gap-3">
                              <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                                <Package className="w-6 h-6 text-blue-600" />
                              </div>
                              <div className="flex-1">
                                <h3 className="font-semibold">재고 관리</h3>
                                <p className="text-sm text-muted-foreground">전체 재고 현황 및 입출고 관리</p>
                              </div>
                              <Button size="sm" className="gap-2">
                                <Plus className="w-4 h-4" />
                                신규 등록
                              </Button>
                            </div>
                          </div>
                          
                          {/* 통계 카드 예시 */}
                          <div className="grid grid-cols-4 gap-3">
                            {[
                              { label: '전체 재고', value: '1,234', color: 'blue' },
                              { label: '입고 대기', value: '56', color: 'green' },
                              { label: '출고 예정', value: '78', color: 'orange' },
                              { label: '재고 부족', value: '12', color: 'red' },
                            ].map((stat, idx) => (
                              <div key={idx} className="p-3 bg-background rounded-lg border text-center">
                                <p className="text-xs text-muted-foreground mb-1">{stat.label}</p>
                                <p className="text-xl font-semibold">{stat.value}</p>
                              </div>
                            ))}
                          </div>
                          
                          {/* 검색/필터 예시 */}
                          <div className="flex gap-2">
                            <div className="flex-1 relative">
                              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                              <Input placeholder="검색..." className="pl-10" />
                            </div>
                            <Button variant="outline" size="icon">
                              <Filter className="w-4 h-4" />
                            </Button>
                          </div>
                          
                          {/* 컨텐츠 영역 */}
                          <div className="p-3 bg-muted/50 rounded border-2 border-dashed text-center text-sm text-muted-foreground">
                            컨텐츠 영역 (테이블, 카드 등)
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용 컴포넌트:</strong> PageLayout, PageHeader, StatCards, SearchFilter
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 2. 상세 페이지 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <FileText className="w-4 h-4" />
                        2. 상세 페이지 패턴 (Detail Page)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          상세 페이지는 <strong>백버튼 + 제목 → 탭/섹션 → 액션 버튼</strong> 구조를 따릅니다.
                        </p>
                        <div className="p-4 bg-background rounded-lg border space-y-3">
                          {/* 백버튼 + 헤더 */}
                          <div className="space-y-3">
                            <Button variant="ghost" size="sm" className="gap-2 -ml-2">
                              <ArrowLeft className="w-4 h-4" />
                              목록으로
                            </Button>
                            <div className="flex items-start justify-between">
                              <div>
                                <h3 className="font-semibold">주문번호: SO-2024-001</h3>
                                <p className="text-sm text-muted-foreground">등록일: 2024.10.31 | 담당자: 김철수</p>
                              </div>
                              <div className="flex gap-2">
                                <Button variant="outline" size="sm">
                                  <Edit className="w-4 h-4 mr-2" />
                                  수정
                                </Button>
                                <Button variant="destructive" size="sm">
                                  <Trash2 className="w-4 h-4 mr-2" />
                                  삭제
                                </Button>
                              </div>
                            </div>
                          </div>
                          
                          {/* 탭 구조 */}
                          <div className="p-3 bg-muted/50 rounded border">
                            <div className="flex gap-4 mb-3 pb-3 border-b text-sm">
                              <span className="font-medium text-primary border-b-2 border-primary pb-2 -mb-3">기본 정보</span>
                              <span className="text-muted-foreground">상세 내역</span>
                              <span className="text-muted-foreground">이력</span>
                            </div>
                            <div className="space-y-2 text-sm">
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">고객사</span>
                                <span>(주)에이스산업</span>
                              </div>
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">납기일</span>
                                <span>2024.11.15</span>
                              </div>
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">상태</span>
                                <Badge variant="default">진행중</Badge>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-2 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">백버튼 위치</p>
                            <p className="font-mono">좌측 상단 (고정)</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">액션 버튼 위치</p>
                            <p className="font-mono">우측 상단 (수정/삭제)</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 3. 다이얼로그 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <SquareDashedBottom className="w-4 h-4" />
                        3. 다이얼로그/모달 패턴 (Dialog/Modal)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          모든 다이얼로그는 <strong>Header + Content + Footer</strong> 구조를 따르며, 크기는 4단계로 표준화됩니다.
                        </p>
                        
                        {/* 다이얼로그 크기 */}
                        <div className="space-y-2">
                          <p className="text-sm font-medium">다이얼로그 크기 (4단계)</p>
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-full h-16 bg-blue-100 dark:bg-blue-900/30 rounded mb-2"></div>
                              <p className="font-mono mb-1">sm</p>
                              <p className="text-muted-foreground">max-w-sm (384px)</p>
                              <p className="text-muted-foreground mt-1">확인/알림</p>
                            </div>
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-full h-20 bg-blue-100 dark:bg-blue-900/30 rounded mb-2"></div>
                              <p className="font-mono mb-1">md</p>
                              <p className="text-muted-foreground">max-w-md (448px)</p>
                              <p className="text-muted-foreground mt-1">간단한 폼</p>
                            </div>
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-full h-24 bg-blue-100 dark:bg-blue-900/30 rounded mb-2"></div>
                              <p className="font-mono mb-1">lg</p>
                              <p className="text-muted-foreground">max-w-lg (512px)</p>
                              <p className="text-muted-foreground mt-1">기본 폼</p>
                            </div>
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-full h-28 bg-blue-100 dark:bg-blue-900/30 rounded mb-2"></div>
                              <p className="font-mono mb-1">xl</p>
                              <p className="text-muted-foreground">max-w-xl (576px)</p>
                              <p className="text-muted-foreground mt-1">복잡한 폼</p>
                            </div>
                          </div>
                        </div>
                        
                        {/* 다이얼로그 구조 예시 */}
                        <div className="p-4 bg-background rounded-lg border space-y-3 max-w-md mx-auto">
                          <div className="flex items-center justify-between pb-3 border-b">
                            <div>
                              <h4 className="font-semibold">다이얼로그 제목</h4>
                              <p className="text-xs text-muted-foreground">부제목 또는 설명</p>
                            </div>
                          </div>
                          <div className="p-3 bg-muted/50 rounded text-sm text-muted-foreground text-center border-2 border-dashed">
                            Content 영역<br/>
                            (폼, 리스트, 정보 등)
                          </div>
                          <div className="flex justify-end gap-2 pt-3 border-t">
                            <Button variant="outline" size="sm">취소</Button>
                            <Button size="sm">확인</Button>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-3 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">Header</p>
                            <p className="font-mono">제목 + 설명</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">Content</p>
                            <p className="font-mono">메인 컨텐츠</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">Footer</p>
                            <p className="font-mono">우측 정렬 버튼</p>
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용 컴포넌트:</strong> Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 4. 알림 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Bell className="w-4 h-4" />
                        4. 알림 패턴 (Notifications)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-4">
                        <p className="text-sm text-muted-foreground">
                          시스템은 <strong>Toast (일시적)</strong>와 <strong>Alert (지속적)</strong> 두 가지 알림 방식을 사용합니다.
                        </p>
                        
                        {/* Toast */}
                        <div className="space-y-2">
                          <p className="text-sm font-medium">Toast 알림 (일시적, 3-5초)</p>
                          <div className="space-y-2">
                            <div className="p-3 bg-background rounded-lg border flex items-start gap-3 max-w-sm">
                              <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                              <div className="flex-1">
                                <p className="text-sm font-medium">성공</p>
                                <p className="text-xs text-muted-foreground">작업이 성공적으로 완료되었습니다.</p>
                              </div>
                            </div>
                            <div className="p-3 bg-background rounded-lg border flex items-start gap-3 max-w-sm">
                              <AlertCircle className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
                              <div className="flex-1">
                                <p className="text-sm font-medium">경고</p>
                                <p className="text-xs text-muted-foreground">일부 항목을 확인해주세요.</p>
                              </div>
                            </div>
                            <div className="p-3 bg-background rounded-lg border flex items-start gap-3 max-w-sm">
                              <XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                              <div className="flex-1">
                                <p className="text-sm font-medium">오류</p>
                                <p className="text-xs text-muted-foreground">작업 처리 중 오류가 발생했습니다.</p>
                              </div>
                            </div>
                          </div>
                          <div className="grid grid-cols-2 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border">
                              <p className="text-muted-foreground mb-1">위치</p>
                              <p className="font-mono">우측 상단 (고정)</p>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <p className="text-muted-foreground mb-1">지속시간</p>
                              <p className="font-mono">3-5초 자동 사라짐</p>
                            </div>
                          </div>
                        </div>
                        
                        {/* Alert */}
                        <div className="space-y-2">
                          <p className="text-sm font-medium">Alert 알림 (지속적)</p>
                          <Alert>
                            <Info className="h-4 w-4" />
                            <AlertTitle>정보</AlertTitle>
                            <AlertDescription>
                              페이지 내에서 지속적으로 표시되는 중요한 정보입니다.
                            </AlertDescription>
                          </Alert>
                          <div className="grid grid-cols-2 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border">
                              <p className="text-muted-foreground mb-1">위치</p>
                              <p className="font-mono">컨텐츠 영역 내부</p>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <p className="text-muted-foreground mb-1">용도</p>
                              <p className="font-mono">중요 정보, 경고</p>
                            </div>
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용:</strong> Toast는 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">toast()</code> 함수, Alert는 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">&lt;Alert&gt;</code> 컴포넌트
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 5. 폼 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Edit className="w-4 h-4" />
                        5. 폼 레이아웃 패턴 (Form Layout)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          폼은 <strong>섹션 단위로 그룹화</strong>되며, 2열 그리드 레이아웃을 기본으로 합니다.
                        </p>
                        <div className="p-4 bg-background rounded-lg border space-y-4">
                          {/* 섹션 1 */}
                          <div className="space-y-3">
                            <h4 className="text-sm font-semibold pb-2 border-b">기본 정보</h4>
                            <div className="grid grid-cols-2 gap-4">
                              <div className="space-y-2">
                                <Label className="text-xs">항목명 *</Label>
                                <Input placeholder="입력..." className="h-9 text-sm" />
                              </div>
                              <div className="space-y-2">
                                <Label className="text-xs">카테고리</Label>
                                <Select>
                                  <SelectTrigger className="h-9 text-sm">
                                    <SelectValue placeholder="선택..." />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="1">옵션 1</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                          
                          {/* 섹션 2 */}
                          <div className="space-y-3">
                            <h4 className="text-sm font-semibold pb-2 border-b">상세 정보</h4>
                            <div className="space-y-2">
                              <Label className="text-xs">설명</Label>
                              <Textarea placeholder="입력..." rows={3} className="text-sm" />
                            </div>
                          </div>
                          
                          {/* 액션 버튼 */}
                          <div className="flex justify-end gap-2 pt-4 border-t">
                            <Button variant="outline" size="sm">취소</Button>
                            <Button size="sm">저장</Button>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-3 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">레이아웃</p>
                            <p className="font-mono">2열 그리드</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">필수 표시</p>
                            <p className="font-mono">* (빨간색)</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">버튼 위치</p>
                            <p className="font-mono">우측 하단</p>
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용 컴포넌트:</strong> FormSection, FormField, Label, Input, Select, Textarea
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 6. 테이블 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Database className="w-4 h-4" />
                        6. 테이블 패턴 (Table Pattern)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          테이블은 <strong>헤더 + 데이터 + 페이지네이션</strong> 구조이며, 액션 열은 우측에 고정됩니다.
                        </p>
                        <div className="overflow-hidden rounded-lg border bg-background">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead className="w-12">
                                  <Checkbox />
                                </TableHead>
                                <TableHead>번호</TableHead>
                                <TableHead>제목</TableHead>
                                <TableHead>상태</TableHead>
                                <TableHead className="text-right">액션</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              <TableRow>
                                <TableCell>
                                  <Checkbox />
                                </TableCell>
                                <TableCell>001</TableCell>
                                <TableCell>샘플 데이터</TableCell>
                                <TableCell>
                                  <Badge variant="default">활성</Badge>
                                </TableCell>
                                <TableCell className="text-right">
                                  <div className="flex justify-end gap-2">
                                    <Button variant="ghost" size="sm">
                                      <Edit className="w-4 h-4" />
                                    </Button>
                                    <Button variant="ghost" size="sm">
                                      <Trash2 className="w-4 h-4" />
                                    </Button>
                                  </div>
                                </TableCell>
                              </TableRow>
                            </TableBody>
                          </Table>
                          <div className="flex items-center justify-between p-4 border-t">
                            <p className="text-sm text-muted-foreground">전체 100개 중 1-10</p>
                            <div className="flex gap-1">
                              <Button variant="outline" size="sm" disabled>
                                <ChevronLeft className="w-4 h-4" />
                              </Button>
                              <Button variant="outline" size="sm">1</Button>
                              <Button variant="ghost" size="sm">2</Button>
                              <Button variant="ghost" size="sm">3</Button>
                              <Button variant="outline" size="sm">
                                <ChevronRight className="w-4 h-4" />
                              </Button>
                            </div>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-3 gap-3 text-xs">
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">체크박스</p>
                            <p className="font-mono">좌측 첫 열</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">액션</p>
                            <p className="font-mono">우측 마지막 열</p>
                          </div>
                          <div className="p-3 bg-background rounded border">
                            <p className="text-muted-foreground mb-1">페이지네이션</p>
                            <p className="font-mono">하단 중앙</p>
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용 컴포넌트:</strong> DataTable, Table, TableHeader, TableBody, TableRow, TableCell, Pagination
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 7. 빈 상태 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Box className="w-4 h-4" />
                        7. 빈 상태 패턴 (Empty State)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                        <p className="text-sm text-muted-foreground">
                          데이터가 없을 때 표시되는 빈 상태는 <strong>아이콘 + 메시지 + 액션 버튼</strong> 구조를 따릅니다.
                        </p>
                        <div className="p-8 bg-background rounded-lg border">
                          <div className="text-center space-y-3 max-w-sm mx-auto">
                            <div className="flex justify-center">
                              <div className="p-4 bg-muted rounded-full">
                                <Package className="w-8 h-8 text-muted-foreground" />
                              </div>
                            </div>
                            <div>
                              <h4 className="font-semibold mb-1">등록된 데이터가 없습니다</h4>
                              <p className="text-sm text-muted-foreground">
                                새로운 항목을 등록하여 시작하세요.
                              </p>
                            </div>
                            <Button className="gap-2">
                              <Plus className="w-4 h-4" />
                              첫 번째 항목 등록
                            </Button>
                          </div>
                        </div>
                        
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <p className="text-xs text-blue-900 dark:text-blue-100">
                            <strong>사용 컴포넌트:</strong> EmptyState
                          </p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 8. 모바일 대응 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Box className="w-4 h-4" />
                        8. 모바일 대응 패턴 (Mobile Responsive)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-4">
                        <p className="text-sm text-muted-foreground">
                          SAM MES는 <strong>Desktop-First + Mobile-Optimized</strong> 전략을 따르며, Tailwind CSS 반응형 클래스를 사용합니다.
                        </p>
                        
                        {/* 브레이크포인트 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">반응형 브레이크포인트 (Tailwind CSS 기준)</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                            <div className="p-4 bg-background rounded-lg border">
                              <div className="flex items-center justify-between mb-2">
                                <span className="font-mono text-sm">sm:</span>
                                <Badge variant="outline">640px+</Badge>
                              </div>
                              <p className="text-muted-foreground">작은 태블릿 (세로)</p>
                            </div>
                            <div className="p-4 bg-background rounded-lg border">
                              <div className="flex items-center justify-between mb-2">
                                <span className="font-mono text-sm">md:</span>
                                <Badge variant="default">768px+</Badge>
                              </div>
                              <p className="text-muted-foreground">태블릿 (가로) - <strong>주요 기준</strong></p>
                            </div>
                            <div className="p-4 bg-background rounded-lg border">
                              <div className="flex items-center justify-between mb-2">
                                <span className="font-mono text-sm">lg:</span>
                                <Badge variant="outline">1024px+</Badge>
                              </div>
                              <p className="text-muted-foreground">작은 데스크톱</p>
                            </div>
                            <div className="p-4 bg-background rounded-lg border">
                              <div className="flex items-center justify-between mb-2">
                                <span className="font-mono text-sm">xl:</span>
                                <Badge variant="outline">1280px+</Badge>
                              </div>
                              <p className="text-muted-foreground">일반 데스크톱</p>
                            </div>
                          </div>
                          <div className="p-3 bg-orange-50 dark:bg-orange-950/30 rounded-lg border border-orange-200 dark:border-orange-800">
                            <div className="flex items-start gap-2">
                              <AlertTriangle className="w-4 h-4 text-orange-600 mt-0.5" />
                              <div className="flex-1 text-xs">
                                <p className="font-medium text-orange-900 dark:text-orange-100 mb-1">
                                  useIsMobile() 훅 사용
                                </p>
                                <p className="text-orange-700 dark:text-orange-300">
                                  <code className="bg-orange-100 dark:bg-orange-900 px-1 rounded">MOBILE_BREAKPOINT = 768px</code> 기준으로 true/false 반환
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* 모바일 vs 데스크톱 분기 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">화면 분기 처리 패턴</p>
                          
                          {/* CSS 분기 */}
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <div className="flex items-center gap-2">
                              <Badge variant="default">패턴 1</Badge>
                              <p className="text-sm font-medium">CSS 클래스 분기 (권장)</p>
                            </div>
                            <div className="bg-muted/50 p-3 rounded font-mono text-xs overflow-x-auto">
                              <div className="text-green-600 dark:text-green-400">{`// 모바일에서만 표시`}</div>
                              <div>{`<div className="md:hidden">모바일 전용</div>`}</div>
                              <div className="mt-2 text-green-600 dark:text-green-400">{`// 데스크톱에서만 표시`}</div>
                              <div>{`<div className="hidden md:block">데스크톱 전용</div>`}</div>
                            </div>
                            <p className="text-xs text-muted-foreground">
                              ✅ 간단하고 직관적 | ✅ SEO 친화적 | ✅ 성능 우수
                            </p>
                          </div>

                          {/* JS 분기 */}
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <div className="flex items-center gap-2">
                              <Badge variant="secondary">패턴 2</Badge>
                              <p className="text-sm font-medium">JavaScript 분기 (조건부 렌더링 필요시)</p>
                            </div>
                            <div className="bg-muted/50 p-3 rounded font-mono text-xs overflow-x-auto">
                              <div className="text-blue-600 dark:text-blue-400">{`import { useIsMobile } from './ui/use-mobile';`}</div>
                              <div className="mt-2">{`const isMobile = useIsMobile();`}</div>
                              <div className="mt-2">{`{isMobile ? <MobileView /> : <DesktopView />}`}</div>
                            </div>
                            <p className="text-xs text-muted-foreground">
                              ✅ 복잡한 로직 처리 가능 | ⚠️ 클라이언트 사이드만 작동
                            </p>
                          </div>
                        </div>

                        {/* 모바일 전용 컴포넌트 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">모바일 전용 컴포넌트</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border">
                              <p className="font-mono mb-2">MobileCard</p>
                              <p className="text-muted-foreground">테이블 데이터의 모바일 카드 뷰</p>
                              <Badge variant="outline" className="mt-2">organisms/</Badge>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <p className="font-mono mb-2">Sheet</p>
                              <p className="text-muted-foreground">모바일 사이드 메뉴/필터</p>
                              <Badge variant="outline" className="mt-2">ui/</Badge>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <p className="font-mono mb-2">Drawer</p>
                              <p className="text-muted-foreground">하단 슬라이드 메뉴</p>
                              <Badge variant="outline" className="mt-2">ui/</Badge>
                            </div>
                            <div className="p-3 bg-background rounded border">
                              <p className="font-mono mb-2">Command</p>
                              <p className="text-muted-foreground">모바일 검색/명령 팔레트</p>
                              <Badge variant="outline" className="mt-2">ui/</Badge>
                            </div>
                          </div>
                        </div>

                        {/* 모바일 테이블 패턴 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">모바일 테이블 대응</p>
                          <div className="space-y-2">
                            <div className="p-4 bg-background rounded-lg border">
                              <p className="text-sm font-medium mb-3">데스크톱: 테이블</p>
                              <div className="overflow-hidden rounded border bg-muted/30 mb-3">
                                <div className="grid grid-cols-4 gap-2 p-2 border-b bg-background text-xs font-medium">
                                  <div>번호</div>
                                  <div>제목</div>
                                  <div>상태</div>
                                  <div>액션</div>
                                </div>
                                <div className="grid grid-cols-4 gap-2 p-2 text-xs">
                                  <div>001</div>
                                  <div>샘플</div>
                                  <div><Badge variant="outline">활성</Badge></div>
                                  <div>•••</div>
                                </div>
                              </div>
                              <code className="text-xs bg-muted px-2 py-1 rounded">
                                hidden md:block
                              </code>
                            </div>

                            <div className="p-4 bg-background rounded-lg border">
                              <p className="text-sm font-medium mb-3">모바일: 카드 리스트</p>
                              <div className="space-y-2 mb-3">
                                <div className="p-3 rounded border bg-muted/30 text-xs">
                                  <div className="flex justify-between items-start mb-2">
                                    <span className="font-medium">샘플 데이터</span>
                                    <Badge variant="outline">활성</Badge>
                                  </div>
                                  <div className="text-muted-foreground">번호: 001</div>
                                </div>
                              </div>
                              <code className="text-xs bg-muted px-2 py-1 rounded">
                                md:hidden
                              </code>
                            </div>
                          </div>
                        </div>

                        {/* 모바일 폼 레이아웃 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">모바일 폼 레이아웃</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <p className="text-sm font-medium">데스크톱: 2열 그리드</p>
                              <code className="text-xs bg-muted px-2 py-1 rounded block">
                                grid grid-cols-1 md:grid-cols-2
                              </code>
                              <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
                                <div className="p-2 border rounded bg-muted/30">필드 1</div>
                                <div className="p-2 border rounded bg-muted/30">필드 2</div>
                              </div>
                            </div>
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <p className="text-sm font-medium">모바일: 1열 스택</p>
                              <code className="text-xs bg-muted px-2 py-1 rounded block">
                                space-y-4
                              </code>
                              <div className="space-y-2 mt-2 text-xs">
                                <div className="p-2 border rounded bg-muted/30">필드 1</div>
                                <div className="p-2 border rounded bg-muted/30">필드 2</div>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* 터치 인터랙션 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">터치 인터랙션 가이드</p>
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-12 h-12 bg-primary/10 rounded-lg mx-auto mb-2 flex items-center justify-center">
                                <span className="text-lg">👆</span>
                              </div>
                              <p className="font-medium mb-1">터치 영역</p>
                              <p className="text-muted-foreground">최소 44x44px</p>
                            </div>
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg mx-auto mb-2 flex items-center justify-center">
                                <span className="text-lg">📱</span>
                              </div>
                              <p className="font-medium mb-1">스와이프</p>
                              <p className="text-muted-foreground">Drawer, Sheet 활용</p>
                            </div>
                            <div className="p-3 bg-background rounded border text-center">
                              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg mx-auto mb-2 flex items-center justify-center">
                                <span className="text-lg">✌️</span>
                              </div>
                              <p className="font-medium mb-1">제스처</p>
                              <p className="text-muted-foreground">핀치 줌 (선택적)</p>
                            </div>
                          </div>
                        </div>

                        {/* 모바일 네비게이션 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">모바일 네비게이션</p>
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <div className="flex items-center justify-between p-3 bg-muted/50 rounded">
                              <div className="flex items-center gap-2">
                                <Menu className="w-5 h-5" />
                                <span className="text-sm font-medium">햄버거 메뉴</span>
                              </div>
                              <ChevronRight className="w-4 h-4 text-muted-foreground" />
                            </div>
                            <div className="grid grid-cols-4 gap-2 p-3 bg-muted/50 rounded text-center text-xs">
                              <div className="space-y-1">
                                <Home className="w-5 h-5 mx-auto" />
                                <span>홈</span>
                              </div>
                              <div className="space-y-1 opacity-50">
                                <Package className="w-5 h-5 mx-auto" />
                                <span>재고</span>
                              </div>
                              <div className="space-y-1 opacity-50">
                                <BarChart3 className="w-5 h-5 mx-auto" />
                                <span>통계</span>
                              </div>
                              <div className="space-y-1 opacity-50">
                                <Settings className="w-5 h-5 mx-auto" />
                                <span>설정</span>
                              </div>
                            </div>
                            <p className="text-xs text-muted-foreground">
                              Sidebar는 모바일에서 Sheet로 전환됩니다
                            </p>
                          </div>
                        </div>

                        {/* 모바일 최적화 체크리스트 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">모바일 최적화 체크리스트</p>
                          <div className="bg-gradient-to-br from-green-50 to-blue-50 dark:from-green-950/30 dark:to-blue-950/30 p-4 rounded-lg border-2 border-green-200 dark:border-green-800">
                            <div className="space-y-2 text-xs">
                              {[
                                '768px 이하에서 테이블이 카드로 전환되는가?',
                                '터치 영역이 최소 44x44px 이상인가?',
                                '폼이 모바일에서 1열로 스택되는가?',
                                '네비게이션이 햄버거 메뉴로 전환되는가?',
                                '다이얼로그가 모바일에서 전체 화면인가?',
                                '이미지가 반응형으로 리사이징되는가?',
                                '가로 스크롤이 발생하지 않는가?',
                                '버튼/입력 필드가 충분히 큰가?',
                              ].map((item, idx) => (
                                <div key={idx} className="flex items-start gap-2 p-2 bg-white/80 dark:bg-slate-900/80 rounded">
                                  <CheckCircle2 className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
                                  <span>{item}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>

                        {/* 참고 */}
                        <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-800">
                          <div className="flex items-start gap-2">
                            <Info className="w-4 h-4 text-blue-600 mt-0.5" />
                            <div className="flex-1 text-xs">
                              <p className="font-medium text-blue-900 dark:text-blue-100 mb-1">
                                반응형 개발 참고
                              </p>
                              <p className="text-blue-700 dark:text-blue-300 mb-1">
                                • Tailwind CSS: <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">sm: md: lg: xl: 2xl:</code>
                              </p>
                              <p className="text-blue-700 dark:text-blue-300">
                                • useIsMobile Hook: <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">components/ui/use-mobile.ts</code>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 9. 태블릿 대응 패턴 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Box className="w-4 h-4" />
                        9. 태블릿 대응 패턴 (Tablet Responsive)
                      </h3>
                      <div className="bg-muted/30 p-4 rounded-lg space-y-4">
                        <p className="text-sm text-muted-foreground">
                          태블릿은 <strong>768px ~ 1024px</strong> 범위로, 모바일과 데스크톱의 중간 형태입니다. 
                          터치 인터랙션과 더 많은 콘텐츠 표시가 가능한 하이브리드 환경입니다.
                        </p>
                        
                        {/* 태블릿 특성 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">태블릿 환경의 특징</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <div className="flex items-center gap-2 mb-2">
                                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center">
                                  <span className="text-sm">📱</span>
                                </div>
                                <span className="text-sm font-medium">화면 크기</span>
                              </div>
                              <p className="text-xs text-muted-foreground">768px ~ 1024px</p>
                              <p className="text-xs text-muted-foreground">세로/가로 모드 전환 가능</p>
                            </div>
                            
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <div className="flex items-center gap-2 mb-2">
                                <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded flex items-center justify-center">
                                  <span className="text-sm">👆</span>
                                </div>
                                <span className="text-sm font-medium">인터랙션</span>
                              </div>
                              <p className="text-xs text-muted-foreground">터치 기반 (주)</p>
                              <p className="text-xs text-muted-foreground">마우스/키보드 지원 (선택)</p>
                            </div>
                            
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <div className="flex items-center gap-2 mb-2">
                                <div className="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded flex items-center justify-center">
                                  <span className="text-sm">📊</span>
                                </div>
                                <span className="text-sm font-medium">콘텐츠 밀도</span>
                              </div>
                              <p className="text-xs text-muted-foreground">중간 밀도 레이아웃</p>
                              <p className="text-xs text-muted-foreground">2-3열 그리드</p>
                            </div>
                            
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <div className="flex items-center gap-2 mb-2">
                                <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded flex items-center justify-center">
                                  <span className="text-sm">🎯</span>
                                </div>
                                <span className="text-sm font-medium">사용 환경</span>
                              </div>
                              <p className="text-xs text-muted-foreground">현장 작업자</p>
                              <p className="text-xs text-muted-foreground">이동 중 관리자</p>
                            </div>
                          </div>
                        </div>

                        {/* 브레이크포인트 전략 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">태블릿 브레이크포인트 전략</p>
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <div className="space-y-2">
                              <div className="flex items-center justify-between p-2 bg-muted/50 rounded">
                                <span className="text-xs font-mono">md: (768px ~ 1023px)</span>
                                <Badge variant="default">태블릿 세로</Badge>
                              </div>
                              <p className="text-xs text-muted-foreground pl-2">
                                • 2열 그리드 레이아웃<br/>
                                • 축소된 테이블 (일부 컬럼 숨김)<br/>
                                • 사이드바 접기 가능
                              </p>
                            </div>
                            
                            <div className="space-y-2">
                              <div className="flex items-center justify-between p-2 bg-muted/50 rounded">
                                <span className="text-xs font-mono">lg: (1024px+)</span>
                                <Badge variant="secondary">태블릿 가로 / 소형 데스크톱</Badge>
                              </div>
                              <p className="text-xs text-muted-foreground pl-2">
                                • 3열 그리드 레이아웃<br/>
                                • 전체 테이블 표시<br/>
                                • 사이드바 항상 표시
                              </p>
                            </div>
                          </div>
                        </div>

                        {/* 태블릿 레이아웃 패턴 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">레이아웃 패턴</p>
                          
                          {/* 통계 카드 */}
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">1. 통계 카드 배치</p>
                            <div className="grid grid-cols-2 gap-2 p-3 bg-muted/50 rounded">
                              <div className="p-2 border rounded bg-background text-xs text-center">카드 1</div>
                              <div className="p-2 border rounded bg-background text-xs text-center">카드 2</div>
                              <div className="p-2 border rounded bg-background text-xs text-center">카드 3</div>
                              <div className="p-2 border rounded bg-background text-xs text-center">카드 4</div>
                            </div>
                            <code className="text-xs bg-muted px-2 py-1 rounded block">
                              grid grid-cols-2 lg:grid-cols-4 gap-4
                            </code>
                            <p className="text-xs text-muted-foreground">
                              태블릿: 2x2 그리드 | 데스크톱: 1x4 그리드
                            </p>
                          </div>

                          {/* 폼 레이아웃 */}
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">2. 폼 레이아웃</p>
                            <div className="grid grid-cols-2 gap-2 p-3 bg-muted/50 rounded text-xs">
                              <div className="p-2 border rounded bg-background">필드 1</div>
                              <div className="p-2 border rounded bg-background">필드 2</div>
                              <div className="p-2 border rounded bg-background">필드 3</div>
                              <div className="p-2 border rounded bg-background">필드 4</div>
                            </div>
                            <code className="text-xs bg-muted px-2 py-1 rounded block">
                              grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4
                            </code>
                            <p className="text-xs text-muted-foreground">
                              모바일: 1열 | 태블릿: 2열 | 데스크톱: 3열
                            </p>
                          </div>

                          {/* 콘텐츠 그리드 */}
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">3. 콘텐츠 그리드</p>
                            <div className="grid grid-cols-2 gap-2 p-3 bg-muted/50 rounded text-xs">
                              <div className="p-3 border rounded bg-background">항목 1</div>
                              <div className="p-3 border rounded bg-background">항목 2</div>
                              <div className="p-3 border rounded bg-background">항목 3</div>
                              <div className="p-3 border rounded bg-background">항목 4</div>
                            </div>
                            <code className="text-xs bg-muted px-2 py-1 rounded block">
                              grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4
                            </code>
                          </div>
                        </div>

                        {/* 태블릿 테이블 전략 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">테이블 표시 전략</p>
                          <div className="space-y-3">
                            <div className="p-4 bg-background rounded-lg border space-y-3">
                              <div className="flex items-center gap-2">
                                <Badge variant="default">전략 1</Badge>
                                <p className="text-sm font-medium">컬럼 우선순위 숨김</p>
                              </div>
                              <div className="overflow-hidden rounded border bg-muted/30">
                                <div className="grid grid-cols-[80px_1fr_80px] gap-2 p-2 border-b bg-background text-xs font-medium">
                                  <div>번호</div>
                                  <div>제목</div>
                                  <div>액션</div>
                                </div>
                                <div className="grid grid-cols-[80px_1fr_80px] gap-2 p-2 text-xs">
                                  <div>001</div>
                                  <div>샘플 데이터</div>
                                  <div>•••</div>
                                </div>
                              </div>
                              <div className="space-y-1 text-xs">
                                <code className="bg-muted px-2 py-1 rounded block">
                                  {`<th className="hidden lg:table-cell">상세정보</th>`}
                                </code>
                                <p className="text-muted-foreground">
                                  ✅ 중요 컬럼만 표시 | ⚠️ 숨겨진 정보는 상세 페이지에서 확인
                                </p>
                              </div>
                            </div>

                            <div className="p-4 bg-background rounded-lg border space-y-3">
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary">전략 2</Badge>
                                <p className="text-sm font-medium">가로 스크롤 허용</p>
                              </div>
                              <div className="overflow-x-auto border rounded">
                                <div className="min-w-[600px] bg-muted/30">
                                  <div className="grid grid-cols-5 gap-2 p-2 border-b bg-background text-xs font-medium">
                                    <div>번호</div>
                                    <div>제목</div>
                                    <div>작성자</div>
                                    <div>날짜</div>
                                    <div>상태</div>
                                  </div>
                                </div>
                              </div>
                              <div className="space-y-1 text-xs">
                                <code className="bg-muted px-2 py-1 rounded block">
                                  {`<div className="overflow-x-auto">...</div>`}
                                </code>
                                <p className="text-muted-foreground">
                                  ✅ 모든 정보 접근 가능 | ⚠️ 스와이프 필요
                                </p>
                              </div>
                            </div>

                            <div className="p-4 bg-background rounded-lg border space-y-3">
                              <div className="flex items-center gap-2">
                                <Badge variant="outline">전략 3</Badge>
                                <p className="text-sm font-medium">반응형 카드 + 테이블 혼합</p>
                              </div>
                              <div className="space-y-2">
                                <div className="p-3 border rounded bg-muted/30 text-xs">
                                  <div className="flex justify-between mb-2">
                                    <span className="font-medium">샘플 데이터</span>
                                    <Badge variant="outline">활성</Badge>
                                  </div>
                                  <div className="grid grid-cols-2 gap-2 text-muted-foreground">
                                    <div>번호: 001</div>
                                    <div>날짜: 2025-10-31</div>
                                  </div>
                                </div>
                              </div>
                              <code className="text-xs bg-muted px-2 py-1 rounded block">
                                {`md:hidden (카드) / hidden md:table (테이블)`}
                              </code>
                            </div>
                          </div>
                        </div>

                        {/* 태블릿 네비게이션 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">네비게이션 패턴</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div className="p-4 bg-background rounded-lg border space-y-3">
                              <p className="text-sm font-medium">세로 모드 (768px ~ 1023px)</p>
                              <div className="flex items-start gap-2">
                                <div className="w-12 h-24 bg-muted/50 rounded flex items-center justify-center">
                                  <Menu className="w-5 h-5" />
                                </div>
                                <div className="flex-1 h-24 border rounded bg-muted/30 p-2 text-xs">
                                  메인 콘텐츠
                                </div>
                              </div>
                              <p className="text-xs text-muted-foreground">
                                • 축소된 사이드바 (아이콘만)<br/>
                                • 햄버거 메뉴로 전체 메뉴 표시
                              </p>
                            </div>

                            <div className="p-4 bg-background rounded-lg border space-y-3">
                              <p className="text-sm font-medium">가로 모드 (1024px+)</p>
                              <div className="flex items-start gap-2">
                                <div className="w-20 h-24 bg-muted/50 rounded p-2 text-xs space-y-1">
                                  <div className="bg-background p-1 rounded">메뉴</div>
                                  <div className="bg-background/50 p-1 rounded">메뉴</div>
                                  <div className="bg-background/50 p-1 rounded">메뉴</div>
                                </div>
                                <div className="flex-1 h-24 border rounded bg-muted/30 p-2 text-xs">
                                  메인 콘텐츠
                                </div>
                              </div>
                              <p className="text-xs text-muted-foreground">
                                • 전체 사이드바 표시<br/>
                                • 데스크톱과 동일한 네비게이션
                              </p>
                            </div>
                          </div>
                        </div>

                        {/* 태블릿 다이얼로그 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">다이얼로그 크기 조정</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <p className="text-sm font-medium">태블릿 세로</p>
                              <div className="mx-auto w-48 p-3 border-2 rounded-lg bg-muted/30 text-xs">
                                <div className="font-medium mb-2">다이얼로그</div>
                                <div className="space-y-1 text-muted-foreground">
                                  <div>폭: 80%~90%</div>
                                  <div>최대: 600px</div>
                                </div>
                              </div>
                              <code className="text-xs bg-muted px-2 py-1 rounded block">
                                max-w-md md:max-w-lg
                              </code>
                            </div>

                            <div className="p-4 bg-background rounded-lg border space-y-2">
                              <p className="text-sm font-medium">태블릿 가로</p>
                              <div className="mx-auto w-56 p-3 border-2 rounded-lg bg-muted/30 text-xs">
                                <div className="font-medium mb-2">다이얼로그</div>
                                <div className="space-y-1 text-muted-foreground">
                                  <div>폭: 70%</div>
                                  <div>최대: 800px</div>
                                </div>
                              </div>
                              <code className="text-xs bg-muted px-2 py-1 rounded block">
                                lg:max-w-xl xl:max-w-2xl
                              </code>
                            </div>
                          </div>
                        </div>

                        {/* 터치 + 마우스 하이브리드 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">하이브리드 인터랙션</p>
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-xs text-muted-foreground">
                              태블릿은 터치와 마우스를 모두 지원해야 합니다.
                            </p>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                              <div className="p-3 bg-muted/50 rounded space-y-2">
                                <div className="flex items-center gap-2 font-medium">
                                  <span>👆</span>
                                  <span>터치 우선</span>
                                </div>
                                <ul className="space-y-1 text-muted-foreground ml-6">
                                  <li>• 터치 영역 44x44px+</li>
                                  <li>• 스와이프 제스처</li>
                                  <li>• 롱 프레스 메뉴</li>
                                </ul>
                              </div>
                              <div className="p-3 bg-muted/50 rounded space-y-2">
                                <div className="flex items-center gap-2 font-medium">
                                  <span>🖱️</span>
                                  <span>마우스 지원</span>
                                </div>
                                <ul className="space-y-1 text-muted-foreground ml-6">
                                  <li>• Hover 효과 유지</li>
                                  <li>• 우클릭 컨텍스트 메뉴</li>
                                  <li>• 키보드 단축키</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* 태블릿 최적화 체크리스트 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">태블릿 최적화 체크리스트</p>
                          <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30 p-4 rounded-lg border-2 border-purple-200 dark:border-purple-800">
                            <div className="space-y-2 text-xs">
                              {[
                                '통계 카드가 768px ~ 1023px에서 2x2 그리드인가?',
                                '폼 레이아웃이 2열로 표시되는가?',
                                '테이블이 중요 컬럼만 표시하거나 가로 스크롤이 가능한가?',
                                '사이드바가 세로 모드에서 축소되는가?',
                                '다이얼로그 크기가 적절하게 조정되는가?',
                                '터치와 마우스 인터랙션 모두 지원되는가?',
                                '가로/세로 모드 전환이 자연스러운가?',
                                '콘텐츠 밀도가 적절한가? (너무 빽빽하지 않은가)',
                              ].map((item, idx) => (
                                <div key={idx} className="flex items-start gap-2 p-2 bg-white/80 dark:bg-slate-900/80 rounded">
                                  <CheckCircle2 className="w-4 h-4 text-purple-600 flex-shrink-0 mt-0.5" />
                                  <span>{item}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>

                        {/* 태블릿 실전 예시 */}
                        <div className="space-y-3">
                          <p className="text-sm font-medium">실전 코드 예시</p>
                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">통계 카드 반응형</p>
                            <div className="bg-muted/50 p-3 rounded font-mono text-xs overflow-x-auto space-y-1">
                              <div className="text-green-600 dark:text-green-400">{`// 모바일: 1열 | 태블릿: 2x2 | 데스크톱: 1x4`}</div>
                              <div>{`<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">`}</div>
                              <div className="pl-4">{`<StatCard title="매출" value="1,234만원" />`}</div>
                              <div className="pl-4">{`<StatCard title="주문" value="56건" />`}</div>
                              <div className="pl-4">{`<StatCard title="재고" value="789개" />`}</div>
                              <div className="pl-4">{`<StatCard title="생산" value="123개" />`}</div>
                              <div>{`</div>`}</div>
                            </div>
                          </div>

                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">테이블 컬럼 숨김</p>
                            <div className="bg-muted/50 p-3 rounded font-mono text-xs overflow-x-auto space-y-1">
                              <div className="text-green-600 dark:text-green-400">{`// 태블릿에서는 상세정보 컬럼 숨김`}</div>
                              <div>{`<th className="hidden lg:table-cell">상세정보</th>`}</div>
                              <div>{`<td className="hidden lg:table-cell">...</td>`}</div>
                            </div>
                          </div>

                          <div className="p-4 bg-background rounded-lg border space-y-3">
                            <p className="text-sm font-medium">사이드바 반응형</p>
                            <div className="bg-muted/50 p-3 rounded font-mono text-xs overflow-x-auto space-y-1">
                              <div className="text-green-600 dark:text-green-400">{`// 태블릿 세로: 축소 | 태블릿 가로: 전체`}</div>
                              <div>{`<Sidebar collapsible="icon" className="lg:w-64">`}</div>
                              <div className="pl-4">{`<SidebarContent>`}</div>
                              <div className="pl-8">{`<span className="lg:inline hidden">메뉴 이름</span>`}</div>
                              <div className="pl-4">{`</SidebarContent>`}</div>
                              <div>{`</Sidebar>`}</div>
                            </div>
                          </div>
                        </div>

                        {/* 참고 */}
                        <div className="p-3 bg-purple-50 dark:bg-purple-950/30 rounded-lg border border-purple-200 dark:border-purple-800">
                          <div className="flex items-start gap-2">
                            <Info className="w-4 h-4 text-purple-600 mt-0.5" />
                            <div className="flex-1 text-xs">
                              <p className="font-medium text-purple-900 dark:text-purple-100 mb-1">
                                태블릿 개발 팁
                              </p>
                              <p className="text-purple-700 dark:text-purple-300 mb-1">
                                • 태블릿은 <code className="bg-purple-100 dark:bg-purple-900 px-1 rounded">md:</code>와 <code className="bg-purple-100 dark:bg-purple-900 px-1 rounded">lg:</code> 브레이크포인트 사이
                              </p>
                              <p className="text-purple-700 dark:text-purple-300 mb-1">
                                • 모바일보다 여유롭고, 데스크톱보다 콤팩트한 레이아웃
                              </p>
                              <p className="text-purple-700 dark:text-purple-300">
                                • 가로/세로 모드 전환을 항상 고려하세요
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    {/* 패턴 체크리스트 */}
                    <div className="space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <CheckSquare className="w-4 h-4" />
                        패턴 적용 체크리스트
                      </h3>
                      <div className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/30 dark:to-purple-950/30 p-6 rounded-lg border-2 border-blue-200 dark:border-blue-800">
                        <div className="space-y-3">
                          {[
                            '페이지 헤더에 아이콘과 액션 버튼이 표시되는가?',
                            '통계 카드가 4개 단위로 표시되는가?',
                            '상세 페이지에 백버튼이 좌측 상단에 있는가?',
                            '다이얼로그가 Header-Content-Footer 구조인가?',
                            'Toast 알림이 우측 상단에 표시되는가?',
                            '폼이 섹션 단위로 구분되어 있는가?',
                            '테이블 액션이 우측에 위치하는가?',
                            '빈 상태에 안내 메시지와 액션이 있는가?',
                            '📱 모바일: 테이블이 카드로 전환되는가?',
                            '📱 모바일: 폼이 1열로 스택되는가?',
                            '📱 태블릿: 통계 카드가 2x2 그리드인가?',
                            '📱 태블릿: 폼이 2열로 표시되는가?',
                          ].map((item, idx) => (
                            <div key={idx} className="flex items-start gap-3 p-3 bg-white/80 dark:bg-slate-900/80 rounded-lg">
                              <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                              <p className="text-sm">{item}</p>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* Atoms 탭 */}
              <TabsContent value="atoms" className="hidden space-y-4 mt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredAtoms.map((atom) => (
                    <ComponentCard key={atom.name} {...atom} />
                  ))}
                </div>
                {filteredAtoms.length === 0 && (
                  <EmptyState
                    icon={CircleDot}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </TabsContent>

              {/* Molecules 탭 */}
              <TabsContent value="molecules" className="hidden space-y-4 mt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredMolecules.map((molecule) => (
                    <ComponentCard key={molecule.name} {...molecule} />
                  ))}
                </div>
                {filteredMolecules.length === 0 && (
                  <EmptyState
                    icon={SquareDashedBottom}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </TabsContent>

              {/* Organisms 탭 */}
              <TabsContent value="organisms" className="hidden space-y-4 mt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {filteredOrganisms.map((organism) => (
                    <ComponentCard key={organism.name} {...organism} />
                  ))}
                </div>
                {filteredOrganisms.length === 0 && (
                  <EmptyState
                    icon={Container}
                    message="검색 결과가 없습니다"
                    description="다른 검색어를 시도해보세요"
                  />
                )}
              </TabsContent>

              {/* Templates 탭 */}
              <TabsContent value="templates" className="hidden space-y-4 mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {filteredTemplates.map((template) => (
                <div key={template.name} onClick={() => setSelectedTemplate(template)} className="cursor-pointer">
                  <ComponentCard {...template} />
                </div>
              ))}
            </div>
            {filteredTemplates.length === 0 && (
              <EmptyState
                icon={Boxes}
                message="검색 결과가 없습니다"
                description="다른 검��어를 시도해보세요"
              />
            )}
              </TabsContent>
            </Tabs>
          </TabsContent>

          {/* Widgets 탭 */}
          <TabsContent value="widgets" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {filteredWidgets.map((widget) => (
                <ComponentCard key={widget.name} {...widget} />
              ))}
            </div>
            {filteredWidgets.length === 0 && (
              <EmptyState
                icon={LayoutDashboard}
                message="검색 결과가 없습니다"
                description="다른 검색어를 시도해보세요"
              />
            )}
          </TabsContent>
        </Tabs>
      </div>
    </div>

    {/* 컴포넌트 관리 다이얼로그 */}
    <ComponentManageDialog
      open={isManageDialogOpen}
      onOpenChange={setIsManageDialogOpen}
      type={manageDialogType}
      mode={manageDialogMode}
      component={editingComponent}
      onSave={(data) => {
        if (manageDialogMode === "add") {
          addComponent(manageDialogType, data);
          toast.success(`${manageDialogType} 컴포넌트가 추가되었습니다`);
        } else {
          if (editingComponent) {
            updateComponent(manageDialogType, editingComponent.id, data);
            toast.success(`${manageDialogType} 컴포넌트가 수정되었습니다`);
          }
        }
        setIsManageDialogOpen(false);
        setEditingComponent(null);
      }}
    />
  </>
  );
}
