Merge pull request #62 from bomin0830/master

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

components/Review/Review.tsx

@@ -36,6 +36,7 @@ export default function Review({ reservation, closeModal }: ReviewProps) {
     onError: (error) => {
       console.error('후기 작성 에러: ', error);
       if (error.message === 'Request failed with status code 404') {
+        closeModal();
         openPopup({
           popupType: 'alert',
           content: '삭제된 체험입니다.',

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]);
+}

pages/calendar.tsx

@@ -16,10 +16,11 @@ 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';
-  const OGUrl = 'https://globalnomad-5-8.netlify.app/calender';
+  const OGUrl = 'https://globalnomad-5-8.netlify.app/calendar';
   return {
     props: {
       OGTitle,
@@ -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);

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],

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);

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} />

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 (
     <>

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);