- );
-};
diff --git a/packages/design-system/.storybook/Welcome/logo-b.svg b/packages/design-system/.storybook/Welcome/logo-b.svg
deleted file mode 100644
index 1532e938..00000000
--- a/packages/design-system/.storybook/Welcome/logo-b.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
diff --git a/packages/design-system/.storybook/YourTheme.js b/packages/design-system/.storybook/YourTheme.js
deleted file mode 100644
index ba9fcf2d..00000000
--- a/packages/design-system/.storybook/YourTheme.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { create } from '@storybook/theming';
-import Logo from "./Welcome/logo-b.svg";
-
-export default create({
- base: 'light',
- brandTitle: 'Lunit Design System',
- brandUrl: 'https://example.com',
- brandImage: Logo,
-});
\ No newline at end of file
diff --git a/packages/design-system/.storybook/assets/logo.svg b/packages/design-system/.storybook/assets/logo.svg
new file mode 100644
index 00000000..e64babd4
--- /dev/null
+++ b/packages/design-system/.storybook/assets/logo.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index e942f89b..0a42cdbc 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -2,11 +2,7 @@ const path = require("path");
const alias = require("../config/alias");
module.exports = {
- stories: [
- "./Welcome/Welcome.stories.tsx",
- "../src/**/*.mdx",
- "../src/**/*.stories.@(js|jsx|ts|tsx)",
- ],
+ stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
refs: {
"design-system-icons": {
title: "Lunit Design System Icons",
diff --git a/packages/design-system/.storybook/manager.js b/packages/design-system/.storybook/manager.js
index 697a286e..cf37d3d8 100644
--- a/packages/design-system/.storybook/manager.js
+++ b/packages/design-system/.storybook/manager.js
@@ -1,6 +1,14 @@
-import { addons } from '@storybook/addons'
-import yourTheme from './YourTheme';
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming";
+import Logo from "./assets/logo.svg";
+
+const theme = create({
+ base: "light",
+ brandTitle: "Lunit Design System Library",
+ brandUrl: "https://www.lunit.io",
+ brandImage: Logo,
+});
addons.setConfig({
- theme: yourTheme,
-});
\ No newline at end of file
+ theme,
+});
diff --git a/packages/design-system/src/stories/GettingStarted.mdx b/packages/design-system/src/stories/GettingStarted.mdx
new file mode 100644
index 00000000..9264966a
--- /dev/null
+++ b/packages/design-system/src/stories/GettingStarted.mdx
@@ -0,0 +1,88 @@
+import { Meta } from '@storybook/blocks';
+
+
+
+# Lunit Design System Library
+
+Lunit Design System Library is a collection of reusable components and styles that are used to build Lunit's products. It is built on top of [Material UI](https://mui.com/material-ui/getting-started/), a popular React UI framework.
+
+## Installation
+
+```bash
+npm install @lunit/design-system
+```
+
+Material UI is peer dependency of Lunit Design System Library. You need to install Material UI first.
+
+```json
+"peerDependencies": {
+ "@mui/material": "^5.0.0",
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0"
+}
+```
+
+## Usage
+
+### Theme
+
+This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
+
+```tsx
+import {
+ createTheme,
+ ThemeProvider,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { themeOptions } from '@lunit/design-system';
+
+const theme = createTheme(themeOptions);
+
+const App = () => {
+ return (
+
+
+
+
+ );
+};
+```
+
+If you want to customize the theme, use the `deepmerge` utility.
+
+[https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme](https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme)
+
+### Fonts
+
+This library uses the `Pretendard` font-family by default. The [Pretendard font](https://github.com/orioncactus/pretendard) does not come with this library, so you will need to provide it yourself via Webfonts. You can change the font by setting the `fontFamily` property in the theme.
+
+```tsx
+const theme = createTheme(
+ deepmerge(themeOptions, {
+ typography: {
+ fontFamily: [
+ 'Pretendard Variable',
+ 'sans-serif',
+ ]
+ }
+ })
+);
+```
+
+## Foundation
+
+This library provides a set of foundational styles that are used in Lunit's products. Please refer Colors, Typography, and Elevation in the sidebar.
+
+## Components
+
+This library provides a variety of components that are used in Lunit's products. Please refer Components in the sidebar.
+
+## Reference
+
+- [Lunit Design System Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?node-id=0%3A1&mode=dev)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system
\ No newline at end of file