diff --git a/public/images/visibility-off.svg b/public/images/visibility-off.svg
new file mode 100644
index 0000000..febddd1
--- /dev/null
+++ b/public/images/visibility-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7731 12.9729L14.6501 11.8499C14.8206 10.9601 14.5866 10.2012 13.9481 9.57296C13.3097 8.94476 12.5437 8.70374 11.6501 8.84989L10.527 7.72684C10.7591 7.61914 10.9978 7.54157 11.2433 7.49414C11.4889 7.44671 11.7411 7.42299 12.0001 7.42299C13.1347 7.42299 14.0978 7.81882 14.8895 8.61049C15.6811 9.40216 16.077 10.3653 16.077 11.4999C16.077 11.7589 16.0549 12.0111 16.0106 12.2566C15.9664 12.5021 15.8872 12.7409 15.7731 12.9729ZM18.9539 16.0845L17.8501 15.0499C18.4834 14.5666 19.0501 14.0291 19.5501 13.4374C20.0501 12.8457 20.4667 12.1999 20.8001 11.4999C19.9667 9.81656 18.7626 8.47906 17.1876 7.48739C15.6126 6.49572 13.8834 5.99989 12.0001 5.99989C11.5167 5.99989 11.0459 6.03322 10.5876 6.09989C10.1292 6.16656 9.66674 6.26656 9.20007 6.39989L8.03472 5.23454C8.67061 4.98326 9.319 4.798 9.9799 4.67877C10.6408 4.55953 11.3142 4.49991 12.0001 4.49991C14.1488 4.49991 16.1225 5.05825 17.9212 6.17491C19.7199 7.29158 21.1032 8.80247 22.0712 10.7076C22.1379 10.8345 22.1863 10.9624 22.2164 11.0912C22.2465 11.2201 22.2616 11.3563 22.2616 11.4999C22.2616 11.6435 22.2491 11.7797 22.2241 11.9085C22.1991 12.0374 22.1532 12.1653 22.0866 12.2922C21.7327 13.0448 21.2885 13.7396 20.7539 14.3768C20.2193 15.014 19.6193 15.5832 18.9539 16.0845ZM12.0001 18.4999C9.89496 18.4999 7.96548 17.9374 6.21165 16.8124C4.4578 15.6874 3.06357 14.2056 2.02895 12.3672C1.94562 12.2403 1.88472 12.1025 1.84627 11.9537C1.80781 11.805 1.78857 11.6537 1.78857 11.4999C1.78857 11.346 1.80524 11.1973 1.83857 11.0537C1.87191 10.9102 1.93024 10.7698 2.01357 10.6326C2.38537 9.95311 2.80653 9.30599 3.27705 8.69124C3.74757 8.07649 4.28859 7.52553 4.90012 7.03837L2.64242 4.76526C2.50396 4.61655 2.43569 4.43995 2.43762 4.23546C2.43954 4.03098 2.51293 3.85631 2.6578 3.71144C2.80267 3.56657 2.97831 3.49414 3.18472 3.49414C3.39112 3.49414 3.56676 3.56657 3.71162 3.71144L20.2885 20.2883C20.427 20.4268 20.5004 20.5983 20.5087 20.8027C20.517 21.0072 20.4436 21.187 20.2885 21.3422C20.1437 21.487 19.968 21.5595 19.7616 21.5595C19.5552 21.5595 19.3796 21.487 19.2347 21.3422L15.7155 17.8537C15.1257 18.0819 14.5196 18.2467 13.8972 18.3479C13.2748 18.4492 12.6424 18.4999 12.0001 18.4999ZM5.95395 8.09216C5.36805 8.54473 4.84144 9.0566 4.37412 9.62777C3.90681 10.1989 3.51546 10.823 3.20007 11.4999C4.03341 13.1832 5.23757 14.5207 6.81257 15.5124C8.38757 16.5041 10.1167 16.9999 12.0001 16.9999C12.4296 16.9999 12.8523 16.971 13.2684 16.9133C13.6844 16.8557 14.0975 16.7666 14.5078 16.646L13.2424 15.3499C13.0398 15.4383 12.8376 15.4982 12.6356 15.5297C12.4337 15.5611 12.2219 15.5768 12.0001 15.5768C10.8655 15.5768 9.90234 15.181 9.11067 14.3893C8.31901 13.5976 7.92317 12.6345 7.92317 11.4999C7.92317 11.2781 7.94048 11.0662 7.9751 10.8643C8.00972 10.6624 8.06805 10.4601 8.1501 10.2576L5.95395 8.09216Z" fill="#9FA6B2"/>
+</svg>
diff --git a/public/images/visibility-on.svg b/public/images/visibility-on.svg
new file mode 100644
index 0000000..a4c5284
--- /dev/null
+++ b/public/images/visibility-on.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0024 15.5769C13.1354 15.5769 14.0978 15.1803 14.8895 14.3871C15.6811 13.5939 16.077 12.6308 16.077 11.4977C16.077 10.3646 15.6804 9.40224 14.8872 8.61058C14.094 7.81891 13.1309 7.42308 11.9978 7.42308C10.8647 7.42308 9.90235 7.81966 9.11068 8.61282C8.31901 9.40601 7.92318 10.3692 7.92318 11.5023C7.92318 12.6353 8.31976 13.5977 9.11293 14.3894C9.90611 15.181 10.8693 15.5769 12.0024 15.5769ZM12.0001 14.2C11.2501 14.2 10.6126 13.9375 10.0876 13.4125C9.56258 12.8875 9.30008 12.25 9.30008 11.5C9.30008 10.75 9.56258 10.1125 10.0876 9.58748C10.6126 9.06248 11.2501 8.79998 12.0001 8.79998C12.7501 8.79998 13.3876 9.06248 13.9126 9.58748C14.4376 10.1125 14.7001 10.75 14.7001 11.5C14.7001 12.25 14.4376 12.8875 13.9126 13.4125C13.3876 13.9375 12.7501 14.2 12.0001 14.2ZM12.0001 18.5C9.89496 18.5 7.96966 17.9384 6.22415 16.8153C4.47864 15.6923 3.08537 14.2147 2.04436 12.3827C1.96102 12.2391 1.90012 12.0944 1.86166 11.9485C1.82319 11.8027 1.80396 11.653 1.80396 11.4995C1.80396 11.346 1.82319 11.1965 1.86166 11.051C1.90012 10.9054 1.96102 10.7609 2.04436 10.6173C3.08537 8.78525 4.47864 7.30769 6.22415 6.18463C7.96966 5.06154 9.89496 4.5 12.0001 4.5C14.1052 4.5 16.0305 5.06154 17.776 6.18463C19.5215 7.30769 20.9148 8.78525 21.9558 10.6173C22.0391 10.7609 22.1 10.9056 22.1385 11.0514C22.177 11.1973 22.1962 11.347 22.1962 11.5005C22.1962 11.654 22.177 11.8035 22.1385 11.949C22.1 12.0945 22.0391 12.2391 21.9558 12.3827C20.9148 14.2147 19.5215 15.6923 17.776 16.8153C16.0305 17.9384 14.1052 18.5 12.0001 18.5ZM12.0001 17C13.8834 17 15.6126 16.5041 17.1876 15.5125C18.7626 14.5208 19.9667 13.1833 20.8001 11.5C19.9667 9.81664 18.7626 8.47914 17.1876 7.48748C15.6126 6.49581 13.8834 5.99998 12.0001 5.99998C10.1167 5.99998 8.38758 6.49581 6.81258 7.48748C5.23758 8.47914 4.03341 9.81664 3.20008 11.5C4.03341 13.1833 5.23758 14.5208 6.81258 15.5125C8.38758 16.5041 10.1167 17 12.0001 17Z" fill="#9FA6B2"/>
+</svg>
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
new file mode 100644
index 0000000..2184c26
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 203f024..53f7894 100644
--- a/src/app/globals.css
+++ b/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];
 }
diff --git a/src/app/shared/components/Input.tsx b/src/app/shared/components/Input.tsx
new file mode 100644
index 0000000..137f448
--- /dev/null
+++ b/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