[feat] #199 #205 인증 상태에 따른 리다이렉션 / 로그인 페이지 리다이렉트 / 로그인, 회원가입 페이지 반응형

src/app/(auth)/layout.tsx

@@ -0,0 +1,25 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+import { getUserGroups } from '@/lib/apis/user';
+
+export default async function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (accessToken) {
+    const userGroupsData = await getUserGroups({});
+    const firstGroupId = userGroupsData?.[0]?.id;
+
+    if (firstGroupId) {
+      redirect(ROUTES.TEAM(firstGroupId));
+    } else {
+      redirect(ROUTES.TEAM_NO);
+    }
+  }
+
+  return <>{children}</>;
+}

src/app/(auth)/login/_components/LoginForm/OpenPasswordResetModal.tsx

@@ -63,7 +63,7 @@ export default function OpenPasswordResetModal({ ...props }) {
   return (
     <div className="mt-3 mb-10 flex justify-end">
       <button
-        className="leading-normal font-medium text-emerald-500 underline"
+        className="text-md-medium tablet:text-lg-medium leading-6 text-emerald-500 underline"
         type="button"
         onClick={() => {
           openModal(

src/app/(auth)/login/_components/LoginForm/index.tsx

@@ -3,6 +3,7 @@
 import InputWithLabel from '@/components/auth/InputWithLabel';
 import Button from '@/components/common/Button';
 import { signIn } from '@/lib/apis/auth';
+import { getUserGroups } from '@/lib/apis/user';
 import {
   validateEmail,
   validateName,
@@ -12,9 +13,9 @@ import {
 import { useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import Cookies from 'js-cookie';
-
 import { z } from 'zod';
 import { useRouter } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
 import { InputType } from '@/components/auth/type';
 import OpenPasswordResetModal from '@/app/(auth)/login/_components/LoginForm/OpenPasswordResetModal';
 
@@ -165,7 +166,14 @@ export default function LoginForm() {
       });
 
       toast.success('로그인 되었습니다.');
-      router.push('/no-team');
+      const userGroupsData = await getUserGroups({});
+      const firstGroupId = userGroupsData?.[0]?.id;
+
+      if (firstGroupId) {
+        router.push(ROUTES.TEAM(firstGroupId));
+      } else {
+        router.push(ROUTES.TEAM_NO);
+      }
     } catch (error) {
       if (error instanceof Error) {
         const errorMessage = error.message;
@@ -188,7 +196,7 @@ export default function LoginForm() {
 
   return (
     <form onSubmit={handleFormSubmit}>
-      <h1 className="text-4xl-medium mb-20 text-center">로그인</h1>
+      <h1 className="text-4xl-medium tablet:mb-20 mb-10 text-center">로그인</h1>
 
       <div className="flex flex-col gap-6">
         <InputWithLabel
@@ -212,7 +220,7 @@ export default function LoginForm() {
         variant="primary"
         styleType="filled"
         radius="sm"
-        className="w-[460px]"
+        className="w-full"
         disabled={!isFormValid}
       >
         로그인

src/app/(auth)/login/_components/NavigateToSignUp/index.tsx

@@ -3,8 +3,13 @@ import Link from 'next/link';
 export default function NavigateToSignUp() {
   return (
     <div className="mt-6 flex items-center justify-center gap-3">
-      <span className="text-lg-medium">아직 계정이 없으신가요?</span>
-      <Link href={'/signup'} className="font-medium text-emerald-500 underline">
+      <span className="text-md-medium tablet:text-lg-medium">
+        아직 계정이 없으신가요?
+      </span>
+      <Link
+        href={'/signup'}
+        className="text-md-medium tablet:text-lg-medium text-emerald-500 underline"
+      >
         가입하기
       </Link>
     </div>

src/app/(auth)/login/_components/SocialLogin/index.tsx

@@ -13,7 +13,7 @@ export default function SocialLogin() {
       </div>
 
       {/*social login*/}
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between pb-20">
         <span className="text-lg-medium">간편 로그인하기</span>
         <button>
           <Icons.KakaoLoginIcon

src/app/(auth)/login/page.tsx

@@ -4,8 +4,8 @@ import SocialLogin from '@/app/(auth)/login/_components/SocialLogin';
 
 export default function LoginPage() {
   return (
-    <div className="flex h-[calc(100vh-60px)] items-center justify-center">
-      <div className="flex flex-col">
+    <div className="laptop:py-[140px] tablet:py-[100px] h-[calc(100vh-60px)] px-4 py-20">
+      <div className="m-auto flex max-w-[460px] flex-col">
         <LoginForm />
         <NavigateToSignUp />
         <SocialLogin />

src/app/(auth)/signup/SignupForm.tsx

@@ -240,13 +240,13 @@ export default function SignupForm() {
         />
       </div>
 
-      <div className="flex max-w-[460px] gap-3">
+      <div className="mb-20 flex gap-3">
         <Button
           size="lg"
           variant="primary"
           styleType="filled"
           radius="sm"
-          className="mb-4 w-[460px] basis-1/3"
+          className="basis-1/3"
           onClick={() => {
             router.back();
           }}
@@ -260,7 +260,7 @@ export default function SignupForm() {
           variant="primary"
           styleType="filled"
           radius="sm"
-          className="w-[460px] basis-2/3"
+          className="basis-2/3"
           disabled={!isFormValid}
         >
           회원가입

src/app/(auth)/signup/page.tsx

@@ -2,8 +2,8 @@ import SignupForm from '@/app/(auth)/signup/SignupForm';
 
 export default function SignupPage() {
   return (
-    <div className="flex h-[calc(100vh-60px)] items-center justify-center">
-      <div className="flex flex-col">
+    <div className="tablet:py-[100px] h-[calc(100vh-60px)] px-4 py-20">
+      <div className="m-auto flex max-w-[460px] flex-col">
         <SignupForm />
       </div>
     </div>

src/app/(board)/layout.tsx

@@ -0,0 +1,17 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+
+export default async function BoardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (!accessToken) {
+    redirect(ROUTES.LOGIN);
+  }
+
+  return <>{children}</>;
+}

src/app/(team)/layout.tsx

@@ -0,0 +1,17 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+
+export default async function TeamLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (!accessToken) {
+    redirect(ROUTES.LOGIN);
+  }
+
+  return <>{children}</>;
+}

src/app/(user)/layout.tsx

@@ -0,0 +1,17 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+
+export default async function UserLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (!accessToken) {
+    redirect(ROUTES.LOGIN);
+  }
+
+  return <>{children}</>;
+}