fix: page view not corresponding to login state

Author: Pyotato

src/app/ErrorButton.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Button } from '@mantine/core';
+import { ReactNode } from 'react';
+
+const ErrorButton = ({
+  reset,
+  errorMsg,
+  navigate,
+}: {
+  reset?: () => void;
+  errorMsg: string | ReactNode;
+  navigate?: () => void;
+}) => {
+  return (
+    <Button
+      variant='default'
+      size='md'
+      mt='xl'
+      className='control'
+      onClick={() => {
+        if (reset) reset();
+        else if (navigate) navigate();
+      }}
+      mr='lg'
+    >
+      {errorMsg}
+    </Button>
+  );
+};
+
+export default ErrorButton;

src/app/api/auth/[...nextauth]/auth.ts

@@ -50,6 +50,9 @@ export const {
               method: 'POST',
             }),
           );
+          if (res?.httpStatus === 401) {
+            return;
+          }
 
           if (res.id) {
             const userInfo = await Promise.resolve(
@@ -107,4 +110,8 @@ export const {
       return { ...session, token: token.accessToken };
     },
   },
+  pages: {
+    signIn: '/signin',
+    error: '/signin',
+  },
 });

src/app/auth/components/AuthButton.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from '@mantine/core';
+
+const AuthButton = ({ btnText, fn }: { btnText: string; fn: () => void }) => {
+  return (
+    <Box mt='lg'>
+      <Text className='hvr txt' onClick={fn} size='sm' ta='center'>
+        {btnText}
+      </Text>
+    </Box>
+  );
+};
+export default AuthButton;

src/app/auth/components/LoginButton.tsx

@@ -1,8 +1,8 @@
-import LoginButton from '@/app/auth/components/LoginButton';
+import AuthButton from '@/app/auth/components/AuthButton';
 
 export default {
   title: '회원가입/로그인하러 가기',
-  component: LoginButton,
+  component: AuthButton,
   args: { primary: true, label: '로그인하러 가기' },
   tags: ['autodocs'],
 };

src/app/auth/components/stories/LoginButton.stories.ts renamed to src/app/auth/components/stories/AuthButton.stories.ts

@@ -8,17 +8,15 @@ import {
   TextInput,
   Title,
 } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconAt, IconCheck, IconPassword, IconUser } from '@tabler/icons-react';
+import { IconAt, IconPassword, IconUser } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
 import styled from 'styled-components';
 
-import { API_ROUTES, FAIL, SUCCESS } from '@/constants';
-import { getApiResponse } from '@/utils/get-api-response';
+import { signup } from '@/service/auth';
 
