리액트 - 메신저 만들기 1

4번째 주간과제 메신저

이전 기수에서 파이널 프로젝트를 진행할 때 채팅을 구현하고자 하는 선배님들이 많았다고 한다.

그래서 아예 파이널 직전 과제로 해보는 것이 어떨까 하는 쌤의 출제 의도에 따라 한번 만들어보기로 했다.

사용한 환경은 다음과 같다.

1. 자바스크립트
2. vite + eslint
3. tailwind
4. storybook

과제 요구사항은 컨텍스트API 및 리액트 라우터를 사용해 보라는 것이었는데.. 아직 진도가 안나간 부분이라 만들다 필요한 부분이 생기면 공부해서 적용해볼까 한다.

1. 커버 이후 로그인 페이지 노출

과제 요구사항의 이미지가 위와 같다.
커버 페이지를 먼저 노출하고, 로그인 화면으로 이동하는 것이 첫번째 단계가 되겠다.

어떻게 구현할지 고민하다 setTimeout을 이용하기로 했다.

/* useCover.js */
function useCover() {
  const [cover, setCover] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setCover(false);
    }, 2000);
  }, []);

  return cover;
}

/* App.jsx */
function App() {
  const cover = useCover();

  return (
    <>
      {cover ? <Cover /> : <Messenger />}
    </>
  );
}

useCover 커스텀 훅을 이용해 cover 상태를 2초 후 업데이트해서 렌더링하는 페이지를 변경하는 식으로 만들었다.

2. 회원가입 페이지 이동 및 돌아가기

먼저 Cover 컴포넌트가 Messenger 컴포넌트로 전환된 이후, 로그인 상태에 따라 로그인 혹은 채팅방 리스트 페이지를 보여주기 위해 먼저 로그인 페이지를 렌더링했다.

/* Messenger.jsx */
function Messenger() {
  const [isLogin, setIsLogin] = useState(false);

  return (
    <section className="bg-[#eee7d7] w-96 h-[720px] flex items-center flex-col px-24 py-36">
      <h2 className="sr-only">Sang Messenger</h2>
      {isLogin ? '' : <Login isLogin={isLogin} changeState={setIsLogin}/>}
    </section>
  );
}

로그인 페이지에서는 page 상태를 만들고, 회원가입 버튼을 클릭하면 page 상태를 register로 바꾸어 상태에 따른 조건부 렌더링을 적용했다.

/* Login.jsx */
function Login({ isLogin, changeState }) {
  const [page, setPage] = useState('');

  const displayPage = () => {
    switch (page) {
      case 'register':
        return <RegisterForm backPage={setPage} />
      default:
        return <LoginForm register={handleRegister} />
    }
  }

  const handleRegister = () => {
    setPage('register');
  }

  return (
    <>
      {displayPage()}
    </>
  );
}

또한 페이지 상태를 바꾸는 setPage 메소드를 회원가입 폼에도 전달해서 Cancel 버튼 클릭 시 다시 page 상태를 ''로 바꾸어 렌더링하도록 했다.

/* RegisterForm.jsx */
function RegisterForm({ backPage }) {
  ...
  const handleCancel = () => {
    backPage('');
  };
  ...
  return (
    <form ref={registerForm} className="relative flex flex-col gap-1 h-full" method="POST">
      <h3 className="text-center font-bold mb-3">회원가입</h3>
      ...
      <Button
        theme="zinc"
        styleClass="absolute bottom-[-40px]"
        onClick={handleCancel}
      >
        Cancel
      </Button>
    </form>
  );
}

회원가입 폼까지 렌더링을 했으니, 이제 회원가입 기능을 만들 차례다. 기능 구현은 다음 포스트에서 이어서 할 예정이다.

배포 페이지: https://sangmessenger.netlify.app/
깃허브: https://github.com/SWLee2973/react-homework-4