소주제 : Custom hooks & 타입스크립트 Generic

1. Custom-hooks 만들기

1. 다음 코드를 복사하여 페이지를 만들어 주세요.

import { useState } from "react";

export default function QuizPage() {
  const [count, setCount] = useState(0);

  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <>
      <div>
        <p>지금의 카운트는 {count} 입니다!</p>
        <button onClick={onClickCountUp}>Count up!</button>
      </div>
    </>
  );
}

1. Custom-hooks 을 이용하여 코드를 간결하게 리팩토링 해보세요.

   ⇒ 힌트: useState 부분과 onClickCountUp 함수를 Custom-hooks 으로 분리할 수 있습니다.

2. useAuth로 권한분기하기

1. 권한분기할 로직을 따로 분리해 useAuth라는 custom hooks를 만들어주세요.
2. login 페이지에서 아이디, 비밀번호 입력창을 만들고 loginUser를 활용하여 accessToken을 받은 후, main페이지로 router.push를 통해 이동시켜 주세요.
3. main페이지에서 로그인된 유저만 접근할 수 있도록 useAuth를 이용해 권한분기를 해주세요.