feat: 등록 데스크 시스템 설정 대응 추가

Author: MU-Software

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

@@ -52,6 +52,7 @@ import { ChoicePicker } from "@apps/pyconkr-admin/components/elements/choice_pic
 import { ChoicePickerWidget } from "@apps/pyconkr-admin/components/elements/choice_picker_widget";
 import { ColorPickerWidget } from "@apps/pyconkr-admin/components/elements/color_picker_widget";
 import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { IMAGE_FILE_EXTENSIONS } from "@apps/pyconkr-admin/consts/file_extensions";
 import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type EditorFormDataEventType = IChangeEvent<Record<string, string>, RJSFSchema, { [k in string]: unknown }>;
@@ -167,6 +168,15 @@ const MDEditorField: Field = ErrorBoundary.with({ fallback: ErrorFallback }, ({
   );
 });
 
+const isImageUrl = (url: string): boolean => {
+  try {
+    const path = new URL(url).pathname.toLowerCase();
+    return IMAGE_FILE_EXTENSIONS.some((ext) => path.endsWith(`.${ext}`));
+  } catch {
+    return false;
+  }
+};
+
 type ReadOnlyValueFieldStateType = {
   loading: boolean;
   blob: Blob | null;
@@ -188,15 +198,18 @@ const ReadOnlyValueField: FC<{
 
   useEffect(() => {
     (async () => {
-      if (!(isString(value) && value.startsWith("http") && uiSchema?.[name]["ui:field"] === "file")) {
+      // ui:field 가 없는 필드도 있다 (`uiSchema[name]` 자체가 undefined) — 옵셔널 체이닝을 빼면 여기서 던지고
+      // loading 이 true 로 남아 스피너만 계속 돈다. fetch 실패도 마찬가지라 try/finally 로 반드시 내린다.
+      try {
+        if (!(isString(value) && value.startsWith("http") && uiSchema?.[name]?.["ui:field"] === "file")) return;
+
+        const blob = await (await fetch(value)).blob();
+        const blobText = await blob.text();
+        const objectUrl = URL.createObjectURL(blob);
+        setFieldState((ps) => ({ ...ps, blob, blobText, objectUrl }));
+      } finally {
         setFieldState((ps) => ({ ...ps, loading: false }));
-        return;
       }
-
-      const blob = await (await fetch(value)).blob();
-      const blobText = await blob.text();
-      const objectUrl = URL.createObjectURL(blob);
-      setFieldState((ps) => ({ ...ps, loading: false, blob, blobText, objectUrl }));
     })();
   }, [value, name, uiSchema]);
 
@@ -219,6 +232,17 @@ const ReadOnlyValueField: FC<{
   }
 
   if (value === null || value === undefined) return "";
+  // ui:field 힌트가 없는 URL 값(예: logo_url). 이미지면 그대로 <img> 로 — blob fetch 와 달리 CORS 를 타지 않는다.
+  if (isString(value) && value.startsWith("http")) {
+    return (
+      <Stack spacing={1} alignItems="flex-start">
+        {isImageUrl(value) && <Box component="img" src={value} alt={name} sx={{ maxWidth: 300, maxHeight: 200, objectFit: "contain" }} />}
+        <a href={value} target="_blank" rel="noopener noreferrer">
+          {value}
+        </a>
+      </Stack>
+    );
+  }
   if (typeof value === "object") {
     return (
       <Box

apps/pyconkr-admin/src/components/pages/registration_desk/list.tsx

@@ -0,0 +1,37 @@
+import { FC } from "react";
+
+import { AdminList, AdminListColumn } from "@apps/pyconkr-admin/components/layouts/admin_list";
+
+// 백엔드 RegistrationDeskConfig 의 기본값(무제한) 센티널. 그대로 노출하면 오해를 부른다.
+const OPEN_START = "0001-01-01";
+const OPEN_END = "9999-12-31";
+
+const formatPeriod = (row: Record<string, unknown>) => {
+  const start = String(row.start_date ?? "");
+  const end = String(row.end_date ?? "");
+  return `${start === OPEN_START ? "제한 없음" : start} ~ ${end === OPEN_END ? "제한 없음" : end}`;
+};
+
+const columns: AdminListColumn[] = [
+  { field: "name", header: "이름", width: "30%" },
+  { field: "start_date", header: "적용 기간", width: "25%", render: formatPeriod },
+  {
+    field: "categories",
+    header: "대상 카테고리",
+    width: "15%",
+    align: "right",
+    render: (row) => `${Array.isArray(row.categories) ? row.categories.length : 0}개`,
+  },
+];
+
+// 생성 시간까지 넣으면 컬럼이 좁아져 헤더가 줄바꿈된다 — 설정은 수정 시간만 있으면 충분하다.
+export const RegistrationDeskConfigListPage: FC = () => (
+  <AdminList
+    app="internal_api"
+    resource="registrationdeskconfig"
+    title="등록 데스크 > 설정 > 목록"
+    columns={columns}
+    hideCreatedAt
+    enableRowActions
+  />
+);

apps/pyconkr-admin/src/components/pages/shop/order/editor.tsx

@@ -29,6 +29,7 @@ import { ORDER_PRODUCT_STATUS_LABEL, PAYMENT_STATUS_LABEL } from "@apps/pyconkr-
 import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 import { OrderNotificationDialog } from "./notification_dialog";
+import { OrderProductTags } from "./product_tags";
 import { RefundDialog } from "./refund_dialog";
 import { OrderAdmin, SimpleCustomerInfo, SimpleOrderProductRelation } from "./types";
 
@@ -130,6 +131,8 @@ const OrderProductRow: FC<{ order: OrderAdmin; relation: SimpleOrderProductRelat
       <TableRow>
         <TableCell colSpan={6} sx={{ bgcolor: "action.hover", py: 1, pl: 4 }}>
           <Stack spacing={2}>
+            <Typography variant="subtitle2">태그</Typography>
+            <OrderProductTags relation={relation} />
             {relation.ticket_info && (
               <>
                 <Typography variant="subtitle2">참가자 정보</Typography>

apps/pyconkr-admin/src/components/pages/shop/order/list.tsx

@@ -1,5 +1,5 @@
 import { useBackendAdminClient, useListPaginatedQuery } from "@frontend/common/hooks/useAdminAPI";
-import { FileDownload, FileUpload, RestartAlt, Send } from "@mui/icons-material";
+import { FileDownload, FileUpload, LocalOffer, RestartAlt, Send } from "@mui/icons-material";
 import {
   Button,
   Chip,
@@ -27,6 +27,7 @@ import { PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/
 import { OrderExportDialog } from "@apps/pyconkr-admin/components/pages/shop/order/export_dialog";
 import { OrderImportDialog } from "@apps/pyconkr-admin/components/pages/shop/order/import_dialog";
 import { OrderNotificationDialog } from "@apps/pyconkr-admin/components/pages/shop/order/notification_dialog";
+import { OrderProductTagDialog } from "@apps/pyconkr-admin/components/pages/shop/order/tag_dialog";
 import { CategoryGroupAdminWithCategories } from "@apps/pyconkr-admin/components/pages/shop/product/types";
 
 import { OrderAdmin, PaymentStatus } from "./types";
@@ -105,6 +106,7 @@ const InnerOrderList: FC = ErrorBoundary.with(
     const [exportDialogOpen, setExportDialogOpen] = useState(false);
     const [importDialogOpen, setImportDialogOpen] = useState(false);
     const [notificationDialogOpen, setNotificationDialogOpen] = useState(false);
+    const [tagDialogOpen, setTagDialogOpen] = useState(false);
 
     // Re-sync local form state when the URL changes externally (browser back/forward, pagination).
     useEffect(() => {
@@ -291,6 +293,9 @@ const InnerOrderList: FC = ErrorBoundary.with(
           <Button variant="outlined" size="small" color="secondary" startIcon={<Send />} onClick={() => setNotificationDialogOpen(true)}>
             알림 발송
           </Button>
+          <Button variant="outlined" size="small" color="secondary" startIcon={<LocalOffer />} onClick={() => setTagDialogOpen(true)}>
+            태그 부착/해제
+          </Button>
         </Stack>
 
         <OrderImportDialog open={importDialogOpen} onClose={() => setImportDialogOpen(false)} />
@@ -299,6 +304,7 @@ const InnerOrderList: FC = ErrorBoundary.with(
         {notificationDialogOpen && (
           <OrderNotificationDialog scope={{ kind: "orderFilter", params: filterParams }} onClose={() => setNotificationDialogOpen(false)} />
         )}
+        {tagDialogOpen && <OrderProductTagDialog orderParams={filterParams} onClose={() => setTagDialogOpen(false)} />}
 
         <Table>
           <TableHead>

apps/pyconkr-admin/src/components/pages/shop/order/notification_dialog.tsx

@@ -16,7 +16,6 @@ import {
   Alert,
   Box,
   Button,
-  Checkbox,
   Chip,
   CircularProgress,
   Dialog,
@@ -25,11 +24,8 @@ import {
   DialogTitle,
   Divider,
   FormControl,
-  FormControlLabel,
   InputLabel,
-  ListItemText,
   MenuItem,
-  OutlinedInput,
   Select,
   Stack,
   Tab,
@@ -48,11 +44,15 @@ import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { FC, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { ChoicePicker } from "@apps/pyconkr-admin/components/elements/choice_picker";
 import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
 import { CHANNEL_BY_VALUE, NOTIFICATION_CHANNELS, NotificationChannel } from "@apps/pyconkr-admin/components/pages/notification/channels";
-import { ORDER_PRODUCT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
-import { OrderProductStatus } from "@apps/pyconkr-admin/components/pages/shop/order/types";
+import {
+  EMPTY_PRODUCT_FILTER,
+  ProductFilterState,
+  productFilterParams,
+  toOrderProductParams,
+} from "@apps/pyconkr-admin/components/pages/shop/order/order_product_filters";
+import { ProductFilterFields } from "@apps/pyconkr-admin/components/pages/shop/order/product_filter_fields";
 import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 const PREVIEW_ROW_LIMIT = 20;
@@ -76,38 +76,6 @@ const SEND_MODES: SendMode[] = [
   },
 ];
 
-// 백엔드 queryset 이 PURCHASED_OR_REFUNDED_STATUS 로 미리 좁히므로 pending 은 애초에 대상이 아니다.
-const SELECTABLE_OPR_STATUSES: OrderProductStatus[] = ["paid", "used", "refunded"];
-
-// 상품 단위 filterset(OrderProductRelationAdminFilterSet)은 주문 filterset 과 키가 다르다.
-// `status` 는 양쪽에 다 있지만 의미가 다르다 — 주문에선 결제 상태, 상품에선 상품 상태(pending/paid/used/refunded).
-// django-filter 는 모르는 키를 조용히 무시하므로, 넘길 키를 명시한 allowlist 로 둔다.
-// 주문 목록에 필터가 새로 생겨도 여기 없으면 자동으로 dropped 에 잡혀 경고로 노출된다 (대상이 몰래 넓어지지 않음).
-const ORDER_PRODUCT_PARAM_BY_ORDER_PARAM: Record<string, string> = {
-  id: "order_id",
-  user_id: "user_id",
-  user_unique_id: "user_unique_id",
-  name: "name",
-  email: "email",
-  imp_id: "imp_id",
-  status: "order_status",
-  first_paid_at_after: "first_paid_at_after",
-  first_paid_at_before: "first_paid_at_before",
-  product_id: "product_id",
-  category_id: "category_id",
-  category_group_id: "category_group_id",
-  event_id: "event_id",
-  // price_min/max 는 의도적으로 제외 — 주문에선 주문 총액, 상품에선 상품 단가라 뜻이 달라 그대로 넘기면 안 된다.
-};
-
-type ProductFilterState = {
-  productIds: (string | number)[];
-  statuses: OrderProductStatus[];
-  ticketOnly: boolean;
-};
-
-const EMPTY_PRODUCT_FILTER: ProductFilterState = { productIds: [], statuses: [], ticketOnly: false };
-
 /** 발송 대상 범위. 호출 위치(목록 / 주문 상세 / 주문 상품 행)마다 지정할 수 있는 범위가 다르다. */
 export type OrderNotificationScope =
   | { kind: "orderFilter"; params: Record<string, string> }
@@ -123,12 +91,6 @@ const SCOPE_TITLE: Record<OrderNotificationScope["kind"], string> = {
 // 특정 상품 1건을 지목한 경우엔 주문 단위 발송이 의미가 없다 (수신자가 주문자로 바뀌어 버린다).
 const modesForScope = (kind: OrderNotificationScope["kind"]): SendMode[] => (kind === "orderProduct" ? [SEND_MODES[1]] : SEND_MODES);
 
-const productFilterParams = (productFilter: ProductFilterState): Record<string, string> => ({
-  ...(productFilter.productIds.length ? { product_id: productFilter.productIds.join(",") } : {}),
-  ...(productFilter.statuses.length ? { status: productFilter.statuses.join(",") } : {}),
-  ...(productFilter.ticketOnly ? { is_ticket: "true" } : {}),
-});
-
 /** scope + 발송 단위 → 실제로 보낼 query params. `dropped` 는 상품 filterset 이 지원하지 않아 무시된 주문 필터 키. */
 const buildRequestParams = (
   scope: OrderNotificationScope,
@@ -147,13 +109,7 @@ const buildRequestParams = (
       };
     case "orderFilter": {
       if (!isProductTarget) return { params: scope.params, dropped: [] };
-      const params: Record<string, string> = {};
-      const dropped: string[] = [];
-      for (const [key, value] of Object.entries(scope.params)) {
-        const mappedKey = ORDER_PRODUCT_PARAM_BY_ORDER_PARAM[key];
-        if (mappedKey) params[mappedKey] = value;
-        else dropped.push(key);
-      }
+      const { params, dropped } = toOrderProductParams(scope.params);
       return { params: { ...params, ...productFilterParams(productFilter) }, dropped };
     }
   }
@@ -187,68 +143,6 @@ const TargetSummary: FC<{ params: Record<string, string>; dropped: string[]; des
   );
 };
 
-type ProductFilterFieldsProps = {
-  value: ProductFilterState;
-  onChange: (next: ProductFilterState) => void;
-};
-
-// ChoicePicker 는 caption 라벨을 컨트롤 위에 그리고 Select 는 라벨을 테두리에 얹기 때문에 두 컨트롤의 높이가 다르다.
-// 아래쪽 기준(flex-end)으로 맞추고 체크박스도 컨트롤 높이(small = 40px)에 고정해 세 필드의 밑선을 일치시킨다.
-const FILTER_CONTROL_HEIGHT = 40;
-
-const ProductFilterFields: FC<ProductFilterFieldsProps> = ({ value, onChange }) => (
-  <Stack spacing={1}>
-    <Typography variant="caption" color="text.secondary">
-      주문 목록에서 적용한 필터에 더해 상품 조건으로 좁힙니다.
-    </Typography>
-    <Stack direction="row" spacing={2} alignItems="flex-end" flexWrap="wrap" useFlexGap>
-      <Box sx={{ flex: 1, minWidth: 280 }}>
-        {/* selectables 를 suspense 로 조회하므로 자체 경계가 필요 — 없으면 다이얼로그 전체가 fallback 으로 교체된다.
-            fallback 도 같은 높이를 차지해야 로딩 완료 시 옆 필드들이 밀리지 않는다. */}
-        <Suspense
-          fallback={
-            <Box sx={{ height: FILTER_CONTROL_HEIGHT, display: "flex", alignItems: "center" }}>
-              <CircularProgress size={20} />
-            </Box>
-          }
-        >
-          <ChoicePicker
-            multiple
-            label="상품"
-            source={{ app: "shop", resource: "product" }}
-            value={value.productIds}
-            onChange={(productIds) => onChange({ ...value, productIds })}
-          />
-        </Suspense>
-      </Box>
-      <FormControl size="small" sx={{ minWidth: 200 }}>
-        <InputLabel id="order-noti-opr-status">상품 상태</InputLabel>
-        <Select
-          labelId="order-noti-opr-status"
-          multiple
-          input={<OutlinedInput label="상품 상태" />}
-          value={value.statuses}
-          onChange={(e) => onChange({ ...value, statuses: e.target.value as OrderProductStatus[] })}
-          renderValue={(selected) => selected.map((s) => ORDER_PRODUCT_STATUS_LABEL[s].label).join(", ") || "전체"}
-        >
-          {SELECTABLE_OPR_STATUSES.map((s) => (
-            <MenuItem key={s} value={s}>
-              <Checkbox size="small" checked={value.statuses.includes(s)} />
-              <ListItemText primary={ORDER_PRODUCT_STATUS_LABEL[s].label} />
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControlLabel
-        sx={{ height: FILTER_CONTROL_HEIGHT, mr: 0 }}
-        control={<Checkbox size="small" checked={value.ticketOnly} onChange={(e) => onChange({ ...value, ticketOnly: e.target.checked })} />}
-        label="티켓 상품만"
-        slotProps={{ typography: { variant: "body2" } }}
-      />
-    </Stack>
-  </Stack>
-);
-
 // ErrorBoundary.with() 대신 명명 컴포넌트 + 인라인 경계 — HMR 시 입력 필드가 detach 되는 것을 막는다.
 const NotificationDialogBody: FC<NotificationDialogBodyProps> = ({ scope, onClose }) => {
   const client = useBackendAdminClient();

apps/pyconkr-admin/src/components/pages/shop/order/order_product_filters.ts

@@ -0,0 +1,52 @@
+import { OrderProductStatus } from "@apps/pyconkr-admin/components/pages/shop/order/types";
+
+// 주문 목록 필터(OrderAdminFilterSet)를 상품 단위 filterset(OrderProductRelationAdminFilterSet) 키로 옮기는 표.
+// `status` 는 양쪽에 다 있지만 의미가 다르다 — 주문에선 결제 상태, 상품에선 상품 상태(pending/paid/used/refunded).
+// django-filter 는 모르는 키를 조용히 무시하므로, 넘길 키를 명시한 allowlist 로 둔다.
+// 주문 목록에 필터가 새로 생겨도 여기 없으면 자동으로 dropped 에 잡혀 경고로 노출된다 (대상이 몰래 넓어지지 않음).
+const ORDER_PRODUCT_PARAM_BY_ORDER_PARAM: Record<string, string> = {
+  id: "order_id",
+  user_id: "user_id",
+  user_unique_id: "user_unique_id",
+  name: "name",
+  email: "email",
+  imp_id: "imp_id",
+  status: "order_status",
+  first_paid_at_after: "first_paid_at_after",
+  first_paid_at_before: "first_paid_at_before",
+  product_id: "product_id",
+  category_id: "category_id",
+  category_group_id: "category_group_id",
+  event_id: "event_id",
+  // price_min/max 는 의도적으로 제외 — 주문에선 주문 총액, 상품에선 상품 단가라 뜻이 달라 그대로 넘기면 안 된다.
+};
+
+/** 주문 필터 → 상품 필터. `dropped` 는 상품 filterset 이 지원하지 않아 무시된 주문 필터 키. */
+export const toOrderProductParams = (orderParams: Record<string, string>): { params: Record<string, string>; dropped: string[] } => {
+  const params: Record<string, string> = {};
+  const dropped: string[] = [];
+  for (const [key, value] of Object.entries(orderParams)) {
+    const mappedKey = ORDER_PRODUCT_PARAM_BY_ORDER_PARAM[key];
+    if (mappedKey) params[mappedKey] = value;
+    else dropped.push(key);
+  }
+  return { params, dropped };
+};
+
+// 알림 발송 대상 queryset 은 PURCHASED_OR_REFUNDED_STATUS 로 미리 좁혀져 pending 이 애초에 대상이 아니다.
+// 태그는 그런 제약이 없지만, 두 화면 모두 운영상 의미 있는 상태만 고르면 되므로 같은 목록을 쓴다.
+export const SELECTABLE_OPR_STATUSES: OrderProductStatus[] = ["paid", "used", "refunded"];
+
+export type ProductFilterState = {
+  productIds: (string | number)[];
+  statuses: OrderProductStatus[];
+  ticketOnly: boolean;
+};
+
+export const EMPTY_PRODUCT_FILTER: ProductFilterState = { productIds: [], statuses: [], ticketOnly: false };
+
+export const productFilterParams = (productFilter: ProductFilterState): Record<string, string> => ({
+  ...(productFilter.productIds.length ? { product_id: productFilter.productIds.join(",") } : {}),
+  ...(productFilter.statuses.length ? { status: productFilter.statuses.join(",") } : {}),
+  ...(productFilter.ticketOnly ? { is_ticket: "true" } : {}),
+});