Merge pull request #24 from falconlee236/dev/fail-view

[DEV] fail view 구현

src/app/constants/errorMessages.ts

@@ -0,0 +1,5 @@
+export const LOGIN_ERROR_MSG: string = '로그인에 실패했습니다.';
+export const LOGIN_ERROR_CHECK_MSG: string =
+  '아이디와 비밀번호를 다시 확인해주세요';
+export const GENERATION_ERROR_MSG: string = '프로필을 생성하는 실패했습니다.';
+export const GENERATION_ERROR_CHECK_MSG: string = '이미지를 다시 확인해주세요';

src/app/error/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useAtom } from 'jotai';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import { GENERATION_ERROR_MSG } from '@/app/constants/errorMessages';
+import PreviousPage from '@/components/PreviousPage';
+import {
+  errorCheckMessageAtom,
+  errorMessageAtom,
+} from '@/store/atoms/errorMessageAtom';
+
+export default function ErrorPage() {
+  const [errorMessage, setErrorMessage] = useAtom(errorMessageAtom);
+  const [errorCheckMessage, setErrorCheckMessage] = useAtom(
+    errorCheckMessageAtom,
+  );
+
+  useEffect(() => {
+    return () => {
+      setErrorMessage('');
+      setErrorCheckMessage('');
+    };
+  }, [setErrorMessage, setErrorCheckMessage]);
+
+  return (
+    <div className="flex h-640 w-360 flex-col justify-start">
+      <div className="ml-4 mt-7">
+        <PreviousPage
+          target={errorMessage === GENERATION_ERROR_MSG ? '/guide' : '/login'}
+        />
+      </div>
+      <div className="mt-12 flex flex-col items-center justify-center">
+        <span className="text-4xl">Error</span>
+        <span className="mt-6 font-sfpro">{errorMessage}</span>
+        <span className="bg-primary-darkblue px-3 font-sfpro font-bold text-white">
+          {errorCheckMessage}
+        </span>
+        <Image
+          src="/error-puang.png"
+          alt="error puang image"
+          width="250"
+          height="250"
+          className="mt-16"
+        />
+      </div>
+    </div>
+  );
+}

src/app/login/code/page.tsx

@@ -3,11 +3,21 @@
 import { useSetAtom } from 'jotai';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
+import {
+  LOGIN_ERROR_CHECK_MSG,
+  LOGIN_ERROR_MSG,
+} from '@/app/constants/errorMessages';
+import {
+  errorCheckMessageAtom,
+  errorMessageAtom,
+} from '@/store/atoms/errorMessageAtom';
 import { actionInsertToken } from '@/store/atoms/tokenActions';
 
 export default function LoginCodePage() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const setErrorMessage = useSetAtom(errorMessageAtom);
+  const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom);
   const setInsertToken = useSetAtom(actionInsertToken);
 
   useEffect(() => {
@@ -22,11 +32,18 @@ export default function LoginCodePage() {
           router.push('/concept');
         })
         .catch(() => {
-          // TODO - fail page로 이동
-          router.push('/login');
+          setErrorMessage(LOGIN_ERROR_MSG);
+          setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG);
+          router.push('/error');
         });
     }
-  }, [setInsertToken, searchParams, router]);
+  }, [
+    setInsertToken,
+    searchParams,
+    router,
+    setErrorCheckMessage,
+    setErrorMessage,
+  ]);
 
   return <div>로그인 처리중..</div>;
 }

src/app/login/page.tsx

@@ -3,21 +3,29 @@
 import { useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import {
+  LOGIN_ERROR_CHECK_MSG,
+  LOGIN_ERROR_MSG,
+} from '@/app/constants/errorMessages';
 import LoginButton from '@/app/login/_components/LoginButton';
 import MyButton from '@/components/MyButton';
+import {
+  errorCheckMessageAtom,
+  errorMessageAtom,
+} from '@/store/atoms/errorMessageAtom';
 import { actionInsertToken } from '@/store/atoms/tokenActions';
 import login_character from '../../../public/login_page_img.png';
 
-/* 기본 글꼴은 cafe24 this is test */
-/* <div className="font-sfpro">이 글꼴은 sfpro</div> */
-/* <div className="font-sfpro text-2xl font-bold">sfpro 글꼴 weight</div> */
-/* <div className="text-blue-700">글꼴 색</div> */
-/* <div>This is Login Page</div> */
-
 function LoginView() {
+  const setErrorMessage = useSetAtom(errorMessageAtom);
+  const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom);
   const setInsertToken = useSetAtom(actionInsertToken);
+
+  const router = useRouter();
   const storedToken = window.sessionStorage.getItem('accessToken') || '';
+
   useEffect(() => {
     if (storedToken !== '') {
       fetch(
@@ -29,22 +37,33 @@ function LoginView() {
             const reissueResponse = await fetch(
               `${process.env.NEXT_PUBLIC_CLIENT_ADDRESS}:${process.env.NEXT_PUBLIC_CLIENT_PORT}/api/reissue?code=${storedToken}`,
             );
-            // TODO- ok가 아닌경우, ok이지만 accessToken이 없는 경우 fail page로 이동 필요
             if (reissueResponse.ok) {
               const reissueData = await reissueResponse.json();
               setInsertToken(reissueData.accessToken);
             } else {
               setInsertToken('');
+              setErrorMessage(LOGIN_ERROR_MSG);
+              setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG);
+              router.push('/error');
             }
           }
         })
         .catch(() => {
           setInsertToken('');
+          setErrorMessage(LOGIN_ERROR_MSG);
+          setErrorCheckMessage(LOGIN_ERROR_CHECK_MSG);
+          router.push('/error');
         });
     } else {
       setInsertToken(storedToken);
     }
-  }, [storedToken, setInsertToken]);
+  }, [
+    router,
+    storedToken,
+    setInsertToken,
+    setErrorMessage,
+    setErrorCheckMessage,
+  ]);
 
   return (
     <div className="flex h-640 w-360 flex-col items-center justify-between bg-background">

src/store/atoms/errorMessageAtom.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+
+export const errorMessageAtom = atom<string>('');
+export const errorCheckMessageAtom = atom<string>('');