OrderBySelect

// user.types.ts (백엔드)
import { z } from "zod";

export const UserOrderBy = z.enum([
  "id-desc",
  "id-asc",
  "created_at-desc",
  "created_at-asc",
  "username-asc",
  "username-desc",
]);

export const UserListParams = UserBaseListParams.extend({
  orderBy: UserOrderBy.optional(),
});

export const UserOrderByLabel = {
  "id-desc": "ID최신순",
  "id-asc": "ID오래된순",
  "created_at-desc": "생성일최신순",
  "created_at-asc": "생성일오래된순",
  "username-asc": "이름오름차순",
  "username-desc": "이름내림차순",
};

import { useListParams } from "@sonamu-kit/react-components";
import { UserOrderBySelect } from "@/components/user/UserOrderBySelect";
import { UserOrderBy } from "@/services/sonamu.generated";

export function UserListPage() {
  const { register } = useListParams(UserListParams, {
    num: 24,
    page: 1,
    orderBy: UserOrderBy.options[0],  // 기본값: "id-desc"
  });

  return (
    <div className="flex gap-2">
      <UserOrderBySelect {...register("orderBy")} />
    </div>
  );
}

export type UserOrderBySelectProps = {
  value?: string;
  onValueChange?: (value: string | null | undefined) => void;
  placeholder?: string;
  textPrefix?: string;
  clearable?: boolean;
  disabled?: boolean;
  className?: string;
};

import { useState } from "react";
import { UserOrderBySelect } from "@/components/user/UserOrderBySelect";

export function UserListPage() {
  const [orderBy, setOrderBy] = useState<string>("id-desc");

  return (
    <UserOrderBySelect
      value={orderBy}
      onValueChange={(value) => setOrderBy(value ?? "id-desc")}
      placeholder="정렬 기준"
    />
  );
}

<UserOrderBySelect
  {...register("orderBy")}
  placeholder="정렬 선택"  // 기본값: "정렬"
/>

<UserOrderBySelect
  {...register("orderBy")}
  textPrefix="정렬: "
/>

// 렌더링 결과:
// - 정렬: ID최신순
// - 정렬: ID오래된순
// - 정렬: 생성일최신순

<UserOrderBySelect
  {...register("orderBy")}
  clearable
/>

// 렌더링 결과:
// - 전체           ← clearable로 추가됨
// - ID최신순
// - ID오래된순
// - ...

<UserOrderBySelect
  {...register("orderBy")}
  disabled={isLoading}  // 로딩 중에는 변경 불가
/>

<UserOrderBySelect
  {...register("orderBy")}
  className="w-[200px] h-8 bg-white border-gray-300 text-xs"
/>

import { useListParams } from "@sonamu-kit/react-components";
import { Input } from "@sonamu-kit/react-components/components";
import { UserService } from "@/services/services.generated";
import { UserOrderBySelect } from "@/components/user/UserOrderBySelect";
import { UserSearchFieldSelect } from "@/components/user/UserSearchFieldSelect";
import { UserRoleSelect } from "@/components/user/UserRoleSelect";

export function UserListPage() {
  const { listParams, register } = useListParams(UserListParams, {
    num: 24,
    page: 1,
    search: "id" as const,
    keyword: "",
    orderBy: "id-desc" as const,
    role: undefined,
  });

  const { data } = UserService.useUsers("A", listParams);

  return (
    <div>
      {/* 필터 섹션 */}
      <div className="flex gap-2 mb-4">
        {/* 검색 */}
        <UserSearchFieldSelect
          {...register("search")}
          className="w-32"
        />
        <Input
          {...register("keyword")}
          placeholder="검색어"
          className="w-64"
        />

        {/* 역할 필터 */}
        <UserRoleSelect
          {...register("role")}
          clearable
        />

        {/* 정렬 */}
        <UserOrderBySelect
          {...register("orderBy")}
          textPrefix="정렬: "
          className="w-[200px]"
        />
      </div>

      {/* 테이블 */}
      <table>
        {/* ... */}
      </table>
    </div>
  );
}

<div className="flex flex-col sm:flex-row gap-2">
  <UserOrderBySelect
    {...register("orderBy")}
    className="w-full sm:w-[200px]"  // 모바일: 전체 너비, 데스크탑: 200px
  />
</div>

