Chore/storybook theme

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: [
+    '../docs/*.mdx',
     '../packages/**/*.mdx',
     '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
@@ -14,4 +15,7 @@ export default {
     name: '@storybook/react-vite',
     options: {},
   },
+  managerHead: (head) =>
+    `${head}
+<link rel="shortcut icon" href="../public/assets/favicon.ico" type="image/ico">`,
 } satisfies StorybookConfig;

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+addons.setConfig({
+  theme: create({
+    base: 'dark',
+    brandTitle: 'Sipe Design System',
+    brandImage: '../public/assets/sipe_brand_logo.png',
+    brandUrl: 'https://sipe.team/',
+    brandTarget: '_self',
+    textColor: '#999999',
+    colorSecondary: '#007043',
+    barSelectedColor: '#007043',
+    barHoverColor: '#00CC7A',
+  }),
+});

.templates/component/src/Component.stories.tsx

@@ -3,7 +3,7 @@ import { Component } from './Component';
 
 const meta = {
   component: Component,
-  title: 'Component',
+  title: 'Components/Component',
   parameters: {
     layout: 'centered',
   },

docs/introduction.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Intro/Introduction" />
+
+<div style={{ margin: '0 auto', maxWidth: '800px', padding: '20px' }}>
+  <div style={{ textAlign: 'start' }}>
+    <h1 style={{ 
+      fontSize: '72px',
+      fontWeight: '800',
+      background: 'linear-gradient(45deg,#00FFFF,#00FF99)',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      letterSpacing: '-2px',
+      textShadow: '0 2px 10px rgba(0,0,0,0.1)'
+    }}>
+      <span style={{ fontSize: '50px' }}>Sipe Design System</span>
+    </h1>
+  </div>
+
+  <div style={{ display: 'flex', justifyContent: 'center' }}>
+    <img 
+      src="../public/assets/og-image.png" 
+      alt="Sipe Design System Logo" 
+      style={{ 
+        maxWidth: '100%',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
+      }}
+    />
+  </div>
+
+</div>

package.json

@@ -13,33 +13,38 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.9",
+    "@clack/prompts": "^0.9.0",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/cz-commitlint": "^19.6.1",
     "@commitlint/types": "^19.5.0",
-    "@clack/prompts": "^0.9.0",
+    "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "catalog:",
     "@storybook/addon-interactions": "catalog:",
     "@storybook/addon-links": "catalog:",
     "@storybook/blocks": "catalog:",
+    "@storybook/manager-api": "^8.4.7",
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
+    "@storybook/theming": "^8.4.7",
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^22.8.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/parser": "^8.19.0",
     "@vitest/coverage-v8": "catalog:",
     "chromatic": "^11.19.0",
-    "commitizen": "^4.3.1",
     "clipanion": "4.0.0-rc.4",
+    "commitizen": "^4.3.1",
     "eslint": "^9.17.0",
     "husky": "^9.1.7",
     "knip": "catalog:",
     "lint-staged": "^15.3.0",
     "sanitize.css": "^13.0.0",
     "storybook": "catalog:",
-    "tsx": "^4.19.2",
     "tsup": "catalog:",
+    "tsx": "^4.19.2",
     "typescript": "catalog:",
     "vitest": "catalog:"
   },

packages/Input/src/Input.stories.tsx

