Merge pull request #8 from makevook/design-system

[Feature] 디자인 시스템 기반 컴포넌트 일부 구현
makevook · May 18, 2024 · cea3dd8 · cea3dd8
2 parents d052773 + 24c8429
commit cea3dd8
Show file tree

Hide file tree

Showing 40 changed files with 1,877 additions and 498 deletions.
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -4,7 +4,7 @@ const withVanillaExtract = createVanillaExtractPlugin()
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@vook-client/ui'],
+  transpilePackages: ['@vook-client/design-system'],
   compiler: {
     styledComponents: true,
   },

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -16,7 +16,7 @@
     "@vanilla-extract/recipes": "^0.5.2",
     "@vanilla-extract/sprinkles": "^1.6.1",
     "@vook-client/api": "*",
-    "@vook-client/ui": "*",
+    "@vook-client/design-system": "*",
     "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from 'next'
 
 import ReactQueryProvider from '@/providers/ReactQueryProvider'
+import { pretendard } from '@/styles/fonts'
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -14,7 +15,7 @@ const RootLayout = ({
 }>) => {
   return (
     <html lang="kr">
-      <body>
+      <body className={pretendard.className}>
         <ReactQueryProvider>{children}</ReactQueryProvider>
       </body>
     </html>

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from '@vook-client/ui'
+import { Button, Text } from '@vook-client/design-system'
 
 import { TestComponent } from '@/components/TestComponent'
 
@@ -11,6 +11,7 @@ const Home = () => {
   return (
     <main>
       Hello world!
+      <Text>프리텐다드</Text>
       <TestComponent />
       <Button>Button</Button>
       <h1>API_URL: {API_URL}</h1>

diff --git a/apps/web/src/styles/PretendardVariable.woff2 b/apps/web/src/styles/PretendardVariable.woff2
diff --git a/apps/web/src/styles/fonts.ts b/apps/web/src/styles/fonts.ts
@@ -0,0 +1,7 @@
+import localFont from 'next/font/local'
+
+export const pretendard = localFont({
+  src: './PretendardVariable.woff2',
+  display: 'swap',
+  weight: '45 920',
+})
diff --git a/apps/workshop/.storybook/main.ts b/apps/workshop/.storybook/main.ts
@@ -11,8 +11,8 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: [
     {
-      directory: '../../../packages/ui/src/**',
-      titlePrefix: 'UI',
+      directory: '../../../packages/design-system/src/**',
+      titlePrefix: 'Vook-Design-System',
       files: '*.stories.*',
     },
     {

diff --git a/apps/workshop/.storybook/preview.ts b/apps/workshop/.storybook/preview.ts
@@ -1,3 +1,5 @@
+import './storybook.css'
+
 const preview = {
   parameters: {
     controls: {

diff --git a/apps/workshop/.storybook/storybook.css b/apps/workshop/.storybook/storybook.css
@@ -0,0 +1,36 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css');
+
+* {
+  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
+}
+
+.storybook-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.storybook-subtitle {
+  margin-bottom: 8px;
+  color: rgb(157, 157, 157);
+  font-weight: 700;
+}
+
+.navy-background {
+  background-color: #0e0933;
+}
+
+.default-padding {
+  padding: 50px;
+}
+
+.section-wrapper {
+  width: 1280px;
+}
+
+#storybook-root {
+  position: relative;
+}
diff --git a/package.json b/package.json
@@ -44,5 +44,8 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "@testing-library/user-event": "^14.5.2"
+  }
 }
diff --git a/packages/ui/.eslintrc.js → packages/design-system/.eslintrc.js b/packages/ui/.eslintrc.js → packages/design-system/.eslintrc.js
diff --git a/packages/ui/package.json → packages/design-system/package.json b/packages/ui/package.json → packages/design-system/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "@vook-client/ui",
+  "name": "@vook-client/design-system",
   "version": "0.0.0",
   "private": true,
-  "exports": "./src/index.ts",
+  "main": "./src",
   "scripts": {
     "lint": "eslint . --max-warnings 0"
   },

diff --git a/packages/design-system/src/components/Button/Button.css.ts b/packages/design-system/src/components/Button/Button.css.ts
@@ -0,0 +1,87 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes'
+
+import { vars } from '../../styles/global.css'
+
+export const button = recipe({
+  base: {
+    border: 'none',
+    borderRadius: 6,
+  },
+  variants: {
+    size: {
+      large: {
+        height: 48,
+        padding: '12px 26px',
+      },
+      middle: {
+        height: 40,
+        padding: '8px 16px',
+      },
+      small: {
+        height: 34,
+        padding: '8px 14px',
+      },
+      mini: {
+        height: 30,
+        padding: '6px 10px',
+        borderRadius: 4,
+      },
+    },
+    filled: {
+      true: {
+        backgroundColor: vars.colors['semantic-primary-normal'],
+        color: vars.colors['common-white'],
+      },
+      false: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderStyle: 'solid',
+      },
+    },
+    blueLine: {
+      true: {
+        borderColor: vars.colors['semantic-primary-normal'],
+      },
+      false: {
+        borderColor: vars.colors['semantic-line-normal'],
+      },
+    },
+    disabled: {
+      true: {
+        borderColor: vars.colors['palette-gray-100'],
+        ':hover': {
+          cursor: 'not-allowed',
+        },
+      },
+      false: {
+        ':hover': {
+          cursor: 'pointer',
+        },
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: {
+        filled: true,
+        disabled: true,
+      },
+      style: {
+        backgroundColor: vars.colors['palette-gray-100'],
+        color: vars.colors['semantic-label-disabled'],
+      },
+    },
+    {
+      variants: {
+        filled: false,
+        disabled: true,
+      },
+      style: {
+        color: vars.colors['semantic-label-disabled'],
+      },
+    },
+  ],
+})
+
+export type ButtonVariants = RecipeVariants<typeof button>
diff --git a/packages/design-system/src/components/Button/Button.spec.tsx b/packages/design-system/src/components/Button/Button.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Button } from '.'
+
+describe('Button Test', () => {
+  it('Button은 정상적으로 렌더링된다.', () => {
+    render(<Button>Button</Button>)
+
+    expect(
+      screen.getByRole('button', {
+        name: /Button/i,
+      }),
+    ).toBeInTheDocument()
+  })
+
+  it('Button 클릭 시 onClick 함수가 실행된다.', async () => {
+    // given
+    const onClick = vi.fn()
+    render(<Button onClick={onClick}>Button</Button>)
+
+    // when
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+
+    // then
+    expect(onClick).toBeCalledTimes(1)
+  })
+
+  it('Button은 disabled 상태일 때 클릭되지 않는다.', async () => {
+    // given
+    const onClick = vi.fn()
+    render(
+      <Button onClick={onClick} disabled>
+        Button
+      </Button>,
+    )
+
+    // when
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+
+    // then
+    expect(onClick).not.toBeCalled()
+  })
+})
diff --git a/packages/design-system/src/components/Button/Button.stories.tsx b/packages/design-system/src/components/Button/Button.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button, ButtonProps } from './Button'
+
+const BUTTON_SIZES: Array<ButtonProps['size']> = [
+  'large',
+  'middle',
+  'small',
+  'mini',
+]
+
+const meta = {
+  title: 'Button',
+  component: Button,
+  tags: ['autodocs'],
+  args: {
+    children: 'Button',
+    size: 'large',
+    filled: true,
+    blueLine: true,
+    disabled: false,
+  },
+  argTypes: {
+    children: { control: 'text', description: '버튼 텍스트' },
+    size: {
+      options: BUTTON_SIZES,
+      control: { type: 'select' },
+      description: '버튼 크기',
+    },
+    filled: { control: 'boolean', description: '버튼 색상 채움 여부' },
+    blueLine: {
+      control: 'boolean',
+      description: '버튼 테두리 여부',
+    },
+    disabled: {
+      control: 'boolean',
+      description: '버튼 비활성화 여부',
+    },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Playground: Story = {}
+
+export const Size: Story = {
+  argTypes: {
+    size: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (props) => {
+    return (
+      <ul className="storybook-list">
+        {BUTTON_SIZES.map((size) => (
+          <li key={size}>
+            <p className="storybook-subtitle">{size}</p>
+            <Button {...props} size={size}>
+              {props.children}
+            </Button>
+          </li>
+        ))}
+      </ul>
+    )
+  },
+}
+
+export const Type: Story = {
+  argTypes: {
+    filled: {
+      table: {
+        disable: true,
+      },
+    },
+    blueLine: {
+      table: {
+        disable: true,
+      },
+    },
+    disabled: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (props) => {
+    return (
+      <ul className="storybook-list">
+        <li>
+          <p className="storybook-subtitle">Filled</p>
+          <Button {...props} filled>
+            {props.children}
+          </Button>
+        </li>
+        <li>
+          <p className="storybook-subtitle">Filled Disabled</p>
+          <Button {...props} filled disabled>
+            {props.children}
+          </Button>
+        </li>
+        <li>
+          <p className="storybook-subtitle">Blue Line</p>
+          <Button {...props} filled={false} blueLine>
+            {props.children}
+          </Button>
+        </li>
+        <li>
+          <p className="storybook-subtitle">No Blue Line</p>
+          <Button {...props} filled={false}>
+            {props.children}
+          </Button>
+        </li>
+        <li>
+          <p className="storybook-subtitle">Disabled</p>
+          <Button {...props} filled={false} disabled>
+            {props.children}
+          </Button>
+        </li>
+      </ul>
+    )
+  },
+}