From a437d4fec59418327324ec537fd18840b8cd38c2 Mon Sep 17 00:00:00 2001
From: malangcat <asher@daangn.com>
Date: Tue, 10 Dec 2024 12:28:05 +0900
Subject: [PATCH] chore: ensure consistent eol and re-format

---
 .vscode/settings.json                            |  1 +
 biome.json                                       |  1 +
 .../example/alert-dialog-default-activity.tsx    | 10 ++--------
 .../example/chip-tabs-basic-activity.tsx         |  6 +-----
 docs/components/example/chip-tabs-preview.tsx    |  6 +-----
 docs/components/example/index.json               | 16 ++++++++--------
 docs/components/example/switch-medium.tsx        |  4 +---
 docs/components/example/switch-small.tsx         |  4 +---
 docs/components/example/tabs-alert.tsx           |  8 +-------
 docs/components/example/tabs-layout-fill.tsx     |  8 +-------
 10 files changed, 18 insertions(+), 46 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9cbab031b..af82d8ad5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,4 +19,5 @@
   "auto-close-tag.activationOnLanguage": [
     "mdx"
   ],
+  "files.eol": "\n",
 }
diff --git a/biome.json b/biome.json
index 8311dbaf3..a7f4580ab 100644
--- a/biome.json
+++ b/biome.json
@@ -12,6 +12,7 @@
     "ignore": ["package.json", "**/archive/**/*"],
     "enabled": true,
     "indentStyle": "space",
+    "lineEnding": "lf",
     "lineWidth": 100
   },
   "linter": {
diff --git a/docs/components/example/alert-dialog-default-activity.tsx b/docs/components/example/alert-dialog-default-activity.tsx
index 1d37e5ec3..f909fb589 100644
--- a/docs/components/example/alert-dialog-default-activity.tsx
+++ b/docs/components/example/alert-dialog-default-activity.tsx
@@ -1,11 +1,7 @@
 import * as React from "react";
 
 import { AppScreen } from "@stackflow/plugin-basic-ui";
-import {
-  type ActivityComponentType,
-  useStepFlow,
-  useStack,
-} from "@stackflow/react/future";
+import { type ActivityComponentType, useStepFlow, useStack } from "@stackflow/react/future";
 
 import { ActionButton } from "seed-design/ui/action-button";
 import { AlertDialog as UIAlertDialog } from "seed-design/ui/alert-dialog";
@@ -18,9 +14,7 @@ declare module "@stackflow/config" {
   }
 }
 
