Feat: #5 회원가입 페이지 생성 및 Validation 작성

.eslintrc.cjs

@@ -36,6 +36,7 @@ module.exports = {
     'import/extensions': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'warn',
     'vitest/valid-title': 'off',
+    'react/jsx-props-no-spreading': 'off',
   },
   ignorePatterns: [
     'dist',

package.json

@@ -22,6 +22,7 @@
     "react-hook-form": "^7.51.4",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

src/components/common/ValidationInput.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { RiEyeFill, RiEyeOffFill } from 'react-icons/ri';
+
+/**
+ * ValidationInput 컴포넌트 params, 모든 params는 optional
+ *
+ * @params {string} [label] - 입력 필드의 label 텍스트
+ * @params {string} [errors] - 유효성 검증 후 오류 발생 시 표시할 오류 메시지
+ * @params {UseFormRegisterReturn} [register] - react-hook-form의 resister 함수.
+ *         register('password', {required: ...})부분을 그대로 파라미터에 넣으면 됩니다.
+ * @params {string} [type] - 입력 필드의 유형(ex: text, password). 기본값은 'text'
+ * @params {string} [placeholder] - 입력 필드의 placeholder 텍스트
+ * @params {boolean} [isButtonInput] - 버튼이 포함된 입력 필드인지 여부. 기본값은 'false'
+ * @params {React.ReactNode} [buttonLabel] - 버튼에 표시할 텍스트 또는 아이콘
+ * @params {() => void} [onButtonClick] - 버튼 클릭 시 호출할 함수
+ *
+ * 예시) 
+ * <ValidationInput
+      label="비밀번호 확인"
+      errors={errors.checkPassword?.message}
+      register={register('checkPassword', {
+        required: '비밀번호를 한 번 더 입력해 주세요.',
+        validate: (value) => value === watch('password') || '비밀번호가 일치하지 않습니다.',
+      })}
+      type="password"
+    />
+ */
+
+type ValidationInputProps = {
+  label?: string;
+  errors?: string;
+  register?: UseFormRegisterReturn;
+  type?: string;
+  placeholder?: string;
+  isButtonInput?: boolean;
+  buttonLabel?: React.ReactNode;
+  onButtonClick?: () => void;
+};
+
+export default function ValidationInput({
+  label,
+  errors,
+  register,
+  type = 'text',
+  placeholder,
+  isButtonInput = false,
+  buttonLabel,
+  onButtonClick,
+}: ValidationInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleTogglePassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <div className="relative">
+      {label && (
+        <label htmlFor={label} className="font-bold">
+          {label}
+        </label>
+      )}
+      <div
+        className={`flex h-30 items-center rounded-lg border px-6 text-sm ${
+          errors ? 'border-2 border-[#FF0000]' : 'border-input'
+        }`}
+      >
+        <div className="flex h-full w-full flex-row items-center gap-8">
+          <input
+            id={label}
+            {...register}
+            type={type === 'password' && showPassword ? 'text' : type}
+            placeholder={placeholder}
+            className={`h-full bg-inherit outline-none placeholder:text-emphasis ${isButtonInput ? 'w-[90%]' : 'w-full'}`}
+          />
+          {isButtonInput && (
+            <button
+              type="button"
+              className="flex h-20 w-90 items-center justify-center rounded bg-sub px-8 font-bold shadow-md"
+              onClick={onButtonClick}
+            >
+              {buttonLabel}
+            </button>
+          )}
+        </div>
+        {type === 'password' && (
+          <div className="absolute right-0 flex items-center pr-8 text-gray-400">
+            {showPassword ? (
+              <RiEyeFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
+            ) : (
+              <RiEyeOffFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
+            )}
+          </div>
+        )}
+      </div>
+      {errors && <p className="mt-[.5rem] text-sm text-[#FF0000]">{errors}</p>}
+    </div>
+  );
+}

src/constants/regex.ts

@@ -0,0 +1,3 @@
+export const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+export const PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/;
+export const PHONE_REGEX = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

src/globals.css

@@ -96,4 +96,11 @@
   .selected::before {
     @apply absolute left-0 top-0 block h-30 w-3 bg-main content-[''];
   }
+  .auth-btn {
+    @apply flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold;
+  }
+
+  .auth-input {
+    @apply h-30 flex-grow rounded-lg border border-input px-8 text-sm outline-none placeholder:text-emphasis;
+  }
 }

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;