fix: Storybook 인터랙션 & 마크업 문제를 수정해요

daangn · Nov 28, 2024 · bfefb8f · bfefb8f
1 parent 5f1bcd5
commit bfefb8f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 89 deletions.
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
@@ -1,21 +1,44 @@
 <head>
   <meta name="color-scheme" content="light dark" />
   <link rel="icon" href="/favicon.svg" />
-</head>
 
-<style>
-  table {
-    border-collapse: collapse;
-    width: 100%;
-  }
+  <style>
+    html {
+      --base-font-size: 16px;
+      font-size: var(--base-font-size);
+    }
+
+    body {
+      display: "flex";
+      flex-direction: "column";
+      padding: "0 20px";
+      font-family: '-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji';
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
 
-  th, td {
-    border: 1px solid var(--seed-v3-color-stroke-neutral);
-    padding: 8px;
-    text-align: left;
-  }
+    th,
+    td {
+      border: 1px solid var(--seed-v3-color-stroke-neutral);
+      padding: 8px;
+      text-align: left;
+    }
 
-  th {
-    background-color: var(--seed-v3-color-bg-layer-basement);
-  }
-</style>
+    th {
+      background-color: var(--seed-v3-color-bg-layer-basement);
+    }
+  </style>
+
+  <script>
+    document.documentElement.setAttribute("lang", "ko");
+
+    document.documentElement.setAttribute("data-seed", "");
+    document.documentElement.setAttribute(
+      "data-seed-scale-letter-spacing",
+      "ios"
+    );
+  </script>
+</head>
diff --git a/docs/stories/components/decorator.tsx b/docs/stories/components/decorator.tsx
@@ -1,80 +1,40 @@
 import type { Decorator } from "@storybook/react";
-import type { DetailedHTMLProps, HtmlHTMLAttributes } from "react";
+import { useEffect, type DetailedHTMLProps, type HtmlHTMLAttributes } from "react";
 
-const STORY_LIGHT_THEME = "Light Theme";
-const STORY_DARK_THEME = "Dark Theme";
-
-const FONT_SCALING = "Font Scaling";
-
-const DEFAULT_PROPERTIES: DetailedHTMLProps<
-  HtmlHTMLAttributes<HTMLHtmlElement>,
-  HTMLHtmlElement
-> & {
-  [key: string]: unknown;
-} = {
-  lang: "ko",
-  "data-seed-scale-letter-spacing": "ios",
-  style: {
-    display: "flex",
-    flexDirection: "column",
-    padding: "0 20px",
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
-  },
+const STORY_NAMES_THEMES = {
+  LIGHT: "Light Theme",
+  DARK: "Dark Theme",
 };
 
-export const SeedThemeDecorator: Decorator = (Story, ctx) => {
-  if (ctx.name === STORY_LIGHT_THEME) {
-    return (
-      <html {...DEFAULT_PROPERTIES} data-seed="light-only" data-seed-scale-color="light">
-        <body>
-          <Story />
-        </body>
-      </html>
-    );
-  }
-
-  if (ctx.name === STORY_DARK_THEME) {
-    return (
-      <html {...DEFAULT_PROPERTIES} data-seed="dark-only" data-seed-scale-color="dark">
-        <body>
-          <Story />
-        </body>
-      </html>
-    );
-  }
+const STORY_PREFIX_FONT_SCALING = "Font Scaling";
 
-  if (ctx.name.includes(FONT_SCALING)) {
-    const fontScaleMap = {
-      "Extra Small": "0.875rem",
-      Small: "0.9375rem",
-      Medium: "1rem",
-      Large: "1.0625rem",
-      "Extra Large": "1.1875rem",
-      "Extra Extra Large": "1.3125rem",
-      "Extra Extra Extra Large": "1.4375rem",
-    } as const;
-
-    const fontScale = ctx.name.replace(FONT_SCALING, "").trim() as keyof typeof fontScaleMap;
-
-    return (
-      <html
-        {...DEFAULT_PROPERTIES}
-        data-seed="light-only"
-        data-seed-scale-color="light"
-        style={{ ...DEFAULT_PROPERTIES.style, fontSize: fontScaleMap[fontScale] }}
-      >
-        <body>
-          <Story />
-        </body>
-      </html>
-    );
-  }
-
-  return (
-    <html {...DEFAULT_PROPERTIES} data-seed="light-only" data-seed-scale-color="light">
-      <body>
-        <Story />
-      </body>
-    </html>
-  );
+export const SeedThemeDecorator: Decorator = (Story, ctx) => {
+  useEffect(() => {
+    const isDarkTheme = ctx.name === STORY_NAMES_THEMES.DARK;
+
+    document.documentElement.setAttribute("data-seed", isDarkTheme ? "dark-only" : "light-only");
+    document.documentElement.setAttribute("data-seed-scale-color", isDarkTheme ? "dark" : "light");
+
+    if (ctx.name.includes(STORY_PREFIX_FONT_SCALING)) {
+      const fontScaleMap = {
+        "Extra Small": "14px",
+        Small: "15px",
+        Medium: "16px",
+        Large: "17px",
+        "Extra Large": "19px",
+        "Extra Extra Large": "21px",
+        "Extra Extra Extra Large": "23px",
+      } as const;
+
+      const fontScale = ctx.name
+        .replace(STORY_PREFIX_FONT_SCALING, "")
+        .trim() as keyof typeof fontScaleMap;
+
+      document.documentElement.style.fontSize = fontScaleMap[fontScale];
+
+      document.documentElement.style.setProperty("--base-font-size", fontScaleMap[fontScale]);
+    }
+  }, [ctx.name]);
+
+  return <Story />;
 };