-const AlertDialogDefaultActivity: ActivityComponentType<
-  "AlertDialogDefault"
-> = ({ params }) => {
+const AlertDialogDefaultActivity: ActivityComponentType<"AlertDialogDefault"> = ({ params }) => {
   const { alert } = params;
   const stack = useStack();
   const { pushStep, popStep } = useStepFlow("AlertDialogDefault");
diff --git a/docs/components/example/chip-tabs-basic-activity.tsx b/docs/components/example/chip-tabs-basic-activity.tsx
index 82269da4e..2ce536678 100644
--- a/docs/components/example/chip-tabs-basic-activity.tsx
+++ b/docs/components/example/chip-tabs-basic-activity.tsx
@@ -2,11 +2,7 @@
 
 import * as React from "react";
 
-import {
-  ChipTabs,
-  ChipTabTrigger,
-  ChipTabTriggerList,
-} from "seed-design/ui/chip-tabs";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
 
 import type { ActivityComponentType } from "@stackflow/react/future";
 import AppScreen from "@/components/stackflow/ActivityLayout";
diff --git a/docs/components/example/chip-tabs-preview.tsx b/docs/components/example/chip-tabs-preview.tsx
index ff4d7aab0..bf9f7bf57 100644
--- a/docs/components/example/chip-tabs-preview.tsx
+++ b/docs/components/example/chip-tabs-preview.tsx
@@ -1,11 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  ChipTabs,
-  ChipTabTrigger,
-  ChipTabTriggerList,
-} from "seed-design/ui/chip-tabs";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
 
 export default function ChipTabsPreview() {
   const [value, setValue] = React.useState("1");
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index 0125af6e3..38fae7961 100644
--- a/docs/components/example/index.json
+++ b/docs/components/example/index.json
@@ -33,7 +33,7 @@
   "actionable-inline-banner-warning-weak": "import { ActionableInlineBanner, InlineBannerDescription } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWarningWeak() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"warningWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      <InlineBannerDescription>사업자 정보를 등록해주세요.</InlineBannerDescription>\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-with-icon-and-title-text": "import { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\nimport {\n  ActionableInlineBanner,\n  InlineBannerDescription,\n  InlineBannerTitle,\n} from \"seed-design/ui/inline-banner\";\n\nexport default function ActionableInlineBannerWithIconAndTitleText() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"informativeWeak\"\n      icon={<IconILowercaseSerifCircleFill />}\n    >\n      <InlineBannerTitle>예약</InlineBannerTitle>\n      <InlineBannerDescription>다른 사람과 예약된 물품이 있어요.</InlineBannerDescription>\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-with-icon": "import { ActionableInlineBanner, InlineBannerDescription } from \"seed-design/ui/inline-banner\";\nimport { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWithIcon() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"informativeWeak\"\n      icon={<IconILowercaseSerifCircleFill />}\n    >\n      <InlineBannerDescription>다른 사람과 예약된 물품이 있어요.</InlineBannerDescription>\n    </ActionableInlineBanner>\n  );\n}",
-  "alert-dialog-default-activity": "import * as React from \"react\";\n\nimport { AppScreen } from \"@stackflow/plugin-basic-ui\";\nimport {\n  type ActivityComponentType,\n  useStepFlow,\n  useStack,\n} from \"@stackflow/react/future\";\n\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { AlertDialog as UIAlertDialog } from \"seed-design/ui/alert-dialog\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    AlertDialogDefault: {\n      alert: boolean;\n    };\n  }\n}\n\nconst AlertDialogDefaultActivity: ActivityComponentType<\n  \"AlertDialogDefault\"\n> = ({ params }) => {\n  const { alert } = params;\n  const stack = useStack();\n  const { pushStep, popStep } = useStepFlow(\"AlertDialogDefault\");\n\n  const appBarLeft = () => <div>Left</div>;\n  const appBarRight = () => <div>Right</div>;\n\n  const onInteractOutside = () => {\n    popStep();\n  };\n\n  const onButtonClick = () => {\n    pushStep({\n      alert: true,\n    });\n  };\n\n  const mainActivitySteps = stack.activities[0].steps;\n\n  return (\n    <AppScreen\n      appBar={{\n        renderLeft: appBarLeft,\n        renderRight: appBarRight,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          height: \"100%\",\n          width: \"100%\",\n        }}\n      >\n        <ActionButton onClick={onButtonClick}>Open</ActionButton>\n        {alert && (\n          <UIAlertDialog\n            onInteractOutside={onInteractOutside}\n            title=\"Title\"\n            description=\"Description\"\n          />\n        )}\n      </div>\n\n      <div\n        style={{\n          position: \"fixed\",\n          bottom: \"0\",\n          right: \"0\",\n          padding: \"8px\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: \"12px\",\n            color: \"var(--seed-semantic-color-divider-3)\",\n          }}\n        >\n          Steps\n        </span>\n        {mainActivitySteps.map((step) => (\n          <div\n            style={{\n              fontSize: \"12px\",\n              width: \"1rem\",\n              height: \"1rem\",\n              borderRadius: \"50%\",\n              border: \"1px solid var(--seed-semantic-color-divider-3)\",\n              margin: \"8px\",\n            }}\n            key={step.id}\n          />\n        ))}\n      </div>\n\n      <div\n        style={{\n          position: \"fixed\",\n          bottom: \"0\",\n          left: \"0\",\n          padding: \"8px\",\n          zIndex: 1000,\n        }}\n      >\n        <ActionButton onClick={() => popStep}>Back</ActionButton>\n      </div>\n    </AppScreen>\n  );\n};\n\nexport default AlertDialogDefaultActivity;\n\nAlertDialogDefaultActivity.displayName = \"AlertDialogDefaultActivity\";",
+  "alert-dialog-default-activity": "import * as React from \"react\";\n\nimport { AppScreen } from \"@stackflow/plugin-basic-ui\";\nimport { type ActivityComponentType, useStepFlow, useStack } from \"@stackflow/react/future\";\n\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { AlertDialog as UIAlertDialog } from \"seed-design/ui/alert-dialog\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    AlertDialogDefault: {\n      alert: boolean;\n    };\n  }\n}\n\nconst AlertDialogDefaultActivity: ActivityComponentType<\"AlertDialogDefault\"> = ({ params }) => {\n  const { alert } = params;\n  const stack = useStack();\n  const { pushStep, popStep } = useStepFlow(\"AlertDialogDefault\");\n\n  const appBarLeft = () => <div>Left</div>;\n  const appBarRight = () => <div>Right</div>;\n\n  const onInteractOutside = () => {\n    popStep();\n  };\n\n  const onButtonClick = () => {\n    pushStep({\n      alert: true,\n    });\n  };\n\n  const mainActivitySteps = stack.activities[0].steps;\n\n  return (\n    <AppScreen\n      appBar={{\n        renderLeft: appBarLeft,\n        renderRight: appBarRight,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          height: \"100%\",\n          width: \"100%\",\n        }}\n      >\n        <ActionButton onClick={onButtonClick}>Open</ActionButton>\n        {alert && (\n          <UIAlertDialog\n            onInteractOutside={onInteractOutside}\n            title=\"Title\"\n            description=\"Description\"\n          />\n        )}\n      </div>\n\n      <div\n        style={{\n          position: \"fixed\",\n          bottom: \"0\",\n          right: \"0\",\n          padding: \"8px\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: \"12px\",\n            color: \"var(--seed-semantic-color-divider-3)\",\n          }}\n        >\n          Steps\n        </span>\n        {mainActivitySteps.map((step) => (\n          <div\n            style={{\n              fontSize: \"12px\",\n              width: \"1rem\",\n              height: \"1rem\",\n              borderRadius: \"50%\",\n              border: \"1px solid var(--seed-semantic-color-divider-3)\",\n              margin: \"8px\",\n            }}\n            key={step.id}\n          />\n        ))}\n      </div>\n\n      <div\n        style={{\n          position: \"fixed\",\n          bottom: \"0\",\n          left: \"0\",\n          padding: \"8px\",\n          zIndex: 1000,\n        }}\n      >\n        <ActionButton onClick={() => popStep}>Back</ActionButton>\n      </div>\n    </AppScreen>\n  );\n};\n\nexport default AlertDialogDefaultActivity;\n\nAlertDialogDefaultActivity.displayName = \"AlertDialogDefaultActivity\";",
   "alert-dialog-preview": "import * as React from \"react\";\n\nimport { AlertDialog } from \"seed-design/ui/alert-dialog\";\n\nexport default function AlertDialogPreview() {\n  return <AlertDialog title=\"Title\" description=\"Description\" />;\n}",
   "badge-brand": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeBrand() {\n  return <Badge tone=\"brand\">라벨</Badge>;\n}",
   "badge-danger": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeDanger() {\n  return <Badge tone=\"danger\">라벨</Badge>;\n}",
@@ -67,8 +67,8 @@
   "checkbox-preview": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxPreview() {\n  return <Checkbox label=\"Hello World\" />;\n}",
   "checkbox-size": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxSize() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      <Checkbox label=\"Small\" size=\"small\" />\n      <Checkbox label=\"Medium (default)\" size=\"medium\" />\n      <Checkbox label=\"Large\" size=\"large\" />\n    </div>\n  );\n}",
   "checkbox-variant": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxVariant() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      <Checkbox label=\"Square (default)\" variant=\"square\" />\n      <Checkbox label=\"Ghost\" variant=\"ghost\" />\n    </div>\n  );\n}",
-  "chip-tabs-basic-activity": "import * as React from \"react\";\n\nimport {\n  ChipTabs,\n  ChipTabTrigger,\n  ChipTabTriggerList,\n} from \"seed-design/ui/chip-tabs\";\n\nimport type { ActivityComponentType } from \"@stackflow/react/future\";\nimport AppScreen from \"@/components/stackflow/ActivityLayout\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    ChipTabsBasic: unknown;\n  }\n}\n\nconst ChipTabsBasicActivity: ActivityComponentType<\"ChipTabsBasic\"> = () => {\n  const [value, setValue] = React.useState(\"1\");\n\n  const commonStyle = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"#eeeeee\",\n    height: \"100%\",\n  };\n\n  return (\n    <AppScreen>\n      <ChipTabs\n        variant=\"neutralSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div style={commonStyle}>content 1</div>}\n      {value === \"2\" && <div style={commonStyle}>content 2</div>}\n      {value === \"3\" && <div style={commonStyle}>content 3</div>}\n    </AppScreen>\n  );\n};\n\nexport default ChipTabsBasicActivity;",
-  "chip-tabs-preview": "import * as React from \"react\";\nimport {\n  ChipTabs,\n  ChipTabTrigger,\n  ChipTabTriggerList,\n} from \"seed-design/ui/chip-tabs\";\n\nexport default function ChipTabsPreview() {\n  const [value, setValue] = React.useState(\"1\");\n  return (\n    <>\n      <ChipTabs\n        variant=\"neutralSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div>content 1</div>}\n      {value === \"2\" && <div>content 2</div>}\n      {value === \"3\" && <div>content 3</div>}\n    </>\n  );\n}",
+  "chip-tabs-basic-activity": "import * as React from \"react\";\n\nimport { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from \"seed-design/ui/chip-tabs\";\n\nimport type { ActivityComponentType } from \"@stackflow/react/future\";\nimport AppScreen from \"@/components/stackflow/ActivityLayout\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    ChipTabsBasic: unknown;\n  }\n}\n\nconst ChipTabsBasicActivity: ActivityComponentType<\"ChipTabsBasic\"> = () => {\n  const [value, setValue] = React.useState(\"1\");\n\n  const commonStyle = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"#eeeeee\",\n    height: \"100%\",\n  };\n\n  return (\n    <AppScreen>\n      <ChipTabs\n        variant=\"neutralSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div style={commonStyle}>content 1</div>}\n      {value === \"2\" && <div style={commonStyle}>content 2</div>}\n      {value === \"3\" && <div style={commonStyle}>content 3</div>}\n    </AppScreen>\n  );\n};\n\nexport default ChipTabsBasicActivity;",
+  "chip-tabs-preview": "import * as React from \"react\";\nimport { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from \"seed-design/ui/chip-tabs\";\n\nexport default function ChipTabsPreview() {\n  const [value, setValue] = React.useState(\"1\");\n  return (\n    <>\n      <ChipTabs\n        variant=\"neutralSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div>content 1</div>}\n      {value === \"2\" && <div>content 2</div>}\n      {value === \"3\" && <div>content 3</div>}\n    </>\n  );\n}",
   "chip-tabs-variant-brand-solid": "import * as React from \"react\";\nimport { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from \"seed-design/ui/chip-tabs\";\n\nexport default function ChipTabsVariantBrandSolid() {\n  const [value, setValue] = React.useState(\"1\");\n  return (\n    <>\n      <ChipTabs\n        variant=\"brandSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div>content 1</div>}\n      {value === \"2\" && <div>content 2</div>}\n      {value === \"3\" && <div>content 3</div>}\n    </>\n  );\n}",
   "chip-tabs-variant-neutral-solid": "import * as React from \"react\";\nimport { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from \"seed-design/ui/chip-tabs\";\n\nexport default function ChipTabsVariantNeutralSolid() {\n  const [value, setValue] = React.useState(\"1\");\n  return (\n    <>\n      <ChipTabs\n        variant=\"neutralSolid\"\n        defaultValue=\"1\"\n        value={value}\n        onValueChange={(value) => setValue(value)}\n      >\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div>content 1</div>}\n      {value === \"2\" && <div>content 2</div>}\n      {value === \"3\" && <div>content 3</div>}\n    </>\n  );\n}",
   "control-chip-icon-only": "import { IconPlusFill } from \"@daangn/react-monochrome-icon\";\nimport { ControlChip } from \"seed-design/ui/control-chip\";\n\nexport default function ControlChipIconOnly() {\n  return (\n    <ControlChip.Toggle layout=\"iconOnly\">\n      <IconPlusFill />\n    </ControlChip.Toggle>\n  );\n}",
@@ -146,14 +146,14 @@
   "select-box-radio-group-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"@/registry/ui/select-box-group\";\n\nexport default function SelectBoxRadioGroupPreview() {\n  return (\n    <SelectBoxRadioGroup defaultValue=\"culpa\">\n      <SelectBoxRadio value=\"culpa\" label=\"Culpa\" />\n      <SelectBoxRadio\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxRadio value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxRadioGroup>\n  );\n}",
   "skeleton-wave-activity": "import type { ActivityComponentType } from \"@stackflow/react/future\";\nimport type * as React from \"react\";\n\nimport Layout from \"@/components/stackflow/ActivityLayout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\nimport {\n  useSkeletonDuration,\n  useIsRealLoading,\n  useSkeletonLoading,\n  useSkeletonTimingFunction,\n  useSkeletonInitTransitionDuration,\n  useSkeletonGradient,\n} from \"@/stores/skeleton\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    SkeletonWave: unknown;\n  }\n}\n\nconst Fallback = () => {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <Skeleton width=\"100%\" height=\"300px\" borderRadius=\"square\" />\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"4px\" }}>\n        <Skeleton width=\"50px\" height=\"50px\" borderRadius=\"circle\" />\n        <Skeleton width=\"100%\" height=\"20px\" borderRadius=\"rounded\" />\n        <Skeleton width=\"200px\" height=\"20px\" borderRadius=\"rounded\" />\n      </div>\n    </div>\n  );\n};\n\nconst SkeletonWaveActivity: ActivityComponentType<\"SkeletonWave\"> = () => {\n  const isLoading = useSkeletonLoading();\n  const isRealLoading = useIsRealLoading();\n  const animationDuration = useSkeletonDuration();\n  const animationTiming = useSkeletonTimingFunction();\n  const initTransitionDuration = useSkeletonInitTransitionDuration();\n  const gradient = useSkeletonGradient();\n\n  return (\n    <Layout>\n      <div\n        style={\n          {\n            padding: \"16px\",\n            \"--skeleton-gradient\": gradient,\n            \"--skeleton-init-transition-duration\": initTransitionDuration,\n            \"--skeleton-animation-duration\": animationDuration,\n            \"--skeleton-animation-timing-function\": animationTiming,\n          } as React.CSSProperties\n        }\n      >\n        {isLoading ? isRealLoading && <Fallback /> : <div>content</div>}\n      </div>\n    </Layout>\n  );\n};\n\nexport default SkeletonWaveActivity;\n\nSkeletonWaveActivity.displayName = \"SkeletonWaveActivity\";",
   "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
-  "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",
+  "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
   "switch-preview": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchPreview() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
-  "switch-small": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchSmall() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"small\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",
-  "tabs-alert": "import {\n  Tabs,\n  TabContent,\n  TabContentList,\n  TabTrigger,\n  TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsAlert() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\" alert>\n            라벨2\n          </TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
+  "switch-small": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchSmall() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch size=\"small\" checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
+  "tabs-alert": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsAlert() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\" alert>\n            라벨2\n          </TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-disabled": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDisabled() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\" isDisabled>\n            라벨2\n          </TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-dynamic-height": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDynamicHeight() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" lazyMode=\"unmount\" isLazy={true} isSwipeable={false}>\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content height=\"100px\">Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content height=\"200px\">Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content height=\"300px\">Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n      <div style={{ height: \"100px\", backgroundColor: \"gray\" }}>아래 컨텐츠</div>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n  const { height, children } = props;\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height,\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};",
   "tabs-fix-trigger-list": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsFixTriggerList() {\n  return (\n    // 600은 화면 높이라고 가정합니다.\n    <div style={{ width: \"360px\", height: \"600px\" }}>\n      <Tabs\n        defaultValue=\"1\"\n        lazyMode=\"keepMounted\"\n        isLazy={true}\n        size=\"medium\"\n        isSwipeable={false}\n        fixTriggerList\n        style={{ height: \"100%\" }} // 탭 영역을 전체 화면으로 설정합니다.\n      >\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content height=\"1000px\">Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content height=\"1000px\">Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content height=\"1000px\">Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n  const { height, children } = props;\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height,\n        background: \"linear-gradient(to bottom, white, gray)\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};",
-  "tabs-layout-fill": "import {\n  Tabs,\n  TabContent,\n  TabContentList,\n  TabTrigger,\n  TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutFill() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"2\" layout=\"fill\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
+  "tabs-layout-fill": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutFill() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"2\" layout=\"fill\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-layout-hug": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutHug() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" layout=\"hug\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-preview": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsPreview() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-size-medium": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsSizeMedium() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" size=\"medium\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
@@ -187,4 +187,4 @@
   "text-field-slicing": "import { useState } from \"react\";\nimport { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldSlicing() {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <FormControl\n      label=\"라벨\"\n      description=\"6글자까지 입력 가능합니다\"\n      maxGraphemeCount={6}\n      value={value}\n      onValueChange={({ slicedValue }) => setValue(slicedValue)}\n    >\n      <TextField placeholder=\"플레이스홀더\" />\n    </FormControl>\n  );\n}",
   "text-field-suffix": "import { IconWonLine } from \"@daangn/react-monochrome-icon\";\nimport { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldSuffix() {\n  return (\n    <div className=\"flex gap-4 w-full\">\n      <FormControl label=\"라벨\" description=\"설명을 써주세요\">\n        <TextField placeholder=\"플레이스홀더\" suffix=\"cm\" />\n      </FormControl>\n      <FormControl label=\"라벨\" description=\"설명을 써주세요\">\n        <TextField placeholder=\"플레이스홀더\" suffixIcon={<IconWonLine />} />\n      </FormControl>\n    </div>\n  );\n}",
   "text-field-xlarge": "import { FormControl, TextField } from \"seed-design/ui/text-field\";\n\nexport default function TextFieldXlarge() {\n  return (\n    <FormControl label=\"라벨\" description=\"설명을 써주세요\" size=\"xlarge\">\n      <TextField placeholder=\"플레이스홀더\" />\n    </FormControl>\n  );\n}"
-}
+}
\ No newline at end of file
diff --git a/docs/components/example/switch-medium.tsx b/docs/components/example/switch-medium.tsx
index 5c00bb254..878fc25f3 100644
--- a/docs/components/example/switch-medium.tsx
+++ b/docs/components/example/switch-medium.tsx
@@ -6,7 +6,5 @@ import { Switch } from "seed-design/ui/switch";
 export default function SwitchMedium() {
   const [isChecked, setIsChecked] = useState(false);
 
-  return (
-    <Switch size="medium" checked={isChecked} onCheckedChange={setIsChecked} />
-  );
+  return <Switch size="medium" checked={isChecked} onCheckedChange={setIsChecked} />;
 }
diff --git a/docs/components/example/switch-small.tsx b/docs/components/example/switch-small.tsx
index 4a975158d..2cb4fd99f 100644
--- a/docs/components/example/switch-small.tsx
+++ b/docs/components/example/switch-small.tsx
@@ -6,7 +6,5 @@ import { Switch } from "seed-design/ui/switch";
 export default function SwitchSmall() {
   const [isChecked, setIsChecked] = useState(false);
 
-  return (
-    <Switch size="small" checked={isChecked} onCheckedChange={setIsChecked} />
-  );
+  return <Switch size="small" checked={isChecked} onCheckedChange={setIsChecked} />;
 }
diff --git a/docs/components/example/tabs-alert.tsx b/docs/components/example/tabs-alert.tsx
index 583ad6890..b5ec7c390 100644
--- a/docs/components/example/tabs-alert.tsx
+++ b/docs/components/example/tabs-alert.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Tabs,
-  TabContent,
-  TabContentList,
-  TabTrigger,
-  TabTriggerList,
-} from "seed-design/ui/tabs";
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
 
 export default function TabsAlert() {
   return (
diff --git a/docs/components/example/tabs-layout-fill.tsx b/docs/components/example/tabs-layout-fill.tsx
index 5e427c324..1d482b730 100644
--- a/docs/components/example/tabs-layout-fill.tsx
+++ b/docs/components/example/tabs-layout-fill.tsx
@@ -1,10 +1,4 @@
-import {
-  Tabs,
-  TabContent,
-  TabContentList,
-  TabTrigger,
-  TabTriggerList,
-} from "seed-design/ui/tabs";
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
 
 export default function TabsLayoutFill() {
   return (