소스:

https://github.dev/braverokmc79/macaronics-react-udemy-ex21-2/

1. 회원가입 및 로그인 폼

App.jsx

 {
        path: "auth",  
       element: <AuthenticationPage />,      
      
      }

AuthenticationPage.jsx

import AuthForm from "./AuthForm";

function AuthenticationPage(){
    return <AuthForm/>;
}

AuthForm.jsx

import { Form,  NavLink, useActionData, useNavigation, useSearchParams } from 'react-router-dom';
import classes from './AuthForm.module.css';
import { useEffect, useState } from 'react';

function AuthForm() {

  const data=useActionData();
  const navigation=useNavigation();

  // eslint-disable-next-line no-unused-vars
  const [searchParam, setSearchParam]=useSearchParams();
  const mode=searchParam.get("mode")==='login';
  const [isLogin, setIsLogin]=useState(true);

  const isSubmitting=navigation.state==='submitting';

  useEffect(()=>{
   //console.log("searchParam ",searchParam);
   if(searchParam.size!==0){
    setIsLogin(mode);
   }
  }, [mode, searchParam]);
   

  return (
    <>
      <Form method="post" className={classes.form}>
      <h1>{isLogin ? '로그인하기' : '회원가입하기'}</h1>
        {data && data.message && <p className='warn'>{data.message} </p>}        
        {data &&data.errors&&         
           <ul className='error'>
              {Object.values(data.errors).map( err=>{
                return <li key={err}>{err}</li>
              })              
             }
            </ul>      
          } 
        
        <p>
          <label htmlFor="email">이메일</label>
          <input id="email" type="email" name="email" required />
        </p>
        <p>
          <label htmlFor="password">비밀번호</label>
          <input id="password" type="password" name="password" required />
        </p>

        <div className='login-btn'>
          <div className={classes.actions}>
            <NavLink  to={`?mode=${isLogin ? 'signup' :'login'}`}
              className={({isActive})=>isActive ?classes.active:undefined }          
            >
              {isLogin ? '회원가입하기' : '로그인하기'}
            </NavLink >
          </div>

          <div className={`${classes.actions} textCenter`}>
            <button className={`button-success ${classes.btn}`} disabled={isSubmitting} >
              {isSubmitting ? (isLogin?'로그인중...':'등록처리중...'):(isLogin ? '로그인' : '등록') }          
            </button>
          </div>
        </div>
      </Form>
    </>
  );
}

export default AuthForm;

2.사용자 인풋 & 아웃풋 유효성 검증 오류확인

import { Form,  NavLink, useActionData, useNavigation, useSearchParams } from 'react-router-dom';
import classes from './AuthForm.module.css';
import { useEffect, useState } from 'react';

function AuthForm() {

  const data=useActionData();
  const navigation=useNavigation();

  // eslint-disable-next-line no-unused-vars
  const [searchParam, setSearchParam]=useSearchParams();
  const mode=searchParam.get("mode")==='login';
  const [isLogin, setIsLogin]=useState(true);

  const isSubmitting=navigation.state==='submitting';

  useEffect(()=>{
   //console.log("searchParam ",searchParam);
   if(searchParam.size!==0){
    setIsLogin(mode);
   }
  }, [mode, searchParam]);
   

  return (
    <>
      <Form method="post" className={classes.form}>
      <h1>{isLogin ? '로그인하기' : '회원가입하기'}</h1>
    
       <div className='error-message'>       
        {data && data.message && <p className='warn'>{data.message} </p>}        
        {data &&data.errors&&         
           <ul className='error'>
              {Object.values(data.errors).map( err=>{
                return <li key={err}>{err}</li>
              })              
             }
            </ul>      
          } 
       </div>

        <p>
          <label htmlFor="email">이메일</label>
          <input id="email" type="email" name="email" required />
        </p>
        <p>
          <label htmlFor="password">비밀번호</label>
          <input id="password" type="password" name="password" required />
        </p>

        <div className='login-btn'>
          <div className={classes.actions}>
            <NavLink  to={`?mode=${isLogin ? 'signup' :'login'}`}
              className={({isActive})=>isActive ?classes.active:undefined }          
            >
              {isLogin ? '회원가입하기' : '로그인하기'}
            </NavLink >
          </div>

          <div className={`${classes.actions} textCenter`}>
            <button className={`button-success ${classes.btn}`} disabled={isSubmitting} >
              {isSubmitting ? (isLogin?'로그인중...':'등록처리중...'):(isLogin ? '로그인' : '등록') }          
            </button>
          </div>
        </div>
      </Form>
    </>
  );
}

export default AuthForm;