feat: 발표 목록이 행사 및 발표 타입을 필터링할 수 있도록 수정

Author: MU-Software

packages/common/src/apis/index.ts

@@ -6,7 +6,8 @@ namespace BackendAPIs {
   export const listSiteMaps = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
   export const retrievePage = (client: BackendAPIClient) => (id: string) => client.get<BackendAPISchemas.PageSchema>(`v1/cms/page/${id}/`);
   export const listSponsors = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.SponsorTierSchema[]>("v1/event/sponsor/");
-  export const listSessions = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.SessionSchema[]>("v1/event/presentation/");
+  export const listSessions = (client: BackendAPIClient, params?: BackendAPISchemas.SessionQueryParameterSchema) => () =>
+    client.get<BackendAPISchemas.SessionSchema[]>("v1/event/presentation/", { params });
 }
 
 export default BackendAPIs;

packages/common/src/components/mdx_components/session_list.tsx

@@ -46,12 +46,18 @@ const SessionItem: React.FC<{ session: BackendAPISchemas.SessionSchema }> = Susp
   );
 });
 
-export const SessionList: React.FC = ErrorBoundary.with(
+type SessionListPropType = {
+  event?: string;
+  types?: string[];
+};
+
+export const SessionList: React.FC<SessionListPropType> = ErrorBoundary.with(
   { fallback: ErrorFallback },
-  Suspense.with({ fallback: <CircularProgress /> }, () => {
+  Suspense.with({ fallback: <CircularProgress /> }, ({ event, types }) => {
     const { language } = Hooks.Common.useCommonContext();
     const backendAPIClient = Hooks.BackendAPI.useBackendClient();
-    const { data: sessions } = Hooks.BackendAPI.useSessionsQuery(backendAPIClient);
+    const params = { ...(event && { event }), ...(types && { types }) };
+    const { data: sessions } = Hooks.BackendAPI.useSessionsQuery(backendAPIClient, params);
 
     const warningMessage =
       language === "ko"
@@ -80,17 +86,21 @@ export const SessionList: React.FC = ErrorBoundary.with(
         <Box>
           <Typography variant="body2" sx={{ width: "100%", textAlign: "right", my: 0.5, fontSize: "0.6rem" }} children={warningMessage} />
           <StyledDivider />
-          <Stack direction="row" sx={{ flexWrap: "wrap", justifyContent: "center", gap: "0.1rem 0.2rem", my: 1 }}>
-            {categories.map((cat) => (
-              <CategoryButtonStyle
-                key={cat.id}
-                onClick={() => toggleCategory(cat.id)}
-                children={cat.name}
-                selected={selectedCategoryIds.some((selectedCatId) => selectedCatId === cat.id)}
-              />
-            ))}
-          </Stack>
-          <StyledDivider />
+          {categories && (
+            <>
+              <Stack direction="row" sx={{ flexWrap: "wrap", justifyContent: "center", gap: "0.1rem 0.2rem", my: 1 }}>
+                {categories.map((cat) => (
+                  <CategoryButtonStyle
+                    key={cat.id}
+                    onClick={() => toggleCategory(cat.id)}
+                    children={cat.name}
+                    selected={selectedCategoryIds.some((selectedCatId) => selectedCatId === cat.id)}
+                  />
+                ))}
+              </Stack>
+              <StyledDivider />
+            </>
+          )}
         </Box>
         {filteredSessions.map((s) => (
           <SessionItem key={s.id} session={s} />

packages/common/src/hooks/useAPI.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 import BackendAPIs from "../apis";
 import { BackendAPIClient } from "../apis/client";
 import BackendContext from "../contexts";
+import BackendAPISchemas from "../schemas/backendAPI";
 
 const QUERY_KEYS = {
   SITEMAP_LIST: ["query", "sitemap", "list"],
@@ -42,10 +43,10 @@ namespace BackendAPIHooks {
       queryFn: BackendAPIs.listSponsors(client),
     });
 
-  export const useSessionsQuery = (client: BackendAPIClient) =>
+  export const useSessionsQuery = (client: BackendAPIClient, params?: BackendAPISchemas.SessionQueryParameterSchema) =>
     useSuspenseQuery({
       queryKey: [...QUERY_KEYS.SESSION_LIST, client.language],
-      queryFn: BackendAPIs.listSessions(client),
+      queryFn: BackendAPIs.listSessions(client, params),
     });
 }
 

packages/common/src/schemas/backendAPI.ts

@@ -70,6 +70,11 @@ namespace BackendAPISchemas {
     }[];
   };
 
+  export type SessionQueryParameterSchema = {
+    event?: string;
+    types?: string[];
+  };
+
   export type SessionSchema = {
     id: string;
     title: string;