refactor: input 컴포넌트 코드 수정

Kernel360 · Sep 20, 2024 · 973176f · 973176f
1 parent f69abe9
commit 973176f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/components/ui/Input.stories.tsx b/components/ui/Input.stories.tsx
@@ -33,8 +33,8 @@ function UserIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"

diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
@@ -3,28 +3,25 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 
-const inputVariants = cva(
-  'flex border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      size: {
-        sm: 'h-3.5 w-full px-2 py-2',
-        md: 'h-4 w-full px-2 py-3',
-        lg: 'h-5 w-full px-2 py-4',
-      },
-      radius: {
-        sm: 'rounded-sm',
-        md: 'rounded-md',
-        lg: 'rounded-lg',
-        round: 'rounded-full',
-      },
+const inputVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'h-8 w-full px-1',
+      md: 'h-10 w-full px-2',
+      lg: 'h-12 w-full px-3',
     },
-    defaultVariants: {
-      size: 'md',
-      radius: 'md',
+    radius: {
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      round: 'rounded-full',
     },
   },
-);
+  defaultVariants: {
+    size: 'md',
+    radius: 'md',
+  },
+});
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {
@@ -45,20 +42,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     return (
-      <div className="relative w-full">
+      <div
+        className={cn(
+          'flex flex-row border border-solid items-center',
+          inputVariants({ size, radius }),
+        )}
+      >
         {icon && (
-          <span
-            className={cn('absolute inset-y-0 left-0 flex items-center pl-2')}
-          >
+          <span className={cn('inset-y-0 left-0 flex items-center')}>
             {icon}
           </span>
         )}{' '}
         <input
           placeholder={placeholder}
           type={type}
-          className={cn(inputVariants({ size, radius, className }), {
-            'pl-8': icon,
-          })}
+          className={cn('outline-none bg-background', inputVariants({ size }))}
           ref={ref}
           {...props}
         />