Merge pull request #82 from 4m9d:feat/#81/naver-analytics(swm-360)

Feat/#81/naver analytics(swm 360)

src/app/@modal/(.)search/[lecture_code]/error.tsx

@@ -1,27 +1,28 @@
 'use client';
-import { API_FETCH_ERROR, ErrorMessage } from '@/src/api/ErrorMessage';
+import { API_FETCH_ERROR, ErrorMessage, SESSION_ERROR } from '@/src/api/ErrorMessage';
+import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 
-export default function ErrorHandler({
+export default async function ErrorHandler({
   error,
   reset
 }: {
   error: Error;
   reset: () => void;
 }) {
   const router = useRouter();
+  const { logout } = useAuth();
 
-  useEffect(() => {
     if (error.cause === API_FETCH_ERROR) {
       setErrorToast(error);
       router.back();
+    } else if (error.cause === SESSION_ERROR) {
+      setErrorToast(error);
+      await logout();
     } else {
       setErrorToast(new Error(ErrorMessage.DEFAULT));
     }
-    return () => router.refresh();
-  }, [error, router]);
 
   return null;
 }

src/app/@modal/(.)search/[lecture_code]/loading.tsx

@@ -3,7 +3,7 @@ type Props = {};
 export default function Loading({}: Props) {
   return (
     <div className='fixed top-0 left-0 items-center justify-center w-full h-full bg-black opacity-30'>
-      <div className='absolute z-20 top-1/2 left-1/2 loading loading-spinner loading-lg text-sroom-brand' />
+      <div className='absolute z-60 top-1/2 left-1/2 loading loading-spinner loading-lg text-sroom-brand' />
     </div>
   );
 }

src/app/@modal/default.tsx

@@ -1,3 +1,3 @@
 export default function Default() {
-  return null;
-}
+  return <></>;
+}

src/app/auth/signin/page.tsx

@@ -1,9 +1,31 @@
-import React from 'react'
+'use client';
+import LoginButton from '@/src/components/login/LoginButton';
+import Button from '@/src/components/ui/button/Button';
+import { useRouter } from 'next/navigation';
 
-type Props = {}
+export default function Signin({}) {
+  const router = useRouter();
 
-export default function Signin({}: Props) {
   return (
-    <div>Signin</div>
-  )
-}
+    <div className='flex bg-sroom-gray-200'>
+      <div className='max-w-[400px] mx-auto pt-60 pb-96'>
+        <h2 className='flex flex-col gap-2 mb-8 text-3xl font-bold text-sroom-black-400'>
+          <p>{'스룸의 기능은 로그인을 해야'}</p>
+          <p>{'이용하실 수 있어요 :)'}</p>
+        </h2>
+        <h3 className='mb-16 text-lg font-medium text-sroom-black-100'>
+          {'구글 로그인으로 간편하게 스룸을 이용해보세요!'}
+        </h3>
+        <LoginButton className='mb-5' buttonWidth={400} />
+        <Button
+          className='w-full text-sroom-white bg-sroom-brand'
+          onClick={() => {
+            router.replace('/');
+          }}
+        >
+          홈으로 가기
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/auth/signout/page.tsx

@@ -1,9 +1,35 @@
-import React from 'react'
+'use client';
+import Button from '@/src/components/ui/button/Button';
+import useAuth from '@/src/hooks/useAuth';
+import { useRouter } from 'next/navigation';
 
-type Props = {}
+export default function Signout({}) {
+  const router = useRouter();
+  const { logout } = useAuth();
 
-export default function Signout({}: Props) {
   return (
-    <div>Signout</div>
-  )
-}
+    <div className='flex bg-sroom-gray-200'>
+      <div className='max-w-md mx-auto pt-60 pb-96'>
+        <h2 className='flex flex-col gap-2 mb-8 text-3xl font-bold text-sroom-black-400'>
+          <p>{'지금 로그아웃 하시면'}</p>
+          <p>{'스룸의 기능을 이용하실 수 없어요! :('}</p>
+        </h2>
+        <h3 className='mb-16 text-lg font-medium text-sroom-black-100'>
+          {'이용 중이시던 서비스를 계속해서 즐겨보세요'}
+        </h3>
+        <Button
+          className='w-full mb-5 text-sroom-white bg-sroom-brand'
+          onClick={router.back}
+        >
+          돌아가기
+        </Button>
+        <Button
+          className='w-full border text-sroom-black-400 bg-sroom-white border-sroom-gray-500'
+          onClick={logout}
+        >
+          로그아웃 하기
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/error.tsx

@@ -1,26 +1,31 @@
 'use client';
-import { API_FETCH_ERROR, ErrorMessage } from '@/src/api/ErrorMessage';
+import {
+  API_FETCH_ERROR,
+  ErrorMessage,
+  SESSION_ERROR
+} from '@/src/api/ErrorMessage';
+import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 
-export default function ErrorHandler({
+export default async function ErrorHandler({
   error,
   reset
 }: {
   error: Error;
   reset: () => void;
 }) {
   const router = useRouter();
+  const { logout } = useAuth();
 
-  useEffect(() => {
-    if (error.cause === API_FETCH_ERROR) {
-      setErrorToast(error);
-    } else {
-      setErrorToast(new Error(ErrorMessage.DEFAULT));
-    }
-    return () => router.refresh();
-  }, [error, router]);
+  if (error.cause === API_FETCH_ERROR) {
+    setErrorToast(error);
+  } else if (error.cause === SESSION_ERROR) {
+    setErrorToast(error);
+    await logout();
+  } else {
+    setErrorToast(new Error(ErrorMessage.DEFAULT));
+  }
 
   return null;
 }

src/app/error.tsx

@@ -1,27 +1,32 @@
 'use client';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { API_FETCH_ERROR, ErrorMessage } from '../api/ErrorMessage';
+import {
+  API_FETCH_ERROR,
+  ErrorMessage,
+  SESSION_ERROR
+} from '../api/ErrorMessage';
+import useAuth from '../hooks/useAuth';
 
-export default function ErrorHandler({
+export default async function ErrorHandler({
   error,
   reset
 }: {
   error: Error;
   reset: () => void;
 }) {
   const router = useRouter();
+  const { logout } = useAuth();
 
-  useEffect(() => {
-    if (error.cause === API_FETCH_ERROR) {
-      setErrorToast(error);
-      router.back();
-    } else {
-      setErrorToast(new Error(ErrorMessage.DEFAULT));
-    }
-    return () => router.refresh();
-  }, [error, router]);
+  if (error.cause === API_FETCH_ERROR) {
+    setErrorToast(error);
+    router.back();
+  } else if (error.cause === SESSION_ERROR) {
+    setErrorToast(error);
+    await logout();
+  } else {
+    setErrorToast(new Error(ErrorMessage.DEFAULT));
+  }
 
   return null;
 }

src/app/layout.tsx

@@ -9,6 +9,7 @@ import Footer from '../components/fnb/Footer';
 import ChannelTalk from '../components/tools/ChannelTalk/ChannelTalk';
 import ChannelTalkManager from '../components/tools/ChannelTalk/ChannelTalkManager';
 import GoogleAnalytics from '../components/tools/GoogleAnalytics/GoogleAnalytics';
+import NaverAnalytics from '../components/tools/NaverAnalytics/NaverAnalytics';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -42,6 +43,7 @@ export default function RootLayout({ children, modal }: Props) {
   return (
     <html lang='ko'>
       <GoogleAnalytics />
+      <NaverAnalytics />
       <ChannelTalk />
       <body className={inter.className}>
         <AuthSessionProvider>

src/app/not-found.tsx

@@ -6,12 +6,12 @@ export default function NotFound({}) {
   const router = useRouter();
 
   return (
-    <div className='z-[9999] w-screen h-screen bg-white'>
-      <div className='max-w-md mx-auto mt-60'>
-        <h2 className='mb-8 text-4xl font-bold text-sroom-black-400'>
+    <div className='flex bg-sroom-gray-200'>
+      <div className='max-w-md mx-auto pt-60 pb-96'>
+        <h2 className='mb-8 text-3xl font-bold text-sroom-black-400'>
           {'해당 페이지를 찾을 수 없어요 :('}
         </h2>
-        <h3 className='mb-16 text-xl font-medium text-sroom-black-100'>
+        <h3 className='mb-16 text-lg font-medium text-sroom-black-100'>
           {'404 not found'}
         </h3>
         <Button

src/app/search/[lecture_code]/error.tsx

@@ -1,28 +1,33 @@
 'use client';
-import { API_FETCH_ERROR, ErrorMessage } from '@/src/api/ErrorMessage';
+import {
+  API_FETCH_ERROR,
+  ErrorMessage,
+  SESSION_ERROR
+} from '@/src/api/ErrorMessage';
+import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 
-export default function ErrorHandler({
+export default async function ErrorHandler({
   error,
   reset
 }: {
   error: Error;
   reset: () => void;
 }) {
   const router = useRouter();
+  const { logout } = useAuth();
 
-  useEffect(() => {
-    if (error.cause === API_FETCH_ERROR) {
-      setErrorToast(error);
-      router.replace('/');
-      router.refresh();
-    } else {
-      setErrorToast(new Error(ErrorMessage.DEFAULT));
-    }
-    return () => router.refresh();
-  }, [error, router]);
+  if (error.cause === API_FETCH_ERROR) {
+    setErrorToast(error);
+    router.replace('/');
+    router.refresh();
+  } else if (error.cause === SESSION_ERROR) {
+    setErrorToast(error);
+    await logout();
+  } else {
+    setErrorToast(new Error(ErrorMessage.DEFAULT));
+  }
 
   return null;
 }

src/components/gnb/NavBar.tsx

@@ -10,6 +10,7 @@ import { useSession } from 'next-auth/react';
 import { useMutation } from '@tanstack/react-query';
 import { updateUserProfile } from '@/src/api/members/members';
 import ProfileDropdown from './ProfileDropdown';
+import { useRouter } from 'next/navigation';
 
 type Props = {
   logo: string;
@@ -18,7 +19,7 @@ type Props = {
 const WIDTH_SM = 640;
 
 export default function NavBar({ logo, profileDropdown }: Props) {
-  const { logout } = useAuth();
+  const router = useRouter();
   const { data: session, update } = useSession();
   const { width: windowWidth } = useWindowSize();
   const [isEditMode, setIsEditMode] = useState(false);
@@ -75,7 +76,7 @@ export default function NavBar({ logo, profileDropdown }: Props) {
           <SearchInput />
         </div>
         <Button
-          onClick={logout}
+          onClick={() => router.push('/auth/signout')}
           className={`${navBarHidden} g_id_signout w-20 lg:w-24 bg-sroom-brand`}
         >
           <p className='text-xs lg:text-sm text-sroom-white'>로그아웃</p>