Merge pull request #60 from My-Own-Weapon/feat/#59-loginCheck

session 만료시에 login page로 리다이렉팅 기능 구현 - #59

src/app/(post)/layout.tsx

@@ -1,9 +1,14 @@
+'use client';
+
 import BackHeader from '@/components/BackHeader';
+import { useCheckSession } from '@/hooks/useCheckSession';
 import { ReactNode } from 'react';
 
-export default function layout({
+export default function Layout({
   children,
 }: Readonly<{ children: ReactNode }>) {
+  useCheckSession();
+
   return (
     <>
       <BackHeader />

src/app/page.tsx

@@ -8,9 +8,12 @@ import { apiService } from '@/services/apiService';
 import { Post, PostCardProps } from '@/components/Post';
 import CategoryList from '@/components/CategoryList';
 import LiveFriends, { Friend } from '@/components/LiveFriendsList';
+import { useCheckSession } from '@/hooks/useCheckSession';
 
 import s from './page.module.scss';
 
+consoleArt();
+
 interface PostReponse extends PostCardProps {
   memberUsername: string;
   category: string;
@@ -31,12 +34,12 @@ export type CategoriesKR = keyof typeof categoryMap;
 export type CategoriesEN = (typeof categoryMap)[CategoriesKR];
 
 export default function Home() {
-  consoleArt();
   const [allPosts, setAllPosts] = useState<PostReponse[]>([]);
   const [filteredPosts, setFilteredPosts] = useState<PostReponse[]>([]);
   const [liveFriends, setLiveFriends] = useState<Friend[]>([]);
   const [selectedCategory, setSelectedCategory] =
     useState<CategoriesKR>('전부');
+  useCheckSession();
   const path = usePathname();
 
   const handleCategoryClick: MouseEventHandler = (e) => {

src/hooks/useCheckSession.ts

@@ -0,0 +1,22 @@
+import { apiService } from '@/services/apiService';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export const useCheckSession = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    async function checkSession() {
+      try {
+        await apiService.checkSession();
+      } catch (error) {
+        if (error instanceof Error) {
+          alert(error.message);
+          router.push('/entry');
+        }
+      }
+    }
+
+    checkSession();
+  }, [router]);
+};

src/services/apiService.ts

@@ -58,6 +58,23 @@ class ApiService {
     return res.text();
   }
 
+  async checkSession() {
+    const res = await fetch(`${this.baseUrl}/session`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+
+    if (!res.ok) {
+      const { status, error } = await res.json();
+
+      throw new Error(
+        `[${status}: ${error}] 세션이 만료되었습니다. 다시 로그인해주세요`,
+      );
+    }
+
+    return res.text();
+  }
+
   async fetchPosts() {
     const res = await fetch(`${this.baseUrl}/posts`, {
       method: 'GET',