Merge pull request #20 from Team-TenTen/feature/#10/component-input

Input 컴포넌트 구현

src/components/common/Input/Input.tsx

@@ -0,0 +1,78 @@
+import { ForwardedRef, forwardRef } from 'react'
+import { cls } from '@/utils'
+
+export interface InputProps {
+  label?: string
+  type?: string
+  placeholder?: string
+  inputButton?: boolean
+  buttonText?: string
+  buttonColor?: 'green' | 'gray'
+  validation?: string
+  disabled?: boolean
+  onButtonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const Input = forwardRef(
+  (
+    {
+      label,
+      type,
+      placeholder,
+      inputButton,
+      buttonText = '추가',
+      buttonColor = 'green',
+      validation,
+      disabled,
+      onButtonClick,
+      ...rest
+    }: InputProps,
+    ref?: ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <div className="flex flex-col justify-center">
+        {label && (
+          <label className="py-2 text-sm font-semibold text-gray9">
+            {label}
+          </label>
+        )}
+        <div className="relative flex flex-col">
+          <input
+            ref={ref}
+            type={type}
+            className={cls(
+              'rounded-md border bg-bgColor px-3 py-2.5 text-sm font-medium text-gray9 placeholder-gray4 outline-none disabled:border-gray3 disabled:placeholder-gray3',
+              inputButton && buttonColor === 'green'
+                ? 'border-emerald6 pr-20'
+                : 'border-slate5',
+            )}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...rest}
+          />
+          {inputButton && (
+            <button
+              className={cls(
+                'absolute right-0 top-0 flex rounded-r-md border px-4 py-2.5 text-sm font-semibold text-white',
+                buttonColor === 'green'
+                  ? 'border-emerald6 bg-emerald5'
+                  : 'border-slate5 bg-slate4',
+              )}
+              onClick={onButtonClick}>
+              {buttonText}
+            </button>
+          )}
+        </div>
+        {validation && (
+          <span className="py-2 text-xs font-normal text-red6">
+            {validation}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input

src/components/common/Textarea/Textarea.tsx

@@ -0,0 +1,41 @@
+import { ForwardedRef, forwardRef } from 'react'
+
+export interface TextareaProps {
+  label?: string
+  placeholder?: string
+  validation?: string
+  disabled?: boolean
+}
+
+const Textarea = forwardRef(
+  (
+    { label, placeholder, validation, disabled, ...rest }: TextareaProps,
+    ref?: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
+    return (
+      <div className="flex flex-col justify-center">
+        {label && (
+          <label className="py-2 text-sm font-semibold text-gray9">
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          className="rounded-md border border-slate5 bg-bgColor px-3 py-2.5 text-sm font-medium text-gray9 placeholder-gray4 outline-none disabled:border-gray3 disabled:placeholder-gray3"
+          placeholder={placeholder}
+          disabled={disabled}
+          {...rest}
+        />
+        {validation && (
+          <span className="py-2 text-xs font-normal text-red6">
+            {validation}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+Textarea.displayName = 'Textarea'
+
+export default Textarea

src/components/index.ts

@@ -1,6 +1,9 @@
 export { default as Providers } from './Providers/providers'
 export { default as ThemeButton } from './ThemeButton/themeButton'
+export { default as Input } from './common/Input/Input'
+export { default as Textarea } from './common/Textarea/Textarea'
 export { default as Avatar } from './common/Avatar/Avatar'
 export { default as AvatarGroup } from './common/AvatarGroup/AvatarGroup'
 export { default as Chip } from './common/Chip/Chip'
 export { default as Toggle } from './common/Toggle/Toggle'
+

src/utils/index.ts

@@ -1,3 +1,3 @@
-export const cls = (...classnames: string[]) => {
+export const cls = (...classnames: (string | boolean | undefined)[]) => {
   return classnames.join(' ')
 }