feat: 필터에 선택이 가능하도록 수정

Author: MU-Software

apps/pyconkr-admin/src/components/elements/admin_list_filter.tsx

@@ -5,14 +5,16 @@ import * as React from "react";
 import BackendAdminAPISchemas from "../../../../../packages/common/src/schemas/backendAdminAPI";
 
 type OpenAPIParameterSchema = BackendAdminAPISchemas.OpenAPIParameterSchema;
+type ChoicesResponse = BackendAdminAPISchemas.ChoicesResponse;
 
 type AdminListFilterProps = {
   parameters: OpenAPIParameterSchema[];
   values: Record<string, string>;
+  choices?: ChoicesResponse;
   onApply: (values: Record<string, string>) => void;
 };
 
-export const AdminListFilter: React.FC<AdminListFilterProps> = ({ parameters, values, onApply }) => {
+export const AdminListFilter: React.FC<AdminListFilterProps> = ({ parameters, values, choices, onApply }) => {
   const [localValues, setLocalValues] = React.useState<Record<string, string>>(values);
 
   React.useEffect(() => {
@@ -44,7 +46,13 @@ export const AdminListFilter: React.FC<AdminListFilterProps> = ({ parameters, va
         </Stack>
         <Stack direction="row" spacing={2} sx={{ flexWrap: "wrap", alignItems: "flex-start" }}>
           {parameters.map((param) => (
-            <FilterField key={param.name} param={param} value={localValues[param.name] || ""} onChange={handleChange} />
+            <FilterField
+              key={param.name}
+              param={param}
+              value={localValues[param.name] || ""}
+              choices={choices?.[param.name]}
+              onChange={handleChange}
+            />
           ))}
         </Stack>
         <Stack direction="row" spacing={1}>
@@ -60,18 +68,39 @@ export const AdminListFilter: React.FC<AdminListFilterProps> = ({ parameters, va
   );
 };
 
+type ChoiceItem = { const: string | null; title: string };
+
 type FilterFieldProps = {
   param: OpenAPIParameterSchema;
   value: string;
+  choices?: ChoiceItem[];
   onChange: (name: string, value: string) => void;
 };
 
-const FilterField: React.FC<FilterFieldProps> = ({ param, value, onChange }) => {
+const FilterField: React.FC<FilterFieldProps> = ({ param, value, choices, onChange }) => {
   const { name, schema, description } = param;
 
   if (schema?.type === "array") return <ArrayFilterField name={name} items={schema.items} value={value} onChange={onChange} />;
   if (schema?.enum) return <EnumFilterField name={name} options={schema.enum} value={value} onChange={onChange} />;
 
+  if (choices && choices.length > 0) {
+    return (
+      <FormControl size="small" sx={{ minWidth: 200 }}>
+        <InputLabel>{name}</InputLabel>
+        <Select value={value} label={name} onChange={(e) => onChange(name, e.target.value as string)}>
+          <MenuItem value="">
+            <em>전체</em>
+          </MenuItem>
+          {choices.map((choice) => (
+            <MenuItem key={choice.const ?? "__null__"} value={choice.const ?? ""}>
+              {choice.title}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+
   const inputType = schema?.type === "integer" || schema?.type === "number" ? "number" : "text";
   const helperText = schema?.format === "uuid" ? "UUID" : description || undefined;
 

apps/pyconkr-admin/src/components/layouts/admin_editor.tsx

@@ -277,6 +277,21 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
       });
       const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
       const { data: schemaInfo } = Common.Hooks.BackendAdminAPI.useSchemaQuery(backendAdminClient, app, resource);
+      const { data: choicesData } = Common.Hooks.BackendAdminAPI.useChoicesQuery(backendAdminClient, app, resource);
+
+      // Merge choices into schema for FK/M2M fields
+      React.useMemo(() => {
+        if (!choicesData || !schemaInfo.schema.properties) return;
+        for (const [fieldName, items] of Object.entries(choicesData)) {
+          const prop = (schemaInfo.schema.properties as Record<string, RJSFSchema>)[fieldName];
+          if (!prop) continue;
+          if (prop.type === "array" && prop.items) {
+            (prop.items as RJSFSchema).oneOf = items;
+          } else {
+            prop.oneOf = items;
+          }
+        }
+      }, [choicesData, schemaInfo.schema]);
 
       const setTab = (_: React.SyntheticEvent, tab: number) => setEditorState((ps) => ({ ...ps, tab }));
       const setFormData = (formData?: Record<string, string>) => setEditorState((ps) => ({ ...ps, formData }));

apps/pyconkr-admin/src/components/layouts/admin_list.tsx

@@ -39,6 +39,8 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
       [openApiSchemaQuery.data, app, resource]
     );
 
+    const choicesQuery = Common.Hooks.BackendAdminAPI.useChoicesQuery(backendAdminClient, app, resource);
+
     const handleFilterApply = (newParams: Record<string, string>) => setSearchParams(newParams, { replace: true });
 
     return (
@@ -47,7 +49,7 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
           {app.toUpperCase()} &gt; {resource.toUpperCase()} &gt; 목록
         </Typography>
         <br />
-        <AdminListFilter parameters={queryParameters} values={filterParams} onApply={handleFilterApply} />
+        <AdminListFilter parameters={queryParameters} values={filterParams} choices={choicesQuery.data} onApply={handleFilterApply} />
         <Box>
           {!hideCreateNew && (
             <Button variant="contained" onClick={() => navigate(`/${app}/${resource}/create`)} startIcon={<Add />}>

packages/common/src/apis/admin_api.ts

@@ -58,6 +58,9 @@ namespace BackendAdminAPIs {
   export const schema = (client: BackendAPIClient, app: string, resource: string) => () =>
     client.get<BackendAdminAPISchemas.AdminSchemaDefinition>(`v1/admin-api/${app}/${resource}/json-schema/`);
 
+  export const choices = (client: BackendAPIClient, app: string, resource: string) => () =>
+    client.get<BackendAdminAPISchemas.ChoicesResponse>(`v1/admin-api/${app}/${resource}/choices/`);
+
   export const openApiSchema = (client: BackendAPIClient) => () =>
     client.get<BackendAdminAPISchemas.OpenAPISchema>("api/schema/v1/", { params: { format: "json" } });
 

packages/common/src/hooks/useAdminAPI.ts

@@ -10,6 +10,7 @@ const QUERY_KEYS = {
   ADMIN_LIST: ["query", "admin", "list"],
   ADMIN_RETRIEVE: ["query", "admin", "retrieve"],
   ADMIN_SCHEMA: ["query", "admin", "schema"],
+  ADMIN_CHOICES: ["query", "admin", "choices"],
   ADMIN_OPENAPI_SCHEMA: ["query", "admin", "openapi-schema"],
   ADMIN_PREVIEW_MODIFICATION_AUDIT: ["query", "admin", "retrieve", "modification-audit"],
 };
@@ -68,6 +69,12 @@ namespace BackendAdminAPIHooks {
       queryFn: BackendAdminAPIs.schema(client, app, resource),
     });
 
+  export const useChoicesQuery = (client: BackendAPIClient, app: string, resource: string) =>
+    useSuspenseQuery({
+      queryKey: [...QUERY_KEYS.ADMIN_CHOICES, app, resource],
+      queryFn: BackendAdminAPIs.choices(client, app, resource),
+    });
+
   export const useOpenApiSchemaQuery = (client: BackendAPIClient) =>
     useSuspenseQuery({
       queryKey: QUERY_KEYS.ADMIN_OPENAPI_SCHEMA,

packages/common/src/schemas/backendAdminAPI.ts

@@ -18,6 +18,8 @@ namespace BackendAdminAPISchemas {
     translation_fields: string[];
   };
 
+  export type ChoicesResponse = Record<string, { const: string | null; title: string }[]>;
+
   export type UserSchema = {
     id: number;
     username: string;