From 973176f944effe6332fbafd31c386527101e76f9 Mon Sep 17 00:00:00 2001
From: iamgyu <iamgyu@naver.com>
Date: Fri, 20 Sep 2024 12:01:29 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ui/Input.stories.tsx |  4 +--
 components/ui/Input.tsx         | 50 ++++++++++++++++-----------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/components/ui/Input.stories.tsx b/components/ui/Input.stories.tsx
index 5d08060..bf1feb0 100644
--- 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
index 4189ea1..30010a1 100644
--- 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}
         />