✨Feat: 로그인 페이지 구현

src/app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <div className="flex w-520 flex-col items-center justify-center gap-24 px-12 sm:px-0">
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -1,11 +1,26 @@
 'use client'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
+import AuthLogo from '@/app/features/auth/components/AuthLogo'
 import LoginForm from '@/app/features/auth/components/LoginForm'
 
 export default function Login() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) {
+    return null
+  }
   return (
     <>
+      <AuthLogo text="오늘도 만나서 반가워요!" />
       <LoginForm />
+      <p className="text-16 font-normal">
+        회원이 아니신가요?{' '}
+        <Link className="Text-violet underline" href="/signup">
+          회원가입하기
+        </Link>
+      </p>
     </>
   )
 }

src/app/features/auth/api/authApi.ts

@@ -1,8 +1,9 @@
 import api from '@/app/shared/lib/axios'
-import { AUTH_ENDPOINT } from './authEndpoint'
-import { LoginRequest, SignupRequest, LoginResponse } from '../types/auth.type'
 import { User as SignupResponse } from '@/app/shared/types/user.type'
 
+import { LoginRequest, LoginResponse, SignupRequest } from '../types/auth.type'
+import { AUTH_ENDPOINT } from './authEndpoint'
+
 export const login = async (data: LoginRequest): Promise<LoginResponse> => {
   const response = await api.post<LoginResponse>(AUTH_ENDPOINT.LOGIN, data)
   return response.data

src/app/features/auth/components/LoginForm.tsx

@@ -4,15 +4,15 @@ import Input from '@components/Input'
 import { cn } from '@lib/cn'
 import { useForm } from 'react-hook-form'
 
-import { useLoginSubmit } from '../hooks/useLoginSubmit'
+import { useLoginMutation } from '../hooks/useLoginMutation'
 import { loginValidation } from '../schemas/loginValidation'
 import { LoginRequest } from '../types/auth.type'
 
 export default function LoginForm() {
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting, isValid },
+    formState: { errors, isValid },
   } = useForm<LoginRequest>({
     mode: 'onChange',
     defaultValues: {
@@ -21,19 +21,20 @@ export default function LoginForm() {
     },
   })
 
-  const { submit } = useLoginSubmit()
-  const showEmailError = !!errors.email
-  const showPasswordError = !!errors.password
+  const { mutate: loginMutate, isPending } = useLoginMutation()
 
   return (
-    <form className="flex flex-col gap-16" onSubmit={handleSubmit(submit)}>
+    <form
+      className="flex w-full flex-col gap-16"
+      onSubmit={handleSubmit(async (data) => await loginMutate(data))}
+    >
       <Input
         labelName="이메일"
         type="email"
         placeholder="이메일 입력"
         autoComplete="email"
         {...register('email', loginValidation.email)}
-        hasError={showEmailError}
+        hasError={!!errors.email}
         errorMessage={errors.email?.message}
       />
       <Input
@@ -42,18 +43,18 @@ export default function LoginForm() {
         placeholder="비밀번호 입력"
         autoComplete="off"
         {...register('password', loginValidation.password)}
-        hasError={showPasswordError}
+        hasError={!!errors.password}
         errorMessage={errors.password?.message}
       />
       <button
         type="submit"
         className={cn(
           'mt-8 h-50 w-full rounded-8 text-lg font-medium text-white',
-          isValid && !isSubmitting ? 'BG-blue' : 'BG-blue-disabled',
+          isValid && !isPending ? 'BG-blue' : 'BG-blue-disabled',
         )}
-        disabled={!isValid || isSubmitting}
+        disabled={!isValid || isPending}
       >
-        로그인
+        {isPending ? '로그인 중..' : '로그인'}
       </button>
     </form>
   )

src/app/features/auth/hooks/useAuth.ts

@@ -1,12 +1,13 @@
-import { login as loginApi, signup as signupApi } from '../api/authApi'
+import { User } from '@/app/shared/types/user.type'
+
+import { signup as signupApi } from '../api/authApi'
 import { useAuthStore } from '../store/useAuthStore'
-import { LoginRequest, SignupRequest } from '../types/auth.type'
+import { SignupRequest } from '../types/auth.type'
 
 export function useAuth() {
   const { setAccessToken, setUser, clearAuthState } = useAuthStore()
 
-  async function login(data: LoginRequest) {
-    const response = await loginApi(data)
+  function updateAuthState(response: { accessToken: string; user: User }) {
     const { accessToken, user } = response
 
     if (!accessToken || !user) {
@@ -27,7 +28,7 @@ export function useAuth() {
   }
 
   return {
-    login,
+    updateAuthState,
     signup,
     logout,
   }

src/app/features/auth/hooks/useLoginMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query'
+import axios from 'axios'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+
+import { login } from '../api/authApi'
+import { LoginRequest, LoginResponse } from '../types/auth.type'
+import { useAuth } from './useAuth'
+
+export function useLoginMutation() {
+  const router = useRouter()
+  const { updateAuthState } = useAuth()
+
+  return useMutation<LoginResponse, unknown, LoginRequest>({
+    mutationFn: login,
+    onSuccess: async (response) => {
+      updateAuthState(response)
+      toast.success('로그인 성공')
+      await new Promise((resolve) => setTimeout(resolve, 400))
+      router.push('/mydashboard')
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message
+        toast.error(message ?? '로그인 실패')
+      } else {
+        toast.error('알 수 없는 에러 발생')
+      }
+    },
+  })
+}

src/app/globals.css

@@ -67,7 +67,9 @@ body {
 .BG-ThemeToggleButton {
   @apply bg-[#FFFFFF] dark:bg-[#D3D3D3];
 }
-
+.Text-violet {
+  @apply text-[#228DFF];
+}
 .BG-drag-hovered {
   @apply bg-blue-100;
 }