feat: 전체 너비 버튼 추가

Author: MU-Software

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

@@ -137,6 +137,7 @@ const PyConKRCommonMDXComponents: MDXComponents = {
   Common__Components__MDX__SecondaryStyledDetails: Common.Components.MDX.SecondaryStyledDetails,
   Common__Components__MDX__Map: Common.Components.MDX.Map,
   Common__Components__MDX__FAQAccordion: Common.Components.MDX.FAQAccordion,
+  Common__Components__MDX__FullWidthStyledButton: Common.Components.MDX.StyledFullWidthButton,
 };
 
 const PythonKRShopMDXComponents: MDXComponents = {

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

@@ -62,7 +62,7 @@ const Header: React.FC = () => {
           <>
             <Stack direction="row" alignItems="center" justifyContent="center" spacing={2}>
               {Object.values(siteMapNode.children).map((r) => (
-                <Link to={r.route_code} onClick={resetDepths}>
+                <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>

apps/pyconkr/src/consts/mdx_components.ts

@@ -137,6 +137,7 @@ const PyConKRCommonMDXComponents: MDXComponents = {
   Common__Components__MDX__SecondaryStyledDetails: Common.Components.MDX.SecondaryStyledDetails,
   Common__Components__MDX__Map: Common.Components.MDX.Map,
   Common__Components__MDX__FAQAccordion: Common.Components.MDX.FAQAccordion,
+  Common__Components__MDX__FullWidthStyledButton: Common.Components.MDX.StyledFullWidthButton,
 };
 
 const PythonKRShopMDXComponents: MDXComponents = {

packages/common/src/components/index.ts

@@ -1,6 +1,7 @@
 import { CenteredPage as CenteredPageComponent } from "./centered_page";
 import { CommonContextProvider as CommonContextProviderComponent } from "./common_context";
 import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
+import { LinkHandler as LinkHandlerComponent } from "./link_handler";
 import {
   LottieDebugPanel as LottieDebugPanelComponent,
   LottiePlayer as LottiePlayerComponent,
@@ -14,10 +15,12 @@ import {
 } from "./mdx_components/faq_accordion";
 import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
 import { Map as MapComponent } from "./mdx_components/map";
+import { OneDetailsOpener as OneDetailsOpenerComponent } from "./mdx_components/one_details_opener";
 import {
   PrimaryStyledDetails as PrimaryStyledDetailsComponent,
   HighlightedStyledDetails as SecondaryStyledDetailsComponent,
 } from "./mdx_components/styled_details";
+import { StyledFullWidthButton as StyledFullWidthButtonComponent } from "./mdx_components/styled_full_width_button";
 import { MDXEditor as MDXEditorComponent } from "./mdx_editor";
 import { PythonKorea as PythonKoreaComponent } from "./pythonkorea";
 
@@ -31,12 +34,15 @@ namespace Components {
   export const LottiePlayer = LottiePlayerComponent;
   export const NetworkLottiePlayer = NetworkLottiePlayerComponent;
   export const ErrorFallback = ErrorFallbackComponent;
+  export const LinkHandler = LinkHandlerComponent;
 
   export namespace MDX {
+    export const StyledFullWidthButton = StyledFullWidthButtonComponent;
     export const PrimaryStyledDetails = PrimaryStyledDetailsComponent;
     export const SecondaryStyledDetails = SecondaryStyledDetailsComponent;
     export const Map = MapComponent;
     export const FAQAccordion = FAQAccordionComponent;
+    export const OneDetailsOpener = OneDetailsOpenerComponent;
     export type MapPropType = MapComponentPropType;
     export type FAQAccordionProps = FAQAccordionPropsType;
     export type FAQItem = FAQItemType;

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

@@ -0,0 +1,49 @@
+import { Button, ButtonProps, Typography } from "@mui/material";
+import * as React from "react";
+import * as R from "remeda";
+
+import { LinkHandler } from "../link_handler";
+
+type StyledFullWidthButtonPropType = ButtonProps & {
+  link?: string;
+  setBackgroundColor?: boolean;
+  transparency: number;
+};
+
+export const StyledFullWidthButton: React.FC<StyledFullWidthButtonPropType> = ({
+  link,
+  setBackgroundColor,
+  transparency,
+  ...props
+}) => {
+  let children = props.children;
+  if (React.isValidElement(children) && R.isString((children.props as { children: unknown }).children))
+    children = (children.props as { children: unknown }).children as string;
+  if (children) children = <Typography variant="h5" fontSize="1.5rem" children={children} />;
+
+  const button = (
+    <Button
+      fullWidth
+      variant="outlined"
+      sx={({ palette }) => ({
+        borderRadius: "0.5rem",
+        textTransform: "none",
+        color: palette.primary.dark,
+        borderColor: palette.primary.dark,
+        backgroundColor: setBackgroundColor
+          ? `color-mix(in srgb, ${palette.primary.light} ${transparency || 10}%, transparent)`
+          : "transparent",
+        "&:hover": {
+          backgroundColor: setBackgroundColor
+            ? `color-mix(in srgb, ${palette.primary.light} ${transparency || 20}%, transparent)`
+            : `color-mix(in srgb, ${palette.primary.light} ${transparency || 10}%, transparent)`,
+        },
+        "&.MuiButton-sizeLarge": { height: "3.5rem" },
+      })}
+      {...props}
+      children={children}
+    />
+  );
+
+  return link ? <LinkHandler href={link} children={button} /> : button;
+};