@@ -3,7 +3,7 @@ import { useRef, useState } from 'react';
 import { Action, Input } from './Input';
 
 const meta = {
-  title: 'Input',
+  title: 'Components/Input',
   component: Input,
   parameters: {
     layout: 'centered',

packages/avatar/src/Avatar.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar } from "./Avatar";
-import { faker } from "@faker-js/faker";
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
 
 const meta = {
-  title: "Avatar",
+  title: 'Components/Avatar',
   component: Avatar,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
 } satisfies Meta<typeof Avatar>;
 export default meta;
@@ -17,14 +17,14 @@ const testImage = faker.image.avatar();
 
 export const Basic: Story = {
   args: {
-    src: "https://randomuser.me/api/portraits/men/1.jpg",
-    alt: "대체 텍스트",
+    src: 'https://randomuser.me/api/portraits/men/1.jpg',
+    alt: '대체 텍스트',
   },
 };
 
 export const Sizes: Story = {
   render: () => (
-    <div style={{ display: "flex", gap: "1rem" }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       <Avatar size="xs" src={testImage} alt="XSmall" />
       <Avatar size="sm" src={testImage} alt="small" />
       <Avatar size="md" src={testImage} alt="medium" />
@@ -36,7 +36,7 @@ export const Sizes: Story = {
 
 export const Shapes: Story = {
   render: () => (
-    <div style={{ display: "flex", gap: "1rem" }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       <Avatar shape="circle" src={testImage} alt="원형" />
       <Avatar shape="rounded" src={testImage} alt="둥근 사각형" />
       <Avatar shape="square" src={testImage} alt="사각형" />

packages/badge/src/Badge.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Badge } from './Badge';
 
 const meta = {
-  title: 'Badge',
+  title: 'Components/Badge',
   component: Badge,
   parameters: {
     layout: 'centered',

packages/button/src/Button.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta = {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
   parameters: {
     layout: 'centered',

packages/card/src/Card.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Card } from './Card';
 
 const meta = {
-  title: 'Card',
+  title: 'Components/Card',
   component: Card,
   parameters: {
     layout: 'centered',

packages/divider/src/Divider.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Divider } from './Divider';
 
 const meta = {
-  title: 'Divider',
+  title: 'Components/Divider',
   component: Divider,
   parameters: {
     layout: 'centered',

packages/flex/src/Flex.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Flex } from './Flex';
 
 const meta = {
-  title: 'Flex',
+  title: 'Components/Flex',
   component: Flex,
   tags: ['autodocs'],
   argTypes: {

packages/icon/src/Icons.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import * as Icons from '.';
 
 export default {
-  title: 'Icons',
+  title: 'Components/Icons',
   parameters: {
     layout: 'centered',
   },
@@ -78,7 +78,7 @@ export const Sizes: StoryObj = {
 
     return (
       <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-        {sizes.map(size => (
+        {sizes.map((size) => (
           <IconWrapper key={size}>
             <IconComponent size={size} />
             <div style={{ fontSize: '12px', marginTop: '8px' }}>{size}px</div>
@@ -96,7 +96,7 @@ export const Colors: StoryObj = {
 
     return (
       <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-        {colors.map(color => (
+        {colors.map((color) => (
           <IconWrapper key={color}>
             <IconComponent size={24} color={color} />
             <div style={{ fontSize: '12px', marginTop: '8px' }}>{color}</div>
@@ -105,4 +105,4 @@ export const Colors: StoryObj = {
       </div>
     );
   },
-};
+};

packages/radio-group/src/RadioGroup.stories.tsx

@@ -4,7 +4,7 @@ import { Radio } from './Radio';
 import { RadioGroup } from './RadioGroup';
 
 const meta = {
-  title: 'RadioGroup',
+  title: 'Components/RadioGroup',
   component: RadioGroup,
   parameters: {
     layout: 'centered',

packages/skeleton/src/Skeleton.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Skeleton } from './Skeleton';
 
 const meta = {
-  title: 'Skeleton',
+  title: 'Components/Skeleton',
   component: Skeleton,
   parameters: {
     layout: 'centered',

packages/switch/src/Switch.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Switch } from './Switch';
 
 const meta = {
-  title: 'Switch',
+  title: 'Components/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',

packages/tokens/src/Tokens.stories.tsx

@@ -5,7 +5,7 @@ import { color } from './colors';
 import { fontSize, fontWeight, lineHeight } from './fonts';
 
 const meta = {
-  title: 'Tokens',
+  title: 'Components/Tokens',
 } satisfies Meta;
 export default meta;
 

packages/tooltip/src/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { Tooltip, type TooltipProps } from './Tooltip';
 
 export default {
-  title: 'Tooltip',
+  title: 'Components/Tooltip',
   component: Tooltip,
   argTypes: {
     tooltipContent: { control: 'text', description: '툴팁에 표시될 내용' },

packages/typography/src/Typography.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 
 const meta = {
-  title: 'Typography',
+  title: 'Components/Typography',
   component: Typography,
   parameters: {
     layout: 'centered',