✨ [Feature] - 회원가입 폼에 유효성 검사를 추가한다.

package.json

@@ -14,8 +14,9 @@
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.63.0",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^7.8.2",
+    "react-router-dom": "^7.9.2",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {

src/components/Button.tsx

@@ -6,6 +6,7 @@ interface ButtonProps {
   status?: "active" | "inactive";
   size?: "small" | "medium" | "large";
   icon?: boolean;
+  type?: "submit" | "reset" | "button";
   disabled?: boolean;
   onClick?: () => void;
 }
@@ -16,13 +17,15 @@ const Button = ({
   size = "medium",
   icon = false,
   disabled,
+  type,
   onClick,
 }: ButtonProps) => {
   return (
     <button
       className={`Button Button_${status} Button_${size}`}
       onClick={onClick}
       disabled={disabled}
+      type={type}
     >
       {icon && (
         <span className="icon">

src/components/CustomInput.tsx

@@ -1,12 +1,13 @@
 import type React from "react";
 import "./styles/CustomInput.css";
 
-interface CustomInputProps {
-  size: "large" | "medium" | "small" | "auto";
+interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  inputSize: "large" | "medium" | "small" | "auto";
   icon?: React.ReactNode;
   error?: string;
   placeholder?: string;
   disabled?: boolean;
+  type?: string;
   onIconPress?: () => void;
 }
 
@@ -16,21 +17,27 @@ export default function CustomInput({
   error,
   placeholder,
   disabled,
+  type,
   onIconPress,
+  ...rest
 }: CustomInputProps) {
   return (
-    <div className={`input input-${size}`}>
-      <input
-        className={`input-field input-${size}`}
-        placeholder={placeholder}
-        disabled={disabled}
-      />
-      <div className="input-icon" onClick={onIconPress}>
-        {icon}
-      </div>
-      <div className="input-error">
-        {Boolean(error) && <text>{error}</text>}
+    <div className={`input-wrapper input-${size}`}>
+      <div className={`input-container ${error ? "has-error" : ""}`}>
+        <input
+          className={`input-field input-${size}`}
+          placeholder={placeholder}
+          disabled={disabled}
+          type={type}
+          {...rest}
+        />
+        {icon && (
+          <div className="input-icon" onClick={onIconPress}>
+            {icon}
+          </div>
+        )}
       </div>
+      {Boolean(error) && <div className="input-error">{error}</div>}
     </div>
   );
 }

src/components/Input/CarrerInput.tsx

@@ -0,0 +1,5 @@
+import CustomInput from "../CustomInput";
+
+export default function CarrerInput() {
+  return <CustomInput inputSize="large" placeholder="경력을 입력하세요." />;
+}

src/components/Input/DayInput.tsx

@@ -0,0 +1,22 @@
+import { IoIosArrowDown } from "react-icons/io";
+
+export default function DayInput() {
+  const months = Array.from({ length: 31 }, (_, i) => i + 1);
+  return (
+    <div className="input-wrapper input-small">
+      <div className="input-container">
+        <select className="input-select input-large">
+          <option value="">일</option>
+          {months.map((m) => (
+            <option key={m} value={m}>
+              {m}
+            </option>
+          ))}
+        </select>
+        <div className="input-icon">
+          <IoIosArrowDown size={18} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Input/EmailInput.tsx

@@ -0,0 +1,33 @@
+import { RiCheckFill } from "react-icons/ri";
+import CustomInput from "../CustomInput";
+import { useFormContext } from "react-hook-form";
+
+export default function EmailInput() {
+  const {
+    register,
+    trigger,
+    getFieldState,
+    formState: { errors },
+  } = useFormContext();
+
+  const { error, isDirty } = getFieldState("email");
+
+  return (
+    <CustomInput
+      inputSize="large"
+      placeholder="이메일을 입력하세요."
+      icon={
+        <RiCheckFill size={18} color={!error && isDirty ? "green" : "gray"} />
+      }
+      onIconPress={() => trigger("email")}
+      error={errors.email?.message as string}
+      {...register("email", {
+        required: "이메일을 입력해주세요.",
+        pattern: {
+          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+          message: "올바른 이메일 형식이 아닙니다.",
+        },
+      })}
+    />
+  );
+}

src/components/Input/MonthInput.tsx

@@ -0,0 +1,22 @@
+import { IoIosArrowDown } from "react-icons/io";
+
+export default function MonthInput() {
+  const months = Array.from({ length: 12 }, (_, i) => i + 1);
+  return (
+    <div className="input-wrapper input-small">
+      <div className="input-container">
+        <select className="input-select input-large">
+          <option value="">월</option>
+          {months.map((m) => (
+            <option key={m} value={m}>
+              {m}
+            </option>
+          ))}
+        </select>
+        <div className="input-icon">
+          <IoIosArrowDown size={18} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Input/NameInput.tsx

@@ -0,0 +1,21 @@
+import CustomInput from "../CustomInput";
+import { useFormContext } from "react-hook-form";
+
+export default function NameInput() {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <CustomInput
+      inputSize="large"
+      placeholder="이름을 입력하세요."
+      error={errors.name?.message as string}
+      {...register("name", {
+        required: "이름은 필수입니다.",
+        minLength: { value: 2, message: "이름은 2글자 이상이어야 합니다." },
+      })}
+    />
+  );
+}

src/components/Input/PasswordConfrimInput.tsx

@@ -0,0 +1,34 @@
+import { RiCheckFill } from "react-icons/ri";
+import CustomInput from "../CustomInput";
+import { useFormContext } from "react-hook-form";
+
+export default function PasswordConfirmInput() {
+  const {
+    register,
+    watch,
+    trigger,
+    getFieldState,
+    formState: { errors },
+  } = useFormContext();
+
+  const password = watch("password");
+  const { error, isDirty } = getFieldState("email");
+
+  return (
+    <CustomInput
+      inputSize="large"
+      placeholder="비밀번호를 다시 입력하세요."
+      type="password"
+      icon={
+        <RiCheckFill size={18} color={!error && isDirty ? "green" : "gray"} />
+      }
+      onIconPress={() => trigger("password")}
+      error={errors.confirm?.message as string}
+      {...register("confirm", {
+        required: "비밀번호 확인은 필수입니다.",
+        validate: (value) =>
+          value === password || "비밀번호가 일치하지 않습니다.",
+      })}
+    />
+  );
+}

src/components/Input/PasswordInput.tsx

@@ -0,0 +1,31 @@
+import { RiCheckFill } from "react-icons/ri";
+import CustomInput from "../CustomInput";
+import { useFormContext } from "react-hook-form";
+
+export default function PasswordInput() {
+  const {
+    register,
+    trigger,
+    getFieldState,
+    formState: { errors },
+  } = useFormContext();
+
+  const { error, isDirty } = getFieldState("password");
+
+  return (
+    <CustomInput
+      inputSize="large"
+      placeholder="비밀번호를 입력하세요."
+      type="password"
+      icon={
+        <RiCheckFill size={18} color={!error && isDirty ? "green" : "gray"} />
+      }
+      onIconPress={() => trigger("email")}
+      error={errors.password?.message as string}
+      {...register("password", {
+        required: "비밀번호는 필수입니다.",
+        minLength: { value: 8, message: "비밀번호는 8자 이상이어야 합니다." },
+      })}
+    />
+  );
+}

src/components/Input/RegioinInput.tsx

@@ -0,0 +1,26 @@
+import { IoIosArrowDown } from "react-icons/io";
+
+export default function RegionInput() {
+  return (
+    <div className="input-wrapper input-large">
+      <div className="input-container">
+        <select className="input-select input-large">
+          <option value="">지역을 선택해주세요</option>
+          <option value="seoul">서울</option>
+          <option value="busan">부산</option>
+          <option value="daegu">대구</option>
+          <option value="incheon">인천</option>
+          <option value="gwangju">광주</option>
+          <option value="daejeon">대전</option>
+          <option value="ulsan">울산</option>
+          <option value="sejong">세종</option>
+          <option value="gyeonggi">경기도</option>
+          <option value="gangwon">강원도</option>
+        </select>
+        <div className="input-icon">
+          <IoIosArrowDown size={18} />
+        </div>
+      </div>
+    </div>
+  );
+}