feat(docs): story 기본 폰트를 지정해요

(cherry picked from commit 87521fb)
daangn · Nov 20, 2024 · 7cbca38 · 7cbca38
1 parent e911581
commit 7cbca38
Showing 1 changed file with 22 additions and 28 deletions.
diff --git a/docs/stories/components/decorator.tsx b/docs/stories/components/decorator.tsx
@@ -1,34 +1,39 @@
 import type { Decorator } from "@storybook/react";
+import type { DetailedHTMLProps, 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"`,
+  },
+};
+
 export const SeedThemeDecorator: Decorator = (Story, ctx) => {
   if (ctx.name === STORY_LIGHT_THEME) {
     return (
-      <html
-        lang="ko"
-        data-seed="light-only"
-        data-seed-scale-color="light"
-        data-seed-scale-letter-spacing="ios"
-        style={{ display: "flex", flexDirection: "column", padding: "0 20px" }}
-      >
+      <html {...DEFAULT_PROPERTIES} data-seed="light-only" data-seed-scale-color="light">
         <Story />
       </html>
     );
   }
 
   if (ctx.name === STORY_DARK_THEME) {
     return (
-      <html
-        lang="ko"
-        data-seed="dark-only"
-        data-seed-scale-color="dark"
-        data-seed-scale-letter-spacing="ios"
-        style={{ display: "flex", flexDirection: "column", padding: "0 20px" }}
-      >
+      <html {...DEFAULT_PROPERTIES} data-seed="dark-only" data-seed-scale-color="dark">
         <Story />
       </html>
     );
@@ -49,29 +54,18 @@ export const SeedThemeDecorator: Decorator = (Story, ctx) => {
 
     return (
       <html
-        lang="ko"
+        {...DEFAULT_PROPERTIES}
         data-seed="light-only"
         data-seed-scale-color="light"
-        data-seed-scale-letter-spacing="ios"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          padding: "0 20px",
-          fontSize: fontScaleMap[fontScale],
-        }}
+        style={{ ...DEFAULT_PROPERTIES.style, fontSize: fontScaleMap[fontScale] }}
       >
         <Story />
       </html>
     );
   }
 
   return (
-    <html
-      lang="ko"
-      data-seed="light-only"
-      data-seed-scale-color="light"
-      data-seed-scale-letter-spacing="ios"
-    >
+    <html {...DEFAULT_PROPERTIES} data-seed="light-only" data-seed-scale-color="light">
       <Story />
     </html>
   );