useSelection

import { useSelection } from "@sonamu-kit/react-components";

export function UserListPage() {
  const { data } = UserService.useUsers("A", listParams);
  const allIds = data?.rows.map(row => row.id) ?? [];

  // useSelection 초기화
  const {
    selectedKeys,      // 선택된 키 배열
    getSelected,       // 특정 키가 선택되었는지 확인
    toggle,            // 개별 항목 선택/해제 토글
    selectAll,         // 전체 선택
    deselectAll,       // 전체 해제
    isAllSelected,     // 전체 선택 여부
    handleCheckboxClick, // Shift+클릭 범위 선택
  } = useSelection(allIds, []);  // allIds: 전체 키, []: 초기 선택

  // ...
}

import { Checkbox } from "@sonamu-kit/react-components/components";

const { getSelected, toggle } = useSelection(allIds, []);

<Checkbox
  checked={getSelected(row.id)}
  onValueChange={() => toggle(row.id)}
/>

const { isAllSelected, selectAll, deselectAll } = useSelection(allIds, []);

<Checkbox
  checked={isAllSelected}
  onValueChange={(checked) => {
    if (checked) {
      selectAll();
    } else {
      deselectAll();
    }
  }}
/>

const { handleCheckboxClick } = useSelection(allIds, []);

{rows.map((row, index) => (
  <tr key={row.id}>
    <td onClick={(e) => handleCheckboxClick(e, index)}>
      <Checkbox
        checked={getSelected(row.id)}
        onValueChange={() => toggle(row.id)}
      />
    </td>
    {/* ... */}
  </tr>
))}

import { useSelection } from "@sonamu-kit/react-components";
import { Checkbox, Button, Table } from "@sonamu-kit/react-components/components";
import { UserService } from "@/services/services.generated";

