design: input, textarea 마크업

src/components/common/Input/Input.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { cva, VariantProps } from 'class-variance-authority'
+
+const InputVariants = cva(
+  'typo-body3 border p-4 rounded-sm outline-none placeholder-assistive text-secondary',
+  {
+    variants: {
+      variant: {
+        default: 'border-assist-line',
+        focused: 'border-secondary',
+        error: 'border-error',
+        disabled: 'border-assist-line bg-disabled-fill cursor-not-allowed text-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof InputVariants> {
+  error?: boolean
+}
+
+const Input = ({ className, variant, type, disabled, error, ...props }: InputProps) => {
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  let currentState = variant
+  if (disabled) {
+    currentState = 'disabled'
+  } else if (isFocused) {
+    currentState = 'focused'
+  } else if (error) {
+    currentState = 'error'
+  }
+
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(InputVariants({ variant: currentState }), '', className)}
+      disabled={disabled}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/common/Textarea/Textarea.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { cva, VariantProps } from 'class-variance-authority'
+
+const TextareaVariants = cva(
+  'typo-body3 border p-4 rounded-sm outline-none placeholder-assistive text-secondary resize-none custom-scrollbar',
+  {
+    variants: {
+      variant: {
+        default: 'border-assist-line',
+        focused: 'border-secondary',
+        error: 'border-error',
+        disabled: 'border-assist-line bg-disabled-fill cursor-not-allowed text-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof TextareaVariants> {
+  error?: boolean
+}
+
+const Textarea = ({ className, variant, disabled, error, ...props }: TextareaProps) => {
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  let currentState = variant
+  if (disabled) {
+    currentState = 'disabled'
+  } else if (isFocused) {
+    currentState = 'focused'
+  } else if (error) {
+    currentState = 'error'
+  }
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(TextareaVariants({ variant: currentState }), '', className)}
+      disabled={disabled}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/styles/globals.css

@@ -147,6 +147,20 @@
   }
 }
 
+@layer base {
+  ::-webkit-scrollbar {
+    @apply w-[5px];
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-border-alter;
+  }
+}
+
 @theme inline {
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;