간단한 게시판 만들기 - 3

어쩌다보니 만든 로그인과 회원가입 버튼이 신경쓰여서 마저 만들기로 하였다.

 

먼저 헤더에 만들어둔 로그인과 회원가입 버튼을 수정해주었다.

//header
function Header(props) {
  return (
  <header>
    <h2><a href="/" onClick={event=>{
      event.preventDefault();
      props.onChangeMode();
    }}>My Home</a></h2>
    <div>
      <p><a id="account" href="/create_account" onClick={event=>{
        event.preventDefault();
        props.setMode('ACCOUNT');
      }}>Create Account</a></p>
      <p><a id="log" href="/login" onClick={event=>{
        event.preventDefault();
        props.setMode('LOGIN');
      }}>LOGIN</a></p>
    </div>
  </header>
  )
}

로그인 버튼을 누르면 mode='LOGIN'으로 회원가입 버튼을 누르면 mode='ACCOUNT'로 변경된다.

 

로그인의 경우

function App() {
  const [mode, setMode] = useState('HOME');   //페이지 상태
  const [member, setMember] = useState(null); //로그인 상태 및 정보
  ...
	else if(mode === 'LOGIN') {
    let m_nick = null;
    content = <Login onLogin={(u_id, u_pw)=>{
      for(let i=0; i<user.length; i++){
        if(user[i].id === u_id){
          if(user[i].pw === u_pw){
            m_nick = user[i].name;
          }
        }
      }
      if(m_nick !== null){
        setMember(m_nick);
        setMode('HOME');
      }
      else {
        alert('아이디와 비밀번호를 확인해주십시오.');
        setMode('LOGIN');
      }
    }}></Login>
  }
}

로그인 상태를 확인할 수 있도록 member값을 만들었다.

아이디와 비밀번호가 일치할 경우 해당 유저의 이름을 member의 값으로 받아와 저장한다.

로그인 페이지 폼은 다음과 같다.

//login
function Login(props){
  return(
    <article>
      <form onSubmit={event=>{
        event.preventDefault();
        const u_id = event.target.id.value;
        const u_pw = event.target.pw.value;
        props.onLogin(u_id, u_pw);
      }}>
        <div class="login_page">
          <div class="login_info">
            <input class="u_id" type="text" name='id' placeholder='아이디' />
            <input class="u_pw" type="password" name='pw' placeholder='비밀번호' />
          </div>
          <div class="login_bt">
            <input id="u_bt" type="submit" value='로그인' />
          </div>
        </div>
      </form>
    </article>
  )
}

 

회원가입의 경우

if(mode === 'HOME'){...}
...
else if(mode === 'ACCOUNT') {
    let temp = 0;
    content = <Account onAccount={(nick, u_id, u_pw)=>{
      for(let i=0; i<user.length; i++){
        if(user[i].u_id === u_id){
          alert('중복되는 아이디입니다.');
          setMode('ACCOUNT');
          break;
        }
        else if(user[i].nick === nick){
          alert('중복되는 닉네임입니다.');
          setMode('ACCOUNT');
          break;
        } else {
          const newinfo = {name:nick, id: u_id, pw: u_pw};
          const info = [...user];
          info.push(newinfo);
          setUser(info);
          alert('가입이 완료되었습니다.');
          setMode('LOGIN');
        }
      } 
    }}></Account>
  }

//create_account
function Account(props){
  return(
    <article>
      <form onSubmit={event=>{
        event.preventDefault();
        const u_nick = event.target.nick.value;
        const u_id = event.target.id.value;
        const u_pw = event.target.pw.value;
        props.onAccount(u_nick, u_id, u_pw);
      }}>
        <div class="account_page">
          <div class="account_info">
            <input class="u_nick" type="text" name='nick' placeholder='닉네임' />
            <input class="u_id" type="text" name='id' placeholder='아이디' />
            <input class="u_pw" type="password" name='pw' placeholder='비밀번호' />
          </div>
          <div class="account_bt">
            <input id="u_bt" type="submit" value='완료' />
          </div>
        </div>
      </form>
    </article>
  )
}

글 생성과 같은 방식으로 작성하였다.

 

로그인을 만드니 이제 로그인이 되었을 경우 로그아웃을 할 수 있도록 해야하는 문제가 발생했다.

내부적으로는 단순히 로그아웃 버튼을 만들고 member의 값을 해제하면 그만이지만

페이지에 로그인 버튼과 로그아웃 버튼이 공존하고 로그인을 했는데도 회원가입 버튼이 활성화되어있는 문제점이 발생했다.

조건에 따라 해당 태그를 보여주거나 보여주지 않게하려면 javascript의 document 객체를 이용해야한다.

document.getElementById("태그 이름").style.display

위의 객체를 이용하여 작성해보면

<Header>

//header
function Header(props) {
  let mode = null;  //로그인 상태
  let u_login = null;   //로그인 된 유저 정보

  if (props.member === null){	//mode값으로 활용하기 위해
    mode = 'LOGIN';
  } else if(props.member !== null){
    mode = 'LOGOUT';
    u_login = `${props.member} 님 환영합니다 `
  }
  return (
  <header>
    <h2><a href="/" onClick={event=>{
      event.preventDefault();
      props.onChangeMode();
    }}>My Home</a></h2>
    <div>
      <p>{u_login}</p>	//로그인 정보를 간략히 표현
      <p><a id="account" href="/create_account" onClick={event=>{	//id값 생성
        event.preventDefault();
        props.setMode('ACCOUNT');
      }}>Create Account</a></p>
      <p><a id="log" href="/login" onClick={event=>{
        event.preventDefault();
        props.setMode(mode);
      }}>{mode}</a></p>
    </div>
  </header>
  )
}

먼저 login과 logout 각각 버튼을 만들어 document 객체로 숨겨도 되지만 어차피 mode값을 바꿔야하기에 그냥 하나로 합치고 버튼의 value값만 바꾸도록 하였다.

반면 회원가입 버튼은 필요에 따라 숨겨져야만 하기 때문에 버튼을 생성해두고 이후에 document 객체를 통해 숨기기로 하였다.

else if(mode === 'LOGIN') {
    let m_nick = null;
    content = <Login onLogin={(u_id, u_pw)=>{
      for(let i=0; i<user.length; i++){
        if(user[i].id === u_id){
          if(user[i].pw === u_pw){
            m_nick = user[i].name;
          }
        }
      }
      if(m_nick !== null){
        setMember(m_nick);
        setMode('HOME');
        document.getElementById("account").style.display = "none";
      }
      else {
        alert('아이디와 비밀번호를 확인해주십시오.');
        setMode('LOGIN');
      }
    }}></Login>

위의 헤더에서 붙여준 버튼의 id값을 통해 회원가입 버튼을 로그인시에 숨기도록 하였다.

이제 해결되었으니 로그아웃 기능을 만들어주어야 한다.

else if(mode === 'LOGOUT') {
    setMember(null);
    setMode('HOME');
    document.getElementById("account").style.display = "";
  }

로그아웃도 글 삭제와 같이 별다른 페이지가 필요없이 상태만 변경해주면 된다.

setMember(null); 을 통해 로그인 상태를 해제하여 주고 회원가입 버튼을 다시 활성화해준다.

mode값이 'LOGOUT' 이므로 로그인 버튼은 자동으로 활성화 된다.