설명

내가 만든 성향 테스트 수정, 삭제 공유 그리고 회원 탈퇴 기능이 있는 페이지입니다.

Aside 섹션과 TebPanel 섹션으로 나누어져 있습니다.

Aside.tsx

const Aside = () => {
  const router = useRouter();

  const handleClick = (asPath: string) => {
    router.push(asPath, undefined, { shallow: true });
  };

  return (
    <Container>
      <TabList onClick={handleClick} tabList={TAB_List} />
    </Container>
  );
};

export default Aside;

Aside 에서는 ‘내가 만든 테스트’ , ‘회원 탈퇴’ 텝이 존재합니다. 텝 클릭시 클릭한 tab의 asPath로 전환됩니다.

shallow를 true로 설정한 이유는 페이지를 새로고침하지 않고 브라우저의 주소 표시줄을 업데이트하기 위함입니다. 만약 새로고침을 수행하게 된다면, mypage에 모든 정보를 다시 요청해야 합니다. 그러나 새로고침을 하지 않는 경우, 해당 탭에 관련된 데이터만 요청하게 되므로 효율적입니다.

TebPanel.tsx

const CardItems = lazy(() => import('../CardItems/CardItems'));
const SignoutContainer = lazy(
  () => import('../SignoutContainer/SignoutContainer'),
);

const TebPanel = (): JSX.Element => {
  const router = useRouter();

  useEffect(() => {
    if (router.asPath === '/mypage') {
      router.replace('/mypage?menu=my-personality', undefined, {
        shallow: true,
      });
    }
  }, []);

  const panelList = () => {
    const { menu } = router.query;
    switch (menu) {
      case 'my-personality':
        return (
          <CardItemsWrapper>
            <Suspense fallback={<CardListSkeleton CardListLength={3} />}>
              <CardItems />
            </Suspense>
          </CardItemsWrapper>
        );
      case 'signout':
        return (
          <SignoutFormWrapper>
            <Suspense fallback={<SkeletonSignoutForm />}>
              <SignoutContainer />
            </Suspense>
          </SignoutFormWrapper>
        );
    }
  };

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

export default TebPanel;

Aside에서 텝을 누르게 되면 router.query를 사용하여 menu를 파악합니다. 그 후 switch case 문을 통해 해당하는 텝을 화면에 보여주게 됩니다.

useEffect

router.asPath === '/mypage' 조건문을 사용한 이유는 /mypage로 접속시 /mypage?menu=my-

personality 페이지로 리다이렉트 시키기 위해서 입니다.