feat: 개인후원자 목록 컴포넌트 추가

Author: MU-Software

apps/pyconkr-admin/src/consts/mdx_components.ts

@@ -154,6 +154,7 @@ const PythonKRShopMDXComponents: MDXComponents = {
   Shop__Feature__ProductImageCardList: Shop.Components.Features.ProductImageCardList,
   Shop__Feature__OrderList: Shop.Components.Features.OrderList,
   Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
+  Shop__Feature__PatronList: Shop.Components.Features.PatronList,
 };
 
 export const PyConKRMDXComponents = {

apps/pyconkr/src/consts/mdx_components.ts

@@ -154,6 +154,7 @@ const PythonKRShopMDXComponents: MDXComponents = {
   Shop__Feature__ProductImageCardList: Shop.Components.Features.ProductImageCardList,
   Shop__Feature__OrderList: Shop.Components.Features.OrderList,
   Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
+  Shop__Feature__PatronList: Shop.Components.Features.PatronList,
 };
 
 export const PyConKRMDXComponents = {

packages/shop/src/apis/index.ts

@@ -133,6 +133,11 @@ namespace ShopAPIs {
       `v1/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
       data.options
     );
+
+  /**
+   * 후원자 목록을 가져옵니다.
+   */
+  export const listPatrons = (client: ShopAPIClient, year: number) => () => client.get<ShopSchemas.Patron[]>("v1/ext/patron/", { params: { year } });
 }
 
 export default ShopAPIs;

packages/shop/src/components/features/index.ts

@@ -1,5 +1,6 @@
 import { CartStatus as CartStatus_ } from "./cart";
 import { OrderList as OrderList_ } from "./order";
+import { PatronList as PatronList_ } from "./patron_list";
 import { ProductImageCardList as ProductImageCardList_, ProductList as ProductList_ } from "./product";
 import { UserInfo as UserInfo_ } from "./user_status";
 
@@ -9,6 +10,7 @@ namespace FeatureComponents {
   export const ProductList = ProductList_;
   export const ProductImageCardList = ProductImageCardList_;
   export const UserInfo = UserInfo_;
+  export const PatronList = PatronList_;
 }
 
 export default FeatureComponents;

packages/shop/src/components/features/patron_list.tsx

@@ -0,0 +1,21 @@
+import { CircularProgress, Stack, Typography } from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import * as React from "react";
+
+import ShopHooks from "../../hooks";
+
+const InnerPatronList: React.FC<{ year: number }> = ErrorBoundary.with(
+  { fallback: <>개인후원자 목록을 불러오는 중 문제가 발생했습니다.</> },
+  Suspense.with({ fallback: <CircularProgress /> }, ({ year }) => {
+    const shopAPIClient = ShopHooks.useShopClient();
+    const { data } = ShopHooks.usePatrons(shopAPIClient, year);
+    return data.map((patron) => (
+      <Stack key={patron.name} spacing={1} sx={{ my: 2 }}>
+        <Typography variant="h6" fontWeight="700" children={patron.name} />
+        {patron.contribution_message && <Typography variant="subtitle1" children={patron.contribution_message} />}
+      </Stack>
+    ));
+  })
+);
+
+export const PatronList: React.FC<{ year: number }> = ({ year }) => <Stack children={<InnerPatronList year={year} />} />;

packages/shop/src/hooks/index.ts

@@ -12,6 +12,7 @@ const QUERY_KEYS = {
   PRODUCT_LIST: ["query", "shop", "products"],
   CART_INFO: ["query", "shop", "cart"],
   ORDER_LIST: ["query", "shop", "orders"],
+  PATRONS: ["query", "shop", "patrons"],
 };
 
 const MUTATION_KEYS = {
@@ -135,6 +136,12 @@ namespace ShopHooks {
       mutationFn: ShopAPIs.patchOrderOptions(client),
       meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
     });
+
+  export const usePatrons = (client: ShopAPIClient, year: number) =>
+    useSuspenseQuery({
+      queryKey: [...QUERY_KEYS.PATRONS, year],
+      queryFn: ShopAPIs.listPatrons(client, year),
+    });
 }
 
 export default ShopHooks;

packages/shop/src/schemas/index.ts

@@ -227,6 +227,11 @@ namespace ShopSchemas {
     }[];
   };
 
+  export type Patron = {
+    name: string;
+    contribution_message: string;
+  };
+
   export const isObjectErrorResponseSchema = (obj?: unknown): obj is ShopSchemas.ErrorResponseSchema => {
     return (
       R.isPlainObject(obj) &&