feat: 숨기려는 sitemap은 상단에 노출되지 않도록 수정

Author: MU-Software

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

@@ -61,13 +61,15 @@ const Header: React.FC = () => {
         {siteMapNode ? (
           <>
             <Stack direction="row" alignItems="center" justifyContent="center" spacing={2}>
-              {Object.values(siteMapNode.children).map((r) => (
-                <Link key={r.id} to={r.route_code} onClick={resetDepths}>
-                  <Button key={r.id} onMouseEnter={() => setDepth1(r)} sx={{ minWidth: 0, textTransform: "none" }}>
-                    {r.name}
-                  </Button>
-                </Link>
-              ))}
+              {Object.values(siteMapNode.children)
+                .filter((s) => !s.hide)
+                .map((r) => (
+                  <Link key={r.id} to={r.route_code} onClick={resetDepths}>
+                    <Button key={r.id} onMouseEnter={() => setDepth1(r)} sx={{ minWidth: 0, textTransform: "none" }}>
+                      {r.name}
+                    </Button>
+                  </Link>
+                ))}
             </Stack>
 
             {navState.depth1 && (
@@ -79,36 +81,40 @@ const Header: React.FC = () => {
                   <Depth1to2Divider flexItem />
                   <Stack direction="row" spacing={4}>
                     <Stack spacing={1.25}>
-                      {Object.values(navState.depth1.children).map((r) => (
-                        <Depth2Item
-                          children={r.name}
-                          className={r.id === navState.depth2?.id ? "active" : ""}
-                          key={r.id}
-                          onClick={resetDepths}
-                          onMouseEnter={() => setDepth2(r)}
-                          // 하위 depth가 있는 경우, 하위 depth를 선택할 수 있도록 유지하기 위해 depth2도 유지합니다.
-                          onMouseLeave={() => R.isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
-                          to={getDepth2Route(r.route_code)}
-                        />
-                      ))}
+                      {Object.values(navState.depth1.children)
+                        .filter((s) => !s.hide)
+                        .map((r) => (
+                          <Depth2Item
+                            children={r.name}
+                            className={r.id === navState.depth2?.id ? "active" : ""}
+                            key={r.id}
+                            onClick={resetDepths}
+                            onMouseEnter={() => setDepth2(r)}
+                            // 하위 depth가 있는 경우, 하위 depth를 선택할 수 있도록 유지하기 위해 depth2도 유지합니다.
+                            onMouseLeave={() => R.isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
+                            to={getDepth2Route(r.route_code)}
+                          />
+                        ))}
                     </Stack>
 
                     {navState.depth2 && !R.isEmpty(navState.depth2.children) && (
                       <>
                         {!R.isEmpty(navState.depth2.children) && <Depth2to3Divider orientation="vertical" flexItem />}
 
                         <Stack spacing={1.5}>
-                          {Object.values(navState.depth2.children).map((r) => (
-                            <Depth3Item
-                              children={r.name}
-                              className={r.id === navState.depth3?.id ? "active" : ""}
-                              key={r.id}
-                              onClick={resetDepths}
-                              onMouseEnter={() => setDepth3(r)}
-                              onMouseLeave={() => setDepth3(undefined)}
-                              to={getDepth3Route(r?.route_code)}
-                            />
-                          ))}
+                          {Object.values(navState.depth2.children)
+                            .filter((s) => !s.hide)
+                            .map((r) => (
+                              <Depth3Item
+                                children={r.name}
+                                className={r.id === navState.depth3?.id ? "active" : ""}
+                                key={r.id}
+                                onClick={resetDepths}
+                                onMouseEnter={() => setDepth3(r)}
+                                onMouseLeave={() => setDepth3(undefined)}
+                                to={getDepth3Route(r?.route_code)}
+                              />
+                            ))}
                         </Stack>
                       </>
                     )}

packages/common/src/components/index.ts

@@ -8,6 +8,7 @@ import {
   NetworkLottiePlayer as NetworkLottiePlayerComponent,
 } from "./lottie";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
+import { Confetti as ConfettiComponent } from "./mdx_components/confetti";
 import {
   FAQAccordion as FAQAccordionComponent,
   type FAQAccordionProps as FAQAccordionPropsType,
@@ -37,6 +38,7 @@ namespace Components {
   export const LinkHandler = LinkHandlerComponent;
 
   export namespace MDX {
+    export const Confetti = ConfettiComponent;
     export const StyledFullWidthButton = StyledFullWidthButtonComponent;
     export const PrimaryStyledDetails = PrimaryStyledDetailsComponent;
     export const SecondaryStyledDetails = SecondaryStyledDetailsComponent;

packages/common/src/schemas/backendAPI.ts

@@ -21,6 +21,7 @@ namespace BackendAPISchemas {
     order: number;
     parent_sitemap: string | null;
     page: string;
+    hide: boolean;
   };
 
   export type NestedSiteMapSchema = {
@@ -29,6 +30,7 @@ namespace BackendAPISchemas {
     name: string;
     order: number;
     page: string;
+    hide: boolean;
     children: { [key: string]: NestedSiteMapSchema };
   };