feat: 주문의 알림 전송 기능 관련 UI 구현 및 개선

Author: MU-Software

apps/pyconkr-admin/src/components/pages/notification/channels.ts

@@ -1,31 +1,50 @@
+import { NotificationChannelValue } from "@frontend/common/schemas/backendAdminAPI";
+
 // 알림 채널별 admin 라우트 설정. 라우트 컨벤션(<app>/<model_name>)에 따라 app 은 모두 "notification",
 // resource 는 채널·종류별 모델명을 사용한다.
 export type NotificationChannelKind = "email" | "kakao" | "sms";
 
 export type NotificationChannel = {
   app: string;
   kind: NotificationChannelKind;
+  label: string;
+  // 백엔드 API 가 body 로 받는 채널 식별자 (notification.channels.NotificationChannel).
+  value: NotificationChannelValue;
   templateResource: string;
   historyResource: string;
 };
 
 export const EMAIL_CHANNEL: NotificationChannel = {
   app: "notification",
   kind: "email",
+  label: "이메일",
+  value: "email",
   templateResource: "emailnotificationtemplate",
   historyResource: "emailnotificationhistory",
 };
 
 export const KAKAO_CHANNEL: NotificationChannel = {
   app: "notification",
   kind: "kakao",
+  label: "카카오 알림톡",
+  value: "nhn_cloud_kakao_alimtalk",
   templateResource: "nhncloudkakaoalimtalknotificationtemplate",
   historyResource: "nhncloudkakaoalimtalknotificationhistory",
 };
 
 export const SMS_CHANNEL: NotificationChannel = {
   app: "notification",
   kind: "sms",
+  label: "SMS",
+  value: "nhn_cloud_sms",
   templateResource: "nhncloudsmsnotificationtemplate",
   historyResource: "nhncloudsmsnotificationhistory",
 };
+
+export const NOTIFICATION_CHANNELS: NotificationChannel[] = [EMAIL_CHANNEL, SMS_CHANNEL, KAKAO_CHANNEL];
+
+export const CHANNEL_BY_VALUE: Record<NotificationChannelValue, NotificationChannel> = {
+  email: EMAIL_CHANNEL,
+  nhn_cloud_sms: SMS_CHANNEL,
+  nhn_cloud_kakao_alimtalk: KAKAO_CHANNEL,
+};

apps/pyconkr-admin/src/components/pages/notification/send_history_create.tsx

@@ -1,5 +1,6 @@
 import { Fieldset } from "@frontend/common/components";
 import { useBackendAdminClient, useCreateMutation, useListPaginatedQuery, useRenderTemplateMutation } from "@frontend/common/hooks/useAdminAPI";