-import LoginButton from './components/LoginButton';
+import AuthButton from './components/AuthButton';
 
 export default function AuthPage() {
   const [nickname, setNickname] = useState('');
@@ -35,60 +33,6 @@ export default function AuthPage() {
   const regex =
     /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}/g;
 
-  const postResponseFromApi = async () => {
-    const res = await Promise.resolve(
-      getApiResponse<undefined>({
-        requestData: JSON.stringify({
-          email: email,
-          nickname: nickname,
-          password: password,
-        }),
-        apiEndpoint: `${API_ROUTES.signup}`,
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }),
-    );
-    if (res?.httpStatus === 409) {
-      notifications.show({
-        id: FAIL['409'].id,
-        withCloseButton: true,
-        autoClose: 6000,
-        title: FAIL['409'].title,
-        message: res.message,
-        color: FAIL['409'].color,
-        icon: <IconCheck className='icon' />,
-      });
-
-      if (res.errorCode === 'NicknameAlreadyRegistered') {
-        setNickname('');
-        return;
-      }
-      if (res.errorCode === 'EmailAlreadyRegistered') {
-        setEmail('');
-        return;
-      }
-    }
-    if (res?.httpStatus === 201) {
-      notifications.show({
-        id: SUCCESS.signup.id,
-        withCloseButton: true,
-        autoClose: 6000,
-        title: SUCCESS.signup.title,
-        message: res.message,
-        color: SUCCESS.signup.color,
-        icon: <IconCheck className='icon' />,
-      });
-      await signIn('credentials', {
-        email,
-        password,
-        redirect: true,
-        callbackUrl: '/',
-      });
-    }
-  };
-
   return (
     <PageWrap>
       <Box className='auth-box' p='xl'>
@@ -127,10 +71,7 @@ export default function AuthPage() {
             type='password'
             autoFocus={!password}
             withAsterisk={!password}
-            description={
-              //   (!password || !password.match(regex)) &&
-              '비밀번호는 영문, 숫자, 특수문자(@, $, !, %, *, ?, &) 하나 이상 조합해서 8자 이상 입력해주세요.'
-            }
+            description='비밀번호는 영문, 숫자, 특수문자(@, $, !, %, *, ?, &) 하나 이상 조합해서 8자 이상 입력해주세요.'
             placeholder='myPasswordCheck'
             onChange={(event) => setPassword(event.currentTarget.value)}
             leftSection={<IconPassword size={16} />}
@@ -175,14 +116,14 @@ export default function AuthPage() {
                 ) {
                   return;
                 }
-                postResponseFromApi();
+                signup({ email, nickname, password, setNickname, setEmail });
               }}
             >
               submit
             </Button>
           </div>
           <Divider my='xs' label='or' labelPosition='center' />
-          <LoginButton />
+          <AuthButton btnText='로그인 하러가기' fn={() => signIn()} />
         </Box>
       </Box>
     </PageWrap>

src/app/auth/page.tsx

@@ -8,10 +8,10 @@ import { consoleLog } from '@/utils/console-log';
 
 export default function ErrorPage({
   error,
-  reset,
+  // reset,
 }: Readonly<{
   error: Error & { digest?: string };
-  reset: () => void;
+  // reset: () => void;
 }>) {
   useEffect(() => {
     consoleLog('error.tsx', error);
@@ -21,7 +21,7 @@ export default function ErrorPage({
 
   return (
     <main>
-      <NotFound title={title} message={message} reset={reset} />
+      <NotFound title={title} message={message} />
     </main>
   );
 }

src/app/error.tsx

@@ -13,7 +13,7 @@ import styled from 'styled-components';
 
 import ProfileSkeleton from '@/components/shared/ProfileSkeleton';
 
-import { API_ROUTES, FAIL, IS_PROD, SITE_ROUTES } from '@/constants';
+import { API_ROUTES, FAIL } from '@/constants';
 import { randomAvartars } from '@/utils/avatars';
 import { getApiResponse } from '@/utils/get-api-response';
 
@@ -29,9 +29,9 @@ const UserData = () => {
   const [opened, { open, close }] = useDisclosure(false);
   const [modalContent, setModalContent] = useState('');
 
-  if (status === 'unauthenticated') {
-    router.replace(IS_PROD ? SITE_ROUTES.signIn : SITE_ROUTES.signInDev);
-  }
+  // if (status === 'unauthenticated') {
+  //   router.replace(IS_PROD ? SITE_ROUTES.signIn : SITE_ROUTES.signInDev);
+  // }
 
   useEffect(() => {
     if (status === 'authenticated') {

src/app/mypage/@info/components/Profile.tsx

@@ -92,21 +92,6 @@ const ProfileForm = ({
 
   return (
     <>
-      {/* <TextInput
-        value={nickname}
-        label='닉네임'
-        type='text'
-        autoFocus={!nickname}
-        withAsterisk={!nickname}
-        description={
-          nickname.length < 2 ? '닉네임은 2글자 이상이어야합니다.' : null
-        }
-        variant='filled'
-        placeholder='myNickname'
-        onChange={(event) => setNickname(event.currentTarget.value)}
-        leftSection={<IconUser size={16} />}
-        pb='md'
-      /> */}
       <Textarea
         value={bio || ''}
         label='자기 소개'

src/app/mypage/@info/components/ProfileForm.tsx

@@ -1,16 +1,22 @@
 'use client';
 import { signIn, useSession } from 'next-auth/react';
-
-import ProfileSkeleton from '@/components/shared/ProfileSkeleton';
+import { useEffect } from 'react';
 
 import UserData from './components/Profile';
 
 export default function DefaultInfo() {
-  const { status } = useSession();
+  const { data: session, status } = useSession({
+    required: true,
+    onUnauthenticated() {
+      return signIn();
+    },
+  });
+  useEffect(() => {
+    if (!session && status !== 'loading') {
+      signIn();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  if (status === 'unauthenticated') {
-    return signIn();
-  }
-  if (status === 'loading') return <ProfileSkeleton />;
-  if (status === 'authenticated') return <UserData />;
+  return <UserData />;
 }

src/app/mypage/@info/default.tsx

@@ -1,15 +1,7 @@
 'use client';
-import { signIn, useSession } from 'next-auth/react';
 
-import ProfileSkeleton from '@/components/shared/ProfileSkeleton';
+import DefaultInfo from './default';
 
-import UserData from './components/Profile';
-
-export default function DefaultInfo() {
-  const { status } = useSession();
-  if (status === 'unauthenticated') {
-    return signIn();
-  }
-  if (status === 'loading') return <ProfileSkeleton />;
-  if (status === 'authenticated') return <UserData />;
+export default function MyInfo() {
+  return <DefaultInfo />;
 }

src/app/mypage/@info/page.tsx

@@ -61,9 +61,9 @@ const CreatedRoadmapList = () => {
     queryFn: loadDataFromApi,
   });
 
-  if (status === 'unauthenticated') {
-    signIn();
-  }
+  // if (status === 'unauthenticated') {
+  //   signIn();
+  // }
   if (isLoading) {
     return <SkeletonCardsGrid />;
   }

src/app/mypage/@roadmaps/created/CreatedRoadmaps.tsx

@@ -1,12 +1,11 @@
 'use client';
-import { signIn, useSession } from 'next-auth/react';
 
 import MyRoadmapsTabs from '../Tabs';
 
 export default function CreatedRoadmap() {
-  const { status } = useSession();
-  if (status === 'unauthenticated') {
-    signIn();
-  }
+  // const { status } = useSession();
+  // if (status === 'unauthenticated') {
+  //   signIn();
+  // }
   return <MyRoadmapsTabs />;
 }

src/app/mypage/@roadmaps/created/page.tsx

@@ -55,9 +55,9 @@ const InProgressRoadmapList = () => {
     };
   };
 
-  if (status === 'unauthenticated') {
-    signIn();
-  }
+  // if (status === 'unauthenticated') {
+  //   signIn();
+  // }
 
   const { data, isLoading, isError, isSuccess } = useQuery({
     queryKey: [`post-inprogress-${nickname}`],

src/app/mypage/@roadmaps/in-progress/InProgressRoadmaps.tsx

@@ -1,13 +1,12 @@
 'use client';
-import { signIn, useSession } from 'next-auth/react';
 
 import MyRoadmapsTabs from '../Tabs';
 
 export default function InProgressRoadmap() {
-  const { status } = useSession();
-  if (status === 'unauthenticated') {
-    signIn();
-  }
+  // const { status } = useSession();
+  // if (status === 'unauthenticated') {
+  //   signIn();
+  // }
 
   return <MyRoadmapsTabs />;
 }