feat(login): 로그인 화면에서 로그인 기능을 구현하고 정상 로그인 시 홈 페이지로 이동되도록 합니다.

apps/react-world/src/apis/login/LoginService.ts

@@ -0,0 +1,25 @@
+import { isAxiosError } from 'axios';
+import { api } from '../apiInstances';
+import type { LoginUserParams, LoginUserResponse } from './LoginService.types';
+
+class LoginService {
+  static async loginUser(
+    userData: LoginUserParams,
+  ): Promise<LoginUserResponse> {
+    try {
+      const response = await api.post('/users/login', {
+        user: userData,
+      });
+      return response.data;
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        console.error('Axios error occurred:', error.response.data);
+        throw error.response.data;
+      }
+      console.error('An unexpected error occurred:', error);
+      throw error;
+    }
+  }
+}
+
+export default LoginService;

apps/react-world/src/apis/login/LoginService.types.ts

@@ -0,0 +1,16 @@
+// LoginService.types.ts
+
+import type CurrentUser from '@/app-types/CurrentUser';
+
+export interface LoginUserParams {
+  email: string;
+  password: string;
+}
+
+export interface LoginUserErrors {
+  [key: string]: string[];
+}
+
+export interface LoginUserResponse {
+  user: CurrentUser & { jwtToken: string };
+}

apps/react-world/src/apis/register/RegisterService.types.ts