+import { NotificationTemplateSchema } from "@frontend/common/schemas/backendAdminAPI";
 import { Add, Close, Delete, Send, Visibility } from "@mui/icons-material";
 import {
   Box,
@@ -46,17 +47,6 @@ type NotificationHistoryCreateRequest = {
   sent_to_list: NotificationHistorySentToCreateRequest[];
 };
 
-type NotificationTemplateSchema = {
-  id: string;
-  str_repr: string;
-  code: string;
-  title: string;
-  description: string;
-  data: string;
-  sent_from: string;
-  template_variables: string[];
-};
-
 type OnMemorySentTo = {
   trackId: string;
   recipient: string;

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

@@ -28,6 +28,7 @@ import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fal
 import { ORDER_PRODUCT_STATUS_LABEL, PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
 import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
+import { OrderNotificationDialog } from "./notification_dialog";
 import { RefundDialog } from "./refund_dialog";
 import { OrderAdmin, SimpleCustomerInfo, SimpleOrderProductRelation } from "./types";
 
@@ -94,6 +95,7 @@ const CustomerInfoTab: FC<{ order: OrderAdmin }> = ({ order }) => {
 const OrderProductRow: FC<{ order: OrderAdmin; relation: SimpleOrderProductRelation }> = ({ order, relation }) => {
   const status = ORDER_PRODUCT_STATUS_LABEL[relation.status];
   const [refundOpen, setRefundOpen] = useState(false);
+  const [notifyOpen, setNotifyOpen] = useState(false);
   const canRefund = canRefundProduct(relation);
   return (
     <>
@@ -108,16 +110,21 @@ const OrderProductRow: FC<{ order: OrderAdmin; relation: SimpleOrderProductRelat
         <TableCell align="right">{formatPrice(relation.price)}</TableCell>
         <TableCell align="right">{relation.donation_price > 0 ? formatPrice(relation.donation_price) : "—"}</TableCell>
         <TableCell align="right">
-          <Button
-            size="small"
-            variant="outlined"
-            color="error"
-            startIcon={<CurrencyExchange />}
-            onClick={() => setRefundOpen(true)}
-            disabled={!canRefund}
-          >
-            환불
-          </Button>
+          <Stack direction="row" spacing={1} justifyContent="flex-end">
+            <Button size="small" variant="outlined" startIcon={<NotificationsActive />} onClick={() => setNotifyOpen(true)}>
+              알림
+            </Button>
+            <Button
+              size="small"
+              variant="outlined"
+              color="error"
+              startIcon={<CurrencyExchange />}
+              onClick={() => setRefundOpen(true)}
+              disabled={!canRefund}
+            >
+              환불
+            </Button>
+          </Stack>
         </TableCell>
       </TableRow>
       <TableRow>
@@ -197,6 +204,7 @@ const OrderProductRow: FC<{ order: OrderAdmin; relation: SimpleOrderProductRelat
         </TableCell>
       </TableRow>
       <RefundDialog open={refundOpen} onClose={() => setRefundOpen(false)} order={order} kind="product" relation={relation} />
+      {notifyOpen && <OrderNotificationDialog scope={{ kind: "orderProduct", orderProductId: relation.id }} onClose={() => setNotifyOpen(false)} />}
     </>
   );
 };
@@ -289,6 +297,7 @@ const InnerOrderEditor: FC = ErrorBoundary.with(
     const client = useBackendAdminClient();
     const [tab, setTab] = useState(0);
     const [refundOpen, setRefundOpen] = useState(false);
+    const [notifyOpen, setNotifyOpen] = useState(false);
 
     const orderQuery = useRetrieveQuery<OrderAdmin>(client, "shop", "order", id ?? "");
     const order = orderQuery.data;
@@ -308,13 +317,6 @@ const InnerOrderEditor: FC = ErrorBoundary.with(
     const status = PAYMENT_STATUS_LABEL[order.current_status] ?? { label: order.current_status, color: "default" as const };
     const canRefund = canRefundOrder(order);
 
-    const onNotify = () => {
-      navigate({
-        pathname: "/notification/notification/create",
-        search: `?order_id=${order.id}`,
-      });
-    };
-
     return (
       <Stack sx={{ flexGrow: 1, width: "100%", minHeight: "100%" }} spacing={3}>
         <Stack direction="row" justifyContent="space-between" alignItems="flex-start" flexWrap="wrap" gap={2}>
@@ -341,7 +343,7 @@ const InnerOrderEditor: FC = ErrorBoundary.with(
           </Stack>
 
           <Stack direction="row" spacing={1}>
-            <Button variant="outlined" startIcon={<NotificationsActive />} onClick={onNotify}>
+            <Button variant="outlined" startIcon={<NotificationsActive />} onClick={() => setNotifyOpen(true)}>
               알림 발송
             </Button>
             <Button variant="contained" color="error" startIcon={<CurrencyExchange />} onClick={() => setRefundOpen(true)} disabled={!canRefund}>
@@ -400,6 +402,7 @@ const InnerOrderEditor: FC = ErrorBoundary.with(
         </Box>
 
         <RefundDialog open={refundOpen} onClose={() => setRefundOpen(false)} order={order} kind="order" />
+        {notifyOpen && <OrderNotificationDialog scope={{ kind: "order", orderId: order.id }} onClose={() => setNotifyOpen(false)} />}
       </Stack>
     );
   })

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 } from "@mui/icons-material";
+import { FileDownload, FileUpload, RestartAlt, Send } from "@mui/icons-material";
 import {
   Button,
   Chip,
@@ -26,6 +26,7 @@ import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fal
 import { PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
 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 { CategoryGroupAdminWithCategories } from "@apps/pyconkr-admin/components/pages/shop/product/types";
 
 import { OrderAdmin, PaymentStatus } from "./types";
@@ -84,23 +85,26 @@ const InnerOrderList: FC = ErrorBoundary.with(
     const page = Number(searchParams.get("page") ?? 1);
     const pageSize = Number(searchParams.get("page_size") ?? DEFAULT_PAGE_SIZE);
 
-    // apiParams derives from the URL (the "applied" state); local filter inputs only update the URL on Apply.
-    const apiParams: Record<string, string> = { page: String(page), page_size: String(pageSize) };
+    // filterParams derives from the URL (the "applied" state); local filter inputs only update the URL on Apply.
+    // 알림 발송은 페이지네이션 없이 같은 필터 전체를 대상으로 하므로 page/page_size 와 분리해 둔다.
+    const filterParams: Record<string, string> = {};
     for (const key of FILTER_KEYS) {
       const value = searchParams.get(key);
       if (!value) continue;
       if (key === "status" && value === "all") continue;
       if (key === "name" || key === "email" || key === "imp_id") {
         const trimmed = value.trim();
-        if (trimmed) apiParams[key] = trimmed;
+        if (trimmed) filterParams[key] = trimmed;
       } else {
-        apiParams[key] = value;
+        filterParams[key] = value;
       }
     }
+    const apiParams: Record<string, string> = { page: String(page), page_size: String(pageSize), ...filterParams };
 
     const [filters, setFilters] = useState<FilterState>(() => readFilters(searchParams));
     const [exportDialogOpen, setExportDialogOpen] = useState(false);
     const [importDialogOpen, setImportDialogOpen] = useState(false);
+    const [notificationDialogOpen, setNotificationDialogOpen] = useState(false);
 
     // Re-sync local form state when the URL changes externally (browser back/forward, pagination).
     useEffect(() => {
@@ -284,10 +288,17 @@ const InnerOrderList: FC = ErrorBoundary.with(
           <Button variant="outlined" size="small" startIcon={<FileDownload />} onClick={() => setExportDialogOpen(true)}>
             내보내기
           </Button>
+          <Button variant="outlined" size="small" color="secondary" startIcon={<Send />} onClick={() => setNotificationDialogOpen(true)}>
+            알림 발송
+          </Button>
         </Stack>
 
         <OrderImportDialog open={importDialogOpen} onClose={() => setImportDialogOpen(false)} />
         <OrderExportDialog open={exportDialogOpen} onClose={() => setExportDialogOpen(false)} />
+        {/* 열릴 때만 마운트 — 템플릿 목록 조회와 폼 상태를 매번 새로 시작한다. */}
+        {notificationDialogOpen && (
+          <OrderNotificationDialog scope={{ kind: "orderFilter", params: filterParams }} onClose={() => setNotificationDialogOpen(false)} />
+        )}
 
         <Table>
           <TableHead>