Merge pull request #122 from imaginer-dev/121----strategy-pattern

121    strategy pattern

Author: gihwan-dev

docs/design/jalee_validation_design_point.md

@@ -1,9 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useLoginState } from '../../stores/loginStore.ts';
-import { isValidEmail } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '@/utils/authUtils.ts';
 
 const EmailInput = () => {
   const { email, emailHandler } = useLoginState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -16,7 +17,7 @@ const EmailInput = () => {
       name={'email'}
       id={'email-input'}
       aria-label={'login-email-input'}
-      error={!isValidEmail(email)}
+      error={!validator.isValidEmail(email)}
       errorText={'올바른 이메일을 입력해 주세요.'}
     />
   );

docs/design/validation_design_point.md

@@ -1,5 +1,5 @@
 import { useLoginState } from '@/stores/loginStore.ts';
-import { isValidEmail, isValidPassword } from '@/utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '@/utils/authUtils.ts';
 import { useRef, useState } from 'react';
 import useSignIn from '../../react-queries/useSignIn.ts';
 import { isAuthError } from '@supabase/supabase-js';
@@ -14,7 +14,7 @@ interface DialogElement {
 
 const messages = {
   ISVAILD_ERROR: '이메일 또는 비밀번호 형식이 잘못되었습니다.',
-  AUTH_ERROR: '이메일 또는 비밀번호가 정확하지 않습니다.',
+  AUTH_ERROR: '인증 오류가 발생했습니다. 다시 시도해주세요.',
 };
 
 const LoginButton = () => {
@@ -24,8 +24,10 @@ const LoginButton = () => {
   const dialogRef = useRef<DialogElement | null>(null);
   const [dialogMessage, setDialogMessage] = useState('');
 
+  const validator = new ValidateProcessor(new LooseValidation());
+
   const onClick = () => {
-    if (!isValidEmail(email) || !isValidPassword(password)) {
+    if (!validator.isValidEmail(email) || !validator.isValidPassword(password)) {
       setDialogMessage(messages.ISVAILD_ERROR);
       dialogRef.current?.openModal();
       return;

pnpm-lock.yaml

@@ -1,10 +1,12 @@
 import InputForm from '../common/InputForm.tsx';
 import { useLoginState } from '../../stores/loginStore.ts';
-import { isValidPassword } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '@/utils/authUtils.ts';
 
 const PasswordInput = () => {
   const { password, passwordHandler } = useLoginState();
 
+  const validator = new ValidateProcessor(new LooseValidation());
+
   return (
     <InputForm
       defaultValue={password}
@@ -16,7 +18,7 @@ const PasswordInput = () => {
       type={'password'}
       id={'password-input'}
       aria-label={'login-password-input'}
-      error={!isValidPassword(password)}
+      error={!validator.isValidPassword(password)}
       errorText={'비밀번호는 6자리 이상이어야 합니다.'}
     />
   );

src/components/login/EmailInput.tsx

@@ -1,19 +1,21 @@
 import { describe, expect, it } from 'vitest';
-import { isValidEmail, isValidPassword } from '../authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '@/utils/authUtils.ts';
+
+const validator = new ValidateProcessor(new LooseValidation());
 
 describe('이메일 검증 유틸리티 함수 테스트', () => {
   it('이메일이 유효할 경우 true 를 반환한다.', () => {
-    expect(isValidEmail('[email protected]')).toBe(true);
-    expect(isValidEmail('[email protected]')).toBe(true);
+    expect(validator.isValidEmail('[email protected]')).toBe(true);
+    expect(validator.isValidEmail('[email protected]')).toBe(true);
   });
   it('이메일이 유요하지 않을 경우 false 를 반환한다.', () => {
-    expect(isValidEmail('test.com')).toBe(false);
-    expect(isValidEmail('test@test')).toBe(false);
+    expect(validator.isValidEmail('test.com')).toBe(false);
+    expect(validator.isValidEmail('test@test')).toBe(false);
   });
 });
 
 describe('비밀번호 검증 유틸리티 함수 테스트', () => {
   it('비밀번호가 6자리 이상이 아닐 경우 false 를 반환한다.', () => {
-    expect(isValidPassword('some')).toBe(false);
+    expect(validator.isValidPassword('some')).toBe(false);
   });
 });

src/components/login/LoginButton.tsx

@@ -1,8 +1,42 @@
-export const isValidEmail = (email: string): boolean => {
-  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
-  return regex.test(email);
-};
-
-export const isValidPassword = (password: string) => {
-  return password.length >= 6;
-};
+export interface ValidationStrategy {
+  emailValidate(input: string): boolean;
+  passwordValidate(input: string): boolean;
+}
+
+export class LooseValidation implements ValidationStrategy {
+  emailValidate(email: string): boolean {
+    return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email);
+  }
+  passwordValidate(input: string): boolean {
+    return input.length >= 6;
+  }
+}
+
+export class StrongValidation implements ValidationStrategy {
+  emailValidate(password: string): boolean {
+    return password.length >= 6;
+  }
+  passwordValidate(input: string): boolean {
+    const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
+    return regex.test(input);
+  }
+}
+
+export class ValidateProcessor {
+  #validator: ValidationStrategy;
+  constructor(validator: ValidationStrategy) {
+    this.#validator = validator;
+  }
+
+  setValidator(validator: ValidationStrategy) {
+    this.#validator = validator;
+  }
+
+  isValidEmail(email: string) {
+    return this.#validator.emailValidate(email);
+  }
+
+  isValidPassword(password: string) {
+    return this.#validator.passwordValidate(password);
+  }
+}