feat: sitemap로 외부 링크를 갈 수 있도록 수정

Author: MU-Software

apps/pyconkr/src/components/layout/Header/index.tsx

@@ -72,7 +72,13 @@ const Header: React.FC = () => {
               {Object.values(siteMapNode.children)
                 .filter((s) => !s.hide)
                 .map((r) => (
-                  <Link key={r.id} to={r.route_code} onClick={resetDepths}>
+                  <Link
+                    key={r.id}
+                    onClick={resetDepths}
+                    target={R.isString(r.external_link) ? "_blank" : undefined}
+                    rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                    to={r.external_link || r.route_code}
+                  >
                     <Button key={r.id} onMouseEnter={() => setDepth1(r)} sx={{ minWidth: 0, textTransform: "none" }}>
                       {r.name}
                     </Button>
@@ -100,7 +106,9 @@ const Header: React.FC = () => {
                             onMouseEnter={() => setDepth2(r)}
                             // 하위 depth가 있는 경우, 하위 depth를 선택할 수 있도록 유지하기 위해 depth2도 유지합니다.
                             onMouseLeave={() => R.isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
-                            to={getDepth2Route(r.route_code)}
+                            target={R.isString(r.external_link) ? "_blank" : undefined}
+                            rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                            to={r.external_link || getDepth2Route(r.route_code)}
                           />
                         ))}
                     </Stack>
@@ -120,7 +128,9 @@ const Header: React.FC = () => {
                                 onClick={resetDepths}
                                 onMouseEnter={() => setDepth3(r)}
                                 onMouseLeave={() => setDepth3(undefined)}
-                                to={getDepth3Route(r?.route_code)}
+                                target={R.isString(r.external_link) ? "_blank" : undefined}
+                                rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                                to={r.external_link || getDepth3Route(r?.route_code)}
                               />
                             ))}
                         </Stack>

apps/pyconkr/src/components/pages/dynamic_route.tsx

@@ -135,7 +135,11 @@ export const RouteRenderer: React.FC = ErrorBoundary.with(
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { siteMapNode, currentSiteMapDepth } = useAppContext();
     const routeInfo = !R.isEmpty(currentSiteMapDepth) && currentSiteMapDepth[currentSiteMapDepth.length - 1];
-    return !(siteMapNode && routeInfo) ? <WaitedCenteredLoadingPage /> : <PageRenderer id={routeInfo.page} />;
+
+    if (!(siteMapNode && routeInfo)) return <WaitedCenteredLoadingPage />;
+    if (R.isString(routeInfo.page)) return <PageRenderer id={routeInfo.page} />;
+    if (R.isString(routeInfo.external_link)) window.location.replace(routeInfo.external_link);
+    return <PageNotFound />;
   })
 );
 

packages/common/src/schemas/backendAPI.ts

@@ -20,19 +20,21 @@ namespace BackendAPISchemas {
     name: string;
     order: number;
     parent_sitemap: string | null;
-    page: string;
     hide: boolean;
+    page: string | null;
+    external_link: string | null;
   };
 
   export type NestedSiteMapSchema = {
     id: string;
     route_code: string;
     name: string;
     order: number;
-    page: string;
     hide: boolean;
     parent_sitemap: string | null;
     children: NestedSiteMapSchema[];
+    page: string | null;
+    external_link: string | null;
   };
 
   export type SectionSchema = {

packages/common/src/schemas/backendAdminAPI.ts

@@ -63,8 +63,9 @@ namespace BackendAdminAPISchemas {
     name_en: string;
     order: number;
     parent_sitemap: string | null;
-    page: string;
     hide: boolean;
+    page: string | null;
+    external_link: string | null;
   };
 
   export type NestedSiteMapSchema = {
@@ -74,9 +75,10 @@ namespace BackendAdminAPISchemas {
     name_en: string;
     order: number;
     parent_sitemap: string | null;
-    page: string;
     hide: boolean;
     children: NestedSiteMapSchema[];
+    page: string | null;
+    external_link: string | null;
   };
 
   export type PageSectionBulkUpdateSchema = PageSectionSchema | Omit<PageSectionSchema, "id">;

packages/common/src/utils/api.ts

@@ -5,7 +5,6 @@ type GFlatSiteMap = {
   route_code: string;
   order: number;
   parent_sitemap: string | null;
-  page: string;
   hide: boolean;
 };
 type GNestedSiteMap<T = GFlatSiteMap> = T & { children: GNestedSiteMap<T>[] };