Merge pull request #9 from shimdokite/mainPage

[FE] ✨ 페이지 접근 권한 구현

client/package.json

@@ -20,6 +20,7 @@
     "autoprefixer": "10.4.15",
     "axios": "^1.5.0",
     "framer-motion": "^10.16.4",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "next": "13.4.19",
     "postcss": "8.4.29",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.14.197",
     "@types/sockjs-client": "^1.5.4",
     "@typescript-eslint/eslint-plugin": "^6.5.0",

client/src/app/admin/page.tsx

@@ -1,22 +1,6 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import useUserStore from '@/stores/userStore';
-
 import { CheckInquiry } from '@/components/admin';
 
-import { ADMIN_USER_ID } from '@/constants/values';
-
 export default function Admin() {
-  const router = useRouter();
-
-  const { userId } = useUserStore();
-
-  if (userId !== ADMIN_USER_ID) {
-    router.replace('/');
-  }
-
   return (
     <div className="h-full flex justify-center items-center">
       <CheckInquiry />

client/src/components/common/HeaderNav.tsx

@@ -9,6 +9,8 @@ import useChatStore from '@/stores/chatStore';
 
 import useDeleteGuestMutation from '@/hooks/mutation/useDeleteGuestMutation';
 
+import removeCookiesForUserId from '@/utils/removeCookiesForUserId';
+
 interface HeaderNavProps {
   isMenuHover?: boolean;
   isProfileHover?: boolean;
@@ -28,10 +30,7 @@ export default function HeaderNav({
   const { mutate: onDeleteGuest } = useDeleteGuestMutation();
 
   const logout = () => {
-    if (isGuestMode) {
-      onDeleteGuest();
-    }
-
+    removeCookiesForUserId();
     setClear();
 
     getSigninForm(false);
@@ -40,6 +39,14 @@ export default function HeaderNav({
     router.push('/');
   };
 
+  const guestLogout = () => {
+    if (isGuestMode) {
+      onDeleteGuest();
+      getSigninForm(false);
+      getSignupForm(false);
+    }
+  };
+
   return (
     <>
       <div className="absolute">
@@ -64,7 +71,7 @@ export default function HeaderNav({
 
               <div
                 className="flex justify-center py-2 px-[2px] cursor-pointer"
-                onClick={logout}>
+                onClick={isGuestMode ? guestLogout : logout}>
                 {isGuestMode ? '게스트 종료' : '로그아웃'}
               </div>
             </div>

client/src/hooks/mutation/useCreateGuestMutation.ts

@@ -4,6 +4,8 @@ import { postCreateGuest } from '@/api/guest';
 
 import useUserStore from '@/stores/userStore';
 
+import setCookiesByUserId from '@/utils/setCookiesByUserId';
+
 const useCreateGuestMutation = () => {
   const { setGuestMode } = useUserStore();
 
@@ -17,6 +19,8 @@ const useCreateGuestMutation = () => {
       const displayName = `게스트 ${userId}`;
       const profileImageUrl = '/assets/img/bg_default_profile.png';
 
+      setCookiesByUserId(userId);
+
       setGuestMode({
         userId,
         accessToken,

client/src/hooks/mutation/useDeleteGuestMutation.ts

@@ -6,6 +6,8 @@ import { deleteUser } from '@/api/history';
 
 import useUserStore from '@/stores/userStore';
 
+import removeCookiesForUserId from '@/utils/removeCookiesForUserId';
+
 const useDeleteGuestMutation = () => {
   const router = useRouter();
 
@@ -15,6 +17,7 @@ const useDeleteGuestMutation = () => {
     mutationFn: () => deleteUser(),
 
     onSuccess: () => {
+      removeCookiesForUserId();
       setClear();
 
       router.push('/');

client/src/hooks/mutation/useSigninMutation.ts

@@ -12,6 +12,8 @@ import { SigninFormValue } from '@/types/common';
 
 import { ALERT_TEXT } from '@/constants/contents';
 
+import setCookiesByUserId from '@/utils/setCookiesByUserId';
+
 const useSigninMutation = () => {
   const router = useRouter();
 
@@ -46,6 +48,9 @@ const useSigninMutation = () => {
         profileImageUrl,
       });
 
+      //TODO: userId가 cookie에 잘 들어오는지 확인하기.
+      setCookiesByUserId(userId);
+
       getSigninForm(false);
       getSignupForm(false);
 

client/src/hooks/useGoogleLogin.ts

@@ -3,6 +3,8 @@ import { useRouter } from 'next/navigation';
 
 import useUserStore from '@/stores/userStore';
 
+import setCookiesByUserId from '@/utils/setCookiesByUserId';
+
 const useGoogleLogin = () => {
   const googleOauth = process.env.NEXT_PUBLIC_GOOGLE_OAUTH_URL;
 
@@ -31,6 +33,8 @@ const useGoogleLogin = () => {
       displayName &&
       profileImageUrl
     ) {
+      setCookiesByUserId(userId);
+
       setGoogleUser({
         userId,
         accessToken,

client/src/middleware.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { ADMIN_USER_ID } from '@/constants/values';
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|fonts|images).*)'],
+};
+
+const protectedPage = ['/admin'];
+
+export function middleware(request: NextRequest) {
+  const userId = String(request.cookies.get('userId'));
+  const currentPath = request.nextUrl.pathname;
+
+  if (userId !== ADMIN_USER_ID && protectedPage.includes(currentPath)) {
+    const url = request.nextUrl.clone();
+    url.pathname = '/';
+
+    return NextResponse.redirect(url);
+  }
+}

client/src/utils/removeCookiesForUserId.ts

@@ -0,0 +1,7 @@
+import Cookies from 'js-cookie';
+
+const removeCookiesForUserId = () => {
+  return Cookies.remove('userId');
+};
+
+export default removeCookiesForUserId;

client/src/utils/setCookiesByUserId.ts

@@ -0,0 +1,7 @@
+import Cookies from 'js-cookie';
+
+const setCookiesByUserId = (userId: string) => {
+  return Cookies.set('userId', userId, { expires: 1 });
+};
+
+export default setCookiesByUserId;