✨Feat: Input 컴포넌트 구현

src/app/auth/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import Input from '@components/Input'
+import { useForm } from 'react-hook-form'
+
+interface FormData {
+  email: string
+  password: string
+}
+
+export default function MyForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, touchedFields },
+  } = useForm<FormData>({
+    mode: 'onChange',
+  })
+
+  const onSubmit = (data: FormData) => {
+    console.log(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+      {/* 이메일 */}
+      <Input
+        labelName="이메일"
+        type="email"
+        placeholder="이메일 입력"
+        autoComplete="email"
+        {...register('email', {
+          required: '이메일을 입력해 주세요.',
+          pattern: {
+            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+            message: '유효한 이메일 주소를 입력해주세요',
+          },
+        })}
+        hasError={touchedFields.email && !!errors.email}
+        errorMessage={touchedFields.email ? errors.email?.message : ''}
+      />
+
+      {/* 비밀번호 */}
+      <Input
+        labelName="비밀번호"
+        type="password"
+        {...register('password', {
+          required: '비밀번호를 입력해 주세요.',
+          minLength: {
+            value: 8,
+            message: '비밀번호는 최소 8자 이상이어야 합니다.',
+          },
+        })}
+        hasError={touchedFields.password && !!errors.password}
+        errorMessage={touchedFields.password ? errors.password?.message : ''}
+      />
+
+      <button
+        type="submit"
+        className="mt-4 rounded bg-blue-500 py-2 text-white"
+      >
+        제출하기
+      </button>
+    </form>
+  )
+}

src/app/globals.css

@@ -31,6 +31,12 @@ body {
 .Text-white {
   @apply text-[#FFFFFF] dark:text-[#333236];
 }
+.Text-error {
+  @apply text-[#D6173A];
+}
+.Border-error {
+  @apply border border-[#D6173A];
+}
 .Border-btn {
   @apply border border-[#D9D9D9] dark:border-[#747474];
 }

src/app/shared/components/Input.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import Image from 'next/image'
+import { forwardRef, InputHTMLAttributes, useState } from 'react'
+
+import { cn } from '../lib/cn'
+
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  labelName: string
+  name: string
+  type?: React.HTMLInputTypeAttribute
+  autoComplete?: string
+  placeholder?: string
+  hasError?: boolean
+  errorMessage?: string
+}
+
+const Input = forwardRef<HTMLInputElement, CustomInputProps>(
+  function Input(props, ref) {
+    const {
+      labelName,
+      name,
+      type = 'text',
+      placeholder,
+      hasError,
+      errorMessage,
+      autoComplete,
+      ...rest
+    } = props
+
+    const [showPassword, setShowPassword] = useState(false)
+    const isPassword = type === 'password'
+    const inputType = isPassword && showPassword ? 'text' : type
+
+    return (
+      <div className="flex flex-col gap-8">
+        <label htmlFor={name} className="Text-black text-base font-normal">
+          {labelName}
+        </label>
+
+        {isPassword ? (
+          <div className="relative w-full">
+            <input
+              id={name}
+              className={cn(
+                'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+                hasError ? 'Border-error' : 'Border-btn',
+              )}
+              type={inputType}
+              placeholder={placeholder}
+              name={name}
+              autoComplete={autoComplete}
+              {...rest}
+              ref={ref}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-16 top-1/2 translate-y-[-50%]"
+            >
+              <Image
+                src={`/images/visibility-${showPassword ? 'on' : 'off'}.svg`}
+                alt={showPassword ? '비밀번호 보기' : '비밀번호 숨기기'}
+                width={24}
+                height={24}
+              />
+            </button>
+          </div>
+        ) : (
+          <input
+            id={name}
+            className={cn(
+              'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+              hasError ? 'Border-error' : 'Border-btn',
+            )}
+            type={inputType}
+            placeholder={placeholder}
+            name={name}
+            autoComplete={autoComplete}
+            {...rest}
+            ref={ref}
+          />
+        )}
+
+        {hasError && errorMessage && (
+          <p className="Text-error text-sm font-normal">{errorMessage}</p>
+        )}
+      </div>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input