💄 design: Text 스타일에 디자인 토큰 별 정리 (#44)

* 💄 design: Text 스타일에 디자인 토큰별 정리 * 💄 design: 변경된 Text 스타일에 따라 스토리북 재작성 * 💄 design: Button 스타일에 디자인 토큰 반영 (#46) * 📦 chore: primary 관련 색상 상수 정리 * 💄 design: Button 컴포넌트에 디자인 토큰 적용 및 size 속성 추가 * 💄 design: Button 스토리북에 새로운 variant 적용 * 💄 design: Navbar 스토리북에 버튼의 새로운 variant 적용 * 💄 design: active 트랜지션이 disabled 에서는 나타나지 않도록 수정 * 💄 design: Button 스토리북에 size, disabled prop 추가 * 📦 chore: preview.yml 대상 브랜치에 feat/** 추가 * 📝 style: BottomSheet의 button에 semi-transparent 속성 적용
dnd-side-project · Jan 30, 2024 · 7332886 · 7332886
1 parent 059b758
commit 7332886
Show file tree

Hide file tree

Showing 11 changed files with 349 additions and 143 deletions.
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -6,7 +6,7 @@ env:
 
 on:
   pull_request:
-    branches: ['main']
+    branches: ['main', feat/**]
 
 jobs:
   build:

diff --git a/.stylelintrc b/.stylelintrc
@@ -8,6 +8,7 @@
     }
   ],
   "rules": {
-    "selector-max-type": null
+    "selector-max-type": null,
+    "no-descending-specificity": null
   }
 }
diff --git a/src/components/BottomSheet/index.stories.tsx b/src/components/BottomSheet/index.stories.tsx
@@ -53,10 +53,13 @@ export const 바텀시트: StoryObj = {
               <h2>누구에게 보낼까요?</h2>
             </div>
             <Navbar css={styles.navbar}>
-              <Button variant="primary-unaccent" onClick={toggleDrawer(false)}>
+              <Button
+                variant="semi-transparent-unaccent"
+                onClick={toggleDrawer(false)}
+              >
                 닫기
               </Button>
-              <Button variant="primary" onClick={toggleDrawer(false)}>
+              <Button variant="semi-transparent" onClick={toggleDrawer(false)}>
                 완료
               </Button>
             </Navbar>

diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
@@ -1,20 +1,104 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { PencilLine } from '@/assets/icons';
 import Button from './';
 
 const meta = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: '버튼의 비활성화 여부입니다.',
+    },
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     variant: 'primary',
-    children: '버튼입니다',
+    size: 'md',
+    children: 'button',
+    disabled: false,
   },
 };
+
+const styles = {
+  container: css`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 21rem;
+  `,
+  semiTransparentContainer: css`
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: #fcecd0;
+  `,
+};
+
+export const Primary: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="primary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="primary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const PrimaryOutline: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="primary-outline">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="primary-outline">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const Secondary: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="secondary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="secondary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const SemiTransparent: Story = {
+  render: () => (
+    <div css={styles.semiTransparentContainer}>
+      <Button variant="semi-transparent-unaccent">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button variant="semi-transparent">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,17 +1,19 @@
 import React, { forwardRef } from 'react';
-import styles, { type ButtonVariant } from './styles';
+import styles, { type ButtonSize, type ButtonVariant } from './styles';
 
 interface ButtonProps extends React.ComponentProps<'button'> {
   /** 버튼의 배경 색상과 폰트 색상을 지정합니다. */
   variant?: ButtonVariant;
+  /** 버튼에 들어갈 패딩의 크기를 지정합니다. */
+  size?: ButtonSize;
   /** 버튼의 내용을 지정합니다. */
   children?: React.ReactNode;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'primary', children, ...props }, ref) => {
+  ({ variant = 'primary', size = 'md', children, ...props }, ref) => {
     return (
-      <button css={styles.button(variant)} ref={ref} {...props}>
+      <button css={styles.button(variant, size)} ref={ref} {...props}>
         {children}
       </button>
     );

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
@@ -1,46 +1,113 @@
 import { css } from '@emotion/react';
+import textStyles from '@/styles/textStyles';
 import COLORS from '@/constants/colors';
 
-export type ButtonVariant = 'primary' | 'primary-unaccent' | 'white';
+export type ButtonVariant =
+  | 'primary'
+  | 'primary-outline'
+  | 'secondary'
+  | 'semi-transparent'
+  | 'semi-transparent-unaccent';
+
+export type ButtonSize = 'md' | 'sm';
 
 const styles = {
-  button: (variant: ButtonVariant) => css`
+  button: (variant: ButtonVariant, size: ButtonSize) => css`
     display: flex;
     flex: 1 0;
     gap: 0.5rem;
     justify-content: center;
     align-items: center;
-    padding: 0.75rem 1.25rem;
     border: none;
-    border-radius: 3.8rem;
-    font-weight: 500;
-    font-size: 0.875rem;
+    border-radius: 6.25rem;
     cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:not(:disabled):active {
+      box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
+      transform: scale(0.98);
+    }
 
+    &:disabled {
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    ${textStyles.t3}
+    ${sizeStyles[size]}
     ${variantStyles[variant]}
   `,
 };
 
+const sizeStyles = {
+  sm: css`
+    padding: 0.75rem 1.25rem;
+  `,
+  md: css`
+    padding: 1rem 1.25rem;
+  `,
+};
+
 const variantStyles = {
   primary: css`
+    background-color: ${COLORS.primary};
+    color: white;
+    box-shadow: 0 8px 16px 0 rgb(13 35 51 / 0.2);
+
+    &:hover {
+      background-color: ${COLORS.primaryHover};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.primaryDisabled};
+    }
+  `,
+  'primary-outline': css`
+    background-color: white;
+    color: ${COLORS.primary};
+    box-shadow: 0 8px 16px 0 rgb(13 35 51 / 0.2);
+    outline: 1px solid ${COLORS.primary};
+
+    &:hover {
+      outline: 1px solid ${COLORS.primaryHover};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.gray5};
+      color: ${COLORS.gray4};
+    }
+  `,
+  secondary: css`
+    background-color: white;
+    color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
+
+    &:hover {
+      background-color: ${COLORS.gray6};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.gray5};
+      color: ${COLORS.gray4};
+    }
+  `,
+  'semi-transparent': css`
     background: radial-gradient(
       491.85% 132.88% at 0% 12.5%,
       rgb(255 255 255 / 0.7) 0%,
       rgb(255 255 255 / 0.28) 100%
     );
     color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
   `,
-  'primary-unaccent': css`
+  'semi-transparent-unaccent': css`
     background: radial-gradient(
       491.85% 132.88% at 0% 12.5%,
       rgb(255 255 255 / 0.7) 0%,
       rgb(255 255 255 / 0.28) 100%
     );
     color: ${COLORS.gray3};
-  `,
-  white: css`
-    background-color: white;
-    color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
   `,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ env: @@
     on:
       pull_request:
-        branches: ['main']
+        branches: ['main', feat/**]
     jobs:
       build:
@@ Expand Down @@