✨ [탭 기능] 마이페이지 탭 이동 구현

탭을 누를 때마다 아래 보여지는 컨텐츠가 달라지고 탭의 스타일도 바뀌는 마이페이지의 탭을 구현했다. 코드는 아래와 같다.

const TabState = {
  readHistory: false,
  payments: false,
  userInfo: false,
};

const MyPage: NextPage<{}> = ({}) => {
  const [clickedTab, setClickedTab] = useState({
    ...TabState,
    readHistory: true,
  });

  const { readHistory, payments, userInfo } = clickedTab;

  const handleTabClick = (clicked: string) => {
    if (clicked === 'readHistory') {
      setClickedTab({ ...TabState, readHistory: true });
      return;
    } else if (clicked === 'payments') {
      setClickedTab({ ...TabState, payments: true });
      return;
    }
    setClickedTab({ ...TabState, userInfo: true });
  };

  return (
    <Layout title="마이페이지 - EffiTizer">
      <main className={styles.main}>
        <header className={styles.header}>
          <h1 className={styles.title}>홍길동 님</h1>
          <button
            onClick={() => {}}
            type="button"
            className={styles.logoutButton}
          >
            로그아웃
          </button>
        </header>

        <section className={styles.section}>
          <ul className={styles.tabList}>
            <li
              className={classNames(
                styles.tabListItem,
                readHistory && styles.clickedTabListItem
              )}
              onClick={() => handleTabClick('readHistory')}
            >
              읽은 콘텐츠
            </li>
            <li
              className={classNames(
                styles.tabListItem,
                payments && styles.clickedTabListItem
              )}
              onClick={() => handleTabClick('payments')}
            >
              결제 관리
            </li>
            <li
              className={classNames(
                styles.tabListItem,
                userInfo && styles.clickedTabListItem
              )}
              onClick={() => handleTabClick('userInfo')}
            >
              회원정보
            </li>
          </ul>
          <div className={styles.contents}>
            {readHistory ? (
              <ReadHistoryContents />
            ) : payments ? (
              <PaymentsContents />
            ) : userInfo ? (
              <UserInfoContents />
            ) : (
              <></>
            )}
          </div>
        </section>
      </main>
    </Layout>
  );
};