@@ -1,3 +1,5 @@
+import type CurrentUser from '@/app-types/CurrentUser';
+
 export interface RegisterUserParams {
   username: string;
   email: string;
@@ -8,14 +10,6 @@ export interface RegisterUserErrors {
   [key: string]: string[];
 }
 
-export interface RegisteredUserResponse {
-  email: string;
-  token: string;
-  username: string;
-  bio: string | null;
-  image: string | null;
-}
-
 export interface RegisterUserResponse {
-  user: RegisteredUserResponse;
+  user: CurrentUser;
 }

apps/react-world/src/components/home/ArticlePreview.tsx

@@ -1,5 +1,5 @@
-import type { ArticlePreviewData } from '../../apis/article/ArticlePreviewService.types';
-import { formatDate } from '../../utils/dateUtils';
+import type { ArticlePreviewData } from '@/apis/article/ArticlePreviewService.types';
+import { formatDate } from '@/utils/dateUtils';
 import {
   ArticlePreviewContainer,
   ArticlePreviewMeta,

apps/react-world/src/components/home/HomeFeedContents.tsx

@@ -6,11 +6,11 @@ import ArticlePreview from './ArticlePreview';
 import PopularArticleTagList from './PopularArticleTagList';
 import HomeFeedTab from './HomeFeedTab';
 import Pagination from './Pagination';
-import ArticleService from '../../apis/article/ArticleService';
-import useArticlePreviewQuery from '../../quries/useArticlePreviewQuery';
-import usePopularArticleTagsQuery from '../../quries/usePopularArticleTagsQuery';
-import { ARTICLE_PREVIEW_FETCH_LIMIT } from '../../apis/article/ArticlePreviewService';
-import { ARTICLE_DETAIL_CACHE_KEY } from '../../quries/useArticleDetailQuery';
+import ArticleService from '@/apis/article/ArticleService';
+import useArticlePreviewQuery from '@/quries/useArticlePreviewQuery';
+import usePopularArticleTagsQuery from '@/quries/usePopularArticleTagsQuery';
+import { ARTICLE_PREVIEW_FETCH_LIMIT } from '@/apis/article/ArticlePreviewService';
+import { ARTICLE_DETAIL_CACHE_KEY } from '@/quries/useArticleDetailQuery';
 
 type StandardFeedType = 'my' | 'global';
 type ArticleTagFeedType = string; // 아티클 태그는 어떤 문자열이든 가능

apps/react-world/src/components/login/LoginForm.styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const LoginErrorMessage = styled.p`
+  color: red;
+  margin-top: 5px;
+  margin-left: 5px;
+  font-size: 14px;
+`;
+
+export const StyledLoginButton = styled.button<{ disabled: boolean }>`
+  background-color: ${props => (props.disabled ? '#bbb' : '#5cb85c')};
+  border-color: ${props => (props.disabled ? '#bbb' : '#5cb85c')};
+  color: white;
+
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  padding: 10px 20px; // 기본 버튼 패딩
+`;

apps/react-world/src/components/login/LoginForm.tsx

@@ -1,5 +1,9 @@
-import styled from '@emotion/styled';
+import type { LoginUserErrors } from '@/apis/login/LoginService.types';
+import type { LoginStatus } from '@/hooks/useLogin';
 import { useForm } from 'react-hook-form';
+import { LoginErrorMessage, StyledLoginButton } from './LoginForm.styled';
+import { type ReactNode } from 'react';
+import type { UserCredentials } from '@/app-types/UserCredentials';
 
 /*
 - ^로 시작합니다.
@@ -12,24 +16,24 @@ import { useForm } from 'react-hook-form';
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
 
 interface LoginFormProps {
-  onLoginSubmit: (data: { email: string; password: string }) => void;
+  loginError: LoginUserErrors | null;
+  loginStatus: LoginStatus;
+  onLoginSubmit: (data: UserCredentials) => void;
 }
 
 const LoginForm = (props: LoginFormProps) => {
-  const { onLoginSubmit } = props;
+  const { loginError, loginStatus, onLoginSubmit } = props;
   const { register, handleSubmit, formState } = useForm<{
     email: string;
     password: string;
   }>();
   const { errors } = formState;
 
-  const onSubmit = (data: { email: string; password: string }) => {
-    console.log('onSubmit: ' + JSON.stringify(data, null, 2));
-    onLoginSubmit(data);
-  };
+  const shouldLoginButtonDisabled = loginStatus === 'loggingIn';
+  const buttonText = loginStatus === 'loggingIn' ? 'Signing in...' : 'Sign in';
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onLoginSubmit)}>
       <fieldset className="form-group">
         <input
           {...register('email', {
@@ -73,18 +77,37 @@ const LoginForm = (props: LoginFormProps) => {
           <LoginErrorMessage>{errors.password.message}</LoginErrorMessage>
         )}
       </fieldset>
-      <button type="submit" className="btn btn-lg btn-primary pull-xs-right">
-        Sign in
-      </button>
+      {loginError && (
+        <LoginErrorMessage>
+          {Object.entries(loginError)
+            .map(([key, value]) => `${key} ${value[0]}`)
+            .join('. ')}
+        </LoginErrorMessage>
+      )}
+      <LoginButton disabled={shouldLoginButtonDisabled}>
+        {buttonText}
+      </LoginButton>
     </form>
   );
 };
 
-const LoginErrorMessage = styled.p`
-  color: red;
-  margin-top: 5px;
-  margin-left: 5px;
-  font-size: 14px;
-`;
+interface LoginButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+}
+const LoginButton = (props: LoginButtonProps) => {
+  const { disabled = false, children, ...restProps } = props;
+
+  return (
+    <StyledLoginButton
+      type="submit"
+      className={`btn btn-lg pull-xs-right`}
+      disabled={disabled}
+      {...restProps}
+    >
+      {children}
+    </StyledLoginButton>
+  );
+};
 
 export default LoginForm;

apps/react-world/src/components/login/LoginPageContainer.tsx

@@ -1,18 +1,30 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import LoginForm from './LoginForm';
 import LoginHeader from './LoginHeader';
+import useLogin from '@/hooks/useLogin';
 
 const LoginPageContainer = () => {
-  const handleLogin = (data: { email: string; password: string }) => {
-    console.log('handleLogin: ' + JSON.stringify(data, null, 2));
-  };
+  const { loginError, loginStatus, handleLogin } = useLogin();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (loginStatus === 'success') {
+      navigate('/'); // 홈페이지로 리다이렉트
+    }
+  }, [loginStatus, navigate]);
 
   return (
     <div className="auth-page">
       <div className="container page">
         <div className="row">
           <div className="col-md-6 offset-md-3 col-xs-12">
             <LoginHeader />
-            <LoginForm onLoginSubmit={handleLogin} />
+            <LoginForm
+              loginError={loginError}
+              loginStatus={loginStatus}
+              onLoginSubmit={handleLogin}
+            />
           </div>
         </div>
       </div>

apps/react-world/src/components/shared/NavBar/NavBarBrand.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 export const NavbarBrand = () => {

apps/react-world/src/hooks/useLogin.ts

@@ -0,0 +1,75 @@
+import { useReducer } from 'react';
+import type { LoginUserErrors } from '@/apis/login/LoginService.types'; // 로그인 관련 타입으로 수정
+import LoginService from '@/apis/login/LoginService'; // LoginService로 수정
+import { saveTokenToCookie } from '@/utils/jwtUtils';
+import type { UserCredentials } from '@/app-types/UserCredentials';
+
+export type LoginStatus = 'idle' | 'loggingIn' | 'success' | 'failed';
+
+type LoginState = {
+  loginError: LoginUserErrors | null;
+  loginStatus: LoginStatus;
+};
+
+type LoginAction =
+  | { type: 'LOGIN_START' }
+  | { type: 'LOGIN_SUCCESS'; token: string }
+  | { type: 'LOGIN_ERROR'; error: LoginUserErrors }
+  | { type: 'LOGIN_FAILED' };
+
+const loginReducer = (state: LoginState, action: LoginAction): LoginState => {
+  switch (action.type) {
+    case 'LOGIN_START':
+      return { ...state, loginStatus: 'loggingIn', loginError: null };
+    case 'LOGIN_SUCCESS':
+      return { ...state, loginStatus: 'success', loginError: null };
+    case 'LOGIN_ERROR':
+      return { ...state, loginStatus: 'failed', loginError: action.error };
+    case 'LOGIN_FAILED':
+      return { ...state, loginStatus: 'failed' };
+    default:
+      return state;
+  }
+};
+
+const useLogin = () => {
+  const [state, dispatch] = useReducer(loginReducer, {
+    loginError: null,
+    loginStatus: 'idle',
+  });
+
+  const handleLogin = async (data: UserCredentials) => {
+    dispatch({ type: 'LOGIN_START' });
+
+    try {
+      const response = await LoginService.loginUser(data);
+      // JWT 토큰을 쿠키에 저장
+      if (response && response.user && response.user.token) {
+        saveTokenToCookie(response.user.token);
+        dispatch({ type: 'LOGIN_SUCCESS', token: response.user.token });
+        console.log('login suceess');
+      }
+      return response;
+    } catch (error) {
+      if (error && typeof error === 'object' && 'errors' in error) {
+        dispatch({
+          type: 'LOGIN_ERROR',
+          error: error.errors as LoginUserErrors,
+        });
+        console.error('LoginUserErrors: ', error.errors);
+      } else {
+        dispatch({ type: 'LOGIN_FAILED' });
+        console.error('An unexpected error occurred:', error);
+      }
+      return null;
+    }
+  };
+
+  return {
+    loginError: state.loginError,
+    loginStatus: state.loginStatus,
+    handleLogin,
+  };
+};
+
+export default useLogin;

apps/react-world/src/hooks/useRegister.ts

@@ -3,8 +3,8 @@ import type {
   RegisterUserErrors,
   RegisterUserParams,
   RegisterUserResponse,
-} from '../apis/register/RegisterService.types';
-import RegisterService from '../apis/register/RegisterService';
+} from '@/apis/register/RegisterService.types';
+import RegisterService from '@/apis/register/RegisterService';
 import { saveTokenToCookie } from '@/utils/jwtUtils';
 
 const useRegister = () => {

apps/react-world/src/pages/article.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import ArticlePageContainer from '../components/article/ArticlePageContainer';
+import ArticlePageContainer from '@/components/article/ArticlePageContainer';
 
 export const ArticlePage = () => {
   const { articleSlug } = useParams<{ articleSlug: string }>() as {

apps/react-world/src/pages/login.tsx

@@ -1,4 +1,4 @@
-import LoginPageContainer from '@components/login/LoginPageContainer';
+import LoginPageContainer from '@/components/login/LoginPageContainer';
 
 export const LoginPage = () => {
   return <LoginPageContainer></LoginPageContainer>;

apps/react-world/src/pages/register.tsx

@@ -1,4 +1,4 @@
-import useRegister from '../hooks/useRegister';
+import useRegister from '@/hooks/useRegister';
 
 export const RegisterPage = () => {
   const { userData, error, isLoading, handleInputChange, handleSubmit } =

apps/react-world/src/quries/useArticleDetailQuery.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import ArticleService from '../apis/article/ArticleService';
-import type { ArticleDetailResponse } from '../apis/article/ArticleService.types';
+import ArticleService from '@/apis/article/ArticleService';
+import type { ArticleDetailResponse } from '@/apis/article/ArticleService.types';
 
 export const ARTICLE_DETAIL_CACHE_KEY = '@article/detail';
 

apps/react-world/src/quries/useArticlePreviewQuery.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import ArticlePreviewService from '../apis/article/ArticlePreviewService';
+import ArticlePreviewService from '@/apis/article/ArticlePreviewService';
 
 export const ARTICLE_PREVIEW_CACHE_KEY = '@article/preview';
 

apps/react-world/src/quries/usePopularArticleTagsQuery.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import PopularArticleTagService from '../apis/article/PopularArticleTagService';
+import PopularArticleTagService from '@/apis/article/PopularArticleTagService';
 
 export const POPULAR_ARTICLE_TAG_CACHE_KEY = '@article/popular_tags';
 

apps/react-world/src/types/CurrentUser.ts

@@ -0,0 +1,9 @@
+interface CurrentUser {
+  email: string;
+  token: string;
+  username: string;
+  bio: string | null;
+  image: string | null;
+}
+
+export default CurrentUser;

apps/react-world/src/types/UserCredentials.ts

@@ -0,0 +1,4 @@
+export type UserCredentials = {
+  email: string;
+  password: string;
+};