Feat: 로그아웃 상태에서 페이지 접근시 로그인 페이지로 리다이렉트 하는 커스텀 훅 구현 및 적용

eunji-0623 · Jul 23, 2024 · 904ad51 · 904ad51
1 parent 5b73fff
commit 904ad51
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 10 deletions.
diff --git a/hooks/useAuthRedirect.ts b/hooks/useAuthRedirect.ts
@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { usePopup } from './usePopup';
+import useLoginState from './useLoginState';
+
+export default function useAuthRedirect() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const refreshToken = localStorage.getItem('refreshToken');
+    if (!refreshToken) {
+      router.push('/login');
+    }
+  }, [router]);
+}
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
@@ -16,6 +16,7 @@ import { darkModeState } from '@/states/themeState';
 import { InitialPageMeta } from '@/components/MetaData/MetaData';
 import { GetServerSideProps } from 'next';
 import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const OGTitle = '예약현황 | GLOBALNOMAD';
@@ -32,6 +33,8 @@ export default function CalendarPage({ OGTitle, OGUrl }: SSRMetaProps) {
   const [activityId, setActivityId] = useState<number | null>(null);
   const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
   const [isDarkMode, setIsDarkMode] = useRecoilState(darkModeState);
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
 
   const openSideNavigation = () => {
     setIsOpen(!isOpen);

diff --git a/pages/myactivity/edit.tsx b/pages/myactivity/edit.tsx
@@ -6,6 +6,7 @@ import { getActivityInfo } from '../api/activities/apiactivities';
 import { GetServerSideProps } from 'next';
 import { InitialPageMeta } from '@/components/MetaData/MetaData';
 import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const OGTitle = '내 체험 수정 | GLOBALNOMAD';
@@ -20,6 +21,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
 
 function EditMyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
   const { query } = useRouter();
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
   const id = Number(query.activityId);
   const { data: activityData } = useQuery<getActivityInfoResponse>({
     queryKey: ['activityDetailsEdit', id],

diff --git a/pages/myactivity/index.tsx b/pages/myactivity/index.tsx
@@ -15,6 +15,7 @@ import { darkModeState } from '@/states/themeState';
 import { InitialPageMeta } from '@/components/MetaData/MetaData';
 import { GetServerSideProps } from 'next';
 import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const OGTitle = '내 체험 관리 | GLOBALNOMAD';
@@ -34,6 +35,8 @@ function MyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
     useMyActivityList();
   const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
   const [isDarkMode, setIsDarkMode] = useRecoilState(darkModeState);
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
 
   const openSideNavigation = () => {
     setIsOpen(!isOpen);

diff --git a/pages/myactivity/register.tsx b/pages/myactivity/register.tsx
@@ -1,6 +1,7 @@
 import { InitialPageMeta } from '@/components/MetaData/MetaData';
 import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
 import RegisterForm from '@/components/MyActivity/Register/RegisterForm';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 import { GetServerSideProps } from 'next';
 
 export const getServerSideProps: GetServerSideProps = async () => {
@@ -15,6 +16,9 @@ export const getServerSideProps: GetServerSideProps = async () => {
 };
 
 function RegisterActivity({ OGTitle, OGUrl }: SSRMetaProps) {
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
+
   return (
     <>
       <InitialPageMeta title={OGTitle} url={OGUrl} />

diff --git a/pages/mypage.tsx b/pages/mypage.tsx
@@ -3,6 +3,7 @@ import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
 import MyPageInput from '@/components/MyPageInput/MyPageInput';
 import SidenNavigation from '@/components/SideNavigation/SideNavigation';
 import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 import useLoginState from '@/hooks/useLoginState';
 import { useSideNavigation } from '@/hooks/useSideNavigation';
 import { GetServerSideProps } from 'next';
@@ -24,16 +25,8 @@ export default function MyPage({ OGTitle, OGUrl }: SSRMetaProps) {
   const route = useRouter();
   const { isLoggedIn } = useLoginState();
   const { isOpen } = useSideNavigation();
-
-  useEffect(() => {
-    if (!isLoggedIn) {
-      route.push('/login');
-    }
-  }, [isLoggedIn, route]);
-
-  if (!isLoggedIn) {
-    return null;
-  }
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
 
   return (
     <>

diff --git a/pages/reservation.tsx b/pages/reservation.tsx
@@ -18,6 +18,7 @@ import { darkModeState } from '@/states/themeState';
 import { InitialPageMeta } from '@/components/MetaData/MetaData';
 import { GetServerSideProps } from 'next';
 import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
+import useAuthRedirect from '@/hooks/useAuthRedirect';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const OGTitle = '예약내역 | GLOBALNOMAD';
@@ -40,6 +41,8 @@ export default function MyReservationPage({ OGTitle, OGUrl }: SSRMetaProps) {
     useReservationList(filterOption);
   const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
   const [isDarkMode, setIsDarkMode] = useRecoilState(darkModeState);
+  // 로그아웃 상태에서 페이지 접근시 로그인 페이지로 redirect
+  useAuthRedirect();
 
   const openSideNavigation = () => {
     setIsOpen(!isOpen);