Closed oceanlee-seoul closed 2 months ago
제 로컬에선 signup은 안깜빡거리고, signin은 잠시 로드되고, / 는 아예 리다이렉트가 안되네요
아 로그인 페이지에서 내 대시보드 같은 페이지로 이동할때 깜빡이는게 심하네요 이건 SSR로 하면 더심해지겠네요 ㅋㅋ...
아 로그인 페이지에서 내 대시보드 같은 페이지로 이동할때 깜빡이는게 심하네요
여기가 그나마 길긴 한데, 엄청 길진 않아서 방법 찾기 전까진 대양님이 하신대로 머지해도 될 것 같아요! 저도 깜빡이는 문제 해결은 전에 하려다가 성공 못했던거라 당장 방법은 모르겠네요 ㅠㅠ 다만 제가 이것저것 시도하다가 짰는데
<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;
}
이런식으로 리다이이렉트 전담하는 컴포넌트 만들면 일괄 관리하기는 편할 것 같아요!
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>
);
}
https://github.com/Part3-Team15/taskify/assets/24778465/373facfc-06e5-4c14-aa0b-2e68ed493195
미들웨어 했는데도 저는 살짝 깜빡거리네요..
제대로 적용이 안된걸지도.. ㅠㅠ 저는 headers.get('Authorization')를 했는데, 저희 자체적으로 페이지 요청할때는 아마도 axios를 안 쓸것 같아서 로그인 정보를 알아낼 방법을 모르겠네요..
이것도 멘토님께 여쭤볼걸 그랬네요..!
연관된 이슈
작업 내용
로그인 정보에 따른 리다이렉션을 구현합니다.
스크린샷
코멘트 및 논의 사항
기능적인 부분은 이상이 없지만 모달 뒤에서 레이아웃이 깜빡 거리는 현상이 나옵니다 다들 말씀하신대로 useEffect 때문에 생기는 문제인지 확인 해주시면 감사하겠습니다.