feat: 권한에 따른 페이지 이동 처리 추가

로그인 권한이 없을 때 로그인 페이지로 리다이렉트 하는 로직 추가
올바르지않은 쿼리 파라미터를 받았을 때 404 페이지 리다이렉트 하는 로직 추가

close #59

pages/_app.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
@@ -6,7 +7,8 @@ import { APP_STAGE } from '~/shared/constants/environments';
 import { Box } from '@nolmungshemung/ui-kits';
 import { DefaultSeo } from 'next-seo';
 import { Header } from '~/components/layout';
-import { SessionProvider } from 'next-auth/react';
+import { SessionProvider, useSession } from 'next-auth/react';
+import Router from 'next/router';
 import '~/styles/globalCss';
 
 if (APP_STAGE !== 'prod') {
@@ -20,6 +22,31 @@ queryClient.setDefaultOptions({
   },
 });
 
+interface AuthProps {
+  children: React.ReactElement;
+}
+
+function Auth({ children }: AuthProps) {
+  const { data: session, status } = useSession({ required: true });
+  const isUser = !!session?.user;
+
+  if (isUser) {
+    return children;
+  }
+
+  React.useEffect(() => {
+    if (status === 'loading') {
+      return;
+    }
+
+    if (!isUser) {
+      Router.push('/login');
+    }
+  }, [status, isUser]);
+
+  return null;
+}
+
 function MyApp({
   Component,
   pageProps: { session, ...pageProps },
@@ -42,7 +69,13 @@ function MyApp({
           <SessionProvider session={session}>
             <Box css={{ height: '100%' }}>
               <Header />
-              <Component {...pageProps} />
+              {Component.auth ? (
+                <Auth>
+                  <Component {...pageProps} />
+                </Auth>
+              ) : (
+                <Component {...pageProps} />
+              )}
             </Box>
           </SessionProvider>
           <ReactQueryDevtools initialIsOpen={false} />

pages/contents.tsx

@@ -28,6 +28,13 @@ interface ReadingProps {
 function Reading({ contentsId }: ReadingProps) {
   const { data, isLoading } = useReadingContents(contentsId);
 
+  const onTranslatingButtonClick = () => {
+    Router.push({
+      pathname: '/translating',
+      query: { contentsId },
+    });
+  };
+
   const onCardClick = (translatedContentsId: number) => {
     Router.push({
       pathname: '/contents',
@@ -196,6 +203,7 @@ function Reading({ contentsId }: ReadingProps) {
                   margin: '0 $sp-06',
                   cursor: 'pointer',
                 }}
+                onClick={onTranslatingButtonClick}
               >
                 {'번역하기'}
               </Button>
@@ -255,6 +263,13 @@ export async function getServerSideProps(
 ) {
   try {
     const contentsId = Number(context.query.contentsId);
+
+    if (isNaN(contentsId)) {
+      return {
+        notFound: true,
+      };
+    }
+
     const queryClient = new QueryClient();
     await queryClient.prefetchQuery(
       ['/services/reading_contents', contentsId],

pages/myfeed.tsx

@@ -139,9 +139,29 @@ export async function getServerSideProps(
   context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
 ) {
   try {
-    const writerId = context.query.writerId as string;
+    const writerId = context.query.writerId;
+    const session = await getSession(context);
+
+    // 로그인 정보가 없으면 접근 불가 -> 로그인 페이지로 리다이렉트
+    if (!session?.user) {
+      return {
+        redirect: {
+          permanent: false,
+          destination: '/login',
+        },
+        props: {},
+      };
+    }
+
+    // 존재하지 않는 컨텐츠에 접근할 때 404 리다이렉트
+    if (writerId === undefined) {
+      return {
+        notFound: true,
+      };
+    }
+
     const feedParams: FeedParams = {
-      writerId: writerId,
+      writerId: writerId as string,
       count: DEFAULT_SHOW_FEED_COUNT,
       page: DEFAULT_START_PAGE,
     };
@@ -155,7 +175,7 @@ export async function getServerSideProps(
       props: {
         feedParams: feedParams,
         dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
-        session: await getSession(context),
+        session,
       },
     };
   } catch (e) {

pages/translating.tsx

@@ -282,14 +282,34 @@ export async function getServerSideProps(
   try {
     const queryClient = new QueryClient();
     const contentsId = Number(context.query.contentsId);
+    const session = await getSession(context);
+
+    // 로그인 정보가 없으면 접근 불가 -> 로그인 페이지로 리다이렉트
+    if (!session?.user) {
+      return {
+        redirect: {
+          permanent: false,
+          destination: '/login',
+        },
+        props: {},
+      };
+    }
+
+    // 존재하지 않는 컨텐츠에 접근할 때 404 리다이렉트
+    if (isNaN(contentsId)) {
+      return {
+        notFound: true,
+      };
+    }
+
     await queryClient.prefetchQuery(
       ['/services/translating_contents', contentsId],
       () => getTranslatingContents(contentsId),
     );
     return {
       props: {
         dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
-        session: await getSession(context),
+        session,
       },
     };
   } catch (e) {