refactor: text input 컴포넌트 border 옵션 추가 (#ATR-606)

Atractorrr · Sep 14, 2024 · 20d5684 · 20d5684
1 parent 598b139
commit 20d5684
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/packages/design-system/packages/core/src/components/text-input/TextInput.stories.tsx b/packages/design-system/packages/core/src/components/text-input/TextInput.stories.tsx
@@ -40,6 +40,15 @@ const meta: Meta<typeof TextInput> = {
         defaultValue: { summary: 'sm' },
       },
     },
+    border: {
+      description: '인풋의 테두리 지정 여부를 지정합니다.',
+      control: 'select',
+      options: ['default', 'none'],
+      table: {
+        type: { summary: ['default', 'none'].join(' | ') },
+        defaultValue: { summary: 'default' },
+      },
+    },
     disabled: {
       description: '인풋의 비활성화 상태를 지정합니다.',
       control: 'boolean',

diff --git a/packages/design-system/packages/core/src/components/text-input/TextInput.style.ts b/packages/design-system/packages/core/src/components/text-input/TextInput.style.ts
@@ -28,6 +28,10 @@ export const variants = {
     none: '',
     with: getTextInputModifier('background'),
   },
+  border: {
+    default: '',
+    none: getTextInputModifier('border-none'),
+  },
 }
 
 export const textInputVariants = cva(textInputClassName, {
@@ -37,5 +41,6 @@ export const textInputVariants = cva(textInputClassName, {
     size: 'md',
     round: 'sm',
     background: 'none',
+    border: 'default',
   },
 })
diff --git a/packages/design-system/packages/core/src/components/text-input/TextInput.tsx b/packages/design-system/packages/core/src/components/text-input/TextInput.tsx
@@ -17,6 +17,7 @@ interface TextProps
   state?: keyof TextInputVariant['state']
   size?: keyof TextInputVariant['size']
   round?: keyof TextInputVariant['round']
+  border?: keyof TextInputVariant['border']
   withBackground?: boolean
   label?: React.ReactNode
   description?: React.ReactNode
@@ -33,6 +34,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextProps>(
       size,
       round,
       withBackground,
+      border,
       ...props
     },
     ref,
@@ -44,6 +46,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextProps>(
           size,
           round,
           background: withBackground ? 'with' : null,
+          border,
         }),
         className,
       )}

diff --git a/packages/design-system/packages/core/src/components/text-input/_index.scss b/packages/design-system/packages/core/src/components/text-input/_index.scss
@@ -129,4 +129,8 @@
       font-size: variable.$ds-font-size-400;
     }
   }
+
+  &--border-none > input {
+    border: none;
+  }
 }