import { UserOrderBy } from "@/services/sonamu.generated";

<div className="flex items-center gap-2">
  <span className="text-sm text-gray-500">
    {UserOrderBy.options.length}개 정렬 옵션
  </span>
  <UserOrderBySelect {...register("orderBy")} />
</div>

// UserOrderBySelect.tsx 수정
import { UserOrderByLabel } from "@/services/sonamu.generated";

// 커스텀 레이블 객체 생성
const customLabels = {
  ...UserOrderByLabel,
  "id-desc": "최신 등록순",  // 기본: "ID최신순"
  "created_at-asc": "오래된 순",  // 기본: "생성일오래된순"
};

export function UserOrderBySelect({ ... }) {
  return (
    <Select ...>
      <SelectContent>
        {validOptions.map((key) => (
          <SelectItem key={key} value={key}>
            {(textPrefix ?? "") + customLabels[key]}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

import ArrowUpIcon from "~icons/lucide/arrow-up";
import ArrowDownIcon from "~icons/lucide/arrow-down";

const getIcon = (key: string) => {
  if (key.endsWith("-asc")) return <ArrowUpIcon className="w-3 h-3" />;
  if (key.endsWith("-desc")) return <ArrowDownIcon className="w-3 h-3" />;
  return null;
};

<SelectItem key={key} value={key}>
  <div className="flex items-center gap-2">
    {getIcon(key)}
    {customLabels[key]}
  </div>
</SelectItem>

// "username" 정렬 옵션만 표시
const visibleOptions = validOptions.filter(key =>
  key.includes("username")
);

<SelectContent>
  {visibleOptions.map((key) => (
    <SelectItem key={key} value={key}>
      {UserOrderByLabel[key]}
    </SelectItem>
  ))}
</SelectContent>

const groupedOptions = {
  "기본": ["id-desc", "id-asc"],
  "날짜": ["created_at-desc", "created_at-asc"],
  "이름": ["username-asc", "username-desc"],
};

<SelectContent>
  {Object.entries(groupedOptions).map(([group, options]) => (
    <Fragment key={group}>
      <SelectLabel>{group}</SelectLabel>
      {options.map((key) => (
        <SelectItem key={key} value={key}>
          {UserOrderByLabel[key]}
        </SelectItem>
      ))}
    </Fragment>
  ))}
</SelectContent>

// user.model.ts (백엔드)
async findMany<T extends UserSubsetKey, LP extends UserListParams>(
  subset: T,
  rawParams?: LP,
): Promise<ListResult<LP, UserSubsetMapping[T]>> {
  const params = {
    num: 24,
    page: 1,
    orderBy: "id-desc" as const,
    ...rawParams,
  };

  const { qb } = this.getSubsetQueries(subset);

  // orderBy 처리
  if (params.orderBy === "id-desc") {
    qb.orderBy("users.id", "desc");
  } else if (params.orderBy === "id-asc") {
    qb.orderBy("users.id", "asc");
  } else if (params.orderBy === "created_at-desc") {
    qb.orderBy("users.created_at", "desc");
  } else if (params.orderBy === "created_at-asc") {
    qb.orderBy("users.created_at", "asc");
  } else if (params.orderBy === "username-asc") {
    qb.orderBy("users.username", "asc");
  } else if (params.orderBy === "username-desc") {
    qb.orderBy("users.username", "desc");
  } else {
    exhaustive(params.orderBy);  // 타입 안전성 보장
  }

  return this.executeSubsetQuery({ subset, qb, params });
}

import { exhaustive } from "sonamu";

// OrderBy enum에 새 옵션 "email-asc"를 추가하면
// 컴파일 에러 발생 → 개발자가 누락을 즉시 알 수 있음
else {
  exhaustive(params.orderBy);  // ❌ 타입 에러: "email-asc" 미처리
}

# 컴포넌트 삭제
rm web/src/components/user/UserOrderBySelect.tsx

# 개발 서버 재시작 (자동 재생성)
pnpm dev

// user.types.ts (백엔드)에 추가
export const UserOrderBy = z.enum([
  "id-desc",
  "id-asc",
]);

export const UserListParams = UserBaseListParams.extend({
  orderBy: UserOrderBy.optional(),
});

# sonamu.lock 삭제 후 재동기화
rm api/sonamu.lock
pnpm sonamu sync