export function UserListPage() {
  const { data } = UserService.useUsers("A", listParams);
  const { rows } = data ?? {};
  const allIds = rows?.map(row => row.id) ?? [];

  const {
    selectedKeys,
    getSelected,
    toggle,
    selectAll,
    deselectAll,
    isAllSelected,
    handleCheckboxClick,
  } = useSelection(allIds, []);

  // 벌크 삭제
  const handleBulkDelete = async () => {
    if (selectedKeys.length === 0) {
      alert("삭제할 항목을 선택하세요");
      return;
    }

    if (confirm(`${selectedKeys.length}개 항목을 삭제하시겠습니까?`)) {
      await UserService.del(selectedKeys);
      deselectAll();  // 삭제 후 선택 해제
    }
  };

  return (
    <div>
      {/* 벌크 작업 버튼 */}
      {selectedKeys.length > 0 && (
        <div className="mb-4 flex gap-2">
          <span>{selectedKeys.length}개 선택됨</span>
          <Button variant="red" onClick={handleBulkDelete}>
            선택 항목 삭제
          </Button>
        </div>
      )}

      <Table>
        <thead>
          <tr>
            {/* 전체 선택 체크박스 */}
            <th className="w-[40px]">
              <Checkbox
                checked={isAllSelected}
                onValueChange={(checked) => {
                  if (checked) {
                    selectAll();
                  } else {
                    deselectAll();
                  }
                }}
              />
            </th>
            <th>ID</th>
            <th>이름</th>
            <th>이메일</th>
          </tr>
        </thead>
        <tbody>
          {rows?.map((row, index) => (
            <tr key={row.id}>
              {/* 개별 선택 체크박스 (Shift+클릭 지원) */}
              <td onClick={(e) => handleCheckboxClick(e, index)}>
                <Checkbox
                  checked={getSelected(row.id)}
                  onValueChange={() => toggle(row.id)}
                />
              </td>
              <td>{row.id}</td>
              <td>{row.username}</td>
              <td>{row.email}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

// 1페이지: rows = [1, 2, 3]
const selection1 = useSelection([1, 2, 3], []);
selection1.toggle(1);  // 1 선택
selection1.toggle(2);  // 2 선택
// selectedKeys = [1, 2]

// 2페이지로 이동: rows = [4, 5, 6]
const selection2 = useSelection([4, 5, 6], []);
// selectedKeys는 자동으로 []로 정리됨 (1, 2가 allIds에 없음)

// useSelection 내부 (list-helpers.ts:84-91)
useEffect(() => {
  const selectionKeys = Array.from(selection.keys());
  const validKeys = intersection(allKeys, selectionKeys);

  // 변경이 필요한 경우에만 상태 업데이트
  if (validKeys.length !== selectionKeys.length) {
    setSelection(new Map(validKeys.map(key => [key, true])));
  }
}, [allKeys, selection]);

const { selectedKeys } = useSelection(allIds, []);

// 선택된 항목의 정보 가져오기
const selectedRows = rows?.filter(row => selectedKeys.includes(row.id)) ?? [];

// 벌크 수정
const handleBulkUpdate = async () => {
  await UserService.save({
    params: selectedRows.map(row => ({
      id: row.id,
      status: "active",
    }))
  });
};

// 벌크 내보내기
const handleBulkExport = () => {
  const csv = selectedRows.map(row =>
    `${row.id},${row.username},${row.email}`
  ).join("\n");

  // CSV 다운로드
  const blob = new Blob([csv], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "users.csv";
  a.click();
};

// URL 파라미터에서 선택 상태 복원
const searchParams = new URLSearchParams(window.location.search);
const preselectedIds = searchParams.get("selected")?.split(",").map(Number) ?? [];

const { selectedKeys } = useSelection(allIds, preselectedIds);

const { selectedKeys } = useSelection(allIds, []);

// 선택 상태를 localStorage에 저장
useEffect(() => {
  localStorage.setItem("selectedUserIds", JSON.stringify(selectedKeys));
}, [selectedKeys]);

// 다음 방문 시 복원
const savedIds = JSON.parse(localStorage.getItem("selectedUserIds") ?? "[]");
const { selectedKeys } = useSelection(allIds, savedIds);

const { toggle } = useSelection(allIds, []);

// 특정 조건의 항목만 선택 가능
const handleToggle = (row: UserRow) => {
  if (row.role === "admin") {
    alert("관리자는 선택할 수 없습니다");
    return;
  }
  toggle(row.id);
};

<Checkbox
  checked={getSelected(row.id)}
  onValueChange={() => handleToggle(row)}
  disabled={row.role === "admin"}
/>

// 내부 상태 (단순화)
const [selection, setSelection] = useState<Map<number, boolean>>(
  new Map([
    [1, true],   // ID 1 선택됨
    [2, false],  // ID 2 선택 안 됨
    [3, true],   // ID 3 선택됨
  ])
);

// selectedKeys 추출
const selectedKeys = Array.from(selection)
  .filter(([key, value]) => value === true)
  .map(([key]) => key);
// 결과: [1, 3]

// number 타입
const selection1 = useSelection<number>([1, 2, 3], []);
selection1.toggle(1);  // ✅ OK
selection1.toggle("1");  // ❌ 타입 에러

// string 타입
const selection2 = useSelection<string>(["a", "b", "c"], []);
selection2.toggle("a");  // ✅ OK
selection2.toggle(1);  // ❌ 타입 에러

// 복잡한 객체 타입
type UserKey = { id: number; email: string };
const keys: UserKey[] = [
  { id: 1, email: "[email protected]" },
  { id: 2, email: "[email protected]" },
];
const selection3 = useSelection<UserKey>(keys, []);

// ❌ 잘못된 사용
const { selectedKeys } = useSelection([], []);  // 빈 배열

// ✅ 올바른 사용
const allIds = rows?.map(row => row.id) ?? [];
const { selectedKeys } = useSelection(allIds, []);

// 페이지 전체 선택 상태 (useState로 별도 관리)
const [globalSelectedIds, setGlobalSelectedIds] = useState<Set<number>>(new Set());

// 현재 페이지 선택과 동기화
useEffect(() => {
  const currentPageSelected = allIds.filter(id => globalSelectedIds.has(id));
  // useSelection의 상태와 동기화
}, [allIds, globalSelectedIds]);

// ✅ 올바른 사용
<td onClick={(e) => handleCheckboxClick(e, index)}>
  <Checkbox ... />
</td>

// ❌ 잘못된 사용 (클릭 이벤트가 전파되지 않음)
<Checkbox
  onClick={(e) => handleCheckboxClick(e, index)}
  ...
/>