feat: 스타일링된 details 아코디언 컴포넌트 추가

Author: MU-Software

packages/common/src/components/index.ts

@@ -9,6 +9,10 @@ import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
 import { Map as MapComponent } from "./mdx_components/map";
+import {
+  PrimaryStyledDetails as PrimaryStyledDetailsComponent,
+  HighlightedStyledDetails as SecondaryStyledDetailsComponent,
+} from "./mdx_components/styled_details";
 import { MDXEditor as MDXEditorComponent } from "./mdx_editor";
 import { PythonKorea as PythonKoreaComponent } from "./pythonkorea";
 
@@ -24,6 +28,8 @@ namespace Components {
   export const ErrorFallback = ErrorFallbackComponent;
 
   export namespace MDX {
+    export const PrimaryStyledDetails = PrimaryStyledDetailsComponent;
+    export const SecondaryStyledDetails = SecondaryStyledDetailsComponent;
     export const Map = MapComponent;
     export type MapPropType = MapComponentPropType;
   }

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

@@ -0,0 +1,82 @@
+import { ExpandMore } from "@mui/icons-material";
+import {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  PaletteColor,
+  styled,
+  SxProps,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import * as React from "react";
+
+type StyledDetailsProps = React.PropsWithChildren<{
+  expandIcon?: React.ReactNode;
+  open?: boolean;
+  summary?: React.ReactNode;
+  actions?: React.ReactNode;
+}>;
+
+type BaseStyledDetailsProps = StyledDetailsProps & {
+  paletteColor: PaletteColor;
+  transparencyOnExpand?: number;
+};
+
+const BaseStyledDetails: React.FC<BaseStyledDetailsProps> = ({
+  expandIcon,
+  open,
+  summary,
+  children,
+  actions,
+  paletteColor,
+  transparencyOnExpand,
+}) => {
+  const StyledAccordion = styled(Accordion)(({ theme }) => ({
+    width: "100%",
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    border: `1px solid ${paletteColor.dark}`,
+    borderRadius: "0.5rem",
+    fontWeight: 500,
+  }));
+
+  const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+    color: paletteColor.dark,
+  }));
+
+  const rootSx: SxProps = {
+    transition: "background-color 0.3s ease",
+    "&.Mui-expanded": {
+      backgroundColor: `color-mix(in srgb, ${paletteColor.light} ${transparencyOnExpand || 10}%, transparent)`,
+    },
+  };
+
+  const DefaultExpandIcon = styled(ExpandMore)(({ theme }) => ({
+    color: paletteColor.dark,
+    fontSize: theme.typography.h4.fontSize,
+  }));
+
+  return (
+    <StyledAccordion expanded={open} disableGutters square elevation={0} slotProps={{ root: { sx: rootSx } }}>
+      {summary && (
+        <StyledAccordionSummary expandIcon={expandIcon || <DefaultExpandIcon />}>
+          {typeof summary === "string" ? <Typography variant="h5">{summary}</Typography> : summary}
+        </StyledAccordionSummary>
+      )}
+      <AccordionDetails sx={{ pt: "0", pb: "1rem", px: "2rem" }}>{children}</AccordionDetails>
+      {actions && <AccordionActions sx={{ pt: "0", pb: "1rem", px: "2rem" }}>{actions}</AccordionActions>}
+    </StyledAccordion>
+  );
+};
+
+export const PrimaryStyledDetails: React.FC<StyledDetailsProps> = (props) => {
+  const { palette } = useTheme();
+  return <BaseStyledDetails {...props} paletteColor={palette.primary} transparencyOnExpand={20} />;
+};
+
+export const HighlightedStyledDetails: React.FC<StyledDetailsProps> = (props) => {
+  const { palette } = useTheme();
+  return <BaseStyledDetails {...props} paletteColor={palette.highlight} transparencyOnExpand={10} />;
+};