고급 패턴

import { DataTable, Input, Badge } from "@reopt-ai/opt-ui";

const [search, setSearch] = useState("");

// 필터링 로직
const filtered = products.filter(
  (p) => p.name.includes(search) || p.category.includes(search)
);

// 커스텀 컬럼 렌더링
const columns = [
  { id: "name", header: "상품명", accessor: "name" },
  {
    id: "status",
    header: "상태",
    accessor: (row) => (
      <Badge variant={statusVariant[row.status]}>
        {statusLabel[row.status]}
      </Badge>
    ),
  },
];

<Input value={search} onChange={(e) => setSearch(e.target.value)} />
<DataTable data={filtered} columns={columns} />

import { DashboardGrid, Button } from "@reopt-ai/opt-ui";

const [columns, setColumns] = useState(3);

// 화면 크기에 따른 반응형
useEffect(() => {
  const handleResize = () => {
    if (window.innerWidth < 640) setColumns(1);
    else if (window.innerWidth < 1024) setColumns(2);
    else setColumns(3);
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

<DashboardGrid stats={stats} columns={columns} />

import { ToastProvider, useToast } from "@reopt-ai/opt-ui";

// 1. 앱 최상위에 Provider 배치
function App() {
  return (
    <ToastProvider position="top-right" defaultDuration={5000}>
      <MyApp />
    </ToastProvider>
  );
}

// 2. 컴포넌트에서 useToast 사용
function SaveButton() {
  const { addToast } = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      addToast({
        variant: "success",
        title: "저장 완료",
        message: "변경사항이 저장되었습니다.",
      });
    } catch (error) {
      addToast({
        variant: "error",
        title: "오류",
        message: "저장에 실패했습니다.",
        duration: 8000, // 8초 (기본값 오버라이드)
      });
    }
  };

  return <Button onClick={handleSave}>저장</Button>;
}

import {
  ComboboxRoot, ComboboxInput, ComboboxPopover,
  ComboboxItem, ComboboxGroup, ComboboxGroupLabel,
} from "@reopt-ai/opt-ui";

// 부서별 그룹화
const grouped = users.reduce((acc, user) => {
  if (!acc[user.department]) acc[user.department] = [];
  acc[user.department].push(user);
  return acc;
}, {});

<ComboboxRoot setValue={setSearch} resetValueOnHide>
  <ComboboxInput placeholder="팀원 검색..." autoSelect />
  <ComboboxPopover>
    {Object.entries(grouped).map(([dept, users]) => (
      <ComboboxGroup key={dept}>
        <ComboboxGroupLabel>{dept}</ComboboxGroupLabel>
        {users.map((user) => (
          <ComboboxItem key={user.id} value={user.name}>
            <Avatar name={user.name} size="sm" />
            <span>{user.name}</span>
          </ComboboxItem>
        ))}
      </ComboboxGroup>
    ))}
  </ComboboxPopover>
</ComboboxRoot>

// 1. className으로 직접 스타일 추가
<Button className="shadow-lg hover:shadow-xl">
  그림자 버튼
</Button>

// 2. data-* 속성으로 상태 스타일
<ComboboxItem
  className={cn(
    // 기본 스타일
    "px-3 py-2",
    // 활성 상태 (키보드 탐색)
    "data-[active-item]:bg-blue-50 data-[active-item]:text-blue-700",
    // 포커스 visible (Tab 키)
    "data-[focus-visible]:ring-2 data-[focus-visible]:ring-blue-600",
  )}
>

// 3. 조건부 스타일
<Badge
  variant={status === "active" ? "success" : "default"}
  className={status === "error" ? "animate-pulse" : ""}
>
  {statusLabel}
</Badge>

// 예: 검색 + 테이블 + 페이지네이션 조합
function DataExplorer<T>({ data, columns }: Props<T>) {
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);

  const filtered = useMemo(
    () => data.filter(/* 검색 로직 */),
    [data, search]
  );

  const paginated = useMemo(
    () => filtered.slice((page - 1) * 10, page * 10),
    [filtered, page]
  );

  return (
    <div className="space-y-4">
      <SearchCombobox
        items={data.map(extractSearchableText)}
        onSelect={setSearch}
      />
      <DataTable data={paginated} columns={columns} />
      <Pagination
        total={filtered.length}
        page={page}
        onChange={setPage}
      />
    </div>
  );
}