✨ Feat(#82) : 로그인 상태에 따른 리다이렉션 구현

[oceanlee-seoul]

연관된 이슈

• close #82

작업 내용

로그인 정보에 따른 리다이렉션을 구현합니다.

• [x] 비로그인 상태로 /mydashboard, /mypage, /dashboard, /dashboard/{dashboardId}/edit 접근 시 /signin으로 리다이렉트
• [x] 로그인 상태로 /signin, /signup 접근 시 /mydashboard로 리다이렉트
• [x] sidebar 상단 로고, 로그인 상태로 클릭하면 /mydashboard 아니면 / 로 이동

스크린샷

(로그인 상태로 /signin, /signup 접근 시) 위와 같이 모달을 오픈합니다.

(비로그인 상태로 /mydashboard, /mypage, /dashboard, /dashboard/{dashboardId}/edit 접근 시) 위와 같이 모달을 오픈합니다.

코멘트 및 논의 사항

기능적인 부분은 이상이 없지만 모달 뒤에서 레이아웃이 깜빡 거리는 현상이 나옵니다 다들 말씀하신대로 useEffect 때문에 생기는 문제인지 확인 해주시면 감사하겠습니다.

[un0211]

제 로컬에선 signup은 안깜빡거리고, signin은 잠시 로드되고, / 는 아예 리다이렉트가 안되네요

[wjsdncl]

아 로그인 페이지에서 내 대시보드 같은 페이지로 이동할때 깜빡이는게 심하네요 이건 SSR로 하면 더심해지겠네요 ㅋㅋ...

[un0211]

아 로그인 페이지에서 내 대시보드 같은 페이지로 이동할때 깜빡이는게 심하네요

여기가 그나마 길긴 한데, 엄청 길진 않아서 방법 찾기 전까진 대양님이 하신대로 머지해도 될 것 같아요! 저도 깜빡이는 문제 해결은 전에 하려다가 성공 못했던거라 당장 방법은 모르겠네요 ㅠㅠ 다만 제가 이것저것 시도하다가 짰는데

    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <QueryClientProvider client={queryClient}>
          <Redirect>
            <Modal />
            <MainLayout>
              <Component {...pageProps} />
            </MainLayout>
            <ReactQueryDevtools initialIsOpen={false} />
          </Redirect>
        </QueryClientProvider>
      </PersistGate>
    </Provider>

export default function Redirect({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const currentPath = router.asPath;

  if (['/', '/signup', 'signin'].includes(currentPath)) {
    const isRedirecting = useRedirectIfAuthenticated();
    if (isRedirecting) {
      return <></>;
    }
  } else if (['/mypage', '/mydashboard'].includes(currentPath) || currentPath.startsWith('/dashboard')) {
    const isRedirecting = useRedirectIfNotAuth();
    if (isRedirecting) {
      return <></>;
    }
  }
  return children;
}

이런식으로 리다이이렉트 전담하는 컴포넌트 만들면 일괄 관리하기는 편할 것 같아요!

[wjsdncl]

MainLayout에 넣어봤습니다 비 로그인 접근 시 레이아웃은 안 보이게는 할 수 있네요 아 이렇게 하니까 새로고침하면 모달이 게속나오네요 ㅠㅠ

import { useRouter } from 'next/router';
import { useSelector } from 'react-redux';

import Header from '@/components/Header';
import Sidebar from '@/components/Sidebar';
import useRedirectIfNotAuth from '@/hooks/useRedirectIfNotAuth';
import { RootState } from '@/store/store';

export default function MainLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const currentPath = router.asPath;

  const { user } = useSelector((state: RootState) => state.user);
  const isRedirectingNotAuth = useRedirectIfNotAuth();

  if (isRedirectingNotAuth) return <></>;

  if (currentPath === '/') {
    return (
      <div className='min-w-[360px]'>
        <Header />
        {children}
      </div>
    );
  }

  const isDisabled = currentPath === '/signin' || currentPath === '/signup' || currentPath === '/404';

  if (isDisabled) return <div className='min-w-[360px]'>{children}</div>;

  return (
    <div className='flex min-w-[375px]'>
      {!user ? (
        <></>
      ) : (
        <>
          <Sidebar />

          <div className='flex grow flex-col'>
            <Header />
            <main className='flex grow flex-col bg-gray-fa'>{children}</main>
          </div>
        </>
      )}
    </div>
  );
}

[un0211]

제가 이거 되는지 한 번 해볼게요!

[un0211]

https://github.com/Part3-Team15/taskify/assets/24778465/373facfc-06e5-4c14-aa0b-2e68ed493195

미들웨어 했는데도 저는 살짝 깜빡거리네요..

제대로 적용이 안된걸지도.. ㅠㅠ 저는 headers.get('Authorization')를 했는데, 저희 자체적으로 페이지 요청할때는 아마도 axios를 안 쓸것 같아서 로그인 정보를 알아낼 방법을 모르겠네요..

[un0211]

이것도 멘토님께 여쭤볼걸 그랬네요..!