(34) 리덕스 툴킷 3

(2) 로그아웃 페이지와 로그아웃

* 애플리케이션 상태에 email 값이 존재하면 로그인한 상황이라고 가정하고, 로그인 상황에서는 로그아웃 페이지로 이동할 수 있는 링크와 컴포넌트가 필요하다.

* pages/member/LogoutPage.js를 작성하고 components/member/LogoutComponent.js를 작성한다.

* LogoutComponent는 화면 상에 LOGOUT 버튼을 만들고 클릭하면 loginSlice의 로그아웃을 호출한다.

import React from "react";
import { useDispatch } from "react-redux";
import { logout } from "../../slices/loginSlice";

const LogoutComponent = () => {
  const dispatch = useDispatch();

  const handleClickLogout = () => {
    dispatch(logout());
  };

  return (
    <div className="border-2 border-red-200 mt-10 m-2 p-4">
      <div className="flex justify-center">
        <div className="text-4xl m-4 p-4 font-extrabold text-red-500">
          Logout Component
        </div>
      </div>
      <div className="flex justify-center">
        <div className="relative mb-4 flex w-full justify-center">
          <div className="w-2/5 p-6 flex justify-center font-bold">
            <button
              className="rounded p-4 w-36 bg-red-500 text-xl  text-white"
              onClick={handleClickLogout}
            >
              LOGOUT
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LogoutComponent;

* LogoutPage는 LogoutComponent를 import 해서 구성한다.

import React from "react";
import LogoutComponent from "../../components/member/LogoutComponent";
import BasicMenu from "../../components/menus/BasicMenu";

const LogoutPage = () => {
  return (
    <div className="fixed top-0 left-0 z-[1055] flex flex-col h-full w-full">
      <BasicMenu />
      <div className="w-full flex flex-wrap  h-full justify-center  items-center border-2">
        <LogoutComponent></LogoutComponent>
      </div>
    </div>
  );
};

export default LogoutPage;

* LogputPage를 라우팅에 추가하기 위해서 memberRouter.js를 수정한다.

import React, { Suspense, lazy } from "react";

const Loading = <div>Loading....</div>;
const Login = lazy(() => import("../pages/member/LoginPage"));
const Logout = lazy(() => import("../pages/member/LogoutPage"));

const memberRouter = () => {
  return [
    {
      path: "login",
      element: (
        <Suspense fallback={Loading}>
          <Login />
        </Suspense>
      ),
    },
    {
      path: "logout",
      element: (
        <Suspense fallback={Loading}>
          <Logout />
        </Suspense>
      ),
    },
  ];
};

export default memberRouter;

* 브라우저에서 /member/logout 경로를 호출하면 LogoutPage와 LogoutComponent가 나오는 것을 확인할 수 있다(나중에 <Link> 처리가 필요하다).

---

[로그아웃 상태 변경]

* 로그인과 마찬가지로 로그아웃은 loginSlice에서 email 값이 없거나 빈 문자열이 되도록 구성한다.

import { createSlice } from "@reduxjs/toolkit";

const initState = {
  email: "",
};

const loginSlice = createSlice({
  name: "LoginSlice",
  initialState: initState,
  reducers: {
    login: (state, action) => {
      console.log("login.....");

      // {email, pw} 로 구성
      const data = action.payload;

      // 새로운 상태
      return { email: data.email };
    },
    logout: (state, action) => {
      console.log("logout....");

      // 값을 초기화
      return { ...initState };
    },
  },
});

export const { login, logout } = loginSlice.actions;

export default loginSlice.reducer;

* components 폴더의 BasicMenu 에서는 화면 상단의 메뉴에서 로그인된 상황에서는 로그아웃을 할 수 있도록 링크를 추가한다.

      <div className="w-1/5 flex justify-end bg-orange-300 p-4 font-medium">
        {!loginState.email ? (
          <div className="text-white text-sm m-1 rounded">
            <Link to={"/member/login"}>Login</Link>
          </div>
        ) : (
          <div className="text-white text-sm m-1 rounded">
            <Link to={"/member/logout"}>Logout</Link>
          </div>
        )}
      </div>

* 브라우저에서 로그인을 하면 상단에 Products와 Todo 메뉴가 활성화되고, Logout 링크가 보이게 된다.

* 반대로 /member/logout 에서 LOGOUT 버튼을 클릭하면 다시 상단의 Todo, Products 메뉴가 사라지고 오른쪽 상단의 링크 역시 Login으로 변경되는 것을 확인할 수 있다.

---