Myongji-Graduate · gahyuun · Feb 18, 2024 · Feb 15, 2024 · Feb 15, 2024 · Feb 15, 2024
@@ -0,0 +1,10 @@
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
+/>
+
+<style>
+  * {
+    font-family: 'Pretendard';
+  }
+</style>
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../app/globals.css';
 
 const preview: Preview = {
   parameters: {

@@ -16,13 +16,17 @@
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
-}
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+*,
+a {
+  font-family: 'Pretendard';
+}
+
+a:-webkit-any-link {
+  text-decoration: none;
+}
@@ -1,9 +1,6 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -16,7 +13,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head>
+        <link
+          href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
+          rel="stylesheet"
+        />
+      </head>
+      <body>{children}</body>
     </html>
   );
 }
@@ -0,0 +1,89 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+
+const meta = {
+  title: 'ui/view/atom/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: 'Button은 사용자가 한 번의 탭으로 작업을 수행하고 선택할 수 있는 컴포넌트입니다.',
+    docs: {
+      description: {
+        component: `
+- variant값으로 "primary" | "secondary" |  "text" | "delete" 중 하나를 선택할 수 있습니다.\n
+- size값으로 "lg" | "md" |  "sm" | "xs" | "default"  중 하나를 선택할 수 있습니다.\n
+- href 값으로 url을 할당할 수 있고 Link Button 일 때 필수적으로 할당해야 합니다.\n
+- label 값으로 button 태그에 존재하는 text를 의미하고 필수적으로 할당해야 합니다
+`,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      description: 'Button의 Variant를 설정합니다.',
+      table: {
+        type: { summary: 'ButtonVariant' },
+        defaultValue: { summary: 'primary' },
+      },
+      options: ['primary', 'secondary', 'text', 'delete'],
+      control: {
+        type: 'radio',
+      },
+    },
+    size: {
+      description: 'Button의 size를 설정합니다.',
+      table: {
+        type: { summary: 'ButtonSize' },
+        defaultValue: { summary: 'md' },
+      },
+      options: ['lg', 'md', 'sm', 'xs', 'default'],
+      control: {
+        type: 'radio',
+      },
+    },
+    href: {
+      description: 'Link Button일 때 url을 설정합니다.',
+      table: {
+        type: { summary: 'ButtonHref' },
+        defaultValue: { summary: '' },
+      },
+    },
+    label: {
+      description: 'Button의 label을 설정합니다',
+      table: {
+        type: { summary: 'ButtonLabel' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+export const PrimaryButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+    label: '수강현황 자세히보기',
+  },
+  render: (args) => <Button {...args} />,
+};
+
+export const SecondaryButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'xs',
+    variant: 'secondary',
+    label: '커스텀하기',
+  },
+  render: (args) => <Button {...args} />,
+};
+
+export const DeleteButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'default',
+    variant: 'delete',
+    label: '삭제',
+  },
+  render: (args) => <Button {...args} />,
+};
@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority';
+import Link from 'next/link';
+import { ButtonHTMLAttributes } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'text' | 'delete';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'default';
+  href?: string;
+}
+export function Button({ label, variant = 'primary', size = 'default', href, ...props }: ButtonProps) {
+  const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, {
+    variants: {
+      variant: {
+        primary: 'bg-primary rounded-[100px] text-white border-0',
+        secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray',
+        text: '',
+        delete: 'py-[7px] px-[14px] bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]',
+      },
+      size: {
+        default: '',
+        xs: 'w-[116px] h-[47px] text-lg font-medium leading-5',
+        sm: 'w-[144px] h-10 text-sm font-medium leading-3',
+        md: 'w-[198px] h-12 text-lg font-medium leading-3',
+        lg: 'w-[396px] h-20 text-3xl font-medium leading-9',
+      },
+    },
+  });
+
+  if (href)
+    return (
+      <Link className={ButtonVariants({ variant, size })} href={href}>
+        {label}
+      </Link>
+    );
+  return (
+    <button className={ButtonVariants({ variant, size })} {...props}>
+      {label}
+    </button>
+  );
+}