[SWM-360] Feat : auth/signin, auth/signout page

4m9d · Oct 11, 2023 · bfe8afd · bfe8afd
1 parent 9d6be69
commit bfe8afd
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 30 deletions.
diff --git a/src/app/auth/signin/page.tsx b/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>
+  );
+}
diff --git a/src/app/auth/signout/page.tsx b/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>
+  );
+}
diff --git a/src/app/not-found.tsx b/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

diff --git a/src/components/gnb/NavBar.tsx b/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>

diff --git a/src/components/login/LoginButton.tsx b/src/components/login/LoginButton.tsx
@@ -1,11 +1,16 @@
 'use client';
-import { memo, useRef } from 'react';
+import { useRef } from 'react';
 import useAuth from '@/src/hooks/useAuth';
 import Script from 'next/script';
 import useWindowSize from '@/src/hooks/useWindowSize';
 import { BROWSER_MIN_WIDTH } from '@/src/constants/window/window';
 
-function LoginButton() {
+type Props = {
+  className?: string;
+  buttonWidth?: number;
+};
+
+export default function LoginButton({ className, buttonWidth: width = 100 }: Props) {
   const loginButton = useRef<HTMLDivElement>(null);
   const { login, status } = useAuth();
   const { width: windowWidth } = useWindowSize();
@@ -24,7 +29,7 @@ function LoginButton() {
 
     window.google.accounts.id.renderButton(loginButton.current, {
       theme: 'outline',
-      width: 100
+      width: width
     });
   };
 
@@ -39,7 +44,7 @@ function LoginButton() {
             defer
           />
           <div
-            className='inline-block h-10 mt-2 align-middle md:mt-5'
+            className={`${className} inline-block h-10 mt-2 align-middle md:mt-5`}
             id='google-login-button'
             ref={loginButton}
           />
@@ -48,5 +53,3 @@ function LoginButton() {
     </>
   );
 }
-
-export default memo(LoginButton);
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -72,20 +72,19 @@ export default function useAuth() {
       redirect: false
     })
       .then((res) => {
+        router.refresh();
         if (res?.error) {
           throw new Error(ErrorMessage.LOGIN);
         }
-        router.push('/dashboard');
       })
       .catch((err) => {
         setErrorToast(err);
       });
-    router.refresh();
   };
 
   const logout = async () => {
     await signOut().then(() => {
-      router.push('/');
+      router.refresh();
     });
   };
 

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -7,6 +7,9 @@ const secret = process.env.NEXTAUTH_SECRET;
 function redirectToMain(req: NextRequest) {
   return NextResponse.redirect(new URL('/', req.url));
 }
+function redirectToSignin(req: NextRequest) {
+  return NextResponse.rewrite(new URL('/auth/signin', req.url));
+}
 function redirectToDashboard(req: NextRequest) {
   return NextResponse.redirect(new URL('/dashboard', req.url));
 }
@@ -25,14 +28,14 @@ export async function middleware(req: NextRequest) {
     if (pathname === '/') {
       return redirectToDashboard(req);
     }
-    //NOTE: 로그인 상태에서 로그인 페이지로 접근하면 메인 페이지로 리다이렉트F
+    //NOTE: 로그인 상태에서 로그인 페이지로 접근하면 메인 페이지로 리다이렉트
     if (pathname === '/auth/signin') {
       return redirectToMain(req);
     }
   } else if (authenticated === false) {
-    //NOTE: 로그아웃 상태에서는 메인 페이지만 접근 가능
+    //NOTE: 로그아웃 상태에서는 로그인 페이지로 리다이렉트
     if (tryToAccessProtectedRoute(pathname)) {
-      return redirectToMain(req);
+      return redirectToSignin(req);
     }
     //NOTE: 로그아웃 상태에서 로그아웃 페이지로 접근하면 메인 페이지로 리다이렉트
     if (pathname === '/auth